Components
Starting preview...
Displays a form input field or a component that looks like an input field.
npx shadcn@latest add https://21st.dev/r/shadcn/inputimport { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Button } from "@/components/ui/button";
function InputDemo() {
return <Input type="email" placeholder="Email" />;
}
function InputFile() {
return (
<div className="grid w-full max-w-sm items-center gap-1.5">
<Label htmlFor="picture">Picture</Label>
<Input id="picture" type="file" />
</div>
)
}
function InputDisabled() {
return <Input disabled type="email" placeholder="Email" />;
}
function InputWithLabel() {
return (
<div className="grid w-full max-w-sm items-center gap-1.5">
<Label htmlFor="email">Email</Label>
<Input type="email" id="email" placeholder="Email" />
</div>
)
}
function InputWithButton() {
return (
<div className="flex w-full max-w-sm items-center space-x-2">
<Input type="email" placeholder="Email" />
<Button type="submit">Subscribe</Button>
</div>
);
}
export default {
InputDemo,
InputFile,
InputDisabled,
InputWithLabel,
InputWithButton,
}