RadioGroup — Atelier

Demo

Live PreviewReact

Free — Basic featuresPro — $9/monthEnterprise — Custom pricing

jsx

<LlmRadioGroup name="plan" value="free" onValueChange={(v) => console.log(v)}>
  <LlmRadio radioValue="free">Free</LlmRadio>
  <LlmRadio radioValue="pro">Pro</LlmRadio>
  <LlmRadio radioValue="enterprise">Enterprise</LlmRadio>
</LlmRadioGroup>

API (Angular)

Prop	Type	Default	Description
`value`	`string`	`''`	Currently selected value
`onValueChange`	`(value: string) => void`	`—`	Called when selection changes
`disabled`	`boolean`	`false`	Disables all radios in the group
`readonly`	`boolean`	`false`	Makes all radios in the group read-only
`invalid`	`boolean`	`false`	Applies invalid/error styling
`required`	`boolean`	`false`	Marks field as required
`name`	`string`	`''`	HTML name attribute (propagated to radios)

Composition parts

RadioGroup is composed from the parts below. Each part is its own component — drop the ones you don't need.

`LlmRadio`

An individual radio button. Place inside LlmRadioGroup — the group manages the checked state.

Prop	Type	Default	Description
`radioValue`	`string`	`—`	Value this radio contributes when selected (required).
`disabled`	`boolean`	`false`	Disable this radio only.

Import

import { LlmRadioGroup, LlmRadio } from '@atelier-ui/angular';

Accessibility

ARIA roleradiogroup

Key	Action
`Tab`	Move focus into the group (to the checked radio, or the first radio if none is checked).
`Arrow Up / Left`	Select the previous radio, wrapping to the last.
`Arrow Down / Right`	Select the next radio, wrapping to the first.
`Space`	Select the focused radio.

Explore in Storybook