HeroGPUI

Forms

Checkbox

Select one or more values from a set.

Rust
1use herogpui::components::checkbox::Checkbox;

Usage

Label content uses 14px medium text with 20px lines, independent of surrounding line height.

Rust
1use herogpui::prelude::{Checkbox, FieldVariant};
2use gpui::prelude::*;
3use gpui::px;
4
5gpui::div()
6    .flex()
7    .flex_col()
8    .items_start()
9    .gap(px(12.))
10    .children(vec![
11        Checkbox::new("checkbox-1")
12            .is_selected(basic)
13            .label(gpui::div().child("Accept the terms"))
14            .on_change(bool_cb(cx.listener(|this, v: &bool, _, cx| {
15                this.cb_basic = *v;
16                cx.notify();
17            })))
18            .into_any_element(),
19        Checkbox::new("checkbox-2")
20            .is_selected(colored)
21            .variant(FieldVariant::Secondary)
22            .label(gpui::div().child("Subscribe to updates"))
23            .on_change(bool_cb(cx.listener(|this, v: &bool, _, cx| {
24                this.cb_color = *v;
25                cx.notify();
26            })))
27            .into_any_element(),
28    ])

Live HeroGPUI compiled to WebAssembly. Select any example without loading another WASM instance.

Anatomy

Rust types

Checkbox

Checkbox is assembled from these builders. The API reference lists each one.

Customization

Appearance builders and theme tokens Checkbox uses.

Styling

Checkbox styling
StyleDescription
text_size + line_heightLabel content uses 14px medium text with 20px lines, independent of surrounding line height.
Checkbox::render flex_col + items_start + gap(px(4.))Field root and sibling help/error layout.
row gap(px(12.)) + text_size(px(14.)) + FontWeight::MEDIUMClickable label row.
16px + mark_radius + field background/shadowPrimary selection box metrics and field chrome.
12px checkmark or dashIndicator box and glyph size.
selected accent fill swaps immediatelySelected background reveal.
FieldVariant::Secondary + colors.default.colorLower-emphasis surface variant.
layout.disabled_opacityDisabled opacity and cursor treatment.
danger role + unchecked borderInvalid selected and unselected treatments.

API reference

Builders

Checkbox builders
BuilderTypeDefaultDescription
is_selected(bool)boolfalseWhether the checkbox is checked (controlled).
default_selected(bool)boolfalseWhether the checkbox is checked initially (uncontrolled).
is_indeterminate(bool)boolfalseWhether the checkbox displays the indeterminate mark.
is_disabled(bool)boolfalseDisables interaction, focus and form submission.
is_invalid(bool)boolfalseMarks the checkbox invalid.
is_read_only(bool)boolfalseKeeps the checkbox focusable while preventing selection changes.
is_required(bool)boolfalseRequires the checkbox to be selected for native validation.
validate(callback)Fn(value: bool) -> ValidationError | true | null | undefined—Custom validation function.
validation_behavior(ValidationBehavior)ValidationBehaviorValidationBehavior::NativeWhether invalid state blocks form submission or is announced only.
variant(FieldVariant)FieldVariantFieldVariant::PrimaryPrimary field chrome or the flat surface treatment.
name(value)string—Submitted form field name.
value(value)string—Submitted value when selected.
on_change(callback)Fn(isSelected: bool) -> ()—Handler called when selection changes.
label(element) / content(|state: CheckboxState| ...)AnyElement | CheckboxFieldrender closure / |state: CheckboxState| ...—Static children compose or a render function receives the live field state for the clickable content; Description and FieldError remain static sibling builders.
label(element)AnyElement | CheckboxButtonrender closure—Clickable control and label content; static content is composed by the monolithic row.
content(|state: CheckboxState| state.is_selected)|state: CheckboxState| state.is_selected—Current selected state supplied to root content and the indicator renderer.
content(|state: CheckboxState| state.is_indeterminate)|state: CheckboxState| state.is_indeterminate—Current indeterminate state supplied to root content and the indicator renderer.
content(|state: CheckboxState| state.is_disabled)|state: CheckboxState| state.is_disabled—Current disabled state supplied to root content and the indicator renderer.
content(|state: CheckboxState| state.is_read_only)|state: CheckboxState| state.is_read_only—Current read-only state supplied to root content and the indicator renderer.
content(|state: CheckboxState| state.is_invalid)|state: CheckboxState| state.is_invalid—Current invalid state supplied to root content and the indicator renderer.
content(|state: CheckboxState| state.is_required)|state: CheckboxState| state.is_required—Current required state supplied to root content and the indicator renderer.

Parts

Checkbox parts
PartDescription
CheckboxField root that owns value, validation, focus and form state.
CheckboxClickable row containing the control and label.
CheckboxFocusable 16px selection box.
CheckboxCheckmark, indeterminate mark or caller-drawn indicator.
CheckboxOptional field help text rendered as an indented sibling below the content row.
CheckboxValidation message rendered as an indented sibling below the content row.

States

Checkbox states
BuilderStateDescription
checked + accent controlSelectedAccent fill and checkmark are visible.
is_indeterminate + dashIndeterminateAccent fill and dash indicator are visible.
validation::resolve + danger roleInvalidDanger treatment reflects controlled, server or custom validation.
boxel.hoverHoveredActive control uses the accent hover fill.
tab_stop_handle + with_focus_ringFocus visibleKeyboard focus rings the control.
is_disabled + disabled_opacityDisabledControl is dimmed, inert and outside the tab order.
on_click keyboard/pointer arbitrationPressedPress activation toggles on Space or pointer release; declares no additional pressed rule body.
is_read_only gates activation onlyRead onlyControl remains focusable but selection cannot change.
Checkbox GroupFieldsetLabel & MessagesFormInputInput GroupInput OTPNumber FieldRadio GroupSearch FieldText AreaText Field