Form

Accessible Field wrapper (label + hint/error wiring) with Input and Textarea controls.

Forms

Usage

import { Field, Input, Textarea, Button } from "@zudo-sg/ui";

<Field label="Email" required>
  {(p) => <Input type="email" {...p} />}
</Field>

Contact form

Disabled

Required + error

Text field

Source

<form class="flex max-w-[28rem] flex-col gap-vsp-md" onSubmit={…}>
  <Field label="Name" required>
    {(p) => <Input autoComplete="name" placeholder="Your name" {...p} />}
  </Field>
  <Field label="Email" required>
    {(p) => <Input type="email" autoComplete="email" placeholder="you@example.com" {...p} />}
  </Field>
  <Field label="Message" hint="Tell us a little about your project.">
    {(p) => <Textarea placeholder="Hello…" {...p} />}
  </Field>
  <Button type="submit">Send message</Button>
</form>

Live CSS

Injected into the previews above. Form

/* Live CSS — edits inject into every preview above.
   Try overriding a component utility, e.g.:
   .btn { letter-spacing: 0.04em; } */