Form control

Use the form control component to display form inputs alongside labels, validation and more.
  • Experimental
  • Not reviewed for accessibility
import {FormControl} from '@primer/react-brand'

Examples

Basic

FormControl is responsible for layout and ensuring that relevant IDs and ARIA attributes are passed to its children.

Alternative inputs

Layout

FormControl can help compose form layouts quickly, while ensuring the inputs are accessible for assistive technologies.

An example of a typical layout composed using FormControl:

Visually hidden label

Validation

The following example demonstrates declarative form validation in controlled mode.

Try changing the input value to to monalisa to show the success state.

Hint

Full width

Pass the fullWidth prop to FormControl to provide additional behavior and state context to all children, rather than the input only.

Sizes

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

Required

Pass the required prop to FormControl to provide additional behavior and state context to all children, rather than the input only.

Using refs

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