Skip to main content

Text input

Use the text input component for single-line text field.

GitHub
Figma
Storybook
import {TextInput} from '@primer/react-brand'

Examples

Default 

<TextInput aria-label="Demo TextInput" />

Variants 

<div
  style={{
    display: 'grid',
    gridTemplateColumns: '1fr 1fr',
    gridTemplateRows: 'repeat(2,minmax(40px,auto))',
    gap: '20px',
  }}
>
  <FormControl fullWidth>
    <FormControl.Label>Text (default)</FormControl.Label>
    <TextInput type="text" placeholder="alphanumeric" />
  </FormControl>
  <FormControl fullWidth>
    <FormControl.Label>Number</FormControl.Label>
    <TextInput type="number" placeholder="123" />
  </FormControl>
  <FormControl fullWidth>
    <FormControl.Label>Email</FormControl.Label>
    <TextInput type="email" autoComplete="email" placeholder="mona@github.com" />
  </FormControl>
  <FormControl fullWidth>
    <FormControl.Label>Password</FormControl.Label>
    <TextInput type="password" autoComplete="current-password" value="monalisa" />
  </FormControl>
  <FormControl fullWidth>
    <FormControl.Label>Month</FormControl.Label>
    <TextInput type="month" />
  </FormControl>
  <FormControl fullWidth>
    <FormControl.Label>Telephone</FormControl.Label>
    <TextInput type="tel" autoComplete="tel" />
  </FormControl>
  <FormControl fullWidth>
    <FormControl.Label>Time</FormControl.Label>
    <TextInput type="time" />
  </FormControl>
  <FormControl fullWidth>
    <FormControl.Label>Date</FormControl.Label>
    <TextInput type="date" />
  </FormControl>
  <FormControl fullWidth>
    <FormControl.Label>Date (local)</FormControl.Label>
    <TextInput type="datetime-local" />
  </FormControl>
  <FormControl fullWidth>
    <FormControl.Label>URL</FormControl.Label>
    <TextInput type="url" autoComplete="url" value="https://github.com" />
  </FormControl>
</div>

Use with FormControl

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

See FormControl for additional usage examples.

<FormControl>
  <FormControl.Label>First name</FormControl.Label>
  <TextInput autoComplete="given-name" />
</FormControl>

Placeholder 

<FormControl fullWidth>
  <FormControl.Label>First name</FormControl.Label>
  <TextInput placeholder="Mona" autoComplete="given-name" />
</FormControl>

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.

<FormControl fullWidth>
  <FormControl.Label>First name</FormControl.Label>
  <TextInput autoComplete="given-name" />
</FormControl>

Validation 

<div style={{display: 'inline-grid', gap: 3}}>
  <FormControl validationStatus="error">
    <FormControl.Label>Error</FormControl.Label>
    <TextInput />
    <FormControl.Validation>This is an error message</FormControl.Validation>
  </FormControl>
  <FormControl validationStatus="success">
    <FormControl.Label>Success</FormControl.Label>
    <TextInput />
    <FormControl.Validation>This is a success message</FormControl.Validation>
  </FormControl>
</div>

Full width 

<TextInput fullWidth aria-label="Full width TextInput" />

Sizes

FormControl can appear in medium (default) and large dimensions using the size prop.

<div style={{display: 'inline-grid', gap: 3}}>
  <TextInput size="medium" aria-label="Medium TextInput" />
 
  <TextInput size="large" aria-label="Large TextInput" />
</div>

Required

Pass the required prop to ensure that the input field must be filled out before submitting the form.

<TextInput required aria-label="Required TextInput" />

Using refs

TextInput inputs can be used in uncontrolled mode by forwarding a ref to the underlying element.

const App = () => {
  const inputRef = React.useRef(null)
 
  const handleSubmit = e => {
    e.preventDefault()
    if (!inputRef.current.value) {
      alert(`Enter a value and try again.`)
      return
    }
 
    alert(`Name: ${inputRef.current.value}`)
  }
 
  return (
    <form onSubmit={handleSubmit}>
      <div
        style={{
          display: 'grid',
          gap: 'var(--base-size-16)',
          maxWidth: 400,
          marginX: 'auto',
        }}
      >
        <FormControl fullWidth>
          <FormControl.Label>Name</FormControl.Label>
          <TextInput ref={inputRef} />
        </FormControl>
        <Button type="submit" variant="primary">
          Submit
        </Button>
      </div>
    </form>
  )
}
 
render(App)

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 div.
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.

Related components