bezel

Components / Selection & input

Checkbox & radio

Markdown crates/ui/src/widgets/controls.rs docs.rs

use ui::{focus, widgets::Controls};

theme.checkbox(self.checked[index])
theme.radio_button(self.radio == index)

Radios are a set, so the caller owns which index is on. Nothing here groups them, because a group would have to own the answer.

Keyboard

focus::focusable(&theme, &self.checkboxes[index], theme.checkbox(checked))
    .id("checkbox-0")
    .on_click(cx.listener(..))
    .on_action(cx.listener(|view, _: &focus::Activate, _, cx| ..))

API

pub trait Controls: ThemeExt {
    fn checkbox(&self, checked: bool) -> Div;
    fn radio_button(&self, selected: bool) -> Div;

    // ...
}

/// Tab order, focus ring, and `enter`/`space`.
pub fn focusable(theme: &Theme, handle: &FocusHandle, el: Div) -> Div;

The click and the key press are wired separately on purpose: only the caller knows what the press means. Every control keeps a 1px border even where it paints nothing in it — gpui sizes border-box, so a border appearing only on focus would move the tick by a pixel as you tab onto it.

Checkbox & radio