Components

Radio Group

One choice from a visible set, with roving focus, arrow-key selection, and native form values.

Choices

Use radio choices when all available options should remain visible. Select and Combobox are better when the set is long or searchable.

Private Internal Public

tsx

import { RadioGroup } from "@karnstack/dowel";

<RadioGroup.Root
  aria-label="Repository visibility"
  name="visibility"
  defaultValue="private"
>
  <label><RadioGroup.Item value="private" /> Private</label>
  <label><RadioGroup.Item value="internal" /> Internal</label>
  <label><RadioGroup.Item value="public" /> Public</label>
</RadioGroup.Root>

Layout

Vertical is the default for settings and forms. Horizontal is for a short set whose labels remain clear at narrow widths.

Merge Fast-forward

tsx

<RadioGroup.Root
  aria-label="Merge strategy"
  orientation="horizontal"
  defaultValue="merge"
>
  <label><RadioGroup.Item value="merge" /> Merge</label>
  <label><RadioGroup.Item value="fast-forward" /> Fast-forward</label>
</RadioGroup.Root>

Keyboard

Tab enters the selected option. Arrow keys move focus and selection. Space selects the focused option. Disabled choices are skipped.