Skip to main content

radio_group

Function radio_group 

Source
pub fn radio_group() -> RadioGroupBuilder
Expand description

§radio_group

Provide directional keyboard navigation for a single-choice group of radio buttons.

§Usage

Use around related radio buttons so arrow keys move and select within the group while pointer selection waits for a completed click. Tab enters at the selected enabled choice, or the first available choice, and then leaves the whole group. Omit selected on every choice for automatic mutual exclusion, or control every choice from the same application selection value.

§Parameters

  • modifier — modifier chain applied to the group container.
  • orientation — physical direction announced to assistive technology; defaults to vertical. All four arrows navigate in declaration order.
  • wrap — whether arrow traversal wraps at either end; defaults to true.
  • accessibility_label — optional name for the related choices.
  • accessibility_description — optional additional group instructions.
  • content — content receiving the selection handle for its choices.

§Examples

use tessera_components::radio_button::{radio_button, radio_group};
use tessera_ui::{remember, tessera};

#[tessera]
fn radio_group_demo() {
    let selected = remember(|| 0usize);
    radio_group().content(move |group| {
        radio_button()
            .group(group)
            .selected(selected.get() == 0)
            .on_select({ move |_| selected.set(0) });
        radio_button()
            .group(group)
            .selected(selected.get() == 1)
            .on_select({ move |_| selected.set(1) });
    });
}