Input
One native text input bound to Field behavior for labels, descriptions, errors and validation.
Usage
Labels, descriptions and errors belong to tp-field; the Input owns the native editor. A standalone Input can take label for its accessible name, but a Field is the usual home. Optional prefix and suffix content belongs to tp-input-group.
Types
type keeps native editing, affordances and validation for every host-supported input type.
Code-like values
mono shows the value in the mono font and turns off spell checking, autocorrection and autocapitalization. Use it for identifiers, paths, expressions and keys, where a corrected character is a bug.
Controlled value
default-value leaves the text to the Input. Supply value instead, before the first render, and every edit becomes a proposal: onValueChange receives it, and what you assign back to value is what commits. Here the owner rewrites each edit into a URL-safe handle.
Without an assignment the proposal is rejected and the committed text stays. Mode stays fixed for an instance lifetime. A rejected or canceled edit restores committed text and preserves selection within its bounds. Composition keeps the native draft until composition ends.
Validation
Native constraints such as required, pattern and minlength validate through the owning Field, which shows the error and wires aria-describedby. error and invalid set an explicit error from your own validation.
States
Disabled omits the value from form data. Read-only keeps it, along with selection and focus.
Native form reset restores an uncontrolled default with form-reset; controlled reset does not propose or replace owner state. State restoration restores uncontrolled strings. Enter uses the associated form’s default submitter; composition does not submit. File input retains its native file list and serializes files without duplicate participants.
Anatomy and customization
The native <input> is a real element in your tree: it renders into the Input’s light DOM (tp-input > input), shares the Input’s form owner and submits natively, so browser autofill and password managers classify and fill it like any form field. Customize semantic tokens, the presentation dictionary, partPresentation.input, or style tp-input > input directly; ::part(input) does not apply because the editor is not in the shadow root. Keep caret, selection, autofill and type-specific affordances visible.
Native form serialization follows the editable input’s current representation, including type sanitization, while the controlled owner value remains its supplied value. An empty named file input submits the native empty File; unnamed inputs do not contribute data.
Inline
variant="inline" fits the Input into one row the height of a control, with label at the start and the value at the end, so it stacks with other inline controls such as an inline Select. A press on the label edits the value. Inside a Field, the Field’s label moves into the row.
A number value sits between a decrement and an increment arrow in place of the browser’s spin buttons. Hold an arrow to keep stepping; the Arrow keys step the focused value too, ten steps at a time with Shift. step sets how far each step moves, and precision how many decimals the value keeps and shows, which defaults to the decimals of step.
API Reference
Every element also accepts motion-policy.
Attributes
typetypestring'text'email, password, search, url or tel; it sets the
keyboard, autofill and built-in validation.minminstring''maxmaxstring''stepstepstring''patternpatternstring''precisionprecisionnumber | undefinedstep.variantvariantInputVariant'default'inline shows the label and the value in one compact control-height row, for stacked
controls; an enclosing Field's label moves into the row.Events
tp-value-changeTpValueChangeEvent<string>detail.value, detail.previousValue and the detail.reason for the change.tp-field-valueCustomEvent<{ value: string; previousValue: string; reason: ChangeReason; }>value, previousValue and reason; the enclosing Field listens for it.Slots
defaultCSS parts
::part(input-row)::part(input-label)::part(input-stepper)::part(input-decrement)::part(input-increment)::part(input)Related
Components, widgets and patterns that use this one.