RadioGroup

A group of radio buttons in a fieldset with a legend, vertical or horizontal layout, and standard field accessibility.

Import

import { RadioGroup } from "@hyzer-labs/ui"

Demo

Disc stability

Understable

Stable

Overstable

Roller-only (unavailable)

const stabilities: FormOption[] = [
	{ value: 'understable', label: 'Understable' },
	{ value: 'stable', label: 'Stable' },
	{ value: 'overstable', label: 'Overstable' },
	{ value: 'flippy', label: 'Roller-only (unavailable)', disabled: true }
];

<RadioGroup name="stability" label="Disc stability" options={stabilities} bind:value={stability} />

orientation="horizontal" lays the options out in a wrapping row. It suits two or three short labels.

Tee position

Short

Long

<RadioGroup name="tees" label="Tee position" options={teePositions} orientation="horizontal" />

description and error are announced with the group: both chain into aria-describedby on the radiogroup container. Error and disabled are also field states. The fieldset's data-state reflects them, and error wins.

<RadioGroup
	name="division"
	label="Division"
	options={divisions}
	description="You can move up a division later, but not down."
/>

<RadioGroup name="tees" label="Tee position" options={teePositions} error="Pick a tee position." />
<RadioGroup name="division2" label="Division" options={divisions} required />
<RadioGroup name="closed" label="Tee position (course closed)" options={teePositions} disabled />

Props

Name	Type	Default	Note
`name`	`string`	`—`	Required. Shared by every radio in the group.
`label`	`string`	`—`	Required. Rendered as the fieldset legend; sr-only with hideLabel.
`options`	`FormOption[]`	`—`	Required. See FormOption below.
`value`	`string`	`''`	Bindable. The selected option value.
`orientation`	`'horizontal' \| 'vertical'`	`'vertical'`
`description`	`string`	`—`	Help text below the legend.
`error`	`string`	`—`	Inline error message; sets the error state.
`required`	`boolean`	`false`
`disabled`	`boolean`	`false`	Disables the whole group.
`hideLabel`	`boolean`	`false`
`class`	`string`	`—`	Merged after the hz-field hz-field--radio-group classes.

`FormOption`

Name	Type	Default	Note
`value`	`string`	`—`	Required.
`label`	`string`	`—`	Required.
`disabled`	`boolean`	`—`	Disables only this option.

Theme hooks

What this component promises your CSS. The reference theme styles exactly these — from @layer hz-theme, so your unlayered rules win. See Styling Components for the how.

Root class: .hz-field hz-field--radio-group

Data attributes

Hook	Values	Styles
`data-state`	`'default' \| 'error' \| 'disabled'`	The universal field state hook, on the root. Precedence is fixed: error beats disabled.
`data-orientation`	`'horizontal' \| 'vertical'`	Default vertical. The root is a fieldset and the label is its legend.

Part classes

Hook	Values	Styles
`.hz-field-label`	`child element`	The label.
`.hz-field-required`	`child element`	The required marker.
`.hz-field-description`	`child element`	The hint text.
`.hz-field-error`	`child element`	The error message.
`.hz-radio-options`	`child element`	The radiogroup container.
`.hz-radio-option`	`child element`	One option row.

The group is a <fieldset> whose label renders as the <legend>. With hideLabel, the legend stays in the DOM as screen-reader-only text. Each radio has its own label.

The options sit in an inner role="radiogroup" container that carries aria-describedby (description first, then error), aria-invalid on error, and aria-required when required.

Arrow-key movement between radios is native browser behavior.