Components / forms

RadioGroup

Exclusive One-of-Many, Round Amber Dot

01 Preview

02 Usage

Single-select control. Matches Checkbox geometry but with a round dot to read as exclusive.

<RadioGroup
  name="fmt"
  defaultValue="pdf"
  options={[
    { value: 'pdf', label: 'PDF' },
    { value: 'html', label: 'HTML' },
    { value: 'md', label: 'Markdown' },
  ]}
  onChange={setFmt}
/>

Wrap in a <Field label="…"> for a captioned form row.

hint and error work as they do on Field — the error replaces the hint, announces via role="alert" and marks the group aria-invalid. Always give the group a name, either with aria-label or by nesting it in a Field.

Controlled: pass value + onChange. Uncontrolled: defaultValue only.

03 Props

PropTypeDefaultNotes
options* RadioOption[] — —
name string — Shared input name. Auto-generated if omitted.
value string — Selected value (controlled).
defaultValue string — Initial selected value (uncontrolled).
onChange (value: string) => void — Fires with the newly selected value.
hint React.ReactNode — Helper text below the group.
aria-label string — Accessible name for the group.
aria-labelledby string — Id of an element labelling the group.

Also accepts every attribute of Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange' | 'defaultValue'> — they are spread onto the root element. className is merged, not replaced, and ref is forwarded.

04 RadioOption

PropTypeDefaultNotes
value* string — —
label* React.ReactNode — —

05 Import

import { RadioGroup } from '@denizarsan/darsan.design';
import '@denizarsan/darsan.design/styles.css';