Checkbox

A checkbox component for binary choices. Supports labels, disabled state, and different sizes.

Framework

Use on_change for requested values. The owner stores the value and calls cx.notify(). The existing on_click name remains a compatibility alias; setting either replaces the same handler, so the last call wins.

#Import

use gpui_kit::component::checkbox::Checkbox;

SlintNo Slint version of this example yet.

#Usage

#Basic

Checkbox::new("my-checkbox")
    .label("Accept terms and conditions")
    .checked(false)
    .on_change(|checked, _, _| {
        println!("Checkbox is now: {}", checked);
    })

SlintNo Slint version of this example yet.

The on_change callback is triggered when the user toggles the checkbox, receiving the new checked state.

#Default

Checked and unchecked options can be mixed freely.

Checkbox::new("updates")
    .label("Product updates")
    .checked(false)

Checkbox::new("remember")
    .label("Remember this device")
    .checked(true)

SlintNo Slint version of this example yet.

#Sizes

use gpui_kit::component::Sizable as _;

Checkbox::new("cb").text_xs().label("Extra Small")
Checkbox::new("cb").text_sm().label("Small")
Checkbox::new("cb").label("Medium") // default
Checkbox::new("cb").text_lg().label("Large")

SlintNo Slint version of this example yet.

#Controlled Checkbox

This complete Tested consumer recipe keeps the value on the rendering owner and applies the requested value from on_change before notifying:

use gpui_kit::component::checkbox::Checkbox;
use gpui_kit::{Context, IntoElement, Render, Window};

pub struct ControlledCheckbox {
    checked: bool,
}

impl ControlledCheckbox {
    pub fn new() -> Self {
        Self { checked: false }
    }

    pub fn is_checked(&self) -> bool {
        self.checked
    }
}

impl Render for ControlledCheckbox {
    fn render(&mut self, _: &mut Window, cx: &mut Context<Self>) -> impl IntoElement {
        Checkbox::new("marketing-emails")
            .label("Receive product updates")
            .checked(self.checked)
            .on_change(cx.listener(|this, checked, _, cx| {
                this.checked = *checked;
                cx.notify();
            }))
    }
}

SlintNo Slint version of this example yet.

#Disabled State

use gpui_kit::component::Disableable as _;

Checkbox::new("disabled-checked")
    .label("Checked")
    .checked(true)
    .disabled(true)

Checkbox::new("disabled-unchecked")
    .label("Unchecked")
    .checked(false)
    .disabled(true)

SlintNo Slint version of this example yet.

#Without Label

Checkbox::new("checkbox")
    .checked(true)

SlintNo Slint version of this example yet.

#Labels

Labels can wrap and include supporting content.

Checkbox::new("description")
    .label("Automatic updates")
    .child(
        div()
            .text_xs()
            .child("Download updates when the application is idle."),
    )

Checkbox::new("wrapping")
    .label("Notify me when a new device signs in to my account")

Checkbox::new("markdown")
    .label("Accept the terms")
    .child(markdown(
        "Read the [terms of service](https://github.com) before continuing.",
    ))

SlintNo Slint version of this example yet.

#Custom Tab Order

Checkbox::new("checkbox")
    .label("Custom tab order")
    .tab_index(2)
    .tab_stop(true)

SlintNo Slint version of this example yet.

#Checkbox List

v_flex()
    .gap_2()
    .child(Checkbox::new("cb1").label("Option 1").checked(true))
    .child(Checkbox::new("cb2").label("Option 2").checked(false))
    .child(Checkbox::new("cb3").label("Option 3").checked(false))

SlintNo Slint version of this example yet.

#Form Integration

struct FormView {
    agree_terms: bool,
    subscribe: bool,
}

v_flex()
    .gap_3()
    .child(
        Checkbox::new("terms")
            .label("I agree to the terms and conditions")
            .checked(self.agree_terms)
            .on_change(cx.listener(|view, checked, _, cx| {
                view.agree_terms = *checked;
                cx.notify();
            }))
    )
    .child(
        Checkbox::new("subscribe")
            .label("Subscribe to newsletter")
            .checked(self.subscribe)
            .on_change(cx.listener(|view, checked, _, cx| {
                view.subscribe = *checked;
                cx.notify();
            }))
    )

SlintNo Slint version of this example yet.

#API Reference

Checkbox

#Styling

Implements Sizable and Disableable traits:

text_xs() - Extra small text
text_sm() - Small text
text_base() - Base text (default)
text_lg() - Large text
disabled(bool) - Disabled state