Input

The Input component handles user text input, with a number of styled feedback options on top.

Demo

Placeholder

Placeholder sets the default text visible in your field while it is empty and unfocused.

Adornments

Adornments let you easily position elements at the start and/or end of your input. This is useful for icons, buttons, or both.

Nitpick will auto-separate your content with vertical dividers.

Error feedback

Nitpick has an opinion way of displaying errors. It will highlight the field and even point it out to the user, you can never be too clear!

For animation purposes, both the errorLabel
and showError
props are required to activate the bottom error label.

Required fields

You can mark a field as required
to automatically place the asterisk next to its label
.

Focus key

Use the focusKey
prop to setup a hotkey that will focus your field when pressed. This shortcut is bound globally to the document and automatically cleaned up when unmounted.

You can pair it with the endAdornment
to display a hint to the user.

Max length

Set a max length for your inputs to restrict users from going over a certain string size. When the user approaches the limit the current progress and maximum allowed amount will be displayed beneath the input.

Customisation

The text input and its makeup components can be customised, use:

• rootClassName
  to pass classnames to the root element containing the label, start adornment, input, end adornment, and error label.
• inputClassName
  to pass classnames to the input element.
• containerClassName
  to pass classnames to the container element that holds the input and adornments.