# Field Text entry in a recess, the label printed above it, and a hint that says how to fix an error. Kit part · Free · https://tactileui.dev/parts/field - Element: `` - Needs: `kit.css` only, no script ([how to install the kit](https://tactileui.dev/docs/installation#the-kit)) - Categories: Forms, Inputs - Finishes: Aluminium, Graphite, Oak, Walnut, Porcelain, Black, Daylight, Night, Paper, Phosphor, E-paper, AMOLED - Volumes: Tactile, Quiet ## Variants ### With an example ```html Name ``` ### With a hint ```html SlugLower case and dashes. ``` ### With an error ```html EmailAdd the domain. ``` ## Every state - Rest - Focus - Filled - Error Hover, pressed and focus are forced with `.is-hover`, `.is-down` and `.is-focus`; checked and disabled are real. ## API | Name | Kind | Values | What it does | | - | - | - | - | | .tui-field | class | on | A column: printed label, the control, an optional hint, 6px apart. | | .tui-input | class | on | The recess: 38px tall, well fill, the inset light. | | .tui-hint | class | — | A line under the field. Red when the field has an error. | | data-error | attribute | on .tui-field | A red hairline on the lip around the cut, and a red hint. | | aria-invalid · aria-describedby | attribute | — | Set both with an error so the hint is read with the field. | | placeholder | attribute | an example | Printed in --tui-ink-3. Never the only label. | | .is-focus | class | — | Forced focus ring, for specimens. | ## Markup ```html Project Email Add the part after the @, e.g. studio@lode.example. ``` The demo on the page: ```html

Project EmailAdd the part after the @, e.g. studio@lode.example.

``` ## Usage notes Finish the email address: the error clears as soon as it would post. ## Accessibility - Wrap the label and the control in ``, or use `for` and `id`. - Errors: `aria-invalid="true"` plus `aria-describedby` pointing at the hint, and the hint says what to do. - Placeholder text is 3.4:1 or better: fine for an example, not for anything that must be read. - Keyboard: a native input. Tab moves in and out, and typing, selecting and the system’s own shortcuts are the browser’s. ## How it’s built A native input with `appearance: none`, in the recess every well in the kit uses: a floor that darkens toward its upper wall, an inset shadow under that wall, and a lit lower lip. The error hairline is drawn on the lip, outside the cut, so the upper wall’s shadow cannot hide it. ## Rules Placeholders show an example of what to type; the label is always printed. An error tells people how to put it right. The full rules are in `field.rules.md` in the brain, which ships with the Kit. ## Related parts - [Select](https://tactileui.dev/parts/select): A choice from a longer list, in the same recess as a field, with a printed chevron. The browser’s own menu opens it. - [Text area](https://tactileui.dev/parts/textarea): Longer text in a deeper recess: notes, messages, descriptions. It grows by its corner handle. - [Combo](https://tactileui.dev/parts/combo): One field with its one action in a shared well: subscribe, search, add.