TextInput

A single-line text field.
  • Experimental
  • Review pending by accessibility team
import {TextInput} from '@primer/react-brand'

Examples

Default

Variants

Placeholder

Use with FormControl

Use TextInput alongside FormControl to ensure the control always has a corresponding form label.

See FormControl for additional usage examples.

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

NameTypeDefaultDescription
children'TextInput.Option'
'TextInput.OptGroup'
,
Valid child nodes
classNamestringSets a custom class
idstringSets a custom id
fullWidthbooleanStretches elements visually to the edges of its parent container.
refReact.RefObjectForward 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'
textAlternative 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.