Checkbox Group

import * as CheckboxGroup from "@diceui/checkbox-group";
import { Check } from "lucide-react";
 
export function CheckboxGroupDemo() {
  return (
    <CheckboxGroup.Root className="peer flex flex-col gap-3.5">
      <CheckboxGroup.Label className="text-sm text-zinc-600 leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70 dark:text-zinc-400">
        Select your favorite tricks
      </CheckboxGroup.Label>
      <CheckboxGroup.List className="flex gap-3 data-[orientation=horizontal]:flex-row data-[orientation=vertical]:flex-col">
        <label className="flex w-fit select-none items-center gap-2 text-sm text-zinc-900 leading-none has-data-disabled:cursor-not-allowed has-data-invalid:text-red-500 has-data-disabled:opacity-50 dark:text-zinc-100 dark:has-data-invalid:text-red-400">
          <CheckboxGroup.Item
            value="kickflip"
            className="h-4 w-4 shrink-0 rounded-sm border border-zinc-600 shadow-sm focus-visible:outline-hidden focus-visible:ring-1 focus-visible:ring-zinc-500 data-invalid:border-red-500 dark:border-zinc-400 dark:data-invalid:border-red-400 dark:focus-visible:ring-zinc-400 [&[data-state=checked]:not([data-invalid])]:bg-zinc-900 [&[data-state=checked]:not([data-invalid])]:text-zinc-50 dark:[&[data-state=checked]:not([data-invalid])]:bg-zinc-100 dark:[&[data-state=checked]:not([data-invalid])]:text-zinc-900 [&[data-state=checked][data-invalid]]:bg-red-500 [&[data-state=checked][data-invalid]]:text-white dark:[&[data-state=checked][data-invalid]]:bg-red-400 [&[data-state=unchecked][data-invalid]]:bg-transparent"
          >
            <CheckboxGroup.Indicator>
              <Check className="h-4 w-4" />
            </CheckboxGroup.Indicator>
          </CheckboxGroup.Item>
          Kickflip
        </label>
        <label className="flex w-fit select-none items-center gap-2 text-sm text-zinc-900 leading-none has-data-disabled:cursor-not-allowed has-data-invalid:text-red-500 has-data-disabled:opacity-50 dark:text-zinc-100 dark:has-data-invalid:text-red-400">
          <CheckboxGroup.Item
            value="heelflip"
            className="h-4 w-4 shrink-0 rounded-sm border border-zinc-600 shadow-sm focus-visible:outline-hidden focus-visible:ring-1 focus-visible:ring-zinc-500 data-invalid:border-red-500 dark:border-zinc-400 dark:data-invalid:border-red-400 dark:focus-visible:ring-zinc-400 [&[data-state=checked]:not([data-invalid])]:bg-zinc-900 [&[data-state=checked]:not([data-invalid])]:text-zinc-50 dark:[&[data-state=checked]:not([data-invalid])]:bg-zinc-100 dark:[&[data-state=checked]:not([data-invalid])]:text-zinc-900 [&[data-state=checked][data-invalid]]:bg-red-500 [&[data-state=checked][data-invalid]]:text-white dark:[&[data-state=checked][data-invalid]]:bg-red-400 [&[data-state=unchecked][data-invalid]]:bg-transparent"
          >
            <CheckboxGroup.Indicator>
              <Check className="h-4 w-4" />
            </CheckboxGroup.Indicator>
          </CheckboxGroup.Item>
          Heelflip
        </label>
        <label className="flex w-fit select-none items-center gap-2 text-sm text-zinc-900 leading-none has-data-disabled:cursor-not-allowed has-data-invalid:text-red-500 has-data-disabled:opacity-50 dark:text-zinc-100 dark:has-data-invalid:text-red-400">
          <CheckboxGroup.Item
            value="tre-flip"
            className="h-4 w-4 shrink-0 rounded-sm border border-zinc-600 shadow-sm focus-visible:outline-hidden focus-visible:ring-1 focus-visible:ring-zinc-500 data-invalid:border-red-500 dark:border-zinc-400 dark:data-invalid:border-red-400 dark:focus-visible:ring-zinc-400 [&[data-state=checked]:not([data-invalid])]:bg-zinc-900 [&[data-state=checked]:not([data-invalid])]:text-zinc-50 dark:[&[data-state=checked]:not([data-invalid])]:bg-zinc-100 dark:[&[data-state=checked]:not([data-invalid])]:text-zinc-900 [&[data-state=checked][data-invalid]]:bg-red-500 [&[data-state=checked][data-invalid]]:text-white dark:[&[data-state=checked][data-invalid]]:bg-red-400 [&[data-state=unchecked][data-invalid]]:bg-transparent"
          >
            <CheckboxGroup.Indicator>
              <Check className="h-4 w-4" />
            </CheckboxGroup.Indicator>
          </CheckboxGroup.Item>
          Tre Flip
        </label>
        <label className="flex w-fit select-none items-center gap-2 text-sm text-zinc-900 leading-none has-data-disabled:cursor-not-allowed has-data-invalid:text-red-500 has-data-disabled:opacity-50 dark:text-zinc-100 dark:has-data-invalid:text-red-400">
          <CheckboxGroup.Item
            value="540-flip"
            className="h-4 w-4 shrink-0 rounded-sm border border-zinc-600 shadow-sm focus-visible:outline-hidden focus-visible:ring-1 focus-visible:ring-zinc-500 data-invalid:border-red-500 dark:border-zinc-400 dark:data-invalid:border-red-400 dark:focus-visible:ring-zinc-400 [&[data-state=checked]:not([data-invalid])]:bg-zinc-900 [&[data-state=checked]:not([data-invalid])]:text-zinc-50 dark:[&[data-state=checked]:not([data-invalid])]:bg-zinc-100 dark:[&[data-state=checked]:not([data-invalid])]:text-zinc-900 [&[data-state=checked][data-invalid]]:bg-red-500 [&[data-state=checked][data-invalid]]:text-white dark:[&[data-state=checked][data-invalid]]:bg-red-400 [&[data-state=unchecked][data-invalid]]:bg-transparent"
          >
            <CheckboxGroup.Indicator>
              <Check className="h-4 w-4" />
            </CheckboxGroup.Indicator>
          </CheckboxGroup.Item>
          540 Flip
        </label>
      </CheckboxGroup.List>
    </CheckboxGroup.Root>
  );
}

import {
  CheckboxGroup,
  CheckboxGroupDescription,
  CheckboxGroupItem,
  CheckboxGroupLabel,
  CheckboxGroupList,
} from "@/components/ui/checkbox-group";
 
export function CheckboxGroupHorizontalDemo() {
  return (
    <CheckboxGroup orientation="horizontal">
      <CheckboxGroupLabel>Tricks</CheckboxGroupLabel>
      <CheckboxGroupList>
        <CheckboxGroupItem value="indy">Indy</CheckboxGroupItem>
        <CheckboxGroupItem value="stalefish">Stalefish</CheckboxGroupItem>
        <CheckboxGroupItem value="pizza-guy">Pizza Guy</CheckboxGroupItem>
        <CheckboxGroupItem value="fs-540">FS 540</CheckboxGroupItem>
      </CheckboxGroupList>
      <CheckboxGroupDescription>Select grab tricks</CheckboxGroupDescription>
    </CheckboxGroup>
  );
}

"use client";
 
import {
  CheckboxGroup,
  CheckboxGroupDescription,
  CheckboxGroupItem,
  CheckboxGroupLabel,
  CheckboxGroupList,
  CheckboxGroupMessage,
} from "@/components/ui/checkbox-group";
import * as React from "react";
 
export function CheckboxGroupValidationDemo() {
  const [tricks, setTricks] = React.useState<string[]>(["stalefish", "fs-540"]);
 
  return (
    <CheckboxGroup
      value={tricks}
      onValueChange={setTricks}
      onValidate={(value) =>
        value.includes("indy") ? "Indy is not allowed" : null
      }
    >
      <CheckboxGroupLabel>Tricks</CheckboxGroupLabel>
      <CheckboxGroupList>
        <CheckboxGroupItem value="indy">Indy</CheckboxGroupItem>
        <CheckboxGroupItem value="stalefish">Stalefish</CheckboxGroupItem>
        <CheckboxGroupItem value="fs-540">FS 540</CheckboxGroupItem>
      </CheckboxGroupList>
      <CheckboxGroupDescription hideOnError>
        Select grab tricks
      </CheckboxGroupDescription>
      <CheckboxGroupMessage />
    </CheckboxGroup>
  );
}

"use client";
 
import {
  CheckboxGroup,
  CheckboxGroupDescription,
  CheckboxGroupItem,
  CheckboxGroupLabel,
  CheckboxGroupList,
} from "@/components/ui/checkbox-group";
import * as React from "react";
 
const tricks = [
  { label: "Kickflip", value: "kickflip" },
  { label: "Heelflip", value: "heelflip" },
  { label: "Tre Flip", value: "tre-flip" },
  { label: "Pizza Guy", value: "pizza-guy" },
  { label: "FS 540", value: "fs-540" },
  { label: "The 900", value: "the-900" },
];
 
export function CheckboxGroupMultiSelectionDemo() {
  const { value, onValueChange, onShiftKeyDown } = useShiftMultiSelect({
    items: tricks,
    getItemValue: (item) => item.value,
  });
 
  return (
    <CheckboxGroup value={value} onValueChange={onValueChange}>
      <CheckboxGroupLabel>Tricks</CheckboxGroupLabel>
      <CheckboxGroupDescription>
        Hold Shift and click to select multiple items
      </CheckboxGroupDescription>
      <CheckboxGroupList
        className="mt-1"
        onKeyDown={onShiftKeyDown}
        onKeyUp={onShiftKeyDown}
      >
        {tricks.map((trick) => (
          <CheckboxGroupItem key={trick.value} value={trick.value}>
            {trick.label}
          </CheckboxGroupItem>
        ))}
      </CheckboxGroupList>
    </CheckboxGroup>
  );
}
 
interface UseShiftMultiSelectProps<T> {
  /** The items for selection. */
  items: T[];
 
  /** The value of the item. */
  getItemValue: (item: T) => string;
}
 
function useShiftMultiSelect<T>({
  items,
  getItemValue,
}: UseShiftMultiSelectProps<T>) {
  const [selectedValues, setSelectedValues] = React.useState<string[]>([]);
  const [lastSelected, setLastSelected] = React.useState<number | null>(null);
  const isShiftPressedRef = React.useRef(false);
 
  const onShiftKeyDown = React.useCallback(
    (event: React.KeyboardEvent<HTMLElement>) => {
      if (event.key === "Shift") {
        isShiftPressedRef.current = event.type === "keydown";
      }
    },
    [],
  );
 
  const onValueChange = React.useCallback(
    (newValue: string[]) => {
      // Handle single selection
      if (!isShiftPressedRef.current || lastSelected === null) {
        setSelectedValues(newValue);
        const clickedValue =
          newValue.find((v) => !selectedValues.includes(v)) ??
          selectedValues.find((v) => !newValue.includes(v));
        if (clickedValue) {
          const newIndex = items.findIndex(
            (item) => getItemValue(item) === clickedValue,
          );
          if (newIndex !== -1) {
            setLastSelected(newIndex);
          }
        }
        return;
      }
 
      // Find the currently clicked item
      const clickedValue =
        newValue.find((v) => !selectedValues.includes(v)) ??
        selectedValues.find((v) => !newValue.includes(v));
      if (!clickedValue) return;
 
      const currentIndex = items.findIndex(
        (item) => getItemValue(item) === clickedValue,
      );
      if (currentIndex === -1) return;
 
      // Handle shift-click selection
      const start = Math.min(lastSelected, currentIndex);
      const end = Math.max(lastSelected, currentIndex);
      const rangeValues = items
        .slice(start, end + 1)
        .map((item) => getItemValue(item));
 
      const newSelectedValues = new Set(selectedValues);
      const currentItem = items[currentIndex];
      const isSelecting =
        currentItem && !selectedValues.includes(getItemValue(currentItem));
 
      for (const value of rangeValues) {
        if (isSelecting) {
          newSelectedValues.add(value);
        } else {
          newSelectedValues.delete(value);
        }
      }
 
      setSelectedValues(Array.from(newSelectedValues));
      setLastSelected(currentIndex);
    },
    [lastSelected, selectedValues, items, getItemValue],
  );
 
  return {
    value: selectedValues,
    onValueChange,
    onShiftKeyDown,
  };
}