Switch

Toggle switch for binary on/off states.

Demo

Usage

// Create a signal for state
let enabled = @resource.signal(true)

// Reactive switch
@styled_switch.switch(
  enabled,
  aria_label="Enable notifications",
  [@luna.text("Notifications")],
)

Props

Prop	Type	Default	Description
on	Signal[Bool]	-	Reactive state signal
disabled	Bool	false	Disable the switch
aria_label	String?	None	Accessible label
aria_labelledby	String?	None	ID of labelling element
class	String?	None	Additional CSS class
children	Array[Node]	-	Label content

BEM Classes

Class	Description
`.switch`	Root button element
`.switch__track`	Background track
`.switch__thumb`	Sliding thumb
`.switch__label`	Label text
`.switch-group`	Container for multiple switches

Data Attributes

Attribute	Values	Description
`data-state`	on, off	Current state
`data-disabled`	-	Disabled state

Accessibility

role="switch" announces as toggle
aria-checked reflects current state
Space/Enter toggles state
Focus ring on keyboard navigation