Form control

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

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

diagrams labeling the anatomy of a text field and a checkbox field

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.

Known accessibility issues (GitHub staff only)

View open accessibility issues related to this component