"use client";

import { Checkbox, CheckboxGroup, Label } from "@countryclub/ui-react";
import { useState } from "react";

const interests = ["golf", "tennis", "dining"];

export default function CheckboxGroupDemo() {
  const [value, setValue] = useState<string[]>(["golf"]);

  return (
    <CheckboxGroup
      allValues={interests}
      aria-labelledby="interests-heading"
      className="w-full max-w-3xs"
      onValueChange={setValue}
      value={value}
    >
      <Label id="interests-heading">
        <Checkbox parent /> All interests
      </Label>
      <Label className="ms-6">
        <Checkbox name="golf" /> Golf and tee times
      </Label>
      <Label className="ms-6">
        <Checkbox name="tennis" /> Tennis and racquet sports
      </Label>
      <Label className="ms-6">
        <Checkbox name="dining" /> Dining and events
      </Label>
    </CheckboxGroup>
  );
}
Checkbox Group

Import

Default
