Input

A single-line text input for collecting short user data: names, emails, search queries, or any free-form value. For labeling, validation, and error messages, wrap it in Field.

Preview

Installation

npx shadcn@latest add @cubby-ui/input

Usage

import { Input } from "@/components/ui/cubby-ui/input";

<Input />

Examples

With Label

Pair the input with a <label> to describe what it collects.

Disabled

Set disabled to prevent interaction and dim the input.

Elevated Variant

On a Card, Dialog, or popover surface, the opaque default input collapses into its parent. Use variant="elevated" for a translucent overlay that adapts to the substrate. See the Surfaces docs for the full reasoning.

Form Integration

Use Field for labeling, validation, and error display. See the Forms guide for more patterns.

API Reference

The Input component is built on top of Base UI's Input. All Base UI props are supported. The documentation below only covers custom props specific to our implementation.

For the complete Base UI API, see the Base UI Input documentation.

Props