Input
Text input with start and end adornments, a clear button, a password visibility toggle, and presets for SSN and birthday.
import { Input, InputAdornmentButton } from "@plexui/vue/components/Input";Examples
Overview
Variants
Sizing & roundness
Start adornment
Clear button
End adornment
Password with visibility toggle
SSN input
Birthday input
Birthday with validation
Disabled
Invalid
Plex UI also provides a FieldError component (@plexui/vue/components/FieldError) that pairs well with invalid inputs. It renders an error icon with a message styled for form validation; a long message wraps under its first line, and :icon="false" leaves the icon out where the message stands alone, such as under a centered code input.
Auto select text
Autofill extensions
With button
Optical alignment
Use optically-align with either "start" or "end" to offset the gutter, aligning the input text with surrounding content. Works with Field: pass optically-align on the Field and it forwards to the child control automatically.
Input shares the unified 9-step size scale with Button, Select, SelectControl, and SegmentedControl: set the same size on adjacent controls and they'll align perfectly.
API
| Prop | Type | Default | Description |
|---|---|---|---|
value / v-model:value | string | number | — | Controlled value; `update:value` fires on every input |
default-value | string | number | — | Initial value when uncontrolled |
variant | "outline" | "soft" | "ghost" | "outline" | Visual style of the input; ghost has no border and no fill |
size | "3xs" | "2xs" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "md" | Controls the size of the input |
gutter-size | string | — | Controls gutter on the edges; defaults to value from size |
disabled | boolean | false | Disables the input visually and from interactions |
read-only / readonly | boolean | false | Makes the input read-only and hides the clear button |
invalid | boolean | false | Mark the input as invalid |
allow-autofill-extensions | boolean | false (true with name or type="password") | Allow autofill extensions to appear in the input |
auto-select | boolean | false | Select all contents of the input when mounted |
startAdornment / endAdornment | slots | — | Content rendered at the start or end of the input |
@clear | (event: MouseEvent) => void | — | When set, displays a clear button that appears when the input has a value |
@autofill | () => void | — | Fires when the browser autofills the input |
pill | boolean | false | Fully rounded pill shape |
optically-align | "start" | "end" | — | Applies a negative margin using the current gutter to optically align with surrounding content |
class applies to the container. Every other attribute and native listener (placeholder, style, maxlength, @input, @keydown, ...) goes to the <input>. The component exposes focus() and the input element.
InputAdornmentButton
| Prop | Type | Default | Description |
|---|---|---|---|
color | SemanticColor | — | Tint of the pressed (aria-pressed="true") state; the neutral primary-soft tint when unset |
type | string | "button" | Button type |
Styling
Input reads these component tokens. Override them at any scope to restyle it:
--input-border-color-invalid: border color invalid (defaultvar(--color-border-danger-outline))--input-gap-lg: gap lg (default10px)--input-gap-md: gap md (default8px)--input-gap-sm: gap sm (default6px)--input-gap-xs: gap xs (default4px)--input-outline-border-color: outline border color (defaultvar(--color-border-primary-outline))--input-outline-border-color-focus: outline border color focus (defaultvar(--alpha-50))--input-outline-border-color-hover: outline border color hover (defaultlight-dark(var(--alpha-25), var(--alpha-30)))--input-placeholder-text-color: placeholder text color (defaultvar(--color-text-tertiary))--input-soft-background-color: soft background color (defaultvar(--color-background-primary-soft-alpha))--input-soft-border-color-focus: soft border color focus (defaultvar(--alpha-20))--input-text-color: text color (defaultvar(--color-text))