Import
from reflex_ui import switch
Description
A switch component for toggling between on/off states, represented as a sliding toggle button.
Basic Usage
switch()
switch(checked=State.enabled, on_checked_change=State.set_enabled)
switch(default_checked=True, disabled=False)
Props
Whether the switch is currently active (controlled).
default_checked
Var[bool] | bool
default:"False"
Whether the switch is initially active (uncontrolled).
disabled
Var[bool] | bool
default:"False"
Whether the component should ignore user interaction.
read_only
Var[bool] | bool
default:"False"
Whether the user should be unable to activate or deactivate the switch.
required
Var[bool] | bool
default:"False"
Whether the user must activate the switch before submitting a form.
Identifies the field when a form is submitted.
value
Var[str] | str
default:"on"
The value of the switch when it is checked. Used for form submission.
The value of the switch when unchecked. Used for form submission when unchecked. Defaults to not submitting any value.
native_button
Var[bool] | bool
default:"True"
Whether the component renders a native button element when replacing via render prop.
A ref to access the hidden input element.
Event Handlers
on_checked_change
EventType[()] | EventType[bool]
Event handler called when the switch is activated or deactivated.
on_click
EventType[()] | EventType[PointerEventInfo]
Fired when the switch is clicked.
Fired when the switch receives focus.
Fired when the switch loses focus.
Subcomponents
switch.root
Represents the switch itself. Renders a span element and a hidden input.
switch.root(
switch.thumb(),
checked=State.value,
on_checked_change=State.set_value,
**props
) -> SwitchRoot
switch.thumb
The movable part of the switch that indicates on/off state.
switch.thumb(**props) -> SwitchThumb
Class Names Reference
switch.class_names.ROOT # Switch root classes
switch.class_names.THUMB # Thumb classes
ROOT Class
"relative flex h-5 w-8 rounded-full bg-secondary-4 p-0.5 transition-colors duration-200 ease-out before:absolute before:rounded-full before:outline-offset-2 before:outline-primary-8 focus-visible:before:inset-0 data-[checked]:bg-primary-9 disabled:opacity-50 disabled:cursor-not-allowed cursor-default"
THUMB Class
"aspect-square h-full rounded-full bg-white transition-transform duration-200 ease-out data-[checked]:translate-x-3 shadow-small"
Styling
Custom styling can be applied via class_name or style props:
switch(
checked=State.value,
class_name="custom-switch"
)
Method Signatures
HighLevelSwitch.create
@classmethod
def create(
cls,
*children,
checked: Var[bool] | bool | None = None,
default_checked: Var[bool] | bool | None = None,
disabled: Var[bool] | bool | None = None,
read_only: Var[bool] | bool | None = None,
required: Var[bool] | bool | None = None,
name: Var[str] | str | None = None,
value: Var[str] | str | None = None,
unchecked_value: Var[str] | str | None = None,
on_checked_change: EventType[()] | EventType[bool] | None = None,
**props
) -> HighLevelSwitch
SwitchRoot.create
@classmethod
def create(
cls,
*children,
checked: Var[bool] | bool | None = None,
default_checked: Var[bool] | bool | None = None,
disabled: Var[bool] | bool | None = None,
name: Var[str] | str | None = None,
value: Var[str] | str | None = None,
on_checked_change: EventType[()] | EventType[bool] | None = None,
**props
) -> SwitchRoot
SwitchThumb.create
@classmethod
def create(
cls,
*children,
**props
) -> SwitchThumb
Return Types
HighLevelSwitch - Complete switch with root and thumbSwitchRoot - Root switch elementSwitchThumb - Movable thumb element