# Roller (/examples/widgets/roller)
Scrollable cylindrical selector for picking one option from a fixed list, configured via `lv_roller_set_options`.
Roller bind value [#roller-bind-value]
Roller bound to a subject; a button jumps it programmatically.
The roller's `bind_value` is wired to `subject_index`. A "Wednesday" button uses
`subject_set_int_event` to write `3` into the subject on click — the roller
picks up the change and animates to that option without any direct call into
the roller widget.
Roller value-changed event [#roller-value-changed-event]
Mirror the settled selection into a sibling label.
`LV_EVENT_VALUE_CHANGED` fires once the roller has settled on a new
option (not while it's still scrolling). Read the option text with
`lv_roller_get_selected_str` and push it into a label from the handler.
Roller with top and bottom fade [#roller-with-top-and-bottom-fade]
Fade the roller edges to black using a generated bitmap mask.
The active screen is tinted `LV_PALETTE_BLUE_GREY` and a month roller in
`LV_ROLLER_MODE_NORMAL` takes a style that paints it black with white text
and no border. A 130x150 `LV_COLOR_FORMAT_L8` draw buffer is filled on a
canvas with two `LV_GRAD_DIR_VER` rectangles (black-to-white on top,
white-to-black on bottom), leaving the middle opaque. The resulting buffer is
attached through `lv_obj_set_style_bitmap_mask_src` so the first and last
rows fade out.
Roller options and mode [#roller-options-and-mode]
Define the option list and choose between normal and infinite scrolling.
`options` is a newline-separated list of items, written with `
` between
entries because raw `\n` inside an attribute survives as the literal two
characters. `options-mode` controls scroll behaviour: `normal` stops at the
first/last entry; `infinite` wraps around so the user can keep scrolling in
either direction. `selected` picks the initially focused index.
Roller styling [#roller-styling]
Style the main listbox and the selected item; use
`text_line_space`
to set the selected band's height.
Roller has two relevant parts: `MAIN` (the whole listbox, where unselected
items are drawn) and `SELECTED` (the highlighted row in the middle). Name a
style for each and attach them with `selector="main"` and
`selector="selected"`.
`text_line_space` on MAIN does more than space the text rows: because the
selected indicator always sits in the gap between two list items, growing
`text_line_space` directly grows the height of the highlighted band — so
the selected row gets visually taller without a separate height setting.
Roller visible row count [#roller-visible-row-count]
Tune how many list items the roller shows at once.
`visible_row_count` determines the height of the roller in *items*, not
pixels — the widget computes its own pixel height from the current font and
line spacing. A short roller (3 rows) feels compact for a yes/no pick;
a tall one (7 rows) shows more context but takes more screen real estate.