Accessible Checkbox & Radio Group

import React, { useEffect, useRef, useState } from "react";
import "./AccessibleCheckRadio.css";

/**
 * CheckboxGroup — fieldset-wrapped list of checkboxes with programmatic group label.
 */
export function CheckboxGroup({ legend, items, value = {}, onChange, name }) {
  return (
    <fieldset className="group">
      <legend>{legend}</legend>
      {items.map((it) => (
        <label key={it.value} className="opt">
          <input
            type="checkbox"
            name={name}
            value={it.value}
            checked={!!value[it.value]}
            onChange={(e) => onChange?.({ ...value, [it.value]: e.target.checked })}
          />
          <span>{it.label}</span>
        </label>
      ))}
    </fieldset>
  );
}

/**
 * RadioGroup — one choice from many.
 */
export function RadioGroup({ legend, items, value, onChange, name }) {
  return (
    <fieldset className="group">
      <legend>{legend}</legend>
      {items.map((it) => (
        <label key={it.value} className="opt">
          <input
            type="radio"
            name={name}
            value={it.value}
            checked={value === it.value}
            onChange={(e) => onChange?.(e.target.value)}
          />
          <span>{it.label}</span>
        </label>
      ))}
    </fieldset>
  );
}

/**
 * TriStateCheckbox — select-all with indeterminate state.
 */
export function TriStateCheckbox({ label, children, allChecked, onToggle }) {
  const ref = useRef(null);
  useEffect(() => {
    if (!ref.current) return;
    ref.current.indeterminate = !allChecked.every && allChecked.some;
  }, [allChecked]);
  return (
    <label className="opt">
      <input
        ref={ref}
        type="checkbox"
        checked={allChecked.every}
        onChange={(e) => onToggle(e.target.checked)}
      />
      <span>{label}</span>
    </label>
  );
}

import { useMemo, useState } from "react";
import { CheckboxGroup, RadioGroup, TriStateCheckbox } from "./AccessibleCheckRadio";

export default function PreferencesForm() {
  const [prefs, setPrefs] = useState({ product: true, security: true, marketing: false });
  const [speed, setSpeed] = useState("exp");

  const TASKS = [
    { id: "a", label: "Design system update" },
    { id: "b", label: "Fix tooltip bug" },
    { id: "c", label: "Dark mode" },
  ];
  const [checked, setChecked] = useState({ a: true, b: false, c: true });

  const state = useMemo(() => {
    const n = TASKS.filter(t => checked[t.id]).length;
    return { every: n === TASKS.length, some: n > 0 && n < TASKS.length };
  }, [checked]);

  return (
    <>
      <CheckboxGroup
        legend="Email notifications"
        name="prefs"
        items={[
          { value: "product",   label: "Product updates" },
          { value: "security",  label: "Security alerts" },
          { value: "marketing", label: "Marketing & promotions" },
        ]}
        value={prefs}
        onChange={setPrefs}
      />

      <RadioGroup
        legend="Shipping speed"
        name="speed"
        items={[
          { value: "std", label: "Standard (5-7 days)" },
          { value: "exp", label: "Express (2 days)" },
          { value: "ovn", label: "Overnight" },
        ]}
        value={speed}
        onChange={setSpeed}
      />

      <fieldset>
        <legend>Tasks for this sprint</legend>
        <TriStateCheckbox
          label="Select all"
          allChecked={state}
          onToggle={(v) => setChecked(Object.fromEntries(TASKS.map(t => [t.id, v])))}
        />
        {TASKS.map(t => (
          <label key={t.id} className="opt">
            <input
              type="checkbox"
              checked={!!checked[t.id]}
              onChange={() => setChecked(c => ({ ...c, [t.id]: !c[t.id] }))}
            />
            <span>{t.label}</span>
          </label>
        ))}
      </fieldset>
    </>
  );
}