Input
Takes one line of text.
Mode
textdefault
password
search
copy
Sizes
sm
defaultdefault
lg
States
rest
focus
filled
invalid
disabled
read-only
Usage
When to use it
- Use
- The answer fits on one line: a name, an email, a URL, an ID, an amount.
- Use
- The person filters a list already on the page (mode="search").
- Use
- The person reads a value to paste elsewhere, like an endpoint (mode="copy").
- Not for
- The answer runs to more than one line, like a prompt. Use Textarea.
- Not for
- The value is on or off and applies at once. Use Switch.
- Not for
- The person picks one of two to five views. Use Segmented control.
Rules
11 rules
- Must
- Put an Input in a Field with a FieldLabel, or give it aria-label when a visible label sits elsewhere. Because a placeholder vanishes on the first keystroke and is not a reliable accessible name.
- Must
- Pass an icon, a scheme, a unit or a button as leading or trailing, never beside the Input. Because outside the pill it sits outside the line that darkens on focus, and a press on it does not put the cursor in the text.
- Must
- Use InputAction for a button inside the pill; it sits 3px inside the line at every size. Because a plain Button keeps its own height and spills past the pill, or leaves an uneven gap.
- Must
- Give an ink InputAction only to a field that is a whole one-line form, with no other ink Button beside it. Because the action inside the pill is the group's one lead, and a second ink pill next to it splits the eye.
- Never
- Draw a ring, a black line or a shadow on an Input to show focus. Because Glaze shows a field's focus by darkening its own line to ink at about a third, and a ring around a pill reads as a button.
- Never
- Square off an Input with a radius class or set its height or text size in className. Because every one-line control in Glaze is a pill, and a fixed height clips the text at 200% zoom.
- Must
- Use mode="search" for a search box, never an icon placed over an input. Because a hand-placed icon misses the clear button, Escape to clear, the pending arc and the key hint.
- Must
- Give shortcut to one search per page; pass shortcutOwner={false} on another that only shows the hint. Because only the first claiming field in document order gets the key, so a second claim does nothing.
- Must
- Set type and autoComplete on an email, a URL or a phone number. Because without type a phone shows the text keyboard and autofill cannot offer the address.
- Should
- Let Field validate on blur, or set aria-invalid after a submit, never on the first render. Because a coral line before the person has typed blames them for nothing.
- Should
- Make the placeholder an example of the value in its format, not the label again.
State order
5 states, highest first
- 1
- disabled
- 2
- invalid
- 3
- focus
- 4
- read-only
- 5
- rest
Accessibility
6 checks
- The control is a native textbox named by FieldLabel or aria-label, with aria-invalid and aria-describedby from the Field.
- Focus darkens the line to --line-focus (ink at about a third, 2.3:1 on paper) beside the caret; invalid adds the error sentence, so neither rests on colour alone.
- Icon-only InputActions need aria-label; the password toggle sets aria-pressed and names itself Show or Hide.
- Escape in a search clears the query; a second Escape leaves the field. The key hint is aria-hidden.
- Text is 16px under a coarse pointer, so a phone browser never zooms the page on focus.
- Forced colors keep the 1px line in the system colour, and the caret marks focus.
Keyboard
3 keys
- Escape
- In a search, clears the query; with no query, leaves the field.
- / (or the shortcut)
- Focuses the search that owns it, from anywhere outside a field, dialog or menu.
- Enter
- Submits the form around it.
Edge cases
6 edge cases
- Long value
- Scrolls inside the pill; a copy value truncates and still copies all of it.
- Narrow row, 160px
- The text shrinks before any slot; slots and actions keep their size.
- Right to left
- Leading and trailing swap sides; a scheme like https:// keeps its own order.
- Zoom 200%
- The pill grows with the text past its token, and an action inside keeps its 3px.
- Slow search
- The magnifier turns to the arc and the pill keeps its size; the caller owns the timeout.
- Disabled Field or FieldSet
- The text, the slots and every action inside go quiet together.
API
10 props
mode'text' | 'password' | 'search' | 'copy'default'text'size'sm' | 'default' | 'lg'default'default'leading, trailingReactNodearia-invalidbooleanmonobooleandefaultfalseclassName, controlClassNamestringdefaultRevealedbooleandefaultfalseshortcut, shortcutOwner, pending, clearLabelstring, boolean, boolean, stringdefault, true, false, 'Clear search'value, noun, onCopystring, string, (v) => voidInputAction size, variant'icon' | 'text', Button variantdefault'icon', 'ghost'
Tokens
25 tokens
--paper- #ffffff
--field- #efefef
--line-control- rgb(5 5 5 / 0.15)
--line-focus- rgb(5 5 5 / 0.32)
--line-faint- rgb(5 5 5 / 0.06)
--fail- #e35e49
--text-1- rgb(5 5 5 / 0.80)
--text-2- rgb(5 5 5 / 0.60)
--text-3- rgb(5 5 5 / 0.45)
--text-disabled- rgb(5 5 5 / 0.32)
--control-sm- 26px
--control- 32px
--control-lg- 36px
--shell-inset- 3px
--line-width- 1px
--radius-pill- 999px
--space-3- 12px
--type-body-sm- 400 13px/1.5 var(--font-sans)
--type-caption- 400 12px/1.35 var(--font-sans)
--type-body- 400 14px/1.5 var(--font-sans)
--icon-sm- 12px
--icon- 14px
--icon-lg- 16px
--dur-state- 160ms
--ease-out- cubic-bezier(0.2, 0.8, 0.2, 1)