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#

import { Input } from "@/components/ui/cubby-ui/input";
 
export default function InputDemo() {
  return <Input className="w-fit" placeholder="Enter your email" />;
}

Installation#

npxnpx 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.

import { Input } from "@/components/ui/cubby-ui/input";
import { Label } from "@/components/ui/cubby-ui/label";
 
export default function InputWithLabel() {
  return (
    <Label>

Disabled#

Set disabled to prevent interaction and dim the input.

import { Input } from "@/components/ui/cubby-ui/input";
 
export default function InputDisabled() {
  return <Input className="w-fit" placeholder="Disabled input" disabled />;
}

Outline Variant#

Use variant="outline" to match the outline Button: a card fill with a hairline border in light mode, a recessed fill with a faint ring in dark mode. The default tint already reads on the page, Cards, Dialogs, and popovers, so no field needs a per-surface variant.

import { Input } from "@/components/ui/cubby-ui/input";
import { Label } from "@/components/ui/cubby-ui/label";
 
export default function InputOutline() {
  return (
    <div className="flex w-full max-w-sm flex-col gap-2">

Form Integration#

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

"use client";
 
import { Button } from "@/components/ui/cubby-ui/button";
import {
  Field,
  FieldDescription,

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#

Upgrading#

If you're reinstalling over an earlier version, check these changes: