# Switch (/examples/widgets/switch)



Switch value-changed event [#switch-value-changed-event]

<LvglExampleBrief>
  Mirror the toggle state into a sibling label.
</LvglExampleBrief>

`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.

<LvglExample name="lv_example_switch_event" path="widgets/switch/lv_example_switch_event" />

Switch orientation [#switch-orientation]

<LvglExampleBrief>
  Lay the switch out horizontally or vertically.
</LvglExampleBrief>

`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.

<LvglExample name="lv_example_switch_orientation" path="widgets/switch/lv_example_switch_orientation" />

Switch states [#switch-states]

<LvglExampleBrief>
  Pre-set the on/off state, and show what 

  `disabled`

   looks like.
</LvglExampleBrief>

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).

<LvglExample name="lv_example_switch_state" path="widgets/switch/lv_example_switch_state" />

Switch styling [#switch-styling]

<LvglExampleBrief>
  Style the track (MAIN), the filled portion (INDICATOR), and the knob.
</LvglExampleBrief>

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.

<LvglExample name="lv_example_switch_styling" path="widgets/switch/lv_example_switch_styling" />