Checkbox
A checkbox control with optional label and description, built on Base UI’s Field primitive.
Base UI Primitive
Built on @base-ui/react/field wrapping a checkbox control
Import
import { Checkbox } from "@soft-ui/react/checkbox"
Usage
import { Checkbox } from "@soft-ui/react/checkbox"
export default function Example() {
return (
<Checkbox
label="Accept terms"
description="By checking this box, you agree to our terms and conditions"
/>
)
}
Props
Label text displayed next to the checkbox.
Description text displayed below the label.
Disables the checkbox and applies disabled styles.
Controlled checked state.
Uncontrolled default checked state.
Shows indeterminate state (mixed/partial selection).
onCheckedChange
(checked: boolean) => void
Callback fired when checked state changes.
Name attribute for form submission.
Value attribute for form submission.
Additional CSS classes for the control.
Additional CSS classes for the container (when label/description is present).
Examples
Basic
import { Checkbox } from "@soft-ui/react/checkbox"
export default function Basic() {
return <Checkbox label="Accept terms" />
}
With Description
import { Checkbox } from "@soft-ui/react/checkbox"
export default function WithDescription() {
return (
<Checkbox
label="Marketing emails"
description="Receive updates about new features and promotions"
/>
)
}
Controlled
import { Checkbox } from "@soft-ui/react/checkbox"
import { useState } from "react"
export default function Controlled() {
const [checked, setChecked] = useState(false)
return (
<Checkbox
label="Controlled checkbox"
checked={checked}
onCheckedChange={setChecked}
/>
)
}
Indeterminate
import { Checkbox } from "@soft-ui/react/checkbox"
export default function Indeterminate() {
return (
<Checkbox
label="Select all"
indeterminate
/>
)
}
Disabled
import { Checkbox } from "@soft-ui/react/checkbox"
export default function Disabled() {
return (
<Checkbox
label="Disabled checkbox"
disabled
/>
)
}