Input

Basic Input

<Input label="Label" />

Description and placeholder

Use the optional description for hints or additional information about what to fill out, and placeholder prop for an example text.

<Input description="Description" placeholder="Placeholder" />

Value state

Control the input text by using value and onChange props just like you would on a native <input type='text'>.

Also see the official react input docs

<Input value={valueState} onChange={(e) => setValueState(e.target.value)} />

Icon

Icons can be placed inside the input by using the icon prop.

<Input icon={faHome} />

Small

Use the small prop to decrease the input height from 40px to 32px to match the height of <Button small>.

<Input small />

Search

Icon can be positioned to the right by using the prop rightIcon, use this when the icon is clickable.

Adding iconButton to the component will style the icon as a button. Provide onIconClick, for a click handler on the icon.

If you want to display a button that will clear the value from the component, add clearable.

Also see loading spinner section.

<Input
  placeholder="Search button"
  label="Search"
  rightIcon
  iconButton
  icon={faSearch}
  onIconClick={() => /* handle icon button click */}
  clearable
/>

Search without button

If your project requires a search field with instant results, you can use either the default input or input with border, without the button and combine with a left-aligned search icon. Add a placeholder text to indicate what the user is supposed to search for.

Validation and feedback

Input fields can have different states. Use feedback to provide additional information.

Use 'warning' when user value is missing or invalid. If user ignores 'warning' and tries to submit form, use 'alert'. 'success' is used in live validation. Example: to verify that the preferred username is available.

<Input state='success' />
<Input state='warning' feedback='Missing value' />
<Input state='alert' feedback='Invalid value' />

Required or optional

Inputs can be made required or optional, with or without label:

• Default: optional, without label
• required prop: required, labelled
• optional prop: optional, labelled
• requiredNoLabel prop: required, without label

<Input required />
<Input optional />
<Input requiredNoLabel />

Mark as few inputs in a form as possible. If there are mostly required inputs, only label the optional ones, and vice versa.

Also see Form design examples

Read only

A readOnly input field is not editable, and gets a "lock" icon next to its label. It is useful for displaying information that can be copied, that should not be changed by the user, but still needs to be visible.

<Input readOnly />

Disabled

A disabled input field cannot be edited, and gets a "lock" icon next to its label. Be aware that a disabled input field will not be submitted with the form, nor be read by a screen reader.

<Input disabled />

Loading spinner

The loading prop displays a loading spinner on the right hand side of the input.

<Input loading />

For inputs that have an icon, the icon will be replaced by the spinner.

Loading state does not make the input disabled, nor does it deactivate onIconClick.

Hide label

Providing a label prop to <Input /> is required, but you can hide it with hideLabel prop. The value of label will then be passed as aria-label to preserve accessibility.

<Input label="Favorite pet" hideLabel />

Autocomplete

We have disabled browser-native autoComplete by default, but can be re-enabled with autoComplete='on'.

<Input label="Name" autoComplete="on" />