Text field

A text field takes one line of text: a name, an email address, a passport number, an hourly rate. It sits inside a Field, which gives it a label, a hint and an error.

When to use it

Use a text field when the person has to type the answer. If the answers are known in advance, let them choose: radio buttons for up to five, a select or a combobox for more. For more than one line, use a text area.

Size the field to the answer. A year or a postal code gets a short field. A name or an email address takes the width of the form.

Anatomy

In the light theme the field is a soft grey well, with no line and no shadow. In the dark theme it is a faint white fill with a thin ring inside its edge. The fill shows where to type, and the label above says what.

Password

Height, medium: 44 px
Height, large: 48 px
Corner radius: 8 px; --radius-lg
Side padding: 12 px; --space-3
Text: 14 px on 20 px; --text
Text on a touch screen: 16 px on 22 px; --text
Fill in light: ink at 5 percent, no line, no shadow
Fill in dark: white at 4 percent, a 1 px ring inside the edge; --input-border
Placeholder: 14 px on 20 px; --text-muted
Leading icon: 16 px, text starts at 36 px; --text-muted
Trailing button: 32 px, 6 px from the end

Sizes

Medium fits most forms. Large is for a page whose only task is the form, such as the intake form a candidate fills in.

On a touch screen the text grows to 16 px so the browser does not zoom into the field. The field keeps its height, and the page can still be zoomed.

Full name

Medium above large.

States

Focus turns the field white in the light theme and puts a blue ring around it. The pointer changes nothing: a field looks the same under the mouse as at rest.

Hourly rate

In euros, before tax.

Rest

Hourly rate

In euros, before tax.

Focus

Hourly rate

Enter the rate in figures.

Error

Hourly rate

Set by the contract.

Read only

Hourly rate

Choose a contract first.

Disabled

Rest: The fill, and in dark the inner ring
Focus: a white fill in light, a 1 px inner ring of the brand blue and a 3 px halo (4 px in dark); --brand-blue
Error: A 2 px red edge; --error
Read only: No fill, full ink; --text
Disabled: The field fades to 50 percent

Keyboards and autofill

Set the input type so a phone shows the right keyboard: email for addresses, tel for phone numbers, url for links, and the decimal keyboard for amounts.

Name the answer for autofill with a standard token such as name, email, tel or organization. Turn autofill off only where the field holds no personal data, such as a filter. An autofilled field keeps its own fill.

A password field has a Show button at its end. It reveals the text and becomes Hide. Never fill in a password in advance.

Amounts and signed numbers

Accept what people type and paste: a comma or a point for decimals, spaces between thousands, and a minus for a value below zero. When the person leaves the field, show the number in their format with aligned figures. Write the unit after the field, such as EUR or hours.

Hourly rate

EUR

Accommodation balance

EUR

Accessibility

The field takes its name from the Field label. A field with no visible label, such as a search in a toolbar, carries the same words as its accessible name.

On a touch screen the field is at least 44 px high, and the page never locks zoom.

Permitted and not permitted

Permitted

A text input with the decimal keyboard for an amount
Typing, pasting and a decimal comma all work.

Not permitted

A number input with arrows for an amount
A scroll wheel over the field changes the value without anyone noticing.

NextText area

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

JSON

{
  "title": "Text field",
  "path": "/components/text-field",
  "url": "https://design.werklist.com/components/text-field",
  "text": "https://design.werklist.com/agent/components/text-field",
  "summary": "One line of text, from a name to an amount, with the keyboard, autofill and states each answer needs.",
  "version": "2.1.2",
  "kind": "component",
  "name": "TextField",
  "purpose": "Takes one line of typed text inside a Field.",
  "use": [
    "Names, email addresses, phone numbers, IDs, amounts and any short answer the person types"
  ],
  "avoid": [
    "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": [
    {
      "part": "Height, medium",
      "measure": "44 px"
    },
    {
      "part": "Height, large",
      "measure": "48 px"
    },
    {
      "part": "Corner radius",
      "measure": "8 px",
      "token": "--radius-lg"
    },
    {
      "part": "Side padding",
      "measure": "12 px",
      "token": "--space-3"
    },
    {
      "part": "Value",
      "measure": "14 px on 20 px, weight 400, and 16 px on 22 px on a touch screen",
      "token": "--text"
    },
    {
      "part": "Placeholder",
      "measure": "the size of the value",
      "token": "--text-muted"
    },
    {
      "part": "Fill",
      "measure": "ink at 5 percent in light, white at 4 percent in dark, with a frosted backdrop in dark",
      "token": "--glass-fill-input"
    },
    {
      "part": "Edge",
      "measure": "none in light, a 1 px ring inside the edge in dark",
      "token": "--input-border"
    },
    {
      "part": "Leading icon",
      "measure": "16 px, 12 px from the start, with the text starting at 36 px",
      "token": "--text-muted"
    },
    {
      "part": "Trailing slot",
      "measure": "an icon button of 32 px, 6 px from the end, or a unit in 14 px text, 12 px from the end",
      "token": "--text-muted"
    }
  ],
  "sizes": [
    {
      "name": "md",
      "height": "44 px",
      "padding": "0 12 px",
      "type": "14 px on 20 px"
    },
    {
      "name": "lg",
      "height": "48 px",
      "padding": "0 12 px",
      "type": "14 px on 20 px"
    },
    {
      "name": "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": [
    {
      "name": "Rest",
      "change": "The fill, and in dark the 1 px inner ring",
      "tokens": [
        "--input-border",
        "--glass-ring"
      ]
    },
    {
      "name": "Hover",
      "change": "No change"
    },
    {
      "name": "Focus",
      "change": "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",
      "tokens": [
        "--brand-blue",
        "--duration-fast",
        "--ease-standard"
      ]
    },
    {
      "name": "Error",
      "change": "A 2 px edge in the error colour, and aria-invalid=\"true\"",
      "tokens": [
        "--error"
      ]
    },
    {
      "name": "Read only",
      "change": "No fill, no ring and no side padding, in full ink. It takes focus, with the focus ring outside it",
      "tokens": [
        "--text",
        "--focus-ring"
      ]
    },
    {
      "name": "Disabled",
      "change": "Fades to 50 percent and shows the not allowed cursor"
    },
    {
      "name": "Autofilled",
      "change": "Keeps its own fill and ink. The browser's autofill tint does not show",
      "tokens": [
        "--text"
      ]
    }
  ],
  "keys": [
    {
      "key": "Tab",
      "action": "Next field"
    },
    {
      "key": "Enter",
      "action": "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"
  ]
}

Raw file: https://design.werklist.com/agent/components/text-field