Components
Loading preview...
Provides supplementary text for form fields and other components.
npx shadcn@latest add https://21st.dev/r/hero_ui/heroui-descriptionimport { Description, HeroUIStyles, Input, Label } from "@/components/ui/heroui-description";
export default function WithFormFieldsDemo() {
return (
<div className="heroui-description-scope flex min-h-screen w-full items-center justify-center overflow-hidden bg-background p-8 text-foreground">
<HeroUIStyles />
<div className="heroui-description-field">
<Label htmlFor="password">Password</Label>
<Input
aria-describedby="password-description"
className="heroui-description-input-wide"
id="password"
type="password"
/>
<Description id="password-description">
Must be at least 8 characters with one uppercase letter
</Description>
</div>
</div>
);
}
export { WithFormFieldsDemo };