Input
Text inputs are fields that users can type free text into. They are used in forms, status updates, search fields, and more. They are a fundamental component used across applications as a key user interaction point.
Examples
Default
Default Input.
Labeled Input
Add a label by passing the label prop to the component.
Add a helper by passing the helper prop to the component.
Mark as required by passing the required prop to the component.
Icon Input
Add an icon to the left or right by passing the iconLeading or iconTrailing prop to the component, respectively.
Hint Input
Add a hint by passing the hint prop to the component.
Add an icon to the hint by passing the showHintIcon prop to the component.
Preferrably before next year
Preferrably before next year
Errored Input
Display in error state by passing the error prop to the component.
Combine with the hint and showHint props to show an error message.
select date in the future
Installation
Properties
In addition to default HTML properties, the Input component has the following properties:
Label displayed above the Input.
Additional helper text displayed to the right of the label. Only shown when label is set.
Hint text, displayed below the Input.
Toggle whether to display info icon next to the hint. Only shown when hint is set.
Toggle whether there is an error in the Input. Note, that this only adds a visual indicator. This also affects the
styling of the label and hint.
Classname to style the container of the Input.