"use client"

import * as React from "react"

import { Checkbox } from "@/registry/ui/checkbox/checkbox"
import { CheckboxGroup } from "@/registry/ui/checkbox-group/checkbox-group"

const relays = [
  { value: "kx-7", label: "KX-7 Northern relay" },
  { value: "vd-2", label: "VD-2 Equator relay" },
  { value: "qt-9", label: "QT-9 Polar relay" },
]

const allValues = relays.map((relay) => relay.value)

export default function CheckboxGroupWithParentDemo() {
  const [value, setValue] = React.useState<string[]>(["kx-7"])

  return (
    <CheckboxGroup
      value={value}
      onValueChange={setValue}
      allValues={allValues}
      aria-labelledby="broadcast-relays-label"
      className="w-full max-w-sm"
    >
      <label
        id="broadcast-relays-label"
        className="flex items-center gap-2 text-sm font-medium"
      >
        <Checkbox
          parent
          indeterminate={value.length > 0 && value.length < allValues.length}
        />
        Broadcast to all relays
      </label>
      <div className="flex flex-col gap-2 border-l border-border pl-5">
        {relays.map((relay) => (
          <label key={relay.value} className="flex items-center gap-2 text-sm">
            <Checkbox value={relay.value} />
            {relay.label}
          </label>
        ))}
      </div>
    </CheckboxGroup>
  )
}
Draw

Playground

Examples

Props
