# 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.*` (this page) · Component: [`<Field>`](https://www.prongs.dev/docs/components/field.md) · Intents: [14](#intents)

## Intents

| Intent | Status | Use it for |
|---|---|---|
| [`field.text`](https://www.prongs.dev/docs/intents/field/text.md) | `<input type="text">` | Short free text on one line: names, titles, handles |
| [`field.email`](https://www.prongs.dev/docs/intents/field/email.md) | `<input type="email">` | An email address |
| [`field.password`](https://www.prongs.dev/docs/intents/field/password.md) | `<input type="password">` | A password, with room for a show/hide control. Set autoComplete="new-password" when creating one |
| [`field.password.shown`](https://www.prongs.dev/docs/intents/field/password-shown.md) | `<input type="text">` | A password field while its content is revealed |
| [`field.search`](https://www.prongs.dev/docs/intents/field/search.md) | `<input type="search">` | The main search of a page: find people, products, anything |
| [`field.filter`](https://www.prongs.dev/docs/intents/field/filter.md) | `<input type="search">` | Narrows a list that is already shown, usually in a toolbar: "Search this feed" |
| [`field.number`](https://www.prongs.dev/docs/intents/field/number.md) | `<input type="number">` | A quantity or amount |
| [`field.range`](https://www.prongs.dev/docs/intents/field/range.md) | `<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`](https://www.prongs.dev/docs/intents/field/url.md) | `<input type="url">` | A full web address |
| [`field.multiline`](https://www.prongs.dev/docs/intents/field/multiline.md) | `<textarea>` | Longer free text over several lines: bios, messages, notes |
| [`field.checkbox`](https://www.prongs.dev/docs/intents/field/checkbox.md) | `<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`](https://www.prongs.dev/docs/intents/field/switch.md) | `<input type="checkbox">` | A setting that turns on or off immediately: show images, compact mode. Pair with a text.label |
| [`field.select`](https://www.prongs.dev/docs/intents/field/select.md) | `<select>` | One value from a list too long to show as options: country, time zone. Children are <option>s |
| [`field.color`](https://www.prongs.dev/docs/intents/field/color.md) | `<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.*`](https://www.prongs.dev/docs/intents/heading.md) |
| Running text and the small pieces around it: introductions, captions, labels, facts about an item, code. | [`text.*`](https://www.prongs.dev/docs/intents/text.md) |
| Messages about what just happened or is happening. They are announced to screen readers. | [`feedback.*`](https://www.prongs.dev/docs/intents/feedback.md) |
| Commands, named for what they do: save, delete, share. With an href they render a link, without one a button. | [`action.*`](https://www.prongs.dev/docs/intents/action.md) |
| Moving around: the home link, pages of the site, views of the same content, steps of a flow. | [`nav.*`](https://www.prongs.dev/docs/intents/nav.md) |
| Picking from a small set shown all at once: options for a setting, filters, colours. | [`choice.*`](https://www.prongs.dev/docs/intents/choice.md) |
| 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.*`](https://www.prongs.dev/docs/intents/layout.md) |
| Images that identify a person or illustrate content, with a text fallback when there is no image. | [`media.*`](https://www.prongs.dev/docs/intents/media.md) |
| Modal interruptions built on the native <dialog>: a task, a confirmation, a full-screen reader. | [`dialog.*`](https://www.prongs.dev/docs/intents/dialog.md) |
| Things that open next to the button that opened them without blocking the page: menus, pickers, extra detail. | [`popover.*`](https://www.prongs.dev/docs/intents/popover.md) |

## 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`.