(optional) The placeholder which shows up once the input value is empty.
icon
string 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_position
string
(optional) Defines the position of icon inside the input. Set to left or right. Defaults to left if not set.
icon_size
string
(optional) The icon size of the icon shows. Defaults to medium.
keep_placeholder
boolean
(optional) Set to true in case the placeholder has to be kept during focus. By default, the placeholder disappears on focus.
input_class
string
(optional) In case we have to set a custom input class.
type
string
(optional) Choose between text, number, email, password, url, tel and search.
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.
submit_button_title
string
(optional) Title attribute for the search icon. Only relevant if search input.
suffix
string 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.
size
string 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.
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.
clear
boolean
(optional) If set to true, then a clear button will be shown which lets the user clear any given input value.
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.
input_attributes
object
(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
string
(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
string React.Element
(optional) Accepts a React element which will show up like the "submit button" would do on type="search".
inner_ref
React.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
string 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_element
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.