Spinbox

Numeric input field with increment and decrement controls, configured through lv_spinbox_set_range and lv_spinbox_set_digit_format.

Spinbox bind value

Spinbox edits a subject; a bound arc visualises the same number.

The spinbox lets the user nudge subject_value with precision. The arc reads the same subject through bind_value, so the visualisation tracks every step without any explicit redraw call. Use this pattern whenever a numeric editor and a graphical indicator both refer to the same underlying quantity.

Spinbox digit count and decimal point

Control how the number is displayed: how many digits, and where the dot goes.

digit_count is the total number of digits drawn (the spinbox left-pads with zeros when the value is shorter). dec_point_pos inserts a decimal point that many positions from the right — 0 means no decimal point, 2 puts it two digits from the right. The stored value is the same integer in both spinboxes (123); only the rendering differs.

Spinbox rollover

Wrap the value around when it hits a bound instead of sticking.

rollover="true" makes the spinbox treat its range as circular: pressing past max_value jumps to min_value and vice versa. This is convenient for cyclic quantities like hours (0..23) or angles (0..359), where the user should be able to step from 23 → 0 without re-entering the value.

Spinbox styling

Style the main box and the editing cursor as separate parts.

Spinbox inherits its drawable surface from the base widget, so MAIN accepts the full background style stack — backgrounds, borders, radii, padding, and text. text_letter_space on MAIN spreads the digits apart so the cursor's frame visually sits around a single digit rather than hugging two together.

The CURSOR selector targets the highlight that marks the currently editable digit. A clean pattern is to leave the cursor background transparent (bg_opa="0") and draw only a coloured border — the active digit then reads as framed. Set text_opa="0" on the cursor so it doesn't re-paint the digit on top of MAIN's render (avoids subtle double-drawing), and use pad_ver to let the frame breathe vertically around the glyph.

Spinbox value, range, and step

Pin the initial value, clamp it to a numeric range, and set the per-step delta.

value is the starting number shown in the spinbox. min_value/max_value clamp every adjustment — pressing the increment past the maximum stays at the maximum. step is how much each key/press changes the value. With rollover="false" (the default) the value sticks at the bounds; see spinbox_rollover for the wraparound variant.

Spinbox with plus and minus buttons

Step a fixed-point spinbox with two side buttons that repeat on hold.

A centered spinbox is set to five digits with a decimal point at position 2 and a range of -1000..25000. lv_spinbox_step_prev shifts the active digit. Two square buttons sized to the spinbox height sit on either side using LV_SYMBOL_PLUS and LV_SYMBOL_MINUS as background images. Their LV_EVENT_ALL handlers call lv_spinbox_increment or lv_spinbox_decrement on LV_EVENT_SHORT_CLICKED and LV_EVENT_LONG_PRESSED_REPEAT.