Checkbox

Overview

View on FigmaView on GitHub

Purpose

Checkboxes are form elements used to display lists of options. Users may select any number of options, including zero, one or multiple.

Even though the Checkbox is its own component, we recommend using the Control Field instead because it offers a label, validation message, and in-line messaging.

Anatomy

The Checkbox component can be broken down into the following elements -

  1. Checkbox
    The Checkbox is a visual indicator showing if a selection has been made.

  2. Text Label
    The text label is used to describe the option to the user.

  3. In-line Messaging
    An optional text field that can be used for further information, clarifying the option.

Variants & States

  • Type: Default, Legal
  • Status: Unselected, Selected, Error
  • States: Default, Hover, Focus, Disabled, Read Only
  • Label on/off
  • In-line Messaging on/off