Field

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

pnpm add @saasflare/ui

"use client"import { Field, FieldDescription, FieldLabel, Input } from "@saasflare/ui"/** A field with a label, control, and helper description. */export function Demo() {    return (        <div className="w-full max-w-sm">            <Field>                <FieldLabel htmlFor="workspace-name">Workspace name</FieldLabel>                <Input id="workspace-name" placeholder="Acme Inc." />                <FieldDescription>                    This is the name your teammates will see.                </FieldDescription>            </Field>        </div>    )}

"use client"import {    Checkbox,    Field,    FieldDescription,    FieldLabel,    FieldLegend,    FieldSet,    FieldTitle,} from "@saasflare/ui"/** A fieldset grouping related checkboxes under a legend. */export function Demo() {    return (        <div className="w-full max-w-sm">            <FieldSet>                <FieldLegend>Email notifications</FieldLegend>                <FieldDescription>                    Choose which updates land in your inbox.                </FieldDescription>                <Field orientation="horizontal">                    <Checkbox id="notif-deploys" defaultChecked />                    <FieldLabel htmlFor="notif-deploys">                        <FieldTitle>Deployment results</FieldTitle>                    </FieldLabel>                </Field>                <Field orientation="horizontal">                    <Checkbox id="notif-invoices" />                    <FieldLabel htmlFor="notif-invoices">                        <FieldTitle>Invoices and receipts</FieldTitle>                    </FieldLabel>                </Field>            </FieldSet>        </div>    )}

"use client"import { Field, FieldError, FieldLabel, Input } from "@saasflare/ui"/** A field in its invalid state, showing an error message. */export function Demo() {    return (        <div className="w-full max-w-sm">            <Field data-invalid="true">                <FieldLabel htmlFor="billing-email">Billing email</FieldLabel>                <Input id="billing-email" defaultValue="acme.com" aria-invalid />                <FieldError>Enter a valid email address.</FieldError>            </Field>        </div>    )}