Input

Installation

Usage

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

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

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

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

Examples

Default

The standard input applies base styles including a subtle border and shadow. It automatically defaults to the medium size (input-md) if no size class is provided.

Sizes

Use the size classes (input-sm, input-md, input-lg) to change the input’s dimensions.

Glass Surfaces

You can completely transform the input’s surface by adding glassmorphism classes.

Error State

Glass UI inputs do not use an error prop. Instead, you maintain full control by composing error states using standard Tailwind CSS classes.

Form Composition

Since the input acts as a pure structural base, it can be easily composed with native HTML labels, descriptions, and buttons using Tailwind’s standard layout utilities.

Password Toggle

Compose the base Input with an icon Button to create a custom password reveal toggle.

Disabled

The disabled state is automatically handled by the component using Tailwind’s native disabled attribute.

Styling & API

Following the system’s core philosophy, the Input component has no variant, size, or state props. It accepts standard HTML input attributes and delegates all visual control to CSS classes.

/* Sizes (Defaults to md) */
<Input className="input-sm" />
<Input className="input-lg" />

/_ Surfaces _/

<Input className="glass" />
<Input className="glass glass-soft" />
<Input className="glass glass-strong" />

/_ Custom States (e.g., Validation) _/

<Input className="border-red-500 focus-visible:ring-red-500" />

/* Sizes (Defaults to md) */
<Input className="input-sm" />
<Input className="input-lg" />

/_ Surfaces _/

<Input className="glass" />
<Input className="glass glass-soft" />
<Input className="glass glass-strong" />

/_ Custom States (e.g., Validation) _/

<Input className="border-red-500 focus-visible:ring-red-500" />