Forms

Buttons

Buttons are used to initialize an action, such as “Create page,” “Save content,” or “Delete comment.” Buttons should not be used as navigational items unless they link to the next step in a flow.

Positive buttons

Used to call attention to the primary or most important action on a page. Typically, they should only be used once per view (not including a modal dialog).

buttons--positive

Neutral buttons

The standard button used for most actions on a page.

buttons--neutral

Negative buttons

Used when the primary action is destructive (delete, remove, etc.), and most often used in confirmation modals.

buttons--negative

Mini buttons

buttons--mini

Icon buttons

Icons can be used with any button in order to signal specific actions or external links. Buttons can contain an icon alongside text or without it. Icons in buttons should be used sparingly and only when it increases comprehension.

buttons--icon

Button groups

Buttons may be grouped together when their actions are related.

buttons--group

Best practices

Labels
Button labels should be sentence case and as short as possible, while clearly explaining what will occur when the button is clicked. They should begin with a verb that describes the action and reference its object, such as “Save content” or “Delete comment.”

Accessibility

  • Buttons should always have an accessible name.
    • For buttons that don’t include text, e.g., icon buttons, an accessible name can be provided through an aria-label or aria-labelledby attribute.
  • Whenever possible, use native HTML button controls, <button> or <input type="button">.
    • When not using a native button control, the button role must be used instead to make role="button" to make it appear as one to a screen reader.

Inputs

Text inputs

Text input fields are used for inputting text are the most common input in the control panel.

inputs

Search inputs

The search input is used for all search functionality on the control panel. Once a search term is entered, pressing Enter or Return on the keyboard will return search results. Optionally the search input may include autocomplete.

inputs--search

Date inputs

The date input is used for selecting a specific date. When this field is active, a calendar selection will display below the field allowing a date to be selected which autofills the input with the selected date. Once a date is selected from the calendar, the calendar disappears.

date_input

Number inputs

The number input is used when numbers need to be selected. Pressing the arrow buttons within on the left or right of the input will increase the number in the field by 1.

inputs--number

Checkbox inputs

Checkbox inputs are used when any number of choices or a single option can be turned on or off.

inputs--checkbox

Radio inputs

Radio buttons are used when a choice is offered between a list of two or more mutually exclusive options. Use a radio over select when you want to expose all available options. If there are more than 4 options, a select is preferable to avoid clutter.

inputs--radio

Textarea inputs

Textarea is used for the entry of more than one line of text.

textareas

Toggle inputs

Used to allow for a switch between two mutually exclusive states, such as turning a feature on or off. These should be used for actions that occur immediately after the toggle switch is “flipped.” Autosave is generally expected with a toggle, so use a checkbox if autosave isn’t available.

inputs--toggle

Help text

Additional instructions or context that may appear beside or below the input field.

helper-text

Selects

Select inputs are most often used when a person must choose one option from a list (the exception is the multiple select). Consider using a select when you have more than 4 options to avoid clutter. Use Select as a placeholder unless there’s a default option.

Default selects

select_input

Dynamic selects

Used when more complex information needs to be displayed in each option. Most typically used to display lists of people or organizations.

select_input_dynamic

Multiple selects

Used to select multiple options from a list, such as locations or tags.

select_input_multiple

File uploader

The file uploader creates a region to drag and drop files to upload.

form--upload

Upload queue

The upload queue displays a listing of files currently being uploaded and their progress. Each item contains the file name, a progress bar with percentage, and an “x” icon to cancel it. Once a file has completed the upload process it is removed from the queue and added to the files listing.

upload-queue

Best practices

Accessibility

  • The progressbar role should be used along with the aria-valuenow, aria-valuemin, and aria-valuemax attributes. The aria-valuenow value should be updated dynamically to indicate progress to assistive devices.