HyTextInput

A versatile single-line text input component with enhanced styling and functionality. Supports multiple input types, validation states, icons, and comprehensive accessibility features. Provides a consistent interface for various text input scenarios with built-in error handling. Offers both block (default) and inline layout options — in inline, label sits on the left of the row, input on the right, and helper/error under the control (col 2–end).

Examples

<hy-text-input label="Name" placeholder="Enter your name"></hy-text-input>

<hy-text-input
  type="email"
  label="Email Address"
  placeholder="user@example.com"
  helper-text="We'll never share your email with anyone"
  required
>
</hy-text-input>

Inline layout (dense parameter panels)

Label on the left, input on the right, helper/error below the row. Set --hy-text-input-label-column-width on a wrapping container so stacked inputs align on the left edge.

<div style="--hy-text-input-label-column-width: 8rem;">
  <hy-text-input layout="inline" label="Name" placeholder="Jane Doe"></hy-text-input>
  <hy-text-input layout="inline" label="Email" placeholder="jane@example.com"></hy-text-input>
</div>

Events

• input - Fired when the input value changes. Detail:
• change - Fired when the input loses focus after a value change. Detail:
• focus - Fired when the input receives focus. Detail: none
• blur - Fired when the input loses focus. Detail: none

Slots

• leading-icon - Optional slot for custom leading icon content (overrides leading-icon property)
• trailing-icon - Optional slot for custom trailing icon content (overrides trailing-icon property)

Methods

focus()

Sets focus on the input.

blur()

Removes focus from the input.

select()

Selects all text in the input.