Skip to main content
Urbicon UI
source

FormField

Layout wrapper for composite form fields that need a label, helper text, and error message but cannot rely on the built-in slots of Input/Select/Textarea.

Playground

PDF, JPG, PNG — max 10 MB
Loading syntax highlighting...

01 Examples

Wrapping a custom file input

The slot receives wiring metadata (id, describedBy, invalid, required, disabled). Spread or apply these so screen readers can find the label and any error/hint.
PDF, JPG, PNG — max 10 MB
Loading syntax highlighting...

With error

Loading syntax highlighting...

02 Customization

Built-in form primitives (Input, Select, Textarea) already render their own label + helper + error — there FormField is not needed. Use FormField only for composite controls that don't have those slots, e.g. FileUpload, custom number-spinner combinations, or media uploaders.

03 Accessibility

  • The wrapper renders a <label for=…> linked to the slot's id.
  • Hints get an id referenced via aria-describedby. When an error is present, the error message takes the spot (and the hint is hidden) — this matches WCAG guidance to surface the most actionable message to AT users.
  • The error renders with role="alert" so it is announced when the value changes during validation.

04 API Reference

10 props
10 props 1 required

No matching properties

No matching properties

05 Installation

Import

Loading syntax highlighting...
llm.txt