Some properties provide flexibility for specific integrations. Follow the component's usage guidance. Customizations beyond the documented patterns need a use case approved by DNB UX. Read about intended use and customization.
Properties#
| Type | Description | |
|---|---|---|
value | string number | (optional) The content value of the input. |
align | "left" "center" "right" | (optional) Defines the text alignment of the input. Can be left, right or center. Defaults to left. |
label | React.ReactNode | (optional) Prepends the Form Label component. If no ID is provided, a random ID is created. |
labelSrOnly | boolean | (optional) Use true to make the label only readable by screen readers. |
labelDirection | string | (optional) Use labelDirection="horizontal" to change the label layout direction. Defaults to vertical. |
status | "error" "information" boolean | (optional) Text with a status message. The style defaults to an error message. You can use true to only get the status color, without a message. |
statusState | "error" "warning" "information" "success" "marketing" | (optional) Defines the state of the status. Can be error, warning, information, success or marketing. Defaults to error. |
statusProps | object | (optional) Use an object to define additional FormStatus properties. |
globalStatus | object | (optional) The configuration used for the target GlobalStatus. |
placeholder | React.ReactNode | (optional) The placeholder which shows up once the input value is empty. |
icon | string React.ReactNode | (optional) Icon to show before or after the input / placeholder. Can be either a string defining a primary icon or a Component using an SVG icon of either 16px or 24px. |
iconPosition | string | (optional) Defines the position of icon inside the input. Set to left or right. Defaults to left if not set. |
iconSize | string | (optional) The size of the icon. Defaults to medium. |
keepPlaceholder | boolean | (optional) Set to true in case the placeholder has to be kept during focus. By default, the placeholder disappears on focus. |
inputClassName | string | (optional) In case we have to set a custom class on the input element. |
type | string | (optional) Choose between text, number, email, password, url, tel and search. search shows a loupe icon by default when no submit button is shown. |
autocomplete | string | (optional) Defaults to off. Set to on or any of allowed attributes. Keep in mind, 1. you may have to define a name, 2. have the input as a descendant of a <form> element, 3. and have a submit button inside the form. |
submitButtonTitle | string | (optional) Title attribute for the submit button. Only relevant when showSubmitButton is used. |
suffix | string React.ReactNode | (optional) Content displayed after the input, such as contextual help, a unit or currency. It is not label metadata such as optional or required status. You can also provide a React component. |
size | string number | (optional) The sizes you can choose are small (1.5rem), default (2rem), medium (2.5rem) and large (3rem). Defaults to default / null. Also, if you define a number like size={2} then it will be forwarded as the input element attribute. |
selectAll | boolean | (optional) If set to true, then the whole input value gets selected on the entry focus. A second click will place the cursor on the wanted position. |
showClearButton | boolean | (optional) If set to true, then a clear button will be shown which lets the user clear any given input value. |
showSubmitButton | boolean | (optional) If set to true, then a submit button will be shown when type="search". |
stretch | boolean | (optional) If set to true, then the input field will be 100% in width. |
skeleton | boolean | (optional) If set to true, an overlaying skeleton with animation will be shown. |
inputAttributes | object | (optional) Provide the Input element with any attributes by using an Object inputAttributes={{size:'2'}} or a JSON Object inputAttributes='{"size":"2"}'. NB: Keep in mind, that also every not listed component property will be sent along and set as an Input element attribute. |
inputState | string | (optional) Defines a custom visual state of the input. Use it only if you have to simulate a custom state. There are currently three statuses virgin, focus and dirty. Defaults to null. |
submitElement | string React.Element | (optional) Accepts a React element which will show up where the "submit button" would do. |
ref | React.RefObject | (optional) By providing a React.Ref we can get the internally used input element (DOM), e.g. ref={myRef} by using React.useRef(null). |
inputElement | string React.Element | (internal) By providing a new component we can change the internally used element. Also supports a string only, like inputElement="input". |
innerElement | string React.Element | (internal) By providing a new component to be rendered inside the "shell" – we can add a freely customizable internal element. Used by the Autocomplete component. |
Space | string object | (optional) Spacing properties like top or bottom are supported. |
Translations#
More info about translations can be found in the general localization and Eufemia Forms localization docs.
| Key | nb-NO | en-GB | sv-SE | da-DK |
|---|---|---|---|---|
Input.submitButtonTitle | Søk | Search | Sök | Søg |
Input.clearButtonTitle | Nullstill | Clear value | Återställ | Nulstil |