Component Checkbox

Checkbox

A boolean input.

Checkbox can be used in two ways:

• Controlled: you own checked and update it from on_toggle.
• Uncontrolled: omit on_toggle and let the checkbox manage its own internal state.

Example

use gpui::ElementId;
use yororen_ui::component::checkbox;

let view = checkbox()
    .key(("settings", "auto-save"))
    .checked(true)
    .on_toggle(|checked, _ev: Option<&gpui::ClickEvent>, _window, _cx| {
        // ...
    });

When to use

• Settings toggles where “on/off” is a simple boolean
• Multi-select lists

API

• checkbox(): constructor
• id(...) / key(...): stable identity
• checked(bool): set current value
• disabled(bool): disable interaction + apply disabled styles
• tone(Hsla): override the checked accent color
• on_toggle(|checked, ev: Option<&gpui::ClickEvent>, window, cx| ...): fired on click, ev is Some(event) for user clicks, None for programmatic changes

Interaction and behavior

• If on_toggle is not provided, Checkbox uses internal keyed state and toggles itself.
• If on_toggle is provided, Checkbox becomes controlled and calls on_toggle(!checked, ...).

Defaults

• Size: 18x18
• Border: theme.border.default (unchecked), accent when checked
• Background:
  • unchecked: theme.surface.base
  • checked: accent color (tone(...) or theme.action.primary.bg)

Notes

• Checkbox is focusable and shows a focus-visible border.

Example: Uncontrolled checkbox

When you omit on_toggle, Checkbox manages its own internal state (keyed by id/key).

use yororen_ui::component::checkbox;

let view = checkbox().key(("demo", "auto-save")).checked(true);

Example: Custom accent tone

use gpui::rgb;
use yororen_ui::component::checkbox;

let view = checkbox().checked(true).tone(rgb(0x2F63FF));