A text field for capturing user input. Supports labels, hints, error states, and multiple input types.
Preview
Code
VUE
<Input>
Email address
</Input>Props
Visible label above the input
Placeholder shown when the field is empty
HTML input type
Helper text shown below the input
Error message — replaces hint and visually marks the field
Prevents interaction with the input
Marks the field as required
Props API
| Prop | Type | Default | Required | Description |
|---|---|---|---|---|
label | string | "Email address" | — | Visible label above the input |
placeholder | string | "you@example.com" | — | Placeholder shown when the field is empty |
type | select"text" | "email" | "password" | "number" | "search" | "url" | "text" | — | HTML input type |
hint | string | "" | — | Helper text shown below the input |
error | string | "" | — | Error message — replaces hint and visually marks the field |
disabled | boolean | false | — | Prevents interaction with the input |
required | boolean | false | — | Marks the field as required |
Usage
Always pair an input with a visible label — never rely on placeholder text alone. Use "hint" to explain expected format or constraints. The "error" prop takes over from "hint" and should describe what went wrong and how to fix it.
Accessibility
Label is always associated with the input via matching for/id attributes.
Error messages are linked via aria-describedby so screen readers announce them.
Required fields include aria-required="true".
Error state uses aria-invalid="true" to signal invalid input to assistive tech.