Command Palette

Search for a command to run...

Docs
Checkbox Group

Checkbox Group

A group of checkboxes for multi-selection with horizontal or vertical layout.

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

PropTypeDefaultDescription
options{ value: string; label: string; description?: string; disabled?: boolean }[]-Checkbox options
valuestring[]-Controlled selected values
defaultValuestring[][]Default selected values
onValueChange(value: string[]) => void-Callback when value changes
labelstring-Group label
orientation"horizontal" | "vertical""vertical"Layout orientation
classNamestring-Additional CSS classes

Features

  • Multi-selection support
  • Horizontal or vertical layout
  • Optional descriptions per option
  • Individual option disable
  • Light and dark mode support