Form control
Form control displays a labelled input and, optionally, associated validation text and/or hint text.
On this page
On this page
Usage
Use form controls 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.
Anatomy
Form controls allow users to provide data. At a minimum, they include an input and label. They may also include a caption and required field indicator.
To learn more about anatomy, input methods, forms structure, validation, and more, please refer to our Forms guidance.
Accessibility
Required Fields
When using symbols -e.g., an asterisk (*)- to indicate particular fields are required within a form, consider adding a "Required fields are marked with an asterisk (*)" message at the top of the form for extra clarity.
When marking a control as required, opt to mark the form control as required instead of the input contained within it. The form control will ensure that the required state is passed down to the input element.
<FormControl required><FormControl.Label>Form Input Label</FormControl.Label><Checkbox /></FormControl>
Set the required field in the form control
<FormControl><FormControl.Label>Form Input Label</FormControl.Label><Checkbox required /></FormControl>
Don’t set the required field on the underlying input