Radio Group — HeroGPUI

Usage

Option content uses 14px medium text with 20px lines, independent of surrounding line height.

Live example

Rust

1use herogpui::prelude::RadioGroup;
2
3RadioGroup::new("radio-group", plans())
4    .default_value("Free")
5    // v3's own example opens with the group's `<Label>` and
6    // `<Description>`, then a `<Description>` per `<Radio>`.
7    .label("Plan selection")
8    .description("Choose the plan that suits you best")
9    .descriptions([
10        Some("Includes 100 messages per month"),
11        Some("Includes 200 messages per month"),
12        None,
13    ])

Live HeroGPUI compiled to WebAssembly. Select any example without loading another WASM instance.

Anatomy

Rust types

RadioGroupRadioOption

Radio Group is assembled from these builders. The API reference lists each one.

Customization

Appearance builders and theme tokens Radio Group uses.

Styling

Radio Group styling
Style	Description
`text_size + line_height`	Option content uses 14px medium text with 20px lines, independent of surrounding line height.
`RadioGroup::render root flex_col + gap(px(4.))`	Group root around label, description, options and field error.
`vertical group gap(px(16.))`	Sixteen-pixel vertical option spacing.
`flex + items_center + flex_wrap + gap(px(16.))`	Wrapping horizontal option row.
`per-option flex_col + gap(px(4.))`	Option root with sibling description.
`pl(circle + gap) + Description`	Help text aligned under the label at 28px logical-start padding.
`gap(px(12.)) + text_size(px(14.)) + FontWeight::MEDIUM`	Clickable control and label row.
`16px + key_radius + field background/shadow`	Primary selection box and field chrome.
`dot px(6.) / pressed px(8.)`	Built-in foreground dot geometry.
`FieldVariant::Secondary + colors.default.color`	Lower-emphasis surface variant.

API reference

Builders

Radio Group builders
Builder	Type	Default	Description
`value(value)`	`string`	—	Current selected value (controlled).
`default_value(value)`	`string`	—	Initial selected value (uncontrolled).
`on_change(callback)`	`Fn(value: string) -> ()`	—	Handler called with the selected option value.
`is_disabled(bool)`	`bool`	`false`	Disables every option and removes the group from the tab order.
`is_required(bool)`	`bool`	`false`	Requires one selected value for form submission.
`is_read_only(bool)`	`bool`	`false`	Keeps roving focus active while preventing value changes.
`is_invalid(bool)`	`bool`	`false`	Marks the group and each radio control invalid.
`variant(FieldVariant)`	`FieldVariant`	`FieldVariant::Primary`	Primary field chrome or the flat surface treatment.
`name(value)`	`string`	—	Shared submitted name for the selected radio value.
`orientation(Orientation)`	`Orientation`	`Orientation::Vertical`	Layout and arrow-key orientation.
`new(id, options)`	`id, options`	—	Compound label, description, radios and field error; root render props are not exposed as one closure.
`option_content(render)`	`AnyElement \| RadioFieldrender closure`	—	Static option labels and state-driven content are supported, but arbitrary part ordering is not.
`indicator(render)`	`AnyElement`	—	Custom content inside the control wrapper.
`option_content(render) + indicator(render)`	`render) + indicator(render`	—	Current option selection supplied to a custom renderer.

Parts

Radio Group parts
Part	Description
`RadioGroup`	Single-selection, form, validation and roving-focus owner.
`RadioGroup`	Optional group label with required and invalid state.
`RadioGroup`	Group-level or per-option help text.
`RadioOption`	One option field with its own value and disabled state.
`RadioGroup`	Clickable row containing the control and label; arbitrary child ordering is not exposed.
`RadioGroup`	Focusable 16px selection control.
`RadioGroup`	Built-in selected dot or caller-rendered indicator.
`RadioGroup`	Group-level or per-radio validation text outside clickable content.

States

Radio Group states
Builder	State	Description
`selected == Some(index)`	`Selected`	Accent control and foreground indicator show the chosen option.
`interaction feeds the pressed dot only`	`Hovered`	Changes the unselected indicator fill and field border on hover; does not reproduce those hover layers.
`tab_stop_handle + with_focus_ring`	`Focus visible`	The roving keyboard stop rings the current control.
`anim::pressed + interaction is_pressed`	`Pressed`	The control shrinks to 95%, the selected fill hovers and the dot grows from 6px to 8px.
`RadioGroup::is_disabled`	`Disabled group`	Every option is dimmed, inert and absent from the tab order.
`RadioOption::is_disabled`	`Disabled option`	One option is dimmed and skipped by pointer and arrow navigation.
`is_read_only gates selection after cursor movement`	`Read only`	Arrows move focus while selection remains unchanged.
`self.is_invalid \|\| group error \|\| option error`	`Invalid`	Group invalid state outlines every control; a per-radio error outlines only its own control.
`Orientation::Vertical`	`Vertical`	Options stack and all four radio arrows rove through them.
`Orientation::Horizontal`	`Horizontal`	Options wrap in a row while radio-group arrows retain four-arrow contract.

Checkbox Checkbox Group Fieldset Label & Messages Form Input Input Group Input OTP Number Field Search Field Text Area Text Field