Checkbox — Cedar DS

States

All six states from Figma — Default, Checked, Indeterminate, Error, Disabled, Disabled Checked.

The Checkbox variant — control and label inline. Pass a label prop to activate it.

Remember me

Accept terms and conditions

Subscribe to newsletter

This option is unavailable

The Checkbox Full variant — full-width layout with a label and a description below. Use in settings panels and permission lists.

Email notificationsReceive updates about your account, security alerts, and product announcements.

Analytics cookiesHelp us improve Cedar by sharing anonymous usage data. You can opt out at any time.

Two-factor authenticationRequires a verification code in addition to your password. Strongly recommended.

sm · 16px

Small checkbox

md · 18px

Medium checkbox

lg · 20px

Large checkbox

All permissions

ReadView resources in this workspace.

WriteCreate and edit resources.

DeletePermanently remove resources. Use with caution.

AdminManage team members and billing. Requires owner approval.

action/primaryChecked / indeterminate background and border

action/on-primaryCheckmark and indeterminate icon color

bg/baseUnchecked background

bg/disabledDisabled background

border/baseUnchecked border color

border/disabledDisabled border color

status/errorError border color

border-width/boldBox border width (2px)

radius/smBox border radius (4px)

text/baseLabel text

text/subtleDescription text

text/disabledDisabled label and description

space/2Gap between control and label

Figma: Done — 54 variants

React: v1

Focus ring: v2