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.

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.

Checkbox input
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.

Checkbox input
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.

Checkbox input
Label - Body 1 (Optional)

Checkbox input
Label - Caption (Optional)

Checkbox input

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

Surface
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!