Switch

Switch value-changed event

Mirror the toggle state into a sibling label.

LV_EVENT_VALUE_CHANGED fires on toggle. The new state isn't in the payload — read it with lv_obj_has_state(sw, LV_STATE_CHECKED) and push it into a label from the handler.

Switch orientation

Lay the switch out horizontally or vertically.

orientation="auto" (the default) picks horizontal when the widget is wider than it is tall, and vertical otherwise. Forcing the orientation with horizontal or vertical overrides this — useful when the layout dimensions don't match the orientation you want, e.g. a tall vertical switch inside a wide row.

Switch states

Pre-set the on/off state, and show what disabled looks like.

A switch is a special toggle button: clicking it flips between unchecked and checked. The checked="true" attribute sets the initial state at creation; disabled="true" greys the widget out and blocks interaction. To react to changes in code, attach an LV_EVENT_VALUE_CHANGED callback (not shown here — see the docs for the C-side API).

Switch styling

Style the track (MAIN), the filled portion (INDICATOR), and the knob.

A switch has three drawable parts: MAIN (the rounded track), INDICATOR (the filled side when the switch is on), and KNOB (the circle that slides). The on-state look is attached with selector="indicator|checked" so the indicator only paints when the switch is checked.

Padding plays a dual role here:

• pad_* on MAIN shrinks the INDICATOR inwards (the indicator fills the content area of MAIN, which padding makes smaller). Use this to leave a visible track around the coloured fill — pad_all="6" gives a 6 px ring of track that stays visible behind the indicator.
• pad_* on KNOB grows the knob outside the track. pad_all="0" makes the knob exactly as tall as MAIN; positive padding makes it overhang. pad_all="2" here lets the knob sit slightly larger than the track, which (combined with a shadow) gives the typical floating-knob look.