Form elements
beta

Handling error states for form elements can be found under Patterns on the Errors page.

Text fields have moved to their own Text field page.

Legends are used to provide context for multiple related inputs.

  • To use a legend, wrap your form inputs in a <fieldset> and set the <legend> as the first child.

  • By default the table caption is styled to match our standard body copy, but can be further styled by putting any of the text helper classes available on our typography page on the caption.

  • While some form elements's visual context can seem make a legend redundant, this may be less clear to users using screen reading devices. In this case an sr-only class can be used.

Do you like learning about design language?

Inline Dropdowns should be used when you need to place a select box in a line of text.

The dropdown should appear as part of the sentence.
The dropdown should appear as part of the sentence.
The dropdown should appear as part of the sentence.
Error message
Error state
You must choose Yes or No.
Error state
You must select at least one item.