Field
Combine labels, controls, and help text to compose accessible form fields and grouped inputs. Built with accessibility and flexibility in mind.
Default & Composition
A typical field structure using labels, inputs, selects, and descriptions within a semantic fieldset.
Validation & Error States
Use the hlm-field-error and [attr.data-invalid] to provide clear feedback to users.
This field is correctly filled.
Enter a valid email address.
Responsive Layouts
Switch between vertical, horizontal, and container-responsive orientations effortlessly.
Standard stacked orientation.
Access from external apps.
Switches to horizontal on larger containers.
Checkbox Groups
Combining checkboxes with fieldsets and descriptions for clear, accessible selection lists.
Your desktop documents are automatically synced with your cloud storage for access across all your devices.
Radio Groups
Using radio groups within fields to provide single-choice selections with supporting text.
Switch & Toggle
Horizontal field orientation is perfect for toggle switches and configuration settings.
Secure your account by requiring an additional verification code when signing in from a new device.
API Reference
The Field component is a set of styling directives designed for accessible form composition.
Helm API
| Directive | Selector | Description |
|---|---|---|
| HlmFieldDirective | [hlmField] | Core wrapper for a single field. Supports orientation="vertical | horizontal | responsive". |
| HlmFieldLabelDirective | [hlmFieldLabel] | Styles the field's label. |
| HlmFieldDescriptionDirective | [hlmFieldDescription] | Styles the helper/description text. |
| HlmFieldErrorDirective | hlm-field-error | The component for displaying validation errors. |
| HlmFieldGroupDirective | [hlmFieldGroup] | Stacks multiple related fields. |
| HlmFieldSetDirective | [hlmFieldSet] | Semantic container for grouping form controls. |
| HlmFieldLegendDirective | [hlmFieldLegend] | Caption for the hlmFieldSet element. |
| HlmFieldSeparatorDirective | hlm-field-separator | Visual divider between fields or groups. |