# Inputs

## Purpose

Text fields, selects, toggles, sliders and other controls.

## Decisions

### Text field, checkbox, switch, slider and select

- **Field fill:** the background tier `#0e0d0c` with a 1px background-accent border, both on the page and inside a card.
- **Label:** above the field in 12px / 16px soft white, with helper text below in 12px / 16px grey, a 4px gap each side.
- **Focus:** a violet `#7520ff` border only. The concentric lighter-violet ring is not used on text fields.
- **Error:** red-pink `#ff0050` border with a red-pink alert icon inside the field on the right; the message below is **soft white** 12px / 16px text (not grey, and not red-pink), per the colour-on-icon-and-border rule.
- **Checkbox:** 16px square at every control size, 4px corners.
- **Switch:** 32 × 16px, 4px corners, thumb inset 2px. The thumb stays plain, with no texture (soft white when on, grey `#8c8c8c` when off).
- **Slider:** 4px track, 16px square thumb with 4px corners. The thumb is soft white `#f2f2f2` with **three 1px vertical grip lines** in grey `#8c8c8c` (about 8px tall, 2px apart), to show it can be grabbed. The track is violet up to the thumb.
- **Select:** looks like a text field with a chevron-down icon on the right. When open, the chevron flips (rotates 180°) to point up, and the menu uses the floating-layer style from [Elevation and Depth](../foundations/elevation-and-depth.md).

### Radio, textarea and search

- **Radio button:** 20px circle with a grey `#272523` ring on the background fill; the selected one has a solid violet `#7520ff` dot inside.
- **Radio group:** a plain vertical list with an 8px gap. Selectable cards (bordered rows with the radio on the right, selected one with a violet border and tint) are an allowed variant where the options need more room, such as option cards.
- **Textarea:** 3 rows by default, with 8px vertical padding. When the box is resizable, a corner resize grip is **always shown**.
- **Character counter:** always shown, bottom right, grey 12px / 16px (for example `5 / 280`).
- **Search field:** if the user must press a button to search, use the attached violet search button (square where it touches the field). If it searches as the user types, use the search icon on the left, with a clear (x) button once something is typed.
- **Search suggestions:** float under the field in the floating-layer style (see [Elevation and Depth](../foundations/elevation-and-depth.md)).
- **Read-only:** normal text with no border. Disabled is defined in [Colour](../foundations/colour.md).