Checkbox

A control that allows the user to toggle between checked and not checked.

Accept terms and conditions

By clicking this checkbox, you agree to the terms.

Enable notifications

You can enable or disable notifications at any time.

use leptos::prelude::*;
use singlestage::*;

#[component]
pub fn CheckboxExample() -> impl IntoView {
    view! {
        <FieldGroup class="max-w-sm">
            <Field orientation="horizontal">
                <Checkbox>"Accept terms and conditions"</Checkbox>
            </Field>

            <Field orientation="horizontal">
                <Checkbox checked=true />
                <FieldContent>
                    <FieldLabel>"Accept terms and conditions"</FieldLabel>
                    <FieldDescription>
                        "By clicking this checkbox, you agree to the terms."
                    </FieldDescription>
                </FieldContent>
            </Field>

            <Field orientation="horizontal" disabled=true>
                <Checkbox>"Enable notifications"</Checkbox>
            </Field>

            <FieldLabel>
                <Field orientation="horizontal">
                    <Checkbox />
                    <FieldContent>
                        <FieldTitle>"Enable notifications"</FieldTitle>
                        <FieldDescription>
                            "You can enable or disable notifications at any time."
                        </FieldDescription>
                    </FieldContent>
                </Field>
            </FieldLabel>
        </FieldGroup>
    }
}

Invalid State

Set invalid on either the Checkbox or a Field wrapper to display an invalid state.

Accept terms and conditions

use leptos::prelude::*;
use singlestage::*;

#[component]
pub fn CheckboxInvalidExample() -> impl IntoView {
    view! {
        <FieldGroup class="mx-auto w-56">
            <Checkbox invalid=true>"Accept terms and conditions"</Checkbox>

            // Checkboxes defer to their outer-most parent's invalid state
            <Field orientation="horizontal" invalid=true>
                <Checkbox>"Accept terms and conditions"</Checkbox>
            </Field>

            <CheckboxGroup invalid=true>
                <Field orientation="horizontal">
                    <Checkbox>"Accept terms and conditions"</Checkbox>
                </Field>

                <Checkbox>"Accept terms and conditions"</Checkbox>
            </CheckboxGroup>
        </FieldGroup>
    }
}

Basic

Pair the checkbox with Field and Label for proper layout and labeling.

Accept terms and conditions

use leptos::prelude::*;
use singlestage::*;

#[component]
pub fn CheckboxBasicExample() -> impl IntoView {
    view! {
        <FieldGroup class="w-56">
            <Field orientation="horizontal">
                <Checkbox>"Accept terms and conditions"</Checkbox>
            </Field>

            <Field orientation="horizontal">
                <Checkbox />
                <FieldLabel>"Accept terms and conditions"</FieldLabel>
            </Field>

            <Field orientation="horizontal">
                <Checkbox id="terms-checkbox-basic" />
                <FieldLabel label_for="terms-checkbox-basic">
                    "Accept terms and conditions"
                </FieldLabel>
            </Field>
        </FieldGroup>
    }
}

Description

Use FieldContent and FieldDescription for helper text.

Accept terms and conditions

By clicking this checkbox, you agree to the terms and conditions.

use leptos::prelude::*;
use singlestage::*;

#[component]
pub fn CheckboxDescriptionExample() -> impl IntoView {
    view! {
        <FieldGroup class="w-72">
            <Field orientation="horizontal">
                <Checkbox id="terms-checkbox-desc" checked=true />
                <FieldContent>
                    <FieldLabel label_for="terms-checkbox-desc">
                        "Accept terms and conditions"
                    </FieldLabel>
                    <FieldDescription>
                        "By clicking this checkbox, you agree to the terms and conditions."
                    </FieldDescription>
                </FieldContent>
            </Field>
        </FieldGroup>
    }
}

Disabled

Use the disabled prop to prevent interaction.

Enable notifications

use leptos::prelude::*;
use singlestage::*;

#[component]
pub fn CheckboxDisabledExample() -> impl IntoView {
    view! {
        <FieldGroup class="mx-auto w-56">
            <Checkbox disabled=true>"Enable notifications"</Checkbox>

            // Checkboxes defer to their outer-most parent's disabled state
            <Field orientation="horizontal" disabled=true>
                <Checkbox>"Enable notifications"</Checkbox>
            </Field>

            <CheckboxGroup disabled=true>
                <Field orientation="horizontal">
                    <Checkbox>"Enable notifications"</Checkbox>
                </Field>

                <Checkbox>"Enable notifications"</Checkbox>
            </CheckboxGroup>
        </FieldGroup>
    }
}

Checkbox Group

Use multiple fields to create a checkbox list.

Show these items on the desktop:

Select the items you want to show on the desktop.

Hard disks

External disks

CDs, DVDs, and iPods

Connected servers

use leptos::prelude::*;
use singlestage::*;

#[component]
pub fn CheckboxGroupExample() -> impl IntoView {
    let value = RwSignal::new(vec!["hard_disks".to_string(), "external_disks".to_string()]);

    view! {
        <FieldSet>
            <FieldLegend variant="label">"Show these items on the desktop:"</FieldLegend>
            <FieldDescription>"Select the items you want to show on the desktop."</FieldDescription>

            <CheckboxGroup class="gap-3" value>
                <Field orientation="horizontal">
                    <Checkbox value="hard_disks">"Hard disks"</Checkbox>
                </Field>

                <Field orientation="horizontal">
                    <Checkbox value="external_disks">"External disks"</Checkbox>
                </Field>

                <Field orientation="horizontal">
                    <Checkbox value="cds">"CDs, DVDs, and iPods"</Checkbox>
                </Field>

                <Field orientation="horizontal">
                    <Checkbox value="servers">"Connected servers"</Checkbox>
                </Field>
            </CheckboxGroup>
        </FieldSet>
    }
}

Table

Name	Email	Role
Sarah Chen	sarah.chen@example.com	Admin
Marcus Rodriguez	marcus.rodriguez@example.com	User
Priya Patel	priya.patel@example.com	User
David Kim	david.kim@example.com	Editor

use leptos::prelude::*;
use singlestage::*;

#[component]
pub fn CheckboxTableExample() -> impl IntoView {
    #[derive(Clone)]
    struct Employee {
        id: String,
        name: String,
        email: String,
        role: String,
    }

    let employees = vec![
        Employee {
            id: "1".to_string(),
            name: "Sarah Chen".to_string(),
            email: "sarah.chen@example.com".to_string(),
            role: "Admin".to_string(),
        },
        Employee {
            id: "2".to_string(),
            name: "Marcus Rodriguez".to_string(),
            email: "marcus.rodriguez@example.com".to_string(),
            role: "User".to_string(),
        },
        Employee {
            id: "3".to_string(),
            name: "Priya Patel".to_string(),
            email: "priya.patel@example.com".to_string(),
            role: "User".to_string(),
        },
        Employee {
            id: "4".to_string(),
            name: "David Kim".to_string(),
            email: "david.kim@example.com".to_string(),
            role: "Editor".to_string(),
        },
    ];

    let select_all = RwSignal::new(false);

    view! {
        <Table>
            <TableHeader>
                <TableRow>
                    <TableHead class="w-8">
                        <Checkbox checked=select_all />
                    </TableHead>
                    <TableHead>"Name"</TableHead>
                    <TableHead>"Email"</TableHead>
                    <TableHead>"Role"</TableHead>
                </TableRow>
            </TableHeader>
            <TableBody>
                <For
                    each=move || employees.clone()
                    key=|employee| employee.id.clone()
                    let(employee)
                >
                    <TableRow>
                        <TableCell>
                            <Checkbox value=employee.id />
                        </TableCell>
                        <TableCell class="font-medium">{employee.name}</TableCell>
                        <TableCell>{employee.email}</TableCell>
                        <TableCell>{employee.role}</TableCell>
                    </TableRow>
                </For>
            </TableBody>
        </Table>
    }
}

Anatomy

Import all parts and piece them together.

use leptos::prelude::*;

#[component]
pub fn CheckboxAnatomy() -> impl IntoView {
    view! {
        <CheckboxGroup>
            <Checkbox />
        </CheckboxGroup>
    }
}

API Reference

Checkbox

A control that allows the user to toggle between checked and not checked.

Custom Attributes
Name	Type	Default	Description
checked	bool	false	A reactive signal coupled to the checkbox's checked state.
invalid	bool	false	A reactive signal coupled to the checkbox's invalid state.

Implements global, input, and checkbox attributes.

CheckboxGroup

Contains all the parts of a checkbox group.

Custom Attributes
Name	Type	Default	Description
invalid	bool	false	A reactive signal that toggles whether all the children Checkboxes appear invalid or not.
value	Vec<String>	[]	A dynamic list of all the values of checked children Checkboxes.

Implements global and fieldset attributes.

Getting Started

Components

Checkbox

Invalid State

Basic

Description

Disabled

Checkbox Group

Table

Anatomy

API Reference

Checkbox

CheckboxGroup