Installation
Usage
import { useState } from "react";
import CheckboxGroup from "@/components/ruixen/checkbox-group";
const options = [
{ value: "react", label: "React" },
{ value: "vue", label: "Vue" },
{ value: "angular", label: "Angular" },
];
export default function MyComponent() {
const [selected, setSelected] = useState<string[]>(["react"]);
return (
<CheckboxGroup
label="Select frameworks"
options={options}
value={selected}
onValueChange={setSelected}
/>
);
}Props
| Prop | Type | Default | Description |
|---|---|---|---|
options | { value: string; label: string; description?: string; disabled?: boolean }[] | - | Checkbox options |
value | string[] | - | Controlled selected values |
defaultValue | string[] | [] | Default selected values |
onValueChange | (value: string[]) => void | - | Callback when value changes |
label | string | - | Group label |
orientation | "horizontal" | "vertical" | "vertical" | Layout orientation |
className | string | - | Additional CSS classes |
Features
- Multi-selection support
- Horizontal or vertical layout
- Optional descriptions per option
- Individual option disable
- Light and dark mode support

