Components
Loading preview...
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { useId } from "react";
function Component() {
const id = useId();
return (
<div className="space-y-2 min-w-[300px]">
<Label htmlFor={id}>File input</Label>
<Input id={id} className="p-0 pe-3 file:me-3 file:border-0 file:border-e" type="file" />
</div>
);
}
export { Component };
More examples
DefaultOpen page →
Loading preview...
Required inputOpen page →
Loading preview...
Input with helper textOpen page →
Loading preview...
Input with hintOpen page →
Loading preview...
Input with colored border and ringOpen page →
Loading preview...
Input with errorOpen page →
Loading preview...
Input with gray backgroundOpen page →
Loading preview...
Disabled inputOpen page →
Loading preview...
Input with start iconOpen page →
Loading preview...
Input with end iconOpen page →
Loading preview...
Input with start inline add-onOpen page →
Loading preview...
Input with end inline add-onOpen page →
Loading preview...
Input with inline add-onsOpen page →
Loading preview...
Input with start add-onOpen page →
Loading preview...
Input with end add-onOpen page →
Loading preview...
Input with inline start and end add-onOpen page →
Loading preview...
Input with start selectOpen page →
Loading preview...
Input with end selectOpen page →
Loading preview...
Input with end inline buttonOpen page →
Loading preview...
Input with end icon buttonOpen page →
Loading preview...
Input with end buttonOpen page →
Loading preview...
Input with buttonOpen page →
Loading preview...
Show/hide password inputOpen page →
Loading preview...
Input with clear buttonOpen page →
Loading preview...
Search input with <kbd>Open page →
Loading preview...
Search input with icon and buttonOpen page →
Loading preview...
Search input with loaderOpen page →
Loading preview...
Number input with plus/minus buttonsOpen page →
Loading preview...
Number input with chevronsOpen page →
Loading preview...
Input with overlapping labelOpen page →
Loading preview...
Input with label animationOpen page →
Loading preview...
Input with inset labelOpen page →
Loading preview...
Input with character limitOpen page →
Loading preview...
Input with characters leftOpen page →
Loading preview...
Date inputOpen page →
Loading preview...
Time inputOpen page →
Loading preview...
Time input with start iconOpen page →
Loading preview...
Date and time inputOpen page →
Loading preview...
Date range picker (unavailable dates)Open page →
Loading preview...
OTP input singleOpen page →
Loading preview...
OTP input doubleOpen page →
Loading preview...
OTP input (spaced)Open page →
Loading preview...
Card Number InputOpen page →
Loading preview...
Credit card expiry date inputOpen page →
Loading preview...
Credit card CVC code inputOpen page →
Loading preview...
Credit Card Details InputOpen page →
Loading preview...
Input with password strength indicatorOpen page →
Loading preview...
Read-only inputOpen page →
Loading preview...
Input with maskOpen page →
Loading preview...
Time input with maskOpen page →
Loading preview...
Input with RangeOpen page →
Loading preview...