Field

Universal form field wrapper. Renders a label, hint, and error message around any form control (TextField, Select, Checkbox, etc.).

States

This is a hint message.
This field is required.
tsx
<Field label="Default" id="f1">
  <TextField name="f1" placeholder="Enter text..." />
</Field>

<Field label="With hint" id="f2" hint="This is a hint message.">
  <TextField name="f2" placeholder="Enter text..." />
</Field>

<Field label="With error" id="f3" error="This field is required.">
  <TextField name="f3" placeholder="Enter text..." />
</Field>

<Field label="Required" id="f4" required>
  <TextField name="f4" required />
</Field>

Wrapping Select

Choose the user role.
Selection is required.
tsx
// Select uses Field internally
<Select label="Role" options={options} name="role1" hint="Choose the user role." />
<Select label="Role" options={options} name="role2" error="Selection is required." required />

Custom children

Pass any TemplateResult or trusted HTML string as children.

PNG or JPG, max 2 MB.
tsx
<Field label="Avatar upload" id="avatar-upload" hint="PNG or JPG, max 2 MB.">
  <input type="file" id="avatar-upload" accept="image/*" />
</Field>