Checkbox

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

Quick Setup

Configure your preferences in seconds

Enable dark mode

Reduce eye strain in low-light conditions

Show notifications

Stay updated with real-time alerts

Auto-save drafts

Never lose your work

Your preferences:

Installation

CLI

Install the component using the StarUI CLI:

star add checkbox

Examples

Terms & Conditions

Registration form with required checkboxes

Complete Registration

Please review and accept our terms

I accept the Terms of Service *

You must accept to continue

I accept the Privacy Policy *

Learn how we protect your data

Send me product updates and offers

You can unsubscribe at any time

Feature Permissions

Grouped checkboxes with disabled states

App Permissions

Control what this app can access

Essential

Storage

Save files and preferences

Network

Connect to the internet

Optional

Camera

Take photos and videos

Location

Access your location for maps

Contacts

Find friends using this app

Notifications

Show alerts and reminders

from starhtml import *
from starui import *

camera = Signal("camera", _ref_only=True)
location = Signal("location", _ref_only=True)
contacts = Signal("contacts", _ref_only=True)
notify = Signal("notify", _ref_only=True)
optional_count = Signal("optional_count", camera + location + contacts + notify)

Card(
    CardHeader(
        CardTitle("App Permissions"),
        CardDescription("Control what this app can access")
    ),
    CardContent(
        Div(
            optional_count,
            Div(
                H3("Essential", cls="text-sm font-semibold mb-2 text-muted-foreground"),
                CheckboxWithLabel(
                    label="Storage",
                    helper_text="Save files and preferences",
                    checked=True,
                    disabled=True
                ),
                CheckboxWithLabel(
                    label="Network",
                    helper_text="Connect to the internet",
                    checked=True,
                    disabled=True
                ),
                cls="space-y-2 mb-4"
            ),
            Div(
                H3("Optional", cls="text-sm font-semibold mb-2 text-muted-foreground"),
                CheckboxWithLabel(
                    label="Camera",
                    helper_text="Take photos and videos",
                    signal=camera
                ),
                CheckboxWithLabel(
                    label="Location",
                    helper_text="Access your location for maps",
                    signal=location,
                    checked=True
                ),
                CheckboxWithLabel(
                    label="Contacts",
                    helper_text="Find friends using this app",
                    signal=contacts
                ),
                CheckboxWithLabel(
                    label="Notifications",
                    helper_text="Show alerts and reminders",
                    signal=notify,
                    checked=True
                ),
                cls="space-y-2"
            ),
            Div(
                Badge(
                    data_text=optional_count + " optional permissions",
                    variant="secondary"
                ),
                cls="mt-4 flex justify-center"
            )
        )
    ),
    cls="max-w-md"
)

Interactive Todo List

Task tracking with progress visualization

✓ Todo List

Track your daily tasks

Write documentation

Review pull requests

Update dependencies

Deploy to production

Completed: ((($todo1 + $todo2) + $todo3) + $todo4) of 4

Bulk Delete

Select-all pattern with bulk delete - selected items are removed from view

Bulk Delete

Select-all pattern with bulk delete functionality

Select All

invoice-2024-001.pdf

2.4 MB

report-q3.xlsx

1.8 MB

presentation.pptx

5.2 MB

contracts.zip

12.1 MB

from starhtml import *
from starui import *

files = [
    {"id": "file1", "name": "invoice-2024-001.pdf", "size": "2.4 MB"},
    {"id": "file2", "name": "report-q3.xlsx", "size": "1.8 MB"},
    {"id": "file3", "name": "presentation.pptx", "size": "5.2 MB"},
    {"id": "file4", "name": "contracts.zip", "size": "12.1 MB"}
]

file_signals = {file["id"]: Signal(file["id"], _ref_only=True) for file in files}
deleted_signals = {file["id"]: Signal(file["id"] + "_deleted", False) for file in files}
select_all = Signal("select_all", False)

selected_count = Signal("selected_count",
    sum([file_signals[file["id"]] & ~deleted_signals[file["id"]] for file in files])
)

delete_actions = [
    file_signals[file["id"]].then(deleted_signals[file["id"]].set(True))
    for file in files
] + [select_all.set(False)]

select_actions = [
    (~deleted_signals[file["id"]]).then(file_signals[file["id"]].set(select_all))
    for file in files
]

Card(
    CardHeader(
        CardTitle("Bulk Delete"),
        CardDescription("Select-all pattern with bulk delete functionality")
    ),
    CardContent(
        Div(
            select_all, *deleted_signals.values(), selected_count,
            Div(
                CheckboxWithLabel(
                    label="Select All",
                    signal=select_all,
                    checkbox_cls="border-2",
                    data_on_change=select_actions
                ),
                cls="border-b pb-2 mb-3"
            ),
            Div(
                *[
                    Div(
                        CheckboxWithLabel(
                            label=file["name"],
                            signal=file_signals[file["id"]],
                            helper_text=file["size"]
                        ),
                        data_show=~deleted_signals[file["id"]]
                    )
                    for file in files
                ],
                cls="space-y-2 pl-6"
            ),
            Div(
                Button(
                    Icon("lucide:trash-2", cls="h-4 w-4 mr-2"),
                    Span(data_text=(selected_count > 0).if_("Delete " + selected_count + " Selected", "Delete Selected")),
                    data_on_click=delete_actions,
                    variant="destructive",
                    size="sm",
                    data_attr_disabled=selected_count == 0
                ),
                cls="mt-4 pt-4 border-t"
            )
        )
    ),
    cls="max-w-md"
)

Filter Form

Multi-category filtering interface

from starhtml import *
from starui import *

# (signal_name, label, collect_label, checked)
categories = [
    ("cat_electronics", "Electronics", "Electronics", True),
    ("cat_clothing", "Clothing", "Clothing", False),
    ("cat_books", "Books", "Books", True),
    ("cat_home", "Home & Garden", "Home & Garden", False),
]

# Dollar signs in collect expressions are interpreted as signal references
prices = [
    ("price_1", "Under $25", "Under 25", False),
    ("price_2", "$25 - $50", "25-50", True),
    ("price_3", "$50 - $100", "50-100", True),
    ("price_4", "Over $100", "Over 100", False),
]

shipping = [
    ("free_shipping", "Free Shipping", "Free Shipping", True),
    ("express", "Express Available", "Express", False),
]

all_filters = categories + prices + shipping
filter_signals = {name: Signal(name, _ref_only=True) for name, _, _, _ in all_filters}
reset_actions = [filter_signals[name].set(False) for name, _, _, _ in all_filters]

active_filters = collect([
    (filter_signals[name], collect_label)
    for name, _, collect_label, _ in all_filters
], join_with=", ")

filter_message = Signal("filter_message",
    active_filters.if_("Filters: " + active_filters, "No filters selected")
)

def filter_group(title, options, mb_class="mb-6"):
    return Div(
        H3(title, cls="text-sm font-semibold mb-3"),
        Div(
            *[CheckboxWithLabel(label=label, signal=filter_signals[name], checked=checked)
              for name, label, _, checked in options],
            cls="space-y-2"
        ),
        cls=mb_class
    )

Card(
    CardHeader(
        CardTitle("Filter Options"),
        CardDescription("Customize your search results")
    ),
    CardContent(
        Form(
            filter_message,
            filter_group("Categories", categories),
            filter_group("Price Range", prices),
            filter_group("Shipping", shipping, mb_class=""),
            Div(
                Button(
                    "Apply Filters",
                    type="submit",
                    cls="w-full",
                    data_on_click=(js("alert($filter_message)"), dict(prevent=True))
                ),
                Button(
                    "Reset",
                    variant="outline",
                    cls="w-full mt-2",
                    data_on_click=(reset_actions, dict(prevent=True))
                ),
                cls="mt-6"
            )
        )
    ),
    cls="max-w-sm"
)

Settings with Validation

Form validation based on checkbox selections

Notification Settings

Choose how you want to be notified

Email Notifications

Receive important updates via email

Push Notifications

Get instant updates on your device

SMS Alerts

Critical alerts sent to your phone

Optional

Marketing Communications

Product updates and special offers

At least one notification method must be enabled

Marketing enabled

from starhtml import *
from starui import *

email_notif = Signal("email_notif", _ref_only=True)
push_notif = Signal("push_notif", _ref_only=True)
sms_notif = Signal("sms_notif", _ref_only=True)
marketing = Signal("marketing", _ref_only=True)

active_notifs_text = collect([
    (email_notif, "Email"),
    (push_notif, "Push"),
    (sms_notif, "SMS")
], join_with=" | ")

# (label, helper_text, signal, checked)
notifications = [
    ("Email Notifications", "Receive important updates via email", email_notif, True),
    ("Push Notifications", "Get instant updates on your device", push_notif, False),
    ("SMS Alerts", "Critical alerts sent to your phone", sms_notif, False),
]

Card(
    CardHeader(
        CardTitle("Notification Settings"),
        CardDescription("Choose how you want to be notified")
    ),
    CardContent(
        Form(
            Div(
                *[CheckboxWithLabel(
                    label=label,
                    helper_text=helper,
                    signal=signal,
                    checked=checked
                ) for label, helper, signal, checked in notifications],
                cls="space-y-4"
            ),
            Div(
                H3("Optional", cls="text-sm font-semibold mb-3"),
                CheckboxWithLabel(
                    label="Marketing Communications",
                    helper_text="Product updates and special offers",
                    signal=marketing
                ),
                cls="mt-6 pt-6 border-t"
            ),
            Div(
                P(
                    Icon("lucide:alert-circle", cls="h-4 w-4 mr-1 flex-shrink-0"),
                    "At least one notification method must be enabled",
                    data_show=~any_(email_notif, push_notif, sms_notif),
                    cls="text-sm text-destructive flex items-start"
                ),
                cls="mt-4 min-h-[1.5rem] w-full max-w-full overflow-hidden"
            ),
            Button(
                "Save Settings",
                type="submit",
                data_attr_disabled=~any_(email_notif, push_notif, sms_notif),
                data_on_click=evt.preventDefault(),
                cls="w-full mt-4"
            ),
            Div(
                Div(
                    Badge(
                        data_text="Active: " + active_notifs_text,
                        data_show=any_(email_notif, push_notif, sms_notif),
                        variant="secondary"
                    ),
                    cls="flex justify-center"
                ),
                Div(
                    Badge(
                        "Marketing enabled",
                        data_show=marketing,
                        variant="outline"
                    ),
                    cls="flex justify-center mt-2"
                ),
                cls="mt-4"
            )
        )
    ),
    cls="w-80"
)

API Reference

Props

Prop	Type	Default	Description
`checked`	`bool \| None`	`None`	Initial checked state of the checkbox
`signal`	`str \| None`	`auto-generated`	Datastar signal name for state management and reactive updates
`label`	`str`	`-`	Label text for the checkbox (CheckboxWithLabel only)
`helper_text`	`str \| None`	`None`	Helper text displayed below the label
`disabled`	`bool`	`False`	Whether checkbox is disabled
`required`	`bool`	`False`	Whether checkbox is required for form validation
`name`	`str \| None`	`None`	Name attribute for form submission
`cls`	`str`	`''`	Additional CSS classes for styling