Input

A single-line text input. Supports all HTML input types (text, email, password, number, file, etc.) and forwards all standard input attributes.

✓Supports all HTML input types
✓Consistent focus ring using the --ring token
✓Placeholder, disabled, and file input states
✓Full width by default — constrain with a wrapper
✓Forwards ref

Email address

import { Input }from "@aetherstack/ui"

input.tsx

import { Input, Label } from "@/components/ui/input"

export function InputDemo() {
  return (
    <div className="w-72 space-y-2">
      <Label htmlFor="email">Email address</Label>
      <Input id="email" type="email" placeholder="you@example.com" />
    </div>
  )
}

Usage

With label

Always pair an Input with a Label for accessibility.

Full name

Input types

Any HTML input type is supported via the type prop.

Disabled

Disabled inputs prevent interaction and are visually dimmed.

API key

File input

File inputs are styled consistently with a custom file selector.

Upload file

With inline button

Pair with a Button for search or submit patterns.

Props

Prop	Type	Default	Description
type	string	"text"	HTML input type (text, email, password, number, file, etc.).
placeholder	string	—	Placeholder text shown when the input is empty.
disabled	boolean	false	Disables the input — prevents interaction and applies reduced opacity.
className	string	—	Additional class names merged onto the input element.
...props	React.InputHTMLAttributes<HTMLInputElement>	—	All standard HTML input attributes (onChange, value, defaultValue, name, required, etc.).

* Required props

Accessibility

→Always associate an Input with a Label using matching id and htmlFor attributes.
→For form validation, use aria-describedby to link the input to its error message.
→Use aria-invalid='true' when a field has an error.
→Never rely on placeholder text alone to label a field — placeholders disappear when typing.