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 id="terms-checkbox" name="terms-checkbox" checked=true />
                <FieldContent>
                    <FieldLabel label_for="terms-checkbox">
                        "Accept terms and conditions"
                    </FieldLabel>
                    <FieldDescription>
                        "By clicking this checkbox, you agree to the terms."
                    </FieldDescription>
                </FieldContent>
            </Field>

            <Field orientation="horizontal" disabled=true>
                <Checkbox id="toggle-checkbox" name="toggle-checkbox" />
                <FieldLabel label_for="toggle-checkbox">"Enable notifications"</FieldLabel>
            </Field>

            <FieldLabel>
                <Field orientation="horizontal">
                    <Checkbox id="toggle-checkbox-2" name="toggle-checkbox-2" />
                    <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">
            <Field orientation="horizontal" invalid=true>
                <Checkbox>"Accept terms and conditions"</Checkbox>
            </Field>

            <Checkbox invalid=true>"Accept terms and conditions"</Checkbox>
        </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="mx-auto w-56">
            <Field orientation="horizontal">
                <Checkbox id="terms-checkbox-basic" />
                <FieldLabel label_for="terms-checkbox-basic">
                    "Accept terms and conditions"
                </FieldLabel>
            </Field>

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

            <Field orientation="horizontal">
                <Checkbox>"Accept terms and conditions"</Checkbox>
            </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="mx-auto w-72">
            <Field orientation="horizontal">
                <Checkbox id="terms-checkbox-desc" name="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">
            <Field orientation="horizontal" disabled=true>
                <Checkbox>"Enable notifications"</Checkbox>
            </Field>

            <Checkbox disabled=true>"Enable notifications"</Checkbox>
        </FieldGroup>
    }
}

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 {
    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">
                <Field orientation="horizontal">
                    <Checkbox value="hard_disks" checked=true>
                        "Hard disks"
                    </Checkbox>
                </Field>

                <Field orientation="horizontal">
                    <Checkbox value="external_disks" checked=true>
                        "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
                            id="select-all-checkbox"
                            name="select-all-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>
    }
}

Accept terms and conditions

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

use leptos::prelude::*;
use singlestage::{Label, checkbox::*};

#[component]
pub fn SubtextExample() -> impl IntoView {
    view! {
        <div class="flex items-start gap-3">
            <Checkbox id="checkbox-with-text" />
            <div class="grid gap-2">
                <Label label_for="checkbox-with-text">"Accept terms and conditions"</Label>
                <p class="text-(--muted-foreground) text-sm">
                    "By clicking this checkbox, you agree to the terms and conditions."
                </p>
            </div>
        </div>
    }
}

use leptos::prelude::*;
use singlestage::{Label, checkbox::*};

#[component]
pub fn FormExample() -> impl IntoView {
    view! {
        <form class="form flex flex-row items-start gap-3 rounded-md border p-4 shadow-xs">
            <Checkbox id="checkbox-form-1" />
            <div class="flex flex-col gap-1">
                <Label label_for="checkbox-form-1" class="leading-snug">
                    "Use different settings for my mobile devices"
                </Label>
                <p class="text-(--muted-foreground) text-sm leading-snug">
                    "You can manage your mobile notifications in the mobile settings page."
                </p>
            </div>
        </form>
    }
}

Checkbox Group

use leptos::prelude::*;
use singlestage::{Button, checkbox::*};

#[component]
pub fn GroupExample() -> impl IntoView {
    let value = RwSignal::new(vec![
        "recents".to_string(),
        "home".to_string(),
        "applications".to_string(),
    ]);

    view! {
        <form class="form flex flex-col gap-4">
            <p>"Value: "{move || format!("{:#?}", value.get())}</p>

            <CheckboxGroup value>
                <legend>
                    "Sidebar"
                    <p class="text-(--muted-foreground) text-sm">
                        "Select the items you want to display in the sidebar."
                    </p>
                </legend>

                <Checkbox value="recents">"Recents"</Checkbox>
                <Checkbox value="home">"Home"</Checkbox>
                <Checkbox value="applications">"Applications"</Checkbox>
                <Checkbox value="desktop">"Desktop"</Checkbox>
                <Checkbox value="download">"Download"</Checkbox>
                <Checkbox value="documents">"Documents"</Checkbox>
            </CheckboxGroup>

            <Button class="w-fit">"Submit"</Button>
        </form>
    }
}

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 value.

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

Group

Table

Checkbox Group

Anatomy

API Reference

Checkbox

CheckboxGroup