Radio Group

Choose exactly one option from a small set (radio, button, pill, or tile variants).

HTML tag: c-eaa5532f38b414245a5d64b15e7dc229a

When to use

pick one of a few labeled options
segmented button or pill switcher
mutually exclusive choices (not dropdown)

Props

Prop	Type	Default
`value`	String
`options`	Array	“
`orientation`	String	`horizontal`
`variant`	String	`radio`
`label`	String
`readonly`	Boolean	`false`
`button_checked_tone`	String	`primary`
`button_unchecked_tone`	String	`neutral`
`disabled`	Boolean	`false`
`required`	Boolean
`name`	String
`size`	String	`md`
`label_position`	String	`stacked`
`helper_text`	String
`invalid`	Boolean	`false`
`reserve_item_icon_space`	Boolean
`equalize_item_heights`	Boolean	`true`
`icon_size`	String	`md`
`data_source__thing_id`	String
`data_source_input_params`	Object	`[object Object]`
`display_path`	String	`label`
`value_path`	String	`value`
`icon_path`	String
`loading`	Boolean
`loading_text`	String
`error_text`	String
`button_checked_appearance`	String	`outline`
`button_unchecked_appearance`	String	`ghost`
`button_tone`	String	`primary`

Rules

Provide .options array; bind .value to selected option value (string).
Prefer change or value-changed with detail.value.
variant: radio | button | pill | tile for presentation.
Optional data_source__thing_id + paths for remote options.

Events

Event	Detail
`value-changed`	value: String
`change`	value: String, trigger: user
`activechange`	index: Number
`source-data-loaded`	value: Object
`source-data-load-failed`	value: Object
`source-record-loaded`	value: Object
`source-record-load-failed`	value: Object

What to avoid

Do not use for multi-select (ab-select with multiple). Do not use for true/false only (ab-checkbox).

Example

<c-eaa5532f38b414245a5d64b15e7dc229a .label=${'Status'} .options=${[{ value: 'a', label: 'Active' }, { value: 'b', label: 'Draft' }]} .value=${status} @change=${e => status = e.detail.value}></c-eaa5532f38b414245a5d64b15e7dc229a>