<Col>
  <Label htmlFor="terms">
    <Checkbox id="terms" />
    <span>
      I agree to the 
      <Link href="#">Terms of Service</Link>
       and 
      <Link href="#">Privacy Policy</Link>
      .
    </span>
  </Label>
  <Label htmlFor="emails">
    <Checkbox defaultChecked id="emails" />
    <Col noGap tag="span">
      <Text>Receive product updates</Text>
      <Text secondary xs>Occasional emails about new features</Text>
    </Col>
  </Label>
</Col>

Pre-checked Checkbox

Use defaultChecked on the input; wrap in Label for accessible click target.

Pre-checked checkbox

Pre-checkedCheckbox.tsx

<Col>
  <Label htmlFor="prechecked-1">
    <Checkbox defaultChecked id="prechecked-1" />
    Pre-checked checkbox
  </Label>
</Col>

Sizes

Checkboxes in different sizes - xs, sm, md, lg, xl, each wrapped in a Label. Use labels with same size as Checkboxes

Sizes.tsx

<Row flexWrap>
  <Label htmlFor="size-xs" xs>
    <Checkbox defaultChecked id="size-xs" xs />
    Size: xs
  </Label>
  <Label htmlFor="size-sm" sm>
    <Checkbox defaultChecked id="size-sm" sm />
    Size: sm
  </Label>
  <Label htmlFor="size-md" md>
    <Checkbox defaultChecked id="size-md" md />
    Size: md
  </Label>
  <Label htmlFor="size-lg" lg>
    <Checkbox defaultChecked id="size-lg" lg />
    Size: lg
  </Label>
  <Label htmlFor="size-xl" xl>
    <Checkbox defaultChecked id="size-xl" xl />
    Size: xl
  </Label>
</Row>

Appearances

Different color appearances applied to the Checkbox; always place inside a Label.

Appearances.tsx

<Row flexWrap>
  <Label default htmlFor="appearance-default">
    <Checkbox default defaultChecked id="appearance-default" />
    Enable default style
  </Label>
  <Label accent htmlFor="appearance-accent">
    <Checkbox accent defaultChecked id="appearance-accent" />
    Enable accent style
  </Label>
  <Label htmlFor="appearance-primary" primary>
    <Checkbox defaultChecked id="appearance-primary" primary />
    Enable primary style
  </Label>
  <Label htmlFor="appearance-secondary" secondary>
    <Checkbox defaultChecked id="appearance-secondary" secondary />
    Enable secondary style
  </Label>
  <Label htmlFor="appearance-tertiary" tertiary>
    <Checkbox defaultChecked id="appearance-tertiary" tertiary />
    Enable tertiary style
  </Label>
  <Label htmlFor="appearance-success" success>
    <Checkbox defaultChecked id="appearance-success" success />
    Enable success style
  </Label>
  <Label danger htmlFor="appearance-danger">
    <Checkbox danger defaultChecked id="appearance-danger" />
    Enable danger style
  </Label>
  <Label htmlFor="appearance-warning" warning>
    <Checkbox defaultChecked id="appearance-warning" warning />
    Enable warning style
  </Label>
  <Label htmlFor="appearance-info" info>
    <Checkbox defaultChecked id="appearance-info" info />
    Enable info style
  </Label>
  <Label htmlFor="appearance-link" link>
    <Checkbox defaultChecked id="appearance-link" link />
    Enable link style
  </Label>
</Row>

Checkbox Group

Multiple labeled checkboxes working together.

Email notificationsSMS alertsPush notifications

CheckboxGroup.tsx

<Col>
  <Label htmlFor="opt-1">
    <Checkbox defaultChecked id="opt-1" />
    Email notifications
  </Label>
  <Label htmlFor="opt-2">
    <Checkbox id="opt-2" />
    SMS alerts
  </Label>
  <Label htmlFor="opt-3">
    <Checkbox id="opt-3" />
    Push notifications
  </Label>
</Col>

Checkbox Props

size

hide

xsHide

smHide

mdHide

lgHide

xlHide

items

itemsStart

itemsEnd

itemsCenter

itemsBaseline

itemsStretch

justify

justifyStart

justifyEnd

justifyCenter

justifyBetween

justifyAround

justifyEvenly

justifyStretch

justifyBaseline

position

relative

absolute

fixed

sticky

static

display

inline

block

inlineBlock

flex

inlineFlex

grid

inlineGrid

contents

table

tableCell

hidden

overflow

overflowAuto

overflowHidden

overflowClip

overflowVisible

overflowScroll

overflowXAuto

overflowYAuto

overflowXHidden

overflowYHidden

overflowXClip

overflowYClip

overflowXVisible

overflowYVisible

overflowXScroll

overflowYScroll

appearance

default

accent

primary

secondary

tertiary

success

danger

warning

info

link

transparent

border

borderT

borderB

borderL

borderR

borderX

borderY

noBorder

shadow

noShadow

ring

noRing

focusVisible

noFocusVisible

shape

pill

sharp

rounded

variant

filled

outline

On this page

Checkbox

Basic Usage