components/segmented/segmented.react.tsx

Functions

Imports

It imports no other module of this repo. No module of this repo imports it.

Source

1import { useId, type ReactNode } from "react";
2
3export interface SegmentedOption<V extends string> {
4  value: V;
5  label: ReactNode;
6  disabled?: boolean;
7}
8
9export interface SegmentedProps<V extends string> {
10  // What is being chosen. Always given; hideLegend keeps it for screen readers only, where
11  // the context already says it (a theme switch in the top bar).
12  legend: ReactNode;
13  hideLegend?: boolean;
14  // Two to five.
15  options: Array<SegmentedOption<V>>;
16  value: V | null;
17  onChange: (value: V) => void;
18  // The radios' name, for a form; one is made up otherwise.
19  name?: string;
20  // The id of text that says why an option is disabled.
21  describedBy?: string;
22  size?: "sm" | "default" | "lg";
23  orientation?: "horizontal" | "vertical";
24  // Fill the row, the segments sharing it.
25  fill?: boolean;
26  // Wrong: marks the radios aria-invalid; say why in text that describedBy names.
27  invalid?: boolean;
28}
29
30export function Segmented<V extends string>({ legend, hideLegend = false, options, value, onChange, name, describedBy, size = "default", orientation = "horizontal", fill = false, invalid = false }: SegmentedProps<V>) {
31  const own = useId();
32  if ((options.length < 2 || options.length > 5)) console.warn("Segmented: use it for two to five options; a select or a combobox for more.");
33  return (
34    <fieldset className="cap-seg" aria-describedby={describedBy}>
35      <legend className={hideLegend ? "cap-sr-only" : undefined}>{legend}</legend>
36      <div className="cap-seg-options" data-size={size === "default" ? undefined : size} data-orientation={orientation === "vertical" ? "vertical" : undefined} data-fill={fill ? "" : undefined}>
37        {options.map((o) => (
38          <label key={o.value}>
39            <input type="radio" name={name ?? own} value={o.value} checked={value === o.value} disabled={o.disabled} aria-invalid={invalid || undefined} onChange={() => onChange(o.value)} /> {o.label}
40          </label>
41        ))}
42      </div>
43    </fieldset>
44  );
45}