Skip to content
QuickGUI

Checkbox

A binary or indeterminate choice with a separately styled indicator.

Loading interactive demo…

#Import

Import Checkbox from quickgui.

use quickgui::*;

#Usage

let checkbox = Checkbox::new(checked);
checkbox
    .root().flex_row().items_center().gap(8.0).on_click(toggle)
    .child(checkbox.indicator_with(div().size(16.0, 16.0).rounded(4.0)))
    .child(text("Remember me"))

#Anatomy

  • Checkbox::root
  • Checkbox::indicator

#API reference

Expand an entry for its description and complete signature. A dash means no declaration default is documented.

Checkbox

View source
pub fn new(state: impl Into<ToggleState>) -> Self
parentpub fn parent(children: impl IntoIterator<Item = bool>) -> Self—

Derive a parent checkbox from the checked values of the boxes it governs. This is Base UI's `parent` checkbox: every child checked reports on, none reports off, and a mix reports mixed. QuickGUI keeps no child registry — the application passes the values it is already rendering — so the derivation stays a pure function of the caller's own data. ``` use quickgui::{Checkbox, ToggleState}; assert_eq!(Checkbox::parent([true, true]).state(), ToggleState::On); assert_eq!(Checkbox::parent([false, false]).state(), ToggleState::Off); assert_eq!(Checkbox::parent([true, false]).state(), ToggleState::Mixed); // An empty group is unchecked rather than mixed. assert_eq!(Checkbox::parent([]).state(), ToggleState::Off); ```

pub fn parent(children: impl IntoIterator<Item = bool>) -> Self
View source
read_onlypub const fn read_only(mut self, read_only: bool) -> Self—

Show a value the user may read but not change, Base UI's `readOnly`. Unlike a disabled checkbox, a read-only one stays focusable and stays in the Tab sequence. QuickGUI projects the state and refuses the transition through [`Self::next_state`]; the application's own listener asks for that transition rather than toggling blindly.

pub const fn read_only(mut self, read_only: bool) -> Self
View source
statepub const fn state(self) -> ToggleState—

Configures state for this part.

pub const fn state(self) -> ToggleState
View source
is_read_onlypub const fn is_read_only(self) -> bool—

Configures is read only for this part.

pub const fn is_read_only(self) -> bool
View source
next_statepub const fn next_state(self) -> Option<ToggleState>—

The state an activation moves this checkbox to, or `None` when it refuses. Mixed and off both move to on, and on moves to off, which is the web's tri-state contract. A read-only checkbox returns `None`, so a click listener that asks before writing cannot change a value the control is refusing.

pub const fn next_state(self) -> Option<ToggleState>
View source
parent_next_checkedpub const fn parent_next_checked(self) -> Option<bool>—

The checked value activating a parent checkbox moves its whole group to. A partially or fully unchecked parent checks everything; a fully checked one clears it. Returns `None` when the parent is read-only.

pub const fn parent_next_checked(self) -> Option<bool>
View source

Checkbox::root_with

View source
pub fn root_with(self, root: Element) -> Element

Decorate an application-owned root without adding layout or appearance.

Checkbox::root

View source
pub fn root(self) -> Element

Create the unstyled root part. Use [`Self::root_with`] to supply an existing element.

Checkbox::indicator_with

View source
pub fn indicator_with(self, indicator: Element) -> Element

Hide an application-owned visual indicator from the accessible name.

Checkbox::indicator

View source
pub fn indicator(self) -> Element

Create the unstyled indicator part. Use [`Self::indicator_with`] to supply an existing element.

checkbox

View source
pub fn checkbox(state: impl Into<ToggleState>) -> Element

Create an unstyled controlled checkbox root. This shorthand is equivalent to `Checkbox::new(state).root_with(div())`. Use [`Checkbox`] directly when composing a separate indicator part.