Skip to content

Checkbox

Boolean selection for forms and filters. Use for options that submit with a form, or multi-select lists.

Examples

States

Overview

Checkbox selects a single boolean option. Checked state uses brand fill and a checkmark. Built on Base UI for accessible keyboard and pointer behavior.

tsx

import { Checkbox } from "@standard-ui/react"

<label className="flex items-center gap-2">
  <Checkbox defaultChecked />
  Subscribe to updates
</label>

Usage

Labeling

Prefer wrapping the checkbox in a label so the control has an accessible name and a larger click target.

tsx

<label className="flex items-center gap-2">
  <Checkbox />
  Remember this device
</label>

Disabled

Disabled checkboxes use reduced opacity and cursor-not-allowed. Prefer explaining why an option is unavailable.

tsx

<Checkbox disabled />

API

Checkbox accepts Base UI Checkbox root props, including controlled and uncontrolled checked state.

PropTypeDefaultDescription
defaultCheckedboolean—Uncontrolled initial checked state.
checkedboolean—Controlled checked state.
onCheckedChange(checked: boolean, event) => void—Called when the checked state changes.
disabledbooleanfalseDisables the checkbox.
indeterminatebooleanfalseShows an indeterminate state when supported.

Guidelines

Do

  • Use checkboxes for multi-select lists and form options that submit later
  • Wrap with a label for a clear name and hit target
  • Prefer a switch for immediate on/off settings

Don't

  • Don't use a single checkbox where a switch communicates “setting on/off” better
  • Don't leave checkboxes unlabeled
  • Don't disable without explaining why the option is unavailable