Sections
Get Started
UI
Components
- Animated Beam
- Animated List
- Animated Logo
- Animated Theme Toggler
- Avatar Circles
- Bento Grid
- Big Name Text
- Border Beam
- Dock
- Feature Card
- Filter Dropdown
- Footer Link
- Hero Badge
- Hero Buttons
- Hyper Text
- Lens
- Magic Card
- Marquee
- Meteors
- Onboarding Form
- Pricing Card
- Scroll Text
- Section Header
- Site Header
- Status Card
- Status
- Tweet Card
import { Input } from "@/registry/sase/input";
export function InputDemo() {
return <Input type="email" placeholder="Email" />;
}
Installation
pnpm dlx shadcn@latest add https://sase-ui.vercel.app/r/input.json
Usage
import { Input } from "@/components/ui/input";<Input />Examples
Default
import { Input } from "@/registry/sase/input";
export function InputDemo() {
return <Input type="email" placeholder="Email" />;
}
File
import { Input } from "@/registry/sase/input";
import { Label } from "@/registry/sase/label";
export function InputFile() {
return (
<div className="grid w-full max-w-sm items-center gap-3">
<Label htmlFor="picture">Picture</Label>
<Input id="picture" type="file" />
</div>
);
}
Disabled
import { Input } from "@/registry/sase/input";
export function InputDisabled() {
return <Input disabled type="email" placeholder="Email" />;
}
With Label
import { Input } from "@/registry/sase/input";
import { Label } from "@/registry/sase/label";
export function InputWithLabel() {
return (
<div className="grid w-full max-w-sm items-center gap-3">
<Label htmlFor="email">Email</Label>
<Input type="email" id="email" placeholder="Email" />
</div>
);
}
With Button
import { Button } from "@/registry/sase/button";
import { Input } from "@/registry/sase/input";
export function InputWithButton() {
return (
<div className="flex w-full max-w-sm items-center gap-2">
<Input type="email" placeholder="Email" />
<Button type="submit" variant="outline">
Subscribe
</Button>
</div>
);
}
Changelog
2025-09-18 Remove flex class
Edit input.tsx and remove the flex class from the input component. This is no longer needed.