Checkbox

v1.1.0

bash

npm install @hua-labs/hua

tsx

import { Checkbox } from "@hua-labs/hua";


`variant`	`"default" \| "outline" \| "filled" \| "glass"`	`"default"`	Visual style variant
`size`	`"sm" \| "md" \| "lg"`	`"md"`	Checkbox size
`label`	`string`	-	Label text displayed next to checkbox
`description`	`string`	-	Additional description below label
`error`	`boolean`	`false`	Error state indicator
`success`	`boolean`	`false`	Success state indicator
`checked`	`boolean`	-	Controlled checked state
`defaultChecked`	`boolean`	-	Initial checked state (uncontrolled)
`disabled`	`boolean`	`false`	Disables the checkbox

docs:common.basicUsage

import { Checkbox } from '@hua-labs/hua';

<Checkbox label="I agree to the terms" />

With Description

<Checkbox
  label="Receive newsletter"
  description="Get weekly updates and news"
/>

Controlled

const [checked, setChecked] = useState(false);

<Checkbox
  checked={checked}
  onChange={(e) => setChecked(e.target.checked)}
  label="Enable notifications"
/>

•aria-checked: Reflects checked state for screen readers
•aria-invalid: Applied in error state
•Label Connection: Label is properly connected via htmlFor
•Keyboard Support: Space key toggles checkbox state

FormControl Radio