Description

<auro-input> is a customizable text input component for single-line data entry. It supports types text, password, and email with built-in validation, required input, error states, and a secondary bordered theme. Use the label and helpText slots for additional content support.

User Stories

Enter a value

Move focus to the auro-input element

The label animates from the placeholder position to the active position above the input area. If the activeLabel attribute is set, the label remains fixed in the active position at all times.
Type a value into the input

As the user types, the component tracks the current value via the value property. The hasValue flag is set to true once the input contains any content.

If the input has a type attribute (e.g. credit-card, tel, date), formatting is automatically applied as the user types.
Move focus away from the input

Validation is triggered on blur by default. If the value does not meet the configured constraints (e.g. required, minlength, pattern), the component renders an error state with a help text message describing the issue.

If the noValidate attribute is set, no validation occurs on blur. If the validateOnInput attribute is set, validation occurs on every keystroke instead of on blur.

Clear the value

When the input has a value and the user is focused on the component, a clear button appears inside the input.

Click or tap the clear button
The input value is cleared and the value property is reset to undefined
The hasValue flag is set to false

Note: If the component is required, clearing the value and moving focus away from the component will trigger validation and render the error state.

Preset the value

In some cases it is necessary to preset the value of the component as part of the initial render.

Use the value attribute to set an initial value. The input will display the preset value and the label will render in the active position.

The value may also be set programmatically at any time by updating the value property via JavaScript. Setting the value to undefined will reset the input to its empty state.

Name Please enter your full name.

See code

<auro-input value="Alaska Airlines is the best!">
  <span slot="label">Name</span>
  <span slot="helpText">Please enter your full name.</span>
</auro-input>

Password input

When the input has type="password", the entered text is masked by default. A show/hide toggle button appears inside the input once the user begins typing, allowing them to reveal the password as plain text.

Type a value into the password input — characters are masked as they are entered
Click or tap the visibility toggle to reveal the password as plain text
Click or tap the toggle again to mask the password

Default help text is automatically provided for password inputs if custom help text is not supplied.

Clear All Show Hide Password Please enter a secure password.

See code

<auro-input type="password" required>
  <span slot="ariaLabel.clear">Clear All</span>
  <span slot="ariaLabel.password.show">Show</span>
  <span slot="ariaLabel.password.hide">Hide</span>
  <span slot="label">Password</span>
  <span slot="helpText">Please enter a secure password.</span>
</auro-input>

Enter a formatted value

The component supports several built-in format types that automatically apply input masking as the user types.

type="credit-card" — Formats the input as a credit card number with spaces between groups of digits. Optionally displays a card brand icon when the icon attribute is set.
type="tel" — Formats the input as a phone number. The default format is +1 (000) 000-0000. A custom format may be specified using the format attribute.
type="date" — Formats the input as a date. The default format is mm/dd/yyyy. Custom date formats may be specified using the format attribute with any combination of mm, dd, yyyy, or yy.

Note: custom masking is also available via the format attribute using iMask definitions: 0 for digit, a for letter, * for any character.

Card number Valid credit card numbers must include 16 digits (15 for Amex).

Telephone Help Text

Arrival date Help Text

See code

<auro-input icon type="credit-card" required>
  <span slot="label">Card number</span>
  <span slot="helpText">Valid credit card numbers must include 16 digits (15 for Amex).</span>
</auro-input>

<auro-input type="tel">
  <span slot="label">Telephone</span>
  <span slot="helpText">Help Text</span>
</auro-input>

<auro-input type="date">
  <span slot="label">Arrival date</span>
  <span slot="helpText">Help Text</span>
</auro-input>

Regional date format support

People around the world write dates differently. A traveler in the United States expects to see 12/25/2025, while someone in Germany expects 25.12.2025, and someone in Japan expects 2025/12/25. Showing the wrong format causes confusion and mistakes.

When a date input knows the user's region, it automatically displays dates in the format that looks natural to them — no extra setup required. The input handles all the formatting behind the scenes.

Clear All zh-CN Date Help Text

See code

<auro-input type="date" locale="zh-CN">
  <span slot="ariaLabel.clear">Clear All</span>
  <span slot="label">zh-CN Date</span>
  <span slot="helpText">Help Text</span>
</auro-input>