LifeDS

Component

Checkbox

Binary selection control. Pair with Field/FieldLabel for accessible layouts, or use standalone with Label.

checked / onCheckedChangecontrolled state
defaultCheckeduncontrolled initial state
disableddata-disabled on Field + disabled prop
aria-invalidborder-destructive · ring
Playground

Basic

With description

By clicking this checkbox, you agree to the terms and conditions.

Disabled

Invalid

Choice card — Field wrapped in FieldLabel

Controlled state

Checkbox group — FieldSet & FieldLegend

Show these items on the desktop:

Select the items you want to show on the desktop.

In table — select all / select row

NameEmailRole
Sarah Chensarah.chen@example.comAdmin
Marcus Rodriguezmarcus.rodriguez@example.comUser
Priya Patelpriya.patel@example.comUser
David Kimdavid.kim@example.comEditor

RTL support

Tokens used

7 semantic tokens consumed by this component.

--primaryPrimary
bg-primarytext-primaryborder-primaryring-primary
--primary-foregroundPrimary Foreground
text-primary-foregroundbg-primary-foreground
--inputInput
bg-inputborder-input
--backgroundBackground
bg-background
--foregroundForeground
text-foreground
--destructiveDestructive
bg-destructivetext-destructiveborder-destructivering-destructive
--ringRing
ring-ringring