Checkbox

since 1.0

Checkbox is a control that allows users to toggle between checked, unchecked, and indeterminate states.

Example

Accept terms and conditions

"use client"

import { Checkbox } from "@strongtie/design-system/checkbox"
import { Label } from "@strongtie/design-system/label"

export function CheckboxDefault() {
  return (
    <div className="flex items-center gap-2 space-x-2">
      <Checkbox id="terms" />
      <Label htmlFor="terms">Accept terms and conditions</Label>
    </div>
  )
}

Install

import { Checkbox } from "@strongtie/design-system/checkbox"

Not installed yet? Add the package to your app:


npm install @strongtie/design-system

Props

All components accept standard HTML attributes and React props.

When not to use it

Don't use checkboxes for mutually exclusive options — use a RadioGroup so only one choice can be selected and arrow keys move between them. Don't use one for a preference that applies the instant it changes either; that reads as a Switch.

Examples

Checked

This checkbox is checked by default

"use client"

import { Checkbox } from "@strongtie/design-system/checkbox"
import { Label } from "@strongtie/design-system/label"

export function CheckboxChecked() {
  return (
    <div className="flex items-center space-x-2">
      <Checkbox id="checked" checked />
      <Label htmlFor="checked">This checkbox is checked by default</Label>
    </div>
  )
}

Default Checked

This checkbox is checked by default (uncontrolled)

"use client"

import { Checkbox } from "@strongtie/design-system/checkbox"
import { Label } from "@strongtie/design-system/label"

export function CheckboxDefaultChecked() {
  return (
    <div className="flex items-center space-x-2">
      <Checkbox id="default-checked" defaultChecked />
      <Label htmlFor="default-checked">
        This checkbox is checked by default (uncontrolled)
      </Label>
    </div>
  )
}

Disabled Checked

This checkbox is disabled and checked

"use client"

import { Checkbox } from "@strongtie/design-system/checkbox"
import { Label } from "@strongtie/design-system/label"

export function CheckboxDisabledChecked() {
  return (
    <div className="flex items-center space-x-2">
      <Checkbox id="disabled-checked" disabled checked />
      <Label htmlFor="disabled-checked">
        This checkbox is disabled and checked
      </Label>
    </div>
  )
}

Disabled

This checkbox is disabled

"use client"

import { Checkbox } from "@strongtie/design-system/checkbox"
import { Label } from "@strongtie/design-system/label"

export function CheckboxDisabled() {
  return (
    <div className="flex items-center space-x-2">
      <Checkbox id="disabled" disabled />
      <Label htmlFor="disabled">This checkbox is disabled</Label>
    </div>
  )
}

Group

Option 1

Option 2

Option 3

"use client"

import { Checkbox } from "@strongtie/design-system/checkbox"
import { Label } from "@strongtie/design-system/label"

export function CheckboxGroup() {
  return (
    <div className="space-y-4">
      <div className="flex items-center space-x-2">
        <Checkbox id="option1" />
        <Label htmlFor="option1">Option 1</Label>
      </div>
      <div className="flex items-center space-x-2">
        <Checkbox id="option2" />
        <Label htmlFor="option2">Option 2</Label>
      </div>
      <div className="flex items-center space-x-2">
        <Checkbox id="option3" />
        <Label htmlFor="option3">Option 3</Label>
      </div>
    </div>
  )
}

Indeterminate

Accept terms and conditions

"use client"

import { useState } from "react"
import { Checkbox } from "@strongtie/design-system/checkbox"
import { Label } from "@strongtie/design-system/label"

export function CheckboxIndeterminate() {
  const [checked, setChecked] = useState<"indeterminate" | boolean>(
    "indeterminate"
  )
  return (
    <div className="flex items-center gap-2 space-x-2">
      <Checkbox id="terms2" checked={checked} />
      <Label htmlFor="terms2">Accept terms and conditions</Label>
    </div>
  )
}

Chart Collapsible

Checkbox

since 1.0

Checkbox is a control that allows users to toggle between checked, unchecked, and indeterminate states.

Example

Accept terms and conditions

"use client"

import { Checkbox } from "@strongtie/design-system/checkbox"
import { Label } from "@strongtie/design-system/label"

export function CheckboxDefault() {
  return (
    <div className="flex items-center gap-2 space-x-2">
      <Checkbox id="terms" />
      <Label htmlFor="terms">Accept terms and conditions</Label>
    </div>
  )
}

Install

import { Checkbox } from "@strongtie/design-system/checkbox"

Not installed yet? Add the package to your app:


npm install @strongtie/design-system

Props

All components accept standard HTML attributes and React props.

When not to use it

Examples

Checked

This checkbox is checked by default

"use client"

import { Checkbox } from "@strongtie/design-system/checkbox"
import { Label } from "@strongtie/design-system/label"

export function CheckboxChecked() {
  return (
    <div className="flex items-center space-x-2">
      <Checkbox id="checked" checked />
      <Label htmlFor="checked">This checkbox is checked by default</Label>
    </div>
  )
}

Default Checked

This checkbox is checked by default (uncontrolled)

"use client"

import { Checkbox } from "@strongtie/design-system/checkbox"
import { Label } from "@strongtie/design-system/label"

export function CheckboxDefaultChecked() {
  return (
    <div className="flex items-center space-x-2">
      <Checkbox id="default-checked" defaultChecked />
      <Label htmlFor="default-checked">
        This checkbox is checked by default (uncontrolled)
      </Label>
    </div>
  )
}

Disabled Checked

This checkbox is disabled and checked

"use client"

import { Checkbox } from "@strongtie/design-system/checkbox"
import { Label } from "@strongtie/design-system/label"

export function CheckboxDisabledChecked() {
  return (
    <div className="flex items-center space-x-2">
      <Checkbox id="disabled-checked" disabled checked />
      <Label htmlFor="disabled-checked">
        This checkbox is disabled and checked
      </Label>
    </div>
  )
}

Disabled

This checkbox is disabled

"use client"

import { Checkbox } from "@strongtie/design-system/checkbox"
import { Label } from "@strongtie/design-system/label"

export function CheckboxDisabled() {
  return (
    <div className="flex items-center space-x-2">
      <Checkbox id="disabled" disabled />
      <Label htmlFor="disabled">This checkbox is disabled</Label>
    </div>
  )
}

Group

Option 1

Option 2

Option 3

"use client"

import { Checkbox } from "@strongtie/design-system/checkbox"
import { Label } from "@strongtie/design-system/label"

export function CheckboxGroup() {
  return (
    <div className="space-y-4">
      <div className="flex items-center space-x-2">
        <Checkbox id="option1" />
        <Label htmlFor="option1">Option 1</Label>
      </div>
      <div className="flex items-center space-x-2">
        <Checkbox id="option2" />
        <Label htmlFor="option2">Option 2</Label>
      </div>
      <div className="flex items-center space-x-2">
        <Checkbox id="option3" />
        <Label htmlFor="option3">Option 3</Label>
      </div>
    </div>
  )
}

Indeterminate

Accept terms and conditions

"use client"

import { useState } from "react"
import { Checkbox } from "@strongtie/design-system/checkbox"
import { Label } from "@strongtie/design-system/label"

export function CheckboxIndeterminate() {
  const [checked, setChecked] = useState<"indeterminate" | boolean>(
    "indeterminate"
  )
  return (
    <div className="flex items-center gap-2 space-x-2">
      <Checkbox id="terms2" checked={checked} />
      <Label htmlFor="terms2">Accept terms and conditions</Label>
    </div>
  )
}

Chart Collapsible