Field

Labeled form row: label + required/optional badge + optional hint, wrapping a control (Input/Textarea/Select).

Forms

Usage

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

<Field id="name" label="Name" required>
  <Input id="name" name="name" />
</Field>

Required

Optional, with hint

<Field id="sg-name" label="Name" required>
  <Input id="sg-name" name="name" />
</Field>

Injected into the previews above. Field

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