Live preview
import { Input } from "@/components/ui/input";
export default function InputDemo() {
return <Input className="w-[200px]" type="email" placeholder="Email" aria-label="Email" />;
}
#Installation
npx shadcn@latest add https://neobrutal-ui.andongmin.com/r/input.json"use client";
import { Input as InputPrimitive } from "@base-ui/react/input";
import * as React from "react";
import { cn } from "@/lib/utils";
function Input({ className, type, ...props }: React.ComponentProps<"input">) {
return (
<InputPrimitive
type={type}
data-slot="input"
className={cn(
"flex h-10 w-full rounded-base border-2 border-border bg-secondary-background selection:bg-main selection:text-main-foreground px-3 py-2 text-sm font-base text-foreground file:border-0 file:bg-transparent file:text-sm file:font-heading placeholder:text-foreground/50 focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-black focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
className,
)}
{...props}
/>
);
}
export { Input };
#Usage
import { Input } from "@/components/ui/input";<Input className="w-[200px]" type="email" placeholder="Email" />#Examples
#File
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
export default function InputFileDemo() {
return (
<div className="grid w-full max-w-64 items-center gap-1.5">
<Label htmlFor="picture">Picture</Label>
<Input id="picture" type="file" />
</div>
);
}
#Disabled
import { Input } from "@/components/ui/input";
export default function InputDisabledDemo() {
return (
<Input className="max-w-[200px]" type="email" placeholder="Email" aria-label="Email" disabled />
);
}
#With Label
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
export default function InputWithLabelDemo() {
return (
<div className="grid max-w-[200px] items-center gap-1.5">
<Label htmlFor="email">Email</Label>
<Input type="email" id="email" placeholder="Email" />
</div>
);
}
#With Button
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
export default function InputWithButtonDemo() {
return (
<div className="flex w-full max-w-sm items-center space-x-2">
<Input type="email" placeholder="Email" aria-label="Email" />
<Button variant="noShadow" type="submit">
Subscribe
</Button>
</div>
);
}