Diwa Design System

Radio Group

A group of radio inputs that lets users select exactly one option from a set.

diwa-radio-group — Properties

Name	Type	Default	Description
`label`	`string`	`''`	Group label text shown above the options.
`description`	`string`	`''`	Supplementary description shown below the label.
`value`	`string`	`''`	Currently selected value. Synced to child items automatically.
`direction`	`'column' \| 'row'`	`'column'`	Layout direction of the radio options.
`state`	`'none' \| 'error' \| 'success'`	`'none'`	Validation state.
`message`	`string`	`''`	Feedback message shown when state is error or success.
`name`	`string`	`''`	Shared native name attribute for all radio inputs in the group.
`required`	`boolean`	`false`	Whether a selection is required.
`disabled`	`boolean`	`false`	Disables all child items.
`compact`	`boolean`	`false`	Enables dense mode with smaller radio controls for denser layouts.
`hideLabel`	`boolean`	`false`	Hides the label visually while keeping it accessible.
`theme`	`'dark' \| 'light'`	`'dark'`	Per-component theme override.

diwa-radio-group — Events

Name	Detail type	Bubbles	Description
`update`	`{ value: string }`	No	Emitted when the selected value changes.

diwa-radio-group — Slots

Name	Description
(default)	Place diwa-radio-group-item elements here.

diwa-radio-group-item — Properties

Name	Type	Default	Description
`value`	`string`	`''`	The value emitted when this item is selected.
`checked`	`boolean`	`false`	Whether this option is selected. Set automatically by the parent group.
`name`	`string`	`''`	Native name attribute. Set automatically by the parent group.
`disabled`	`boolean`	`false`	Disables this item. Also set by the parent group.
`compact`	`boolean`	`false`	Dense-mode sizing for denser layouts.
`theme`	`'dark' \| 'light'`	`'dark'`	Per-component theme override.

diwa-radio-group-item — Slots

Name	Description
(default)	Label text for this radio option.