Checkbox — ELF Design System 2.0

Checkbox

Checkboxes allow users to select one or multiple options from a list. Ideal for multi-selection tasks and toggle-based inputs.

Documentation

Code

Status & Change logs

4.15.26

None-breaking

Added Checkbox component to the ELF Design System with full type, state, and accessibility support.

Added three checkbox types: Selected (checked), Intermediate (indeterminate), and Unselected (unchecked).

Added five interactive states: Enabled, Hover, Pressed, Focused, and Disabled for all types.

Added focused ring using box-shadow: 0 0 0 4px rgba(0,108,182,0.4) for clear keyboard navigation feedback.

Added ELF Flutter component ElfCheckbox with complete prop API for type and state.

Added Raw Flutter code generation using Checkbox and Theme patterns.

Overview

The Checkbox component is a fundamental form control that lets users toggle a binary choice or represent partial selection in a set. It supports three selection states — Selected, Intermediate, and Unselected — and five interaction states, making it suitable for forms, settings panels, tables, and filter menus.

Types Selected · Intermediate · Unselected

States Enabled · Hover · Pressed · Focused · Disabled

Anatomy

1 2 3

1 Touch target / State layer

2 Container box

3 Icon (checkmark or dash)

Checkbox Types

Selected

All items in a group are selected. Shows a checkmark on a filled blue container.

Intermediate

Some but not all items are selected. Shows a dash on a filled blue container.

Unselected

No items are selected. Shows an empty outlined container with no fill.

States

Enabled

Default resting state. Ready for interaction.

Hover

Cursor over the checkbox. Subtle blue tint on state layer.

Pressed

Active tap or click. Deeper blue ripple on state layer.

Focused

Keyboard navigation focus. Blue ring around the box.

Disabled

Not interactive. Reduced to 38% opacity across entire element.

Usage Guidelines

Use checkboxes when users can select multiple items independently from a list.

Use the Intermediate state on a parent checkbox when only some child items are selected.

Pair each checkbox with a clear, concise label placed to the right of the control.

Use the disabled state when a checkbox option is contextually unavailable — not permanently hidden.

Don't

Don't use a checkbox for a single binary toggle — use a Switch component instead.

Don't use checkboxes for mutually exclusive options — use Radio buttons instead.

Don't rely on color alone to communicate state — always pair with iconography (checkmark or dash).

Don't set the Intermediate state manually when all or no items are selected — use Selected or Unselected.

Variants

Preview