Skip to content

Properties

PropertyTypeDescription
valuestring(optional) The content value of the input.
alignstring(optional) Defines the text alignment of the input. Can be left, right or center. Defaults to left.
labelReact.Node(optional) Prepends the Form Label component. If no ID is provided, a random ID is created.
label_sr_onlyboolean(optional) Use true to make the label only readable by screen readers.
label_directionstring(optional) Use label_direction="vertical" to change the label layout direction. Defaults to horizontal.
statusstring(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.
status_statestring(optional) Defines the state of the status. Currently, there are two statuses [error, info]. Defaults to error.
status_propsobject(optional) Use an object to define additional FormStatus properties.
globalStatusobject(optional) The configuration used for the target GlobalStatus.
placeholderstring(optional) The placeholder which shows up once the input value is empty.
iconstring
React.Node
(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.
icon_positionstring(optional) Defines the position of icon inside the input. Set to left or right. Defaults to left if not set.
icon_sizestring(optional) The icon size of the icon shows. Defaults to medium.
keep_placeholderboolean(optional) Set to true in case the placeholder has to be kept during focus. By default, the placeholder disappears on focus.
input_classstring(optional) In case we have to set a custom input class.
typestring(optional) Choose between text, number, email, password, url, tel and search.
autocompletestring(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.
submit_button_titlestring(optional) Title attribute for the search icon. Only relevant if search input.
suffixstring
React.Node
(optional) Text describing the content of the input more than the label. you can also send in a React component, so it gets wrapped inside the Input component.
sizestring
number
(optional) The sizes you can choose is default (2rem), medium (2.5rem) and large (3rem) are supported component sizes. Defaults to default / null. Also, if you define a number like size={2} then it will be forwarded as the input element attribute.
selectallboolean(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.
clearboolean(optional) If set to true, then a clear button will be shown which lets the user clear any given input value.
stretchboolean(optional) If set to true, then the input field will be 100% in width.
skeletonboolean(optional) If set to true, an overlaying skeleton with animation will be shown.
input_attributesobject(optional) Provide the Input element with any attributes by using an Object input_attributes={{size:'2'}} or a JSON Object input_attributes='{"size":"2"}'. NB: Keep in mind, that also every not listed component property will be sent along and set as an Input element attribute.
input_statestring(optional) Defines a custom visual state of the input. Use it only if you have to simulate a custom state. Currently are three statuses virgin , focus and dirty. Defaults to null.
submit_elementstring
React.Element
(optional) Accepts a React element which will show up like the "submit button" would do on type="search".
inner_refReact.Ref(optional) By providing a React.ref we can get the internally used input element (DOM). E.g. inner_ref={myRef} by using React.createRef() or React.useRef().
input_elementstring
React.Element
(internal) By providing a new component we can change the internally used element. Also supports a string only, like input_element="input".
inner_elementstring
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.
Spacestring
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.

Keynb-NOen-GB
Input.submit_button_titleSend knappSubmit button
Input.clear_button_titleNullstillClear value