Switch (lv_switch)

A small slider showing an on/off value. Click or tap to toggle.

Edit on GitHub

Overview

A Switch looks like a small slider. It shows — and lets the user toggle — an on/off value.

A Switch is horizontal by default. It turns vertical when height is greater than width.

Change state

lv_example_switch_state.c

The switch uses LV_STATE_CHECKED:

lv_obj_add_state(sw, LV_STATE_CHECKED) — turn on.
lv_obj_remove_state(sw, LV_STATE_CHECKED) — turn off.
lv_obj_has_state(sw, LV_STATE_CHECKED) — query.

Change orientation

lv_example_switch_orientation.c

lv_switch_set_orientation(sw, LV_SWITCH_ORIENTATION_…) overrides the default AUTO (which picks based on width/height). Pass HORIZONTAL or VERTICAL to force one.

Styling

LV_PART_MAIN Switch's background; uses the typical background style properties. padding makes the indicator smaller in the respective direction.
LV_PART_INDICATOR The indicator that shows the current state of the Switch; also uses the typical background style properties.
LV_PART_KNOB A rectangle (or circle) drawn at the left or right side of the indicator; also uses the typical background style properties to modify the knob's appearance. By default, the knob is round (radius-style can modify this) with diameter slightly smaller than the smaller side of the slider. The knob can be made larger with the padding values. Padding values can be asymmetric as well.

lv_example_switch_styling.c

Switch has three stylable parts: LV_PART_MAIN (the rounded track), LV_PART_INDICATOR (the filled side that appears when the switch is on), and LV_PART_KNOB (the circle that slides). The on-state look is normally attached with selector="indicator|checked" so the indicator paints only while the switch is checked. Local style_* props on the <lv_switch> tag target MAIN.

Padding controls the relative sizes of these parts:

pad_* on LV_PART_MAIN shrinks the indicator inwards. The indicator fills the padded content area of MAIN, so the more padding you add the more of the track stays visible around the coloured fill — e.g. pad_all="6" keeps a 6 px ring of track exposed behind the indicator.
pad_* on LV_PART_KNOB grows the knob outside the track. With pad_all="0" the knob is exactly as tall as MAIN. Positive padding makes it overhang, which (with a soft shadow) produces the typical floating-knob look. Negative padding would shrink it inside the track.

Events

LV_EVENT_VALUE_CHANGED is sent sent when Switch changes state.

lv_example_switch_event.c

Learn more about Events emitted by all Widgets.

Keys

LV_KEY_UP/RIGHT Turns Switch ON
LV_KEY_DOWN/LEFT Turns Switch OFF
LV_KEY_ENTER Toggles the Switch

Learn more about Keys.