Candy UI Controls — checkbox, toggle and slider

Controls at 30px, the size a thumb can hit without aiming. The switch travel is long enough that the knob visibly moves rather than nudging, because on a touch screen the animation is the only feedback there is.

The set covers what a settings screen actually needs: a checkbox, a radio button, a toggle switch, a slider with a separate knob, and a stepper pair for discrete values. Each stateful control ships every state as its own file at a 30×30 base — the toggle is 60×30 and the slider track is 240 px wide so it can be nine-sliced to any length. The slider also ships empty, full and vertical, because a volume column is not a rotated row.

On and off are drawn as different shapes, not different colours. An unchecked box is an empty recess; a checked one is a filled surface with a tick cut into it. That matters because a settings screen is exactly where a player is most likely to be running a colourblind mode, a greyscale shader, or a heavily tinted post-process — and a state you can only read by hue disappears under all three.

The slider ships as a track and a knob rather than a single sprite. Animating a one-piece slider means redrawing it per value; with two pieces you stretch the fill and move the knob, which is what every UI toolkit already expects. The knob carries a centre notch so its rotation and position stay readable at small sizes, and a held variant adds an accent ring for the drag state.

Disabled is a separate sprite for every stateful control, not a tint applied at runtime. An unavailable setting and a switched-off setting are different things — one says "off", the other says "you cannot touch this" — and a screen that shows them the same way sends a player looking for a bug that is not there. The checkbox also ships a partial state for the select-all row above a list of mixed selections, which is the case a two-state checkbox reports incorrectly.

Everything is included as editable SVG and as flat transparent PNG at 1x, 2x and 4x, drawn from the same six warm cream tones as the rest of the Candy family.

Creative Commons Attribution 4.0 — Free for commercial use. Credit required. Full terms · What this means in practice