Select all, a choice card, disabled and invalid

// apps/docs/examples/ui/checkbox.tsx'use client';
import {useState} from 'react';
import {Checkbox} from '@workspace/active-ui/components/primitives/checkbox';import {  Field,  FieldContent,  FieldDescription,  FieldGroup,  FieldLabel,  FieldLegend,  FieldSet,  FieldTitle,} from '@workspace/active-ui/components/primitives/field';
const CHANNELS = [  {id: 'email', label: 'Email'},  {id: 'letter', label: 'Letter'},  {id: 'portal', label: 'Portal message'},];
/** * Checkboxes beside their label, as a choice card with a description, and a * "select all" box that is indeterminate while only some are checked. Each * box is a `Checkbox` in a horizontal `Field`, labelled by a `FieldLabel`. */export default function CheckboxExample() {  const [channels, setChannels] = useState<string[]>(['email']);  const all = channels.length === CHANNELS.length;  const some = channels.length > 0 && !all;  return (    <div className="grid w-full max-w-sm gap-8">      <FieldSet>        <FieldLegend variant="label">Send statements by</FieldLegend>        <FieldGroup className="gap-3">          <Field orientation="horizontal">            <Checkbox              id="channel-all"              checked={all}              indeterminate={some}              onCheckedChange={(checked) =>                setChannels(checked ? CHANNELS.map((c) => c.id) : [])              }            />            <FieldLabel htmlFor="channel-all">Every channel</FieldLabel>          </Field>          {CHANNELS.map((channel) => (            <Field key={channel.id} orientation="horizontal" className="ps-6">              <Checkbox                id={`channel-${channel.id}`}                checked={channels.includes(channel.id)}                onCheckedChange={(checked) =>                  setChannels((current) =>                    checked                      ? [...current, channel.id]                      : current.filter((id) => id !== channel.id),                  )                }              />              <FieldLabel htmlFor={`channel-${channel.id}`}>                {channel.label}              </FieldLabel>            </Field>          ))}        </FieldGroup>      </FieldSet>
      <FieldLabel htmlFor="reminder">        <Field orientation="horizontal">          <Checkbox id="reminder" defaultChecked />          <FieldContent>            <FieldTitle>Payment reminder</FieldTitle>            <FieldDescription>              Sent five days before a contribution is due.            </FieldDescription>          </FieldContent>        </Field>      </FieldLabel>
      <div className="grid gap-3">        <Field orientation="horizontal" data-disabled>          <Checkbox id="paper" disabled />          <FieldLabel htmlFor="paper">Paper copy (not offered)</FieldLabel>        </Field>        <Field orientation="horizontal" data-invalid>          <Checkbox id="terms" aria-invalid />          <FieldLabel htmlFor="terms">I have read the conditions</FieldLabel>        </Field>      </div>    </div>  );}