Input
Semantic input text collection
import { Input } from "@plexui/ui/components/Input";Examples
Overview
Variants
Sizing & roundness
size
gutterSize
0/16
Start adornment
Clear button
size
End adornment
0/16
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.
Auto select text
Autofill extensions
With button
variant
size
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.
opticallyAlign="start"
We'll never share your email.
Please enter a valid email address.
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.
Reference
| Prop | Type | Default | Description |
|---|---|---|---|
variant | "outline" | "soft" | "outline" | Visual style of the input |
size | "3xs" | "2xs" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "md" | Controls the size of the input |
gutterSize | string | — | Controls gutter on the edges; defaults to value from size |
disabled | boolean | false | Disables the input visually and from interactions |
invalid | boolean | false | Mark the input as invalid |
allowAutofillExtensions | boolean | false | 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 |
pill | boolean | false | Fully rounded pill shape |
opticallyAlign | "start" | "end" | — | Applies a negative margin using the current gutter to optically align with surrounding content |