Input
Displays a form input field or a component that looks like an input field.
Preview
import { Input } from "@/components/ui/Input"
export function InputDemo() {
return (
<Input
aria-label="Email address"
type="email"
placeholder="name@example.com"
/>
)
}Installation
Make sure that namespace is set in your component.json file. Namespace docs: Learn more about namespaces
pnpm dlx shadcn@latest add @aura/inputManual
Copy and paste the class names utility into your utils/class-names.ts file.
import { clsx, type ClassValue } from "clsx"
import { twMerge } from "tailwind-merge"
export function cn(...inputs: ClassValue[]) {
return twMerge(clsx(inputs))
}
Copy and paste the Input component into your components/ui/Input.tsx file.
/**
* @description Displays a form input field or a component that looks like an input field.
*/
import * as React from "react";
import { cn } from "@/utils/class-names";
/**
* Matches Button sm, md, and lg (`h-3`, `h-4`, `h-5`).
* Vertical padding is 0 so the spacing height is the border box, same as Button.
*/
const inputSizeClassName = {
sm: "box-border h-3 px-2 py-0",
default: "box-border h-4 px-2 py-0",
lg: "box-border h-5 px-2 py-0",
} as const;
type InputSize = keyof typeof inputSizeClassName;
function Input({
className,
size = "default",
...props
}: Omit<React.ComponentProps<"input">, "size"> & {
size?: InputSize;
}) {
return (
<input
data-slot="input"
data-size={size}
className={cn(inputSizeClassName[size], className)}
{...props}
/>
);
}
export { Input };
export type { InputSize };