Field

What the user types or picks in a form. The intent sets the element, the input type, the input mode and autocomplete.

Pattern

field.*

Component

<Field>

Intents

View as Markdown

Intents

field.text<input type="text">

Short free text on one line: names, titles, handles

field.email<input type="email">

An email address

field.password<input type="password">

A password, with room for a show/hide control. Set autoComplete="new-password" when creating one

field.password.shown<input type="text">

A password field while its content is revealed

field.search<input type="search">

The main search of a page: find people, products, anything

field.filter<input type="search">

Narrows a list that is already shown, usually in a toolbar: "Search this feed"

field.number<input type="number">

A quantity or amount

field.range<input type="range">

A value picked by sliding along a scale: volume, a playback position, a price limit. Give it min, max, value and an aria-label

field.url<input type="url">

A full web address

field.multiline<textarea>

Longer free text over several lines: bios, messages, notes

field.checkbox<input type="checkbox">

A yes/no choice that is sent with a form: remember me, agree to terms. Pair with a text.label

field.switch<input type="checkbox">

A setting that turns on or off immediately: show images, compact mode. Pair with a text.label

field.select<select>

One value from a list too long to show as options: country, time zone. Children are <option>s

field.color<input type="color">

Any colour, picked with the system colour picker

Choosing a domain

Find the row that describes your case, and use the domain on the right.

If the problem is
Use
Titles that give a page its structure, from the marketing headline down to the title of one item.
heading.*
Running text and the small pieces around it: introductions, captions, labels, facts about an item, code.
text.*
Messages about what just happened or is happening. They are announced to screen readers.
feedback.*
Commands, named for what they do: save, delete, share. With an href they render a link, without one a button.
action.*
Moving around: the home link, pages of the site, views of the same content, steps of a flow.
nav.*
Picking from a small set shown all at once: options for a setting, filters, colours.
choice.*
What the user types or picks in a form. The intent sets the element, the input type, the input mode and autocomplete.
field.* this page
Page regions and groups. The intent picks the element (main, section, form, ul…) and the arrangement.
layout.*
Images that identify a person or illustrate content, with a text fallback when there is no image.
media.*
Modal interruptions built on the native <dialog>: a task, a confirmation, a full-screen reader.
dialog.*
Things that open next to the button that opened them without blocking the page: menus, pickers, extra detail.
popover.*

For registry authors

Starter intents. These are the intents prongs add puts in your registry, shown in this site’s theme. Yours are your own registry.ts: rename, restyle and add to them, and see them with prongs add gallery.