Strongtie Design System
Getting StartedComponents

Command Palette

Search for a command to run...

Getting Started
  • Introduction
  • Setup Guide
  • Package Installation
  • Code Quality Setup
  • Migration Guide
  • Resources
Registry
  • Getting Started
  • Combobox
  • Datepicker
  • MultiSelect
  • Tree
Guides
  • Framework Recommendations
Foundations
  • States
  • Variables
Components
  • Accordion
  • Alert
  • Alert Dialog
  • Avatar
  • Badge
  • Breadcrumb
  • Button
  • Button Group
  • Calendar
  • Card
  • Carousel
  • Chart
  • Checkbox
  • Collapsible
  • Command
  • Combobox
  • Context Menu
  • Date Picker
  • Dialog
  • Drawer
  • Dropdown Menu
  • Empty
  • Field
  • Hover Card
  • Input
  • Input Group
  • Item
  • Kbd
  • Label
  • Menubar
  • Multi Select
  • Navigation Menu
  • Pagination
  • Popover
  • Progress
  • Radio Group
  • Scroll Area
  • Select
  • Separator
  • Sheet
  • Sidebar
  • Skeleton
  • Slider
  • Switch
  • Table
  • Tabs
  • Textarea
  • Toaster
  • Toggle
  • Toggle Group
  • Tooltip
  • Tree
2026 Simpson Strong-Tie
  1. Docs
  3. Components
  5. Checkbox

Checkbox

PreviousNext

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

Checkboxes are used for binary choices or multi-select scenarios where users can select multiple options from a list. They support three states: checked, unchecked, and indeterminate (useful for "select all" scenarios where some but not all child items are selected). Built on top of Radix UI's Checkbox primitive with full keyboard navigation and accessibility support, including proper ARIA attributes and focus management.

Checkboxes should be used with labels to clearly describe what option the user is selecting. For mutually exclusive options where only one choice can be selected, use RadioGroup instead. The component automatically displays the appropriate icon (checkmark for checked, dash for indeterminate) based on state.

Example

"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>
  )
}

Installation

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

Props

All components accept standard HTML attributes and React props.

Examples

"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>
  )
}

Checked

"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

"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

"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

"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

"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

"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>
  )
}

Styling

Components can be styled using the className prop. The design system uses Tailwind CSS for styling.

Classes

CSS classes used by this component:

  • checkbox

Accessibility

Ensure proper accessibility attributes are added when implementing this component.

ChartCollapsible

On This Page

ExampleInstallationPropsExamplesCheckedDefault CheckedDisabled CheckedDisabledGroupIndeterminateStylingClassesAccessibility

Contribute

  • Report an issue
  • Request a feature
  • Edit this page