Input

Install

The input is part of the boilerplate skill, with every other component on this site. Install it in your project's folder; it works in Claude Code, Codex, Cursor and other agents. Already done? Skip ahead. More in the Introduction.

npx skills add frontendsupply/skills --skill boilerplate

Ask

Then ask for it in your own words, or run the command. The skill reads your project's style first and writes the component in it. If the project has no input yet:

/boilerplate add input

If it already has one, the skill rebuilds it on this pattern and keeps its look, its names and every place that uses it working:

/boilerplate refactor input

Either way it ends by proving that only the look changed: a script checks every behavior class and slot is still there.

Fields

A field ties a label, a description and an error to its input. The browser's own checks do the validating: required,type="email", a pattern. Each error says which check it answers, and it shows when you leave the field, or when the form is sent. A form library can drive the error instead.

Icons and addons

An icon goes in as a child, before or after the input. Text that belongs with the value, a currency, a unit, the start of a URL, goes in an addon. Clicking an icon, an addon or the padding around them puts the caret in the input, the way a field in one piece would: at the end when you click past the text, at the start when you click before it.

Buttons in the frame

Three buttons know what the input holds. Clear shows only while there's something to clear and the field can be changed; hidden, it keeps its place, so the text never jumps. It empties the field the way typing would, so a controlled value, validation and form libraries all hear it. Reveal shows a password as text, keeps the keyboard from capitalizing or correcting it, and hides it again when the form is sent, before a password manager reads it. Copy copies the value, turns its icon into a check for two seconds; with nothing to copy it's disabled, and where the clipboard is blocked it selects the text instead. Pressing clear or reveal never takes the caret out of the input, so a phone's keyboard stays up. Any other button, like a search's submit, is a plain one in the same frame.

Hints

Three small signs that need the field's state. A shortcut hint makes its keys work: ⌘K (Ctrl K elsewhere) focuses the field from anywhere on the page and selects what's in it, unless the field is disabled, hidden or behind a dialog. It's written for the platform, and steps aside while the field has focus and on touch screens. A count shows how much of the limit is used. A password field shows when Caps Lock is on.

Suggestions

For a field that can take anything but usually takes one of a few things, suggestions open under the frame as you type, as wide as it is; any text is still allowed. Long lists come in sections, each with a label. For a value that must be one of a list, use a select or a combobox instead. It's Base UI's Autocomplete.

Disabled and read-only

A disabled field dims, and every button in its frame goes with it. A read-only one can still be copied, on a quieter fill. A clear button hides in both.

One height

An input is as tall as a button, so the two sit in a row without a pixel to fix. The height is set once, and the buttons inside the frame follow it.

Phones

On a phone the keyboard is part of the field. The skill picks the attributes for each kind of input:type="email" brings the @ key, inputMode="numeric" a number pad for codes and card numbers (a number type would drop leading zeros), inputMode="decimal" one with a decimal point, and enterKeyHint labels the return key Search, Send or Next. autoCompletenames what the field holds, email, current-password, one-time-code, so the phone can fill it from a message or a password manager. Typed text is 16px on touch screens, so iOS doesn't zoom in on focus.

Alignment

Five inputs at their real size, with the lines their parts share. Hover a line to see what sits on it: icons, addons and text starting on one inset and ending on the same inset at the other end, a button's icon and a count included; text after an icon one gap further in; every frame one height, one gap apart, ending on one edge; and every part on its frame's center line. A part a pixel off would show as a line of its own.