import {TextInput} from '@primer/react-brand'
Examples
Default
Variants
Use with FormControl
Use TextInput
alongside FormControl
to ensure the control always has a corresponding form label.
See FormControl for additional usage examples.
Placeholder
Autocomplete
The autoComplete
prop should be provided wherever possible to allow browsers to autofill the input field. See MDN for a complete list of autocomplete values.
Validation
Full width
Sizes
FormControl
can appear in medium
(default) and large
dimensions using the size
prop.
Required
Pass the required
prop to ensure that the input field must be filled out before submitting the form.
Using refs
TextInput
inputs can be used in uncontrolled mode by forwarding a ref
to the underlying element.
Component props
TextInput
provides a React alternative to the native HTML <input>
in single-line mode.
The component API supports all standard HTML attribute props, while providing some additional behaviour as described below.
TextInput Required
Name | Type | Default | Description |
---|---|---|---|
children | 'TextInput.Option' 'TextInput.OptGroup' , | Valid child nodes | |
className | string | Sets a custom class | |
id | string | Sets a custom id | |
fullWidth | boolean | Stretches elements visually to the edges of its parent div. | |
ref | React.RefObject | Forward a Ref to the underlying DOM node | |
size | 'medium' 'large' | Visual dimensions for the input | |
type | 'text' 'number' 'email' 'password' 'search' 'tel' 'url' 'date' 'time' 'datetime-local' | text | Alternative text inputs |
validationStatus | 'error' 'success' | Applies visual and semantic state to the underlying elements |
Additional props can be passed to the <input>
element. See MDN for a list of props accepted by the <input>
element.