Holo Text Field
The <holo-text-field> component is a form-associated custom element for single-line text input. It participates in native <form> submission and constraint validation via ElementInternals.
Live Previews
Section titled “Live Previews”Default
Section titled “Default”<holo-text-field label="Email address" type="email" placeholder="you@example.com"></holo-text-field>Disabled
Section titled “Disabled”<holo-text-field label="Email address" value="locked@example.com" disabled></holo-text-field>Invalid
Section titled “Invalid”<holo-text-field label="Email address" value="not-an-email" invalid error-message="Please enter a valid email address."></holo-text-field>API Reference
Section titled “API Reference”Properties
Section titled “Properties”| Property | Attribute | Description | Type | Default |
| -------------- | --------------- | ----------------------------------------------------------- | --------------------------------------------------------------------------- | ----------- |
| type | type | The native input type to render. | "text" \| "email" \| "password" \| "number" \| "tel" \| "url" \| "search" | "text" |
| label | label | The visible label text for the field. | string | undefined |
| name | name | The form field name submitted with the owning form. | string | undefined |
| placeholder | placeholder | Placeholder text shown when the field is empty. | string | undefined |
| value | value | The current value of the field. | string | "" |
| disabled | disabled | If true, the field is disabled and non-interactive. | boolean | false |
| readonly | readonly | If true, the value cannot be edited but is still submitted. | boolean | false |
| required | required | If true, the owning form cannot submit without a value. | boolean | false |
| invalid | invalid | Marks the field as invalid. | boolean | false |
| errorMessage | error-message | Error message shown when invalid is true. | string | undefined |
Events
Section titled “Events”| Event | Description | Type |
| ------------ | -------------------------------------------------- | --------------------- |
| holoInput | Emitted on every keystroke with the current value. | CustomEvent<string> |
| holoChange | Emitted on blur/change with the current value. | CustomEvent<string> |