Input

Installation

Usage

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

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

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

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

Examples

Default

The standard input uses the default variant with the medium size.

Sizes

Use the size prop for the standard input scale. md is the default.

Variants

Use variants to change the surface treatment before reaching for custom classes.

Error State

Glass UI inputs do not use an error prop. Set aria-invalid="true" to opt into the built-in destructive border and focus ring.

Form Composition

Use Field for the canonical one-field pattern. Input still works outside Field, but inside it can inherit ids, descriptions, and invalid state.

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

Input now follows the same prop-first API direction as Button. Reach for variant and size first, then use className as an escape hatch for one-off layout or state styling. When composed inside Field, explicit id, aria-describedby, and aria-invalid props still win.

/* Variants */
<Input variant="default" />
<Input variant="soft" />
<Input variant="strong" />
<Input variant="transparent" />

/* Sizes (defaults to md) */

<Input size="sm" />
<Input size="md" />
<Input size="lg" />

/* Native invalid state */

<Input aria-invalid="true" />

/* Variants */
<Input variant="default" />
<Input variant="soft" />
<Input variant="strong" />
<Input variant="transparent" />

/* Sizes (defaults to md) */

<Input size="sm" />
<Input size="md" />
<Input size="lg" />

/* Native invalid state */

<Input aria-invalid="true" />

API Reference