Skip to content

Properties

PropertiesDescription
value(optional) the content value of the input.
align(optional) defines the text alignment of the input. Can be left, right or center. Defaults to left.
label(optional) prepends the Form Label component. If no ID is provided, a random ID is created.
label_direction(optional) use label_direction="vertical" to change the label layout direction. Defaults to horizontal.
label_sr_only(optional) use true to make the label only readable by screen readers.
status(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_state(optional) defines the state of the status. Currently, there are two statuses [error, info]. Defaults to error.
status_props(optional) use an object to define additional FormStatus properties.
global_status_id(optional) the status_id used for the target GlobalStatus.
placeholder(optional) the placeholder which shows up once the input value is empty
icon(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_position(optional) defines the position of icon inside the input. Set to left or right. Defaults to left if not set.
icon_size(optional) the icon size of the icon shows. Defaults to medium.
keep_placeholder(optional) set to true in case the placeholder has to be kept during focus. By default, the placeholder disappears on focus.
input_class(optional) in case we have to set a custom input class.
type(optional) choose between text, number, email, password, url, tel and search.
autocomplete(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_title(optional) title attribute for the search icon. Only relevant if search input.
suffix(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.
size(optional) the sizes you can choose is small (1.5rem), 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.
selectall(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.
clear(optional) if set to true, then a clear button will be shown which lets the user clear any given input value.
stretch(optional) if set to true, then the input field will be 100% in width.
skeleton(optional) if set to true, an overlaying skeleton with animation will be shown.
input_attributes(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_state(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_element(optional) accepts a React element which will show up like the "submit button" would do on type="search".
inner_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_element(internal) by providing a new component we can change the internally used element. Also supports a string only, like input_element="input".
inner_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(optional) spacing properties like top or bottom are supported.