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. |