# Text field

Takes one line of typed text inside a Field.

* Kind: component
* Name: TextField
* Page: https://design.werklist.com/components/text-field
* Version: 2.1.2

## When to use it

* Names, email addresses, phone numbers, IDs, amounts and any short answer the person types

## When not to use it

* Up to five known answers with room to show them: use radio buttons
* More known answers: use a select or a combobox
* More than one line: use a text area
* Amounts with type="number": use type="text" with inputmode="decimal"

## Anatomy

* Height, medium: 44 px
* Height, large: 48 px
* Corner radius: 8 px (--radius-lg)
* Side padding: 12 px (--space-3)
* Value: 14 px on 20 px, weight 400, and 16 px on 22 px on a touch screen (--text)
* Placeholder: the size of the value (--text-muted)
* Fill: ink at 5 percent in light, white at 4 percent in dark, with a frosted backdrop in dark (--glass-fill-input)
* Edge: none in light, a 1 px ring inside the edge in dark (--input-border)
* Leading icon: 16 px, 12 px from the start, with the text starting at 36 px (--text-muted)
* Trailing slot: an icon button of 32 px, 6 px from the end, or a unit in 14 px text, 12 px from the end (--text-muted)

## Sizes

* md: height 44 px, padding 0 12 px, type 14 px on 20 px
* lg: height 48 px, padding 0 12 px, type 14 px on 20 px
* compact: height 36 px with a mouse and 44 px on a touch screen, for toolbars and the search field, padding 0 12 px, type 14 px on 20 px

## States

* Rest: The fill, and in dark the 1 px inner ring (--input-border, --glass-ring)
* Hover: No change
* Focus: In light the fill turns white, with a 1 px inner ring of the brand blue at 50 percent and a 3 px halo at 16 percent. In dark the fill is white at 6 percent, the ring is at 55 percent and the halo is 4 px at 18 percent. The change takes 150 ms (--brand-blue, --duration-fast, --ease-standard)
* Error: A 2 px edge in the error colour, and aria-invalid="true" (--error)
* Read only: No fill, no ring and no side padding, in full ink. It takes focus, with the focus ring outside it (--text, --focus-ring)
* Disabled: Fades to 50 percent and shows the not allowed cursor
* Autofilled: Keeps its own fill and ink. The browser's autofill tint does not show (--text)

## Keyboard

* Tab: Next field
* Enter: Sends the form

## Accessibility

* Named by the Field label. A field without a visible label carries the words of its placeholder as its name
* At least 44 px high on a touch screen, with editable text of at least 16 px
* The page never locks zoom
* In forced colours the field draws a 1 px outline, and 2 px with focus or an error

## Content

* The input type is email, tel, url or password where it applies, and an amount takes the decimal keyboard
* Personal data carries a standard autocomplete token, such as name, email, tel or organization
* Autocomplete is off only on a field that holds no personal data, such as a filter
* On a phone the Enter key reads Next between fields, and Done or Send on the last one
* A password field has a Show button at its end that becomes Hide
* A password is never filled in advance
* An amount accepts a comma or a point for decimals and a hyphen or a minus sign, and is written in the reader's format with aligned figures when the person leaves the field

## Tokens

* --glass-fill-input
* --glass-blur-input
* --input-border
* --glass-ring
* --brand-blue
* --text
* --text-muted
* --error
* --focus-ring
* --radius-lg
* --space-3
* --duration-fast
* --ease-standard