Input
Text input with start and end adornments, a clear button, a password visibility toggle, and presets for SSN and birthday.
import { Input } from "@plexui/ui/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/ui/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 opticallyAlign with either "start" or "end" to offset the gutter, aligning the input text with surrounding content. Works with Field: pass opticallyAlign 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 |
|---|---|---|---|
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 |
gutterSize | "2xs" | "xs" | "sm" | "md" | "lg" | "xl" | — | Controls gutter on the edges; defaults to value from size |
disabled | boolean | false | Disables the input visually and from interactions |
readOnly | boolean | false | Makes the input read-only and hides the clear button |
invalid | boolean | false | Mark the input as invalid |
allowAutofillExtensions | boolean | type === "password" || !!name | Allow autofill extensions to appear in the input |
autoSelect | boolean | false | Select all contents of the input when mounted |
startAdornment | ReactNode | — | Content rendered at the start of the input |
endAdornment | ReactNode | — | Content rendered at the end of the input |
onClear | () => void | — | When provided, displays a clear button that appears when the input has a value |
onAutofill | () => void | — | Called when the browser autofills the input |
pill | boolean | false | Fully rounded pill shape |
opticallyAlign | "start" | "end" | — | Applies a negative margin using the current gutter to optically align with surrounding content |
className applies to the container. Every other <input> attribute and handler (value, defaultValue, onChange, placeholder, maxLength, ...) goes to the <input>, and ref points at it.
Input.AdornmentButton
| 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))