Skip to main content
The Checkbox component provides an accessible checkbox input with optional label and customizable indicator.

​
Basic Usage

import reflex_ui as ui

ui.checkbox(label="Accept terms and conditions")

​
With Label

ui.checkbox(
    label="Send me notifications",
    on_checked_change=lambda checked: rx.toast.info(f"Checked: {checked}")
)
​
label
str | Component
Label text displayed next to the checkbox

​
Controlled State

class FormState(rx.State):
    agreed: bool = False

ui.checkbox(
    label="I agree to the terms",
    checked=FormState.agreed,
    on_checked_change=FormState.set_agreed
)

​
Event Handlers

ui.checkbox(
    label="Click me",
    on_checked_change=lambda value: rx.toast.success(f"Value: {value}")
)

​
Props Reference

​
checked
bool | Var[bool]
Current checked state (controlled)
​
default_checked
bool
default:"False"
Initial checked state (uncontrolled)
​
on_checked_change
EventHandler[bool]
Event fired when checkbox is toggled
​
disabled
bool
default:"False"
Disables checkbox interaction
​
required
bool
default:"False"
Makes checkbox required for form submission
​
read_only
bool
default:"False"
Prevents changing the checkbox state
​
name
str
Form field name for submission
​
value
str
Value submitted when checkbox is checked
​
indeterminate
bool
default:"False"
Shows an indeterminate state (neither checked nor unchecked)
​
class_name
str
Additional CSS classes for styling

​
Indeterminate State

Useful for “select all” scenarios: 
ui.checkbox(
    label="Select All",
    indeterminate=State.some_checked,
    checked=State.all_checked,
    on_checked_change=State.toggle_all
)

​
Without Label

ui.checkbox(
    checked=State.enabled,
    on_checked_change=State.set_enabled
)

​
Compositional API

For custom layouts: 
ui.checkbox.root(
    ui.checkbox.indicator(),
    checked=State.checked,
    on_checked_change=State.set_checked
)

​
Custom Indicator

ui.checkbox.root(
    ui.checkbox.indicator(
        ui.icon("CheckIcon", size=12)
    )
)

​
Real Example

From demo at demo/demo.py:30: 
ui.checkbox(
    label="Click me",
    on_checked_change=lambda value: rx.toast.success(f"Value: {value}")
)

​
Checkbox Components

​
checkbox.root

The clickable checkbox element. 
ui.checkbox.root(
    ui.checkbox.indicator(),
    checked=True
)

​
checkbox.indicator

The visual checkmark indicator (auto-includes tick icon). 
ui.checkbox.indicator()  # Uses default tick icon
ui.checkbox.indicator(ui.icon("CustomIcon"))  # Custom icon

​
Styling Classes

Access predefined styles via ui.checkbox.class_names:
  • ROOT: Checkbox box styles with states
  • INDICATOR: Checkmark indicator styles
  • LABEL: Label text styles
  • CONTAINER: Wrapper container styles

​
Form Integration

rx.form(
    ui.checkbox(
        label="Subscribe to newsletter",
        name="subscribe",
        value="yes",
        required=True
    ),
    on_submit=handle_submit
)

​
Implementation Details

From source code at reflex_ui/components/base/checkbox.py:102:
  • Built on Base UI Checkbox primitives
  • High-level wrapper automatically creates root + indicator
  • When label provided, wraps in Label element
  • Default indicator is tick icon from HugeIcon library
  • Fully keyboard accessible with Space key toggle

Build docs developers (and LLMs) love

Get started for freeTalk to us