FormControl

FormControl displays a labelled input and, optionally, associated validation text and/or hint text.

Use FormControls when requiring data input from the user. For example, creating a new repo configuring settings, and logging in.

This component is a helper component to keep layouts consistent and ensure the correct ARIA attributes are set. You can find some of Primer's form components listed in the Related links section.

React examples

Default

Label

<FormControl>
  <FormControl.Label>Label</FormControl.Label>
  <TextInput />
</FormControl>

<FormControl>
  <FormControl.Label>Label</FormControl.Label>
  <TextInput />
</FormControl>

Required field

Label*

<FormControl required>
  <FormControl.Label>Label</FormControl.Label>
  <TextInput />
</FormControl>

<FormControl required>
  <FormControl.Label>Label</FormControl.Label>
  <TextInput />
</FormControl>

With validation message and caption text

Label

Something went wrong

This is a caption

<FormControl>
  <FormControl.Label>Label</FormControl.Label>
  <TextInput />
  <FormControl.Caption>This is a caption</FormControl.Caption>
  <FormControl.Validation variant="error">Something went wrong</FormControl.Validation>
</FormControl>

<FormControl>
  <FormControl.Label>Label</FormControl.Label>
  <TextInput />
  <FormControl.Caption>This is a caption</FormControl.Caption>
  <FormControl.Validation variant="error">Something went wrong</FormControl.Validation>
</FormControl>

Props

Loading data for form_control...