Input

A styled text input field that wraps Base UI's Input primitive, supporting all native HTML input attributes with consistent focus, disabled, and validation states.

Default

Disabled

Username

Username cannot be changed after signup.

Contact support to update your email address.

API token

Read-only — copy and store this token securely.

Error

Please enter a valid email address.

Username

Password

Password must be at least 8 characters.

File Upload

Attachment

PDF or Word, up to 10 MB.

DocumentClick to uploadPNG, JPG, PDF up to 10 MB

Input Types

Text

Password

URL

Tel

Number

Date

Time

Color

With Adornment

Domain

https://

Price

$USD

Storage limit

With Button

Invite team member

Share link

With Icon

With Label

First name

Website

Installation

npx shadcn@latest add @byronwade/input

Props

Prop	Type	Default	Description
type	React.HTMLInputTypeAttribute	"text"	The type of the input element (e.g. "text", "email", "password").
className	string	—	Additional CSS classes merged onto the input element.
placeholder	string	—	Placeholder text shown when the input is empty.
disabled	boolean	false	Disables the input, preventing interaction and applying reduced-opacity styling.
aria-invalid	boolean \| "true" \| "false"	—	Marks the input as invalid, applying destructive border and ring styles.
value	string \| number \| readonly string[]	—	Controlled value of the input.
onChange	React.ChangeEventHandler<HTMLInputElement>	—	Change event handler called when the input value changes.