Skip to main content
Checkboxes enable users to toggle options on or off. They work well for multi-select scenarios and boolean settings.

​
Basic Usage

import { Checkbox } from "@soft-ui/react/checkbox"

function Example() {
  return <Checkbox label="Accept terms and conditions" />
}

​
Controlled State

import { useState } from "react"
import { Checkbox } from "@soft-ui/react/checkbox"

function Example() {
  const [checked, setChecked] = useState(false)

  return (
    <Checkbox
      label="Subscribe to newsletter"
      checked={checked}
      onCheckedChange={setChecked}
    />
  )
}

​
Checkbox Without Label

For cases where the label is provided separately (e.g., in a table cell): 
import { Checkbox } from "@soft-ui/react/checkbox"

function Example() {
  return <Checkbox aria-label="Select row" />
}
When using Checkbox without a label, always provide an aria-label for accessibility.

​
Indeterminate State

import { Checkbox } from "@soft-ui/react/checkbox"

function Example() {
  return (
    <Checkbox
      label="Select all"
      checked="indeterminate"
    />
  )
}

​
Disabled State

import { Checkbox } from "@soft-ui/react/checkbox"

function Example() {
  return (
    <Checkbox
      label="This option is disabled"
      disabled
    />
  )
}

​
API Reference

For complete prop documentation, see the Checkbox API reference.

Build docs developers (and LLMs) love

Get started for freeTalk to us