Input

The input is a standard text field that allows a user to write or edit text.

It should be used within the Form Control component to provide an accessible label and error states.

If the expected input could be more than one line, use the Textarea component.

Import

import { Input } from '@outfitio/outkit';

Usage

Input sizes

Use the size prop to change the size of the button. You can set the value to sm (32px), md (default, 40px), or lg (48px).

Input icons

You can add icons to the left and right of the input component to provide additional context by wrapping the input in an InputGroup alongside InputLeftElement and/or InputRightElement.

Input buttons

InputLeftElement and InputRightElement can also be used to render a button inside an input.

Input addons

You can add addons to the left and right of the input component to provide additional context by wrapping the input in an InputGroup alongside InputLeftAddon and/or InputRightAddon.

Disabled Input

Read Only Textarea

Invalid Textarea

Accessibility

• Screen readers convey information about input automatically through native HTML.
• Use the isDisabled prop to add the HTML disabled attribute to the input.
• Use the isReadOnly prop to add the HTML readonly attribute to the input.

Best Practice

Inputs should:

• Be used within the Form Control component to provide an accessible label and error states.
• Be clearly labeled so that it is obvious to users what they should enter into the field
• Be labeled as 'Optional' if the input is not required

Props

The Input component composes PseudoBox so you can pass all PseudoBox props, and React.InputHTMLAttributes.