Checkbox

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

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

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

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

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

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

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

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

Checkbox

Example

Installation

Props

Examples

Checked

Default Checked

Disabled Checked

Disabled

Group

Indeterminate

Styling

Component Slots

Additional Classes

Accessibility

Resources

Checkbox

Example

Installation

Props

Examples

Checked

Default Checked

Disabled Checked

Disabled

Group

Indeterminate

Styling

Component Slots

Additional Classes

Accessibility

Resources