Input
Input
A styled native <input> — every native type (text, email, password, number, file, ...) shares the same visual treatment.
import { Input } from "@pompeitech/vesuvius-ui";Default
With a label
Sizes
The four sizes use the same height scale as Button, Select, and MultiSelect:
Disabled
File input
The native type="file" picker gets the same border/focus treatment as text inputs, with its own button styled to match:
Invalid state
Set aria-invalid — no separate error/invalid prop, so the same attribute that screen readers use also drives the styling:
API
Input
| Prop | Type | Default | Description |
|---|---|---|---|
type | React.HTMLInputTypeAttribute | "text" | Any native input type. |
size | "xs" | "sm" | "default" | "lg" | "default" | Control height: 28, 32, 36, or 40 px. |
aria-invalid | boolean | Drives the invalid/error styling — there is no separate error prop. |
Plus every other native <input> prop (disabled, placeholder, value/defaultValue, onChange, required, min/max, accept, ...).
Commonly paired with Label for the field caption and (in a form context) helper/error text below it.
Accessibility
Always associate an Input with a Label via matching htmlFor/id (as above) rather than relying on placeholder alone — placeholder text disappears the moment the user types and is not a reliable accessible name for every assistive technology.