# Spinbox (/examples/widgets/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-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 [#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 [#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 [#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 [#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 [#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`.