(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.
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 icon size of the icon shows. 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.
inputClass
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.
submitButtonTitle
string
(optional) Title attribute for the search/submit button. Only relevant when type="search".
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.
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. Currently are three statuses virgin , focus and dirty. Defaults to null.
submitElement
string React.Element
(optional) Accepts a React element which will show up like the "submit button" would do on type="search".
innerRef
React.RefObject
(optional) By providing a React.ref we can get the internally used input element (DOM). E.g. innerRef={myRef} by using React.createRef() or React.useRef().
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.