Radio

Fission

Product

▾

Setup

›

›

Radio is the one-of-many choice control.

Use it when exactly one option in a group should be active at a time, such as choosing a plan, a density mode, or a sort order that should stay fully visible on screen. The widget itself only knows whether this one item is selected. Your app state decides which option in the group is the winner.

Example

use fission::prelude::*;
let widgets = view
.state
.shipping_methods
.iter()
.enumerate()
.map(|(index, label)| {
    Radio {
        checked: view.state().selected_shipping_index == index,
        label: Some(label.clone()),
        on_select: Some(ActionEnvelope {
            id: set_shipping_method_id,
            payload: serde_json::to_vec(&SetShippingMethod(index)).unwrap(),
        }),
        ..Default::default()
    }
    .into()
})
.collect::<Vec<_>>();

Every radio in the group emits a concrete selection action. The reducer stores the chosen index, and the next conversion marks exactly one radio as checked.

Field table

Field	Type	Meaning	Notes / default behavior
id	Option<WidgetId>	Stable widget identity.	Defaults to None.
checked	bool	Whether this option is the selected one.	Defaults to false.
on_select	Option<ActionEnvelope>	Action fired when the radio is chosen.	Defaults to None.
label	Option<String>	Visible text shown next to the radio indicator.	Defaults to None.

Group behavior and accessibility

The important product rule is not inside the widget. It is in the reducer: only one item in the group should end up selected after an action. That is why radios pair naturally with an enum or selected index in app state.

One implementation detail is worth knowing: the checked-in visual widget behaves like a radio, but its lowered semantics currently reuse the checkbox role internally. The interaction model still works, but if assistive-technology role precision matters on your target, validate it carefully.

Specific advice

Use radios only when the available choices are few enough to stay visible together. Once the list becomes long or collapsible, a Select or Combobox usually becomes easier to use.

Production checklist

For Radio, review the fields that change behavior before treating the widget as finished: id, checked, on_select, label. The goal is to make the product rule visible in state and actions, not hidden inside ad-hoc construction code.

•

Bind on_select to explicit reducer actions and test that the reducer handles unavailable, duplicate, or invalid input safely.

•

Set id only when identity must be stable across filtering, reordering, diagnostics, or tests; otherwise let Fission derive identity from structure.

•

Check the semantics tree for the user-facing label or role that makes this widget understandable without relying only on pixels.

•

Add at least one component or harness test that confirms the visible text, semantic role, action dispatch, and layout constraint that matter for this widget in context.

If a screen starts repeating the same Radio setup, extract a named component around this widget. That keeps the reference API small while making product code easier to read and safer for generated code to copy.

Checkbox, Switch, SegmentedControl, and Select.