RadioGroup

import { RadioGroup } from '@tangible/ui';

Interactive docs and examples: RadioGroup in Storybook.

RadioGroup props

Prop	Type	Default
`children`	`ReactNode`
`aria-describedby?`	`string`
`aria-invalid?`	`"false" \| "true" \| boolean`
`aria-label?`	`string`
`aria-labelledby?`	`string`
`aria-required?`	`"false" \| "true" \| boolean`
`className?`	`string`
`defaultValue?`	`OptionValue`
`disabled?`	`boolean`	`false`
`loop?`	`boolean`	`true`
`onValueChange?`	`(value: OptionValue) => void`
`orientation?`	`"horizontal" \| "vertical"`	`'vertical'`
`value?`	`OptionValue`

Also exported as Radio.

Prop	Type	Default	Description
`value`	`OptionValue`
`aria-label?`	`string`
`aria-labelledby?`	`string`
`children?`	`ReactNode`
`className?`	`string`
`description?`	`string`		Description text displayed below the label.
`disabled?`	`boolean`	`false`
`label?`	`ReactNode`

Also accepts the standard attributes of HTMLAttributes (data-*, aria-*, event handlers), passed to the element it renders.

With Field: RadioGroup inside a Field — Field.Label provides the group name via aria-labelledby (injected by Field.Control). Helper text linked via aria-describedby. Note as="span": a radiogroup is a <div>, not a labelable element, so a <label for> would be invalid HTML — the span carries the same id and the aria wiring is unchanged.
With Field Error: Error state — Field.Control injects aria-invalid and aria-describedby (pointing to the error). Field.Label provides the group name.
With Descriptions: Each radio option can include a description prop for supplementary text displayed below the label. The description is linked to the radio button via aria-describedby.
With Nested Controls: Radio options accept children for nested interactive content — e.g. a number input that appears when a particular option is selected.

Arrow keys on the nested input are not intercepted by the radio group, so <input type="number"> spinners work as expected.
Custom Size: Component API tokens control sizing and spacing. Here --tui-radio-size scales the indicator and --tui-radio-group-gap controls item spacing. The body indent adjusts automatically from --tui-radio-size.

Other stories: Basic, Horizontal, No Default Selection, Disabled, Disabled Option, Controlled, Dot Notation (interactive page).

Read via fallback, never declared. Set one on an ancestor to restyle every instance under it.