form fields

<tc-radio-group>

Mutually exclusive choices rendered from an options array. Form-associated and keyboard-navigable.

import "@ra9/tan-compose-kit/radio-group"

Props

Name	Type	Default	Description
`value`	`string`	`""`	Currently-selected option value.
`name`	`string`	`""`	Field name for form submission. Shared across the radio set.
`options`	`Array<{ value: string; label: string; disabled?: boolean }>`	`[]`	Options to render. JSON attribute or JS property.
`label`	`string`	`""`	Group label rendered as a `<legend>`.
`helper`	`string`	`""`	Small helper text below the group.
`error`	`string`	`""`	Error message; the radiogroup gets `aria-invalid="true"`.
`layout`	`"vertical" \| "horizontal"`	`"vertical"`	Stack the options vertically or wrap them horizontally.
`disabled`	`boolean`	`false`	Disables every radio at once. Reflects to the host.
`required`	`boolean`	`false`	Required for form validation. Reflects to the host.

Events

Event	Detail	When
`tc-change`	`{ value: string }`	Fires when the user selects a new option.

CSS variables

Variable	Default	Description
`--tc-input-fg`	`var(--tc-color-ink, #14171f)`	Legend + label color.
`--tc-input-border`	`var(--tc-color-rule-strong, #d9cfb8)`	Radio circle border (via native `accent-color`).
`--tc-input-error`	`var(--tc-color-danger, #b3261e)`	Error message color.
`--tc-input-helper`	`var(--tc-color-ink-muted, #6b7280)`	Helper text color.
`--tc-input-font`	`var(--tc-font-sans, …)`	Font family.
`--tc-radio-accent`	`var(--tc-color-accent, #a16939)`	`accent-color` of the selected radio.

Examples

Basic usage

<tc-radio-group label="Shipping speed" name="speed" value="standard" options='[ {"value":"standard","label":"Standard (5–7 days)"}, {"value":"express","label":"Express (2 days)"}, {"value":"overnight","label":"Overnight"} ]' ></tc-radio-group>

Horizontal layout

<tc-radio-group label="Theme" layout="horizontal" options='[…]' ></tc-radio-group>

Disabled options

Error state

In a form

<form> <tc-radio-group name="plan" label="Plan" required options='[…]'></tc-radio-group> <tc-button type="submit">Continue</tc-button> </form>

Theming

<tc-radio-group style="--tc-radio-accent: #3a5b8c;" label="Blue radios" options='[…]' ></tc-radio-group>

Accessibility

Renders a real <fieldset> + <legend> so the group label is announced before each option.
The container has role="radiogroup" and aria-invalid reflects the error state.
Each option is a real <input type="radio"> — full native keyboard support (arrows move between options, Tab moves out of the group).
Disabled options can't be focused or selected.

← All components