Checkbox

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

Monitor input

48V phantom power

Required for condenser microphones

-20dB pad

Installation

CLI

Install the component using the StarUI CLI:

star add checkbox

Examples

States

All visual states — unchecked, checked, indeterminate, error text, and custom indicator styling

Unchecked

Checked

Indeterminate

Compile-time only — icon and data-state are fixed at render

With error

Input level exceeds safe range

Custom indicator

Uses indicator_cls to tint the check icon

Form Validation

Required checkboxes that gate form submission with all_() signal logic

Session Prep

Complete required checks before recording

Input levels verified *

All channels reading between -18 and -12 dBFS

Backup drive connected *

Studio silence confirmed *

No HVAC, phones, or foot traffic

Count in before recording

Disabled States

Required buses locked as disabled, optional buses interactive with active count

Bus Routing

Configure audio bus assignments

Required

Master

Main stereo output

Talkback

Engineer-to-talent communication

Optional

Drums sub

Keys sub

Brass sub

Strings sub

from starhtml import *

drums = Signal("cb_bus_drums", _ref_only=True)
keys = Signal("cb_bus_keys", _ref_only=True)
brass = Signal("cb_bus_brass", _ref_only=True)
strings = Signal("cb_bus_strings", _ref_only=True)
optional_count = Signal("cb_bus_count", drums + keys + brass + strings)

Card(
    CardHeader(
        CardTitle("Bus Routing"),
        CardDescription("Configure audio bus assignments"),
    ),
    CardContent(
        Div(
            optional_count,
            Div(
                H3("Required", cls="mb-2 text-sm font-semibold text-muted-foreground"),
                CheckboxWithLabel(
                    label="Master",
                    helper_text="Main stereo output",
                    checked=True,
                    disabled=True,
                ),
                CheckboxWithLabel(
                    label="Talkback",
                    helper_text="Engineer-to-talent communication",
                    checked=True,
                    disabled=True,
                ),
                cls="mb-4 space-y-2",
            ),
            Div(
                H3("Optional", cls="mb-2 text-sm font-semibold text-muted-foreground"),
                CheckboxWithLabel(
                    label="Drums sub",
                    signal=drums,
                    checked=True,
                ),
                CheckboxWithLabel(
                    label="Keys sub",
                    signal=keys,
                ),
                CheckboxWithLabel(
                    label="Brass sub",
                    signal=brass,
                ),
                CheckboxWithLabel(
                    label="Strings sub",
                    signal=strings,
                ),
                cls="space-y-2",
            ),
            Div(
                Badge(
                    data_text=optional_count + " optional active",
                    variant="secondary",
                ),
                cls="mt-4 flex justify-center",
            ),
        )
    ),
    cls="max-w-md",
)

Progress Tracking

Reactive strikethrough styling and progress bar driven by checkbox signals

Take Tracker

Pre-session setup tasks

Mic placement check

Headphone mix approved

Gain staging complete

Reference track loaded

Completed: ((($cb_take_mic + $cb_take_hp) + $cb_take_gain) + $cb_take_ref) of 4

Select All

Bulk selection with select-all toggle and destructive batch action

Session Takes

Review and discard recordings

Select All

Take 1 — Intro.wav

3:42

Take 2 — Verse.wav

4:18

Take 3 — Chorus.wav

2:55

Take 4 — Bridge.wav

1:36

from starhtml import *

takes = [
    {"id": "cb_take1", "name": "Take 1 — Intro.wav", "dur": "3:42"},
    {"id": "cb_take2", "name": "Take 2 — Verse.wav", "dur": "4:18"},
    {"id": "cb_take3", "name": "Take 3 — Chorus.wav", "dur": "2:55"},
    {"id": "cb_take4", "name": "Take 4 — Bridge.wav", "dur": "1:36"},
]

take_sigs = [Signal(t["id"], _ref_only=True) for t in takes]
discards = [Signal(t["id"] + "_dis", False) for t in takes]
select_all = Signal("cb_takes_all", False)

selected_count = Signal(
    "cb_takes_sel",
    sum([sig & ~dis for sig, dis in zip(take_sigs, discards)]),
)

discard_actions = [
    sig.then(dis.set(True)) for sig, dis in zip(take_sigs, discards)
] + [select_all.set(False)]

select_actions = [
    (~dis).then(sig.set(select_all))
    for sig, dis in zip(take_sigs, discards)
]

Card(
    CardHeader(
        CardTitle("Session Takes"),
        CardDescription("Review and discard recordings"),
    ),
    CardContent(
        Div(
            select_all,
            discards,
            selected_count,
            Div(
                CheckboxWithLabel(
                    label="Select All",
                    signal=select_all,
                    checkbox_cls="border-2",
                    data_on_change=select_actions,
                ),
                cls="mb-3 border-b pb-2",
            ),
            Div(
                *[
                    Div(
                        CheckboxWithLabel(
                            label=t["name"],
                            signal=sig,
                            helper_text=t["dur"],
                        ),
                        data_show=~dis,
                    )
                    for t, sig, dis in zip(takes, take_sigs, discards)
                ],
                cls="space-y-2 pl-6",
            ),
            Div(
                Button(
                    Icon("lucide:trash-2", cls="h-4 w-4"),
                    "Discard selected",
                    data_on_click=discard_actions,
                    variant="destructive",
                    size="sm",
                    data_attr_disabled=selected_count == 0,
                ),
                cls="mt-4 border-t pt-4",
            ),
        )
    ),
    cls="max-w-md",
)

Grouped Filters

Grouped checkboxes with reset and active summary via collect()

Export Settings

Configure output format and options

Format

WAV

MP3

FLAC

Sample Rate

44.1 kHz

48 kHz

96 kHz

Metadata

Embed artwork

Include timestamps

Selected:

from starhtml import *

formats = [
    ("cb_exp_wav", "WAV", "WAV", True),
    ("cb_exp_mp3", "MP3", "MP3", False),
    ("cb_exp_flac", "FLAC", "FLAC", False),
]

rates = [
    ("cb_exp_44", "44.1 kHz", "44.1 kHz", True),
    ("cb_exp_48", "48 kHz", "48 kHz", False),
    ("cb_exp_96", "96 kHz", "96 kHz", False),
]

metadata = [
    ("cb_exp_art", "Embed artwork", "Artwork", False),
    ("cb_exp_ts", "Include timestamps", "Timestamps", True),
]

all_options = formats + rates + metadata
option_signals = {name: Signal(name, _ref_only=True) for name, _, _, _ in all_options}
reset_actions = [option_signals[name].set(False) for name, _, _, _ in all_options]

active_summary = collect(
    [(option_signals[name], collect_label) for name, _, collect_label, _ in all_options],
    join_with=", ",
)

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

Card(
    CardHeader(
        CardTitle("Export Settings"),
        CardDescription("Configure output format and options"),
    ),
    CardContent(
        Form(
            option_group("Format", formats),
            option_group("Sample Rate", rates),
            option_group("Metadata", metadata, mb_class=""),
            Div(
                Button("Export", type="submit", cls="w-full", data_on_click=evt.preventDefault()),
                Button("Reset", variant="outline", cls="mt-2 w-full", data_on_click=(reset_actions, dict(prevent=True))),
                cls="mt-6",
            ),
            Div(
                P(
                    "Selected: ",
                    Span(data_text=active_summary.if_(active_summary, "None"), cls="font-medium"),
                    cls="text-sm text-muted-foreground",
                ),
                cls="mt-4 border-t pt-4",
            ),
        )
    ),
    cls="max-w-sm",
)

API Reference

Props

Prop	Type	Default	Description
`checked`	`bool \| None`	`None`	Initial checked state
`signal`	`str \| Signal`	`auto-generated`	Signal name for reactive state management
`indeterminate`	`bool`	`False`	Show indeterminate state (minus icon). Use for parent checkboxes when some children are selected
`disabled`	`bool`	`False`	Disables the checkbox and blocks pointer events
`required`	`bool`	`False`	Marks as required for form validation. CheckboxWithLabel appends a red asterisk
`name`	`str \| None`	`None`	Name attribute for form submission
`value`	`str \| None`	`'on'`	Value submitted with forms when checked
`label`	`str`	`-`	Label text (CheckboxWithLabel only)
`helper_text`	`str \| None`	`None`	Muted text below the label (CheckboxWithLabel only)
`error_text`	`str \| None`	`None`	Destructive text below the control. Sets aria-invalid on the checkbox (CheckboxWithLabel only)
`cls`	`str`	`''`	Additional CSS classes
`indicator_cls`	`str`	`''`	Additional CSS classes for the check/minus icon overlay
`label_cls`	`str`	`''`	Additional CSS classes for the label element (CheckboxWithLabel only)
`checkbox_cls`	`str`	`''`	Additional CSS classes for the inner checkbox (CheckboxWithLabel only)

Component	Description
`Checkbox`	Standalone checkbox control. Renders a native input with an icon overlay. Compose with Label for manual layout
`CheckboxWithLabel`	Convenience wrapper that composes Checkbox + Label + helper text + error text with standard spacing