Checkbox

A control that lets the user toggle between checked and unchecked states.

When to use

• Selecting one or more options from a set.
• Accepting terms and conditions.

API

Checkbox::new(id)

Creates a checkbox with the given element ID.

Method	Type	Default	Description
.checked(checked)	bool	false	Whether the checkbox is checked
.focus_handle(&handle)	&FocusHandle	—	Associate a focus handle (enables keyboard toggling with Space/Enter)
.on_click(fn)	Fn(&ClickEvent, &mut Window, &mut App)	—	Click/toggle handler

Usage

use gpui::{Component, div, prelude::*};
use components::Checkbox;

div().child(Component::new(
    Checkbox::new("terms")
        .checked(this.checked)
        .focus_handle(&this.focus_handle)
        .on_click(cx.listener(|this, _, _, cx| {
            this.checked = !this.checked;
            cx.notify();
        })),
))

Copy the source

crates/components/src/checkbox.rs — self-contained, stateless, and free to modify.