# Parts and States (/common-widget-features/parts_and_states)



Parts [#parts]

Widgets are built from multiple parts. For example, a
[Base Widget](/widgets/base_widget) has "main" and "scrollbar" parts, while a
[Slider](/widgets/slider) has "main", "indicator", and "knob" parts. Parts are
similar to *pseudo-elements* in CSS.

The following predefined parts exist in LVGL:

* <ApiLink name="LV_PART_MAIN" />: A background-like rectangle.
* <ApiLink name="LV_PART_SCROLLBAR" />: The scrollbar(s).
* <ApiLink name="LV_PART_INDICATOR" />: The indicator, e.g., for sliders, bars,
  switches, or the tick box of a checkbox.
* <ApiLink name="LV_PART_KNOB" />: A handle used to adjust a value.
* <ApiLink name="LV_PART_SELECTED" />: Indicates the currently selected option or
  section.
* <ApiLink name="LV_PART_ITEMS" />: Used if the widget has multiple similar elements
  (e.g., table cells).
* <ApiLink name="LV_PART_CURSOR" />: Marks a specific position, e.g., the cursor in a
  text area or chart.
* <ApiLink name="LV_PART_CUSTOM_FIRST" />: Custom parts can be added starting from
  here.

The main purpose of parts is to allow styling individual "components" of a widget.
They are described in more detail in the [Style overview](/common-widget-features/styles) section.

States [#states]

A widget can be in a combination of the following states:

* <ApiLink name="LV_STATE_DEFAULT" />: Normal, released state.
* <ApiLink name="LV_STATE_ALT" />: Alternative style settings, e.g. dark mode.
* <ApiLink name="LV_STATE_CHECKED" />: Toggled or checked state.
* <ApiLink name="LV_STATE_FOCUSED" />: Focused via keypad, encoder, or clicked via
  touchpad/mouse.
* <ApiLink name="LV_STATE_FOCUS_KEY" />: Focused via keypad or encoder but not via
  touchpad/mouse.
* <ApiLink name="LV_STATE_EDITED" />: Being edited by an encoder.
* <ApiLink name="LV_STATE_HOVERED" />: Hovered by a mouse (currently not supported).
* <ApiLink name="LV_STATE_PRESSED" />: Being pressed.
* <ApiLink name="LV_STATE_SCROLLED" />: Being scrolled.
* <ApiLink name="LV_STATE_DISABLED" />: Disabled state.
* <ApiLink name="LV_STATE_USER_1" />: Custom state.
* <ApiLink name="LV_STATE_USER_2" />: Custom state.
* <ApiLink name="LV_STATE_USER_3" />: Custom state.
* <ApiLink name="LV_STATE_USER_4" />: Custom state.

States are usually changed automatically by the library as the user interacts with a
widget (e.g., pressing, releasing, focusing). However, states can also be modified
manually. To set or clear a given state (while leaving other states untouched), use:

* <ApiLink name="lv_obj_add_state" display="lv_obj_add_state(widget, LV_STATE_...)" />
* <ApiLink name="lv_obj_remove_state" display="lv_obj_remove_state(widget, LV_STATE_...)" />

In both cases, you can bit-wise OR multiple state values. For example:

<ApiLink name="lv_obj_add_state" display="lv_obj_add_state(widget, LV_STATE_PRESSED | LV_STATE_CHECKED)" />

To learn more about states, see the related section in [Styles Overview](/common-widget-features/styles/overview).