Forms · astro-ui · Input

Input

Every native input type with token styling and validation states.

Input covers all 16 native types — text, email, password, date, color, range, file and friends — with token styling, size/variant control, and invalid state for server-driven validation. Numeric/date bounds forward via rest attributes.

← All components

Features

All 16 native input types, fully typed
8 border variants incl. success/destructive
5 sizes
invalid state for server-side validation display
min/max/step/accept forward via rest
Zero JS — forms submit natively

Usage

---
import { Input, Label } from "astro-ui";
---

<Label for="email" required>Email</Label>
<Input id="email" name="email" type="email" placeholder="ada@example.com" />

Demos

Common types

Text

Password

Date

<Input type="text" placeholder="Plain text" />
<Input type="email" placeholder="ada@example.com" />
<Input type="password" value="s3cret" />
<Input type="date" />

States

Invalid

Username is taken.

Disabled

<Input invalid ariaDescribedby="err" />
<p id="err">Username is taken.</p>
<Input disabled value="Cannot edit" />

Sizes

<Input size="sm" placeholder="sm" />
<Input size="md" placeholder="md" />
<Input size="lg" placeholder="lg" />

API

Props

Prop	Type	Default	Description
`type`	`all 16 native types`	`"text"`	Fully typed union.
`name / value / placeholder`	`string`	`—`	Native attributes.
`min / max / step`	`string \| number`	`—`	Numeric/date bounds (native).
`minlength / maxlength`	`number`	`—`	Length bounds.
`invalid`	`boolean`	`false`	Destructive border + aria-invalid.
`size`	`"xs" \| "sm" \| "md" \| "lg" \| "xl"`	`"md"`	Control scale.
`variant`	`"inherit" \| "primary" \| "secondary" \| "muted" \| "destructive" \| "success" \| "warning" \| "info"`	`"primary"`	Border color.
`class`	`string`	`—`	Merged via cn(); Tailwind classes welcome.
`id`	`string`	`—`	Element id.
`ariaLabel`	`string`	`—`	Accessible name.

Accessibility

Implemented accessibility features — semantics, ARIA wiring, and keyboard behavior that ship with the component.

FAQ

How is validation shown?

Server/form-driven: set invalid and point ariaDescribedby at the message element. No client JS ships or runs.

Changelog

Version history mentioning Input.

v0.1.0 — 2026-11-11

added

Forms (18): Autocomplete, Combobox, Label, Field, Input, InputGroup, Textarea, Select, Checkbox, Radio, Switch, Toggle, ToggleGroup, RadioGroup, Rating, Slider, DatePicker, TimePicker.
Shared --ui-control-* scale (height, inline padding, radius) used by Button, Input, Select, Textarea, and InputGroup so controls align on a row.