--- orphan: true --- # Touch Targets small controls a thumb can still hit, at the size they were drawn. ```{raw} html ▶ Run in browser ``` **Tags:** `ui` `touch` `mobile` `layout` `accessibility` A finger is blunter than a cursor. A control a player aims at is therefore hit by a finger anywhere in its rect grown, evenly about its centre, to the theme's `min_hit_size` on each axis, while it stays laid out and drawn at the size its author chose. The number is 44 engine units by default; an engine unit is one density-independent pixel (an iOS point, an Android dp), so 44 is a fingertip on every screen. A mouse and a pen are precise and hit the control's own rect. `Control.touch_target` says which controls grow: `Button`, `CheckBox`, `Slider` and `DropDown` do, a `Label` does not, since it is read rather than aimed at. `min_hit_size` belongs to the theme, reached through any control's `get_theme()`. Assign a number to change it for every control, `0` to switch the growth off, or `None` for the default again. The form is a `VBoxContainer` with `sizing = SizingMode.CONTENT`, which hands each row exactly its measured height, so the rows sit closer together than a fingertip is wide. The green outline round each control is the area a finger hits it over. Where two grown areas overlap, the control whose centre is nearer the thumb takes the tap. Switching modes changes only the outlines: the row heights in the readout stay the same in all three, because the hit area grows and the layout does not. The three mode buttons along the bottom are action buttons in a `ButtonGroup`: `Button("Fingertip", action="fingertip", group=modes)` shows the action's key beside its name, and a click presses that key, so the keys 1, 2 and 3 and the buttons run the same `@on_input` handler. ## Source ```{literalinclude} ../../examples/features/ui/touch_targets.py :language: python :linenos: ```