Skip to main content

Forms

Forms, whether standalone or called as the form collection type, can use these well-constructed components.

Input

Example

Options
Code
Usage

General guidance

Use the input component for text, tel, email, hidden, or other varieties of the base-level <input> tag.

Accessibility

Form inputs require a matching label that is associated with it either implicitly or by using the for attribute.

Yes/No

Example

Répondez s'il vous plaît

Will you attend the wedding reception dinner on October 9, 2020?

Options
Code
Usage

General guidance

The yes/no component lets you get a clear answer using radio buttons to toggle. This base level control could then be enhanced with JavaScript and styling to be a single switch-style toggle, though that is not strictly necessary.

Accessibility

Radios are recognized by most assistive technologies. The more you change the markup the greater risk you have of breaking the experience for somebody.

Textarea

Example

Questions, dietary info, well-wishes, your single greatest piece of advice besides wash-your-hands and wear-sunscreen.

Options
Code
Usage

General guidance

Use the textarea component to receive long textual answers.

Accessibility

Textareas can be finicky.