Checkbox
A checkbox component with label support. The label can be placed at the Start, End, Top, or Bottom position with full RTL support.
'use client'; import { useState } from 'react';import { CheckboxLabel, Button } from 'sdaia-ui'; Installation
npx sdaia-ui@latest add checkbox
Usage
import { Checkbox } from "@/components/ui/checkbox"<Checkbox placement="start" />Examples
Size
Use the `size` prop to change the size of the checkbox.
'use client'; import { Checkbox } from 'sdaia-ui'; export default function CheckboxSize() {Basic
A primary checkbox with brand colour for the checked state.
'use client'; import { useState } from 'react';import { Checkbox } from 'sdaia-ui'; Description
Use `style="Neutral"` for a grey checked state in secondary contexts.
'use client'; import { useState } from 'react';import { Checkbox } from 'sdaia-ui'; Disabled
Use the `size` prop to change the size of the checkbox.
'use client'; import { Checkbox } from 'sdaia-ui'; export default function CheckboxDisabled() {API Reference
CheckboxProps
Props for the Checkbox component.
Prop | Type | Default | Required |
|---|---|---|---|
label | ReactNode | — | optional |
placement | "start" | "end" | "top" | "bottom" | "start" | optional |
readOnly | boolean | false | optional |
indeterminate | boolean | false | optional |
size | "sm" | "md" | "lg" | "md" | optional |
variant | "primary" | "neutral" | "primary" | optional |
error | string | — | optional |
helperText | string | — | optional |
disabled | boolean | false | optional |
checked | boolean | — | optional |
defaultChecked | boolean | — | optional |
onCheckedChange | (checked: boolean) => void | — | optional |