Input

Displays a form input field or a component that looks like an input field.

<Input type="email" placeholder="Email" />

Installation

pnpm dlx cubix@latest add input

Usage

Import

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

Example

<Input type="email" placeholder="Email" />

Examples

Types

Every native input type is supported - file inputs even get styled file-button treatment:

<Input type="email" placeholder="Email" />
<Input type="password" placeholder="Password" />
<Input type="search" placeholder="Search..." />
<Input type="file" />

With icon

Compose the Input with plain elements - icons are just siblings positioned with Tailwind:

<div className="relative">
  <SearchIcon className="absolute left-2.5 top-1/2 size-4 -translate-y-1/2 text-muted-foreground" />
  <Input className="pl-8" placeholder="Search..." />
</div>

Invalid state

Set aria-invalid to switch to destructive border and ring styles - no extra prop needed:

<Input type="email" placeholder="Email" aria-invalid />

Disabled

<Input disabled placeholder="Disabled" />

In a form

Pair the Input with the Button to build native, accessible forms:

<form className="flex w-full max-w-sm items-center gap-2">
  <Input type="email" placeholder="Email" />
  <Button type="submit">Subscribe</Button>
</form>

API Reference

Note: The input renders data-slot="input" for targeting in tests and parent selectors, and switches to destructive styles automatically when aria-invalid is set.

Props

Prop	Type	Default	Description
type	string (e.g. "text" \| "email" \| "password" \| "file" \| "search")	"text"	The native input type. File inputs get styled file-button treatment.
aria-invalid	boolean	-	Marks the field as invalid and applies destructive border/ring styles automatically.
disabled	boolean	false	Disables the input and prevents interaction.
placeholder	string	-	Hint text shown when the input is empty (styled with muted-foreground).
className	string	-	Additional Tailwind classes merged with the component styles (last one wins).
...props	React.ComponentProps<'input'>	-	All native input attributes (value, onChange, required, min, max, ...) are forwarded to the rendered element.