Input

npx shadcn@latest add https://ui.saasflare.io/r/input.json

pnpm add @saasflare/ui

"use client"import { Input } from "@saasflare/ui"/** A single text input for collecting an email address. */export function Demo() {    return (        <div className="w-full max-w-sm">            <Input type="email" placeholder="you@company.com" />        </div>    )}

"use client"import { Input, Label } from "@saasflare/ui"/** Disabled and invalid input states. */export function Demo() {    return (        <div className="flex flex-col gap-4 w-full max-w-sm">            <div className="flex flex-col gap-2">                <Label htmlFor="email-disabled">Email (disabled)</Label>                <Input id="email-disabled" type="email" defaultValue="owner@acme.com" disabled />            </div>            <div className="flex flex-col gap-2">                <Label htmlFor="email-invalid">Email (invalid)</Label>                <Input id="email-invalid" type="email" defaultValue="not-an-email" aria-invalid />            </div>        </div>    )}

"use client"import { Input, Label } from "@saasflare/ui"/** An input paired with a Label, wired up via htmlFor / id. */export function Demo() {    return (        <div className="flex flex-col gap-2 w-full max-w-sm">            <Label htmlFor="workspace">Workspace name</Label>            <Input id="workspace" placeholder="Acme Inc." />        </div>    )}