Input
stable 2.4 kB<hk-input>A text field that owns its own chrome: prefix and suffix slots, a hint line that becomes the error line, and a clear button that appears once there is something to clear. Grouped with a button or an addon it stays one control with one border — the wrapper owns the border and the focus ring, so focus lights the whole group rather than a box inside a box.
#text#field
Live demo
Running in this page — interact with it.
Inputs
| Name | Type | Default | Description |
|---|---|---|---|
| value | string | '' | Model value. Two-way bindable via [(value)]. |
| label | string | '' | Visible label, wired to the control with a generated id. |
| type | 'text' | 'email' | 'password' | 'number' | 'search' | 'text' | Native input type. |
| prefix | string | '' | Static text before the field — a scheme, a currency, a unit. |
| suffix | string | '' | Static text after the field. |
| hint | string | '' | Helper line under the field. Replaced by error when that is set. |
| error | string | '' | Error message. Sets aria-invalid and switches the field to the error skin. |
| addonBefore | string | '' | Static addon panel before the field, on its own ground — a scheme, a currency, a unit. Unlike prefix, it is separated by a rule. |
| addonAfter | string | '' | Static addon panel after the field. |
| clearable | boolean | false | Shows a clear button once the field is non-empty. |
| disabled | boolean | false | Blocks interaction and dims the control. |
Outputs
valueChangeEventEmitter<string>Emits on every keystroke.
clearedEventEmitter<void>Emits when the clear button is used.
Keyboard
- Escape Clears the field when [clearable] is set
Theming
Component tokens, each falling back to a global one:
| Property | Default | Controls |
|---|---|---|
| --hk-input-bg | #ffffff | Field background. |
| --hk-input-border | #e2e8f0 | Resting border colour. |
| --hk-input-border-focus | #dc2626 | Border colour while focused. |
| --hk-input-error | #b91c1c | Error text and border colour. |
Accessibility
- Label, hint and error are linked with aria-describedby, so a screen reader hears the constraint before the user types.
- The error state sets aria-invalid rather than relying on the red border alone.
- The clear button is a real button with an accessible name, not a decorative icon.