Holo Form Field
The <holo-form-field> component wraps a <label>, a slotted control, an optional hint, and an error message region. It automatically generates and forwards id/aria-describedby/aria-invalid/aria-required attributes onto the first slotted element, so any native or custom control works without manual wiring.
Live Previews
Section titled “Live Previews”Default with hint
Section titled “Default with hint”<holo-form-field label="Email address" hint="We'll never share your email."> <input type="text" placeholder="you@example.com" /></holo-form-field>Required
Section titled “Required”<holo-form-field label="Full name" required> <input type="text" /></holo-form-field>Invalid
Section titled “Invalid”<holo-form-field label="Email address" invalid error-message="Please enter a valid email address."> <input type="text" value="not-an-email" /></holo-form-field>API Reference
Section titled “API Reference”Properties
Section titled “Properties”| Property | Attribute | Description | Type | Default |
| -------------- | --------------- | -------------------------------------------------------------- | --------- | ----------- |
| label | label | The visible label text describing the wrapped control. | string | undefined |
| hint | hint | Optional hint/help text rendered below the control. | string | undefined |
| errorMessage | error-message | Error message rendered (and announced) when invalid is true. | string | undefined |
| invalid | invalid | Marks the field as invalid. | boolean | false |
| required | required | Marks the field as required. | boolean | false |
| Slot Name | Description | | --------- | ----------------------------------------------------------- | | Default | The control (input, textarea, custom element) to associate. |