Input
An Input lets users enter text into a field.
- To let the user enter data into a field
- To enter multiline text, use a Textarea
How to use it
Default
An Input comes with a label indicating what goes into the field.
Bare
Remove borders and padding using the isBare prop.
Disabled
A disabled Input prevents user interaction. It doesn’t appear in the tab order, can’t receive focus, and may not read aloud by a screenreader.
Faux input
Provide input styling without native input backing.
Focus inset
Set focus styling inside the element using the focusInset prop. (Useful when an Input is flush
with another component.)
Hidden label
Input labels can be hidden.
Hint text
To provide additional context, use hint text with the label.
Media input
Media elements add even more context to an input.
Placeholder
Placeholder text provides the user with example content or additional context. Use an icon to provide a visual affordance when the label is hidden (for example, search).
Read-only
A read-only Input prevents user modification but allows selection.
Size
An Input can be default or compact.
Validation
Show success, warning, and danger validation messages with the Message component.
Configuration
- Name9.0.0-next.26•View source•View on npm
- Installnpm install @zendeskgarden/react-forms
- Depsnpm install react react-dom styled-components @zendeskgarden/react-theming
- Importimport { Input, MediaInput, Field, FauxInput } from '@zendeskgarden/react-forms'
API
The Input component follows this structure:
<Field><Field.Label /><Field.Hint /><Input /><Field.Message /></Field>
FauxInput
Extends HTMLAttributes<HTMLDivElement>
Nest a FauxInput within a Field component.
| Prop name | Type | Default | Description |
|---|---|---|---|
disabled | boolean | Indicates that the element is not interactive | |
focusInset | boolean | Applies inset box-shadow styling on focus | |
isBare | boolean | Removes borders and padding | |
isCompact | boolean | Applies compact styling | |
isFocused | boolean | Applies focus stying | |
isHovered | boolean | Applies hover stying | |
readOnly | boolean | Applies read-only styling | |
validation | 'success' | 'warning' | 'error' | Applies validation state styling |
Field
A Field provides accessibility attributes to its child Input field by associating it with the corresponding Field.Label and Field.Hint.
Field.Hint
Extends HTMLAttributes<HTMLDivElement>
Nest the Hint within a Field component.
Field.Label
Extends LabelHTMLAttributes<HTMLLabelElement>
Nest the Label within a Field component.
| Prop name | Type | Default | Description |
|---|---|---|---|
hidden | boolean | Hides the label visually without hiding it from screen readers | |
isRegular | boolean | Applies regular (non-bold) font weight |
Field.Message
Extends HTMLAttributes<HTMLDivElement>
The Message component applies appropriate icon and styles based on the validation provided. Nest it within a Field component.
| Prop name | Type | Default | Description |
|---|---|---|---|
validation | 'success' | 'warning' | 'error' | Applies validation state styling | |
validationLabel | string | Defines the aria-label for the validation icon |
Input
Extends InputHTMLAttributes<HTMLInputElement>
Nest an Input within a Field component.
| Prop name | Type | Default | Description |
|---|---|---|---|
focusInset | boolean | Applies inset box-shadow styling on focus | |
isBare | boolean | Removes borders and padding | |
isCompact | boolean | Applies compact styling | |
validation | 'success' | 'warning' | 'error' | Applies validation state styling |
MediaInput
Extends InputHTMLAttributes<HTMLInputElement>
A MediaInput displays provided media elements at the start and/or end of the input. Nest it within a Field component.
| Prop name | Type | Default | Description |
|---|---|---|---|
end | ReactElement<any, string | JSXElementConstructor<any>> | Accepts an "end" icon to display | |
focusInset | boolean | Applies inset box-shadow styling on focus | |
isBare | boolean | Removes borders and padding | |
isCompact | boolean | Applies compact styling | |
start | ReactElement<any, string | JSXElementConstructor<any>> | Accepts a "start" icon to display | |
validation | 'success' | 'warning' | 'error' | Applies validation state styling | |
wrapperProps | any | {} | Applies props to the wrapping FauxInput element |
wrapperRef | any | Applies a ref to the wrapping FauxInput element |