ComponentServer-safe

Input

A refined field with an inset accent baseline instead of a generic focus halo.

Installation

Work email

Soft surface with an inset focus edge.

Validation

Use letters, numbers and hyphens only.

tsx

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

export function InputDemo() {
  return <Input placeholder="you@example.com" type="email" />
}

Prop	Type	Default	Description
`type`	`React.HTMLInputTypeAttribute`	`"text"`	Native input type.
`aria-invalid`	`boolean`	`false`	Enables the destructive validation state.
`className`	`string`	`—`	Overrides or extends input styling.