bellhop by actabl

When to use

Use checkboxes when users need to select zero or more options from a list of choices.

Multiple Selection

Allow users to select multiple independent options from a list.

Single Option Toggle

Enable or disable a single feature or setting.

Agreement Confirmation

Confirm user acceptance of terms, conditions, or policies.

When not to use

  • When only one option can be selected—use radio buttons instead
  • For binary yes/no with immediate effect—use a toggle switch
  • In long forms with 7+ options—consider a multi-select dropdown
  • When the state change needs explanation—add helper text or use radio with descriptions

Anatomy

Checkboxes consist of several key parts that work together to create an effective form control.

  1. Checkbox Control

    The clickable square that indicates checked, unchecked, or indeterminate state

  2. Label (Optional)

    Text that describes what the checkbox controls or represents

  3. Supporting Text (Optional)

    Additional context or helper text that appears below the label

States

Checkboxes support multiple states to provide clear feedback to users.

Unchecked

Default state when not selected

Checked

Selected state with checkmark

Indeterminate

Mixed state for parent checkboxes

Disabled

Not available for interaction

Sizes

Checkboxes come in two sizes to suit different UI contexts.

size: sm

size: md

Accessibility

Checkboxes are designed to be accessible to all users.

Keyboard Navigation

  • Tab - Move focus to the checkbox
  • Space - Toggle checkbox state
  • Shift + Tab - Move focus to previous element

Screen Reader

  • Checkbox role is properly announced
  • Label text is clearly communicated
  • Checked/unchecked state is announced
  • Indeterminate state is announced when applicable
  • Disabled state is communicated

Focus Indicator

  • Visible focus ring on keyboard navigation
  • High contrast border for visibility
  • Maintains 3:1 contrast ratio

Resources

Design and development resources for the Checkbox component.

Figma

Available
View in Figma →

Web Components/Angular

Available
View in Storybook →

React

Available
View in Storybook →