Checkbox

Approved — Ready for dev

The checkbox is a multi-select UI control. A checkbox may either be Large or Small. Checkboxes should only be used when the user may select one or more options within a list, or as a way to acknowledge disclosures. Due to their small tap targets, checkboxes should not be used in mobile experiences whenever possible. In general, a cloaked checkmark is better suited for touch experiences.

Checkbox

Anatomy

Checkboxes are made of the checkbox input with a label or slot option.

Label

The checkbox input with the label next to it is the default. 

  1. Checkbox input
  2. Label - Body 1 or Caption (Optional)

Slot

The checkbox input with a slot next to it lets the input be attached to anything. This may be a paragraph or image. This is determined by the design.

  1. Checkbox input
  2. Slot (optional)

Size

Checkboxes may either be Large or Small depending on the use case. The Large variant utilizes our Body 1 type style, so it is preferable in most use cases. The Small version may be used when the Caption type style and smaller imprint is preferable. 

  1. Checkbox input
  2. Label - Body 1 (Optional)
  1. Checkbox input
  2. Label - Caption (Optional)

Checkbox input

The checkbox input displays the current status of the input. The checkbox input is made of two atoms:

  1. Surface
  2. Icon

A checkbox input may either be Off, On, or Indeterminate. For each of these statuses, the icon shown within the input will vary. The colors of the checkbox input will change based on the state of the checkbox (see States below). The size and treatment of the icon will also change depending on the Checkbox size and state.

Status Icon
Off No icon shown
On Check
Indeterminate Indeterminate

Specs

Color

Element Property Value
Label Text color ∆colorPlatformGray900
Checkbox input (off) Background color ∆colorPlatformWhite
Checkbox input (off) Border color ∆colorPlatformGray600
Checkbox input (on or indeterminate) Background color ∆colorBrandedAffordanceAccessible
Checkbox input icon Icon color ∆colorPlatformWhite
Checkbox input, label, and slot (disabled) Alpha ∆colorPlatformAlpha400

Elevation

No elevation considerations needed for this component.

Spacing

States

Theming

No additional theming considerations are needed for this component.

Placement

Checkboxes should always be left-aligned within their parent containers. When a checkbox appears without a label, it may be positioned as needed. When a group of checkboxes appear under a parent checkbox, the children should be left-aligned to the keyline created by the parent checkbox’s label.


Behavior

The checkbox is an interactive component. The following selection animations help make a user’s experience with the checkbox responsive and delightful. While these selection transitions utilize timing and animation to exaggerate their effect, the hover and pressed state changes should be immediate so the experience doesn’t feel sluggish.

On

The On and Indeterminate statuses utilize similar animation patterns to create a consistent sense of timing. 

Interaction Steps Duration Easing Notes Haptics
On 1a. Checkbox input state update ∆motionTimeExtraFast ∆motionTimingFunctionStandard The states transition using the tokens described above. Light on trigger (Flutter: Selection Click)
  1b. Icon draws on ∆motionTimeExtraFast ∆motionTimingFunctionStandard The icon draws on following the animation above.  

Off

The off animations use similar timings with subtle differences in the icon animation to create a sense of progression while keeping the overall pace of feedback consistent. 

Interaction Steps Duration Easing Notes Haptics
Off 1a. Checkbox input state update ∆motionTimeExtraFast ∆motionTimingFunctionStandard The states transition using the tokens described above.  
  1b. Icon draws off ∆motionTimeExtraFast ∆motionTimingFunctionStandard The icon draws off following the animation above.  

Icon update

When a checkbox changes status from On to Indeterminate or vice versa, the icon animations should be offset in time so they don’t overlap.

Interaction Steps Duration Easing Notes Haptics
Update 1. Icon draws off ∆motionTimeExtraFast ∆motionTimingFunctionStandard The current icon draws off following the animation above.  
  2. Icon draws on ∆motionTimeExtraFast ∆motionTimingFunctionStandard The new icon draws on following the animation above.  

Developer Docs

Vue Developer Docs

Component documentation coming soon!