Input Group

An input group is a set of related form controls grouped together under a shared label. It is used when a set of controls shares a common context that cannot be understood from the individual labels alone. Input groups are often used, for example, to divide forms into logical sections.

Accessibility Features

  • A native <fieldset> element groups the related inputs together semantically, while <legend> provides a label for the entire group. The elements handle screen reader announcements automatically. Using them is recommended whenever possible.
  • Each <input> has an individual <label>, associated via nesting or matching for and id attributes.
  • When users can select any number of options from a group, type="checkbox" inputs must be used. When only one option can be selected at a time, type="radio" inputs must be used.
  • Checkboxes and radio buttons that belong to the same group must share a name attribute.

Example

Code Snippet