Input

A text input for forms and data entry. Height h-8, built-in focus and invalid styles. For icons or buttons inside the control, see Input Group.

A simple text input. Pass native type, placeholder, and events.

Installation

CLI

npx @sonojs/ui@latest add input

input.tsx

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

export function Example() {
  return <Input type="email" placeholder="Email" />
}

Prop	Type	Default	Description
type	HTML input type	"text"	Native input type — text, email, file, password, …
disabled	boolean	false	Disables the input and shows not-allowed cursor.
aria-invalid	boolean	—	Marks the control invalid and applies destructive ring.
className	string	—	Merge extra Tailwind classes on the input.