// title: Showcase: markers, hints, links and errors "use client"; import { InfoIcon } from "lucide-react"; import { useState } from "react"; import { Checkbox } from "@/registry/default/ui/checkbox"; import { Field, FieldDescription } from "@/registry/default/ui/field"; import { Input } from "@/registry/default/ui/input"; import { Label } from "@/registry/default/ui/label"; import { Textarea } from "@/registry/default/ui/textarea"; import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, } from "@/registry/default/ui/tooltip"; const BIO_LIMIT = 160; export default function Particle() { const [bio, setBio] = useState("Design engineer at Acme."); return (

Work email Phone (optional) API key Settings → Developers → API keys Used to sign requests from your server.

Password Forgot password?

Bio {bio.length}/{BIO_LIMIT}

setBio(e.target.value)}
          value={bio}
        />
      </Field>

<Field invalid>
        <Label htmlFor="showcase-label-handle">Username</Label>
        <Input
          aria-describedby="showcase-label-handle-error"
          aria-invalid
          defaultValue="admin"
          id="showcase-label-handle"
        />
        <FieldDescription
          className="text-destructive"
          id="showcase-label-handle-error"
        >
          “admin” is reserved. Try another name.
        </FieldDescription>
      </Field>

<Field className="flex-row items-start gap-3 sm:col-span-2">
        <Checkbox defaultChecked id="showcase-label-updates" />
        <div className="grid gap-1">
          <Label htmlFor="showcase-label-updates">Product updates</Label>
          <FieldDescription>
            A short email when we ship something new. Clicking the label toggles
            the checkbox.
          </FieldDescription>
        </div>
      </Field>
    </div>
  );
}
</article></body></html>