Field

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

Forms

Required

Optional, with hint

Source

<Field id="sg-name" label="Name" required>{({ id, describedBy }) => (
  <Input id={id} aria-describedby={describedBy} 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; } */