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.

When to use

Use it for:

• Entering a single line of free text: names, emails, URLs, search terms, numbers (type).
• A field that submits with a form and shows validation errors.

Don’t use it for:

• Multi-line text. Use Textarea.
• Choosing from a fixed list. Use Select or Radio.
• Imprecise numeric input. Use Slider.

Live Previews

Default

<holo-text-field label="Email address" type="email" placeholder="you@example.com"></holo-text-field>

Disabled

<holo-text-field label="Email address" value="locked@example.com" disabled></holo-text-field>

Invalid

<holo-text-field label="Email address" value="not-an-email" invalid error-message="Please enter a valid email address."></holo-text-field>

Accessibility

The component renders a native <input> (with the type you set) and a <label> linked through for, so role, name and keyboard behaviour come from the browser. required, readonly and disabled are applied to the native input. When invalid is set, the input gets aria-invalid="true", and an errorMessage appears in a role="alert" element referenced by aria-describedby. The required marker is aria-hidden. The component is form-associated through ElementInternals, so it takes part in form submission and validation (“This field is required.”).

Key	Action
Tab	Moves focus to or from the field
Typing and editing keys	Native text input behaviour

• A visible focus ring (border colour and a 2px ring) is shown with :focus-visible.
• The border uses border-control, so it meets 3:1 against the surface.
• A placeholder is not a label. Placeholder text uses the text-tertiary token (contrast-tested at 4.5:1), but it disappears once the user types.
• autocomplete is forwarded to the native input, so you can declare the input’s purpose (WCAG 1.3.5) for fields that collect information about the user, such as name, email or tel.

You provide:

• A label. Without one the input has no accessible name.
• A helpful errorMessage that says how to fix the problem, and invalid set at a sensible time (for example on blur or submit).
• An appropriate type for the data, such as email or tel.
• An autocomplete value when the field collects information about the user, for example autocomplete="email".

---

API Reference

Importing

import '@philbob-sideprojects/hololink-ui/holo-text-field';

Properties

Property	Attribute	Type	Default	Description
autocomplete	autocomplete	string	—	Forwarded to the inner input's autocomplete attribute so browsers and assistive technology can identify the input's purpose (WCAG 1.3.5), for example email, name, or current-password.
disabled	disabled	boolean	false	If true, the field is disabled and non-interactive.
errorMessage	error-message	string	—	Error message shown (and announced) when invalid is true.
invalid	invalid	boolean	false	Marks the field as invalid, applying invalid styling and ARIA attributes.
label	label	string	—	The visible label text for the field.
name	name	string	—	The form field name submitted with the owning form.
placeholder	placeholder	string	—	Placeholder text shown when the field is empty.
readonly	readonly	boolean	false	If true, the field's value cannot be edited but is still submitted/focusable.
required	required	boolean	false	If true, the field must have a value for the owning form to submit.
type	type	"email" | "number" | "password" | "search" | "tel" | "text" | "url"	'text'	The native input type to render.
value	value	string	''	The current value of the field.

Events

Event	Detail	Description
holoChange	string	Emitted when the field is committed (blur/change) with the current value.
holoInput	string	Emitted on every keystroke with the current value.

CSS custom properties

Property	Description
--holo-text-field-bg	Background color of the input.
--holo-text-field-border-color	Border color of the input.
--holo-text-field-border-focus	Border color when focused.
--holo-text-field-border-hover	Border color on hover.
--holo-text-field-color	Text color of the input.
--holo-text-field-error-color	Text color of the error message.
--holo-text-field-focus-ring	Focus ring color.
--holo-text-field-invalid-border	Border and focus ring color when invalid is true.
--holo-text-field-label-color	Text color of the label.
--holo-text-field-label-gap	Space between the label and the input.
--holo-text-field-radius	Corner radius of the input.
--holo-text-field-required-color	Color of the required indicator.