"use client"

import * as React from "react"

import { Checkbox } from "@/registry/ui/checkbox/checkbox"

const relays = ["KX-7 Northern relay", "VD-2 Equator relay", "QT-9 Polar relay"]

export default function CheckboxIndeterminate() {
  const [selected, setSelected] = React.useState<string[]>([relays[0]])
  const allSelected = selected.length === relays.length
  const someSelected = selected.length > 0 && !allSelected

  return (
    <div className="flex w-full max-w-sm flex-col gap-3">
      <label className="flex items-center gap-2 text-sm font-medium">
        <Checkbox
          checked={allSelected}
          indeterminate={someSelected}
          onCheckedChange={(checked) => setSelected(checked ? [...relays] : [])}
        />
        Broadcast to all relays
      </label>
      <div className="flex flex-col gap-2 border-l border-border pl-5">
        {relays.map((relay) => (
          <label key={relay} className="flex items-center gap-2 text-sm">
            <Checkbox
              checked={selected.includes(relay)}
              onCheckedChange={(checked) =>
                setSelected((prev) =>
                  checked ? [...prev, relay] : prev.filter((r) => r !== relay)
                )
              }
            />
            {relay}
          </label>
        ))}
      </div>
    </div>
  )
}
Draw

Playground

Examples

Props
