Use the activeLabel attribute to make the label stay fixed in the active position. This applies to the classic/default layout only; the emphasized and snowflake layouts always render the label inside the field and are unaffected.

<auro-input activeLabel>
  <span slot="label">Address</span>
  <span slot="helpText">Please enter your home address.</span>
</auro-input>

CSS Shadow Parts allow you to style elements inside a web component's shadow DOM using the ::part() pseudo-element. The following parts are exposed by <auro-input>.

<style>
  auro-input.css-parts-demo::part(wrapper) {
    border-color: orange;
  }
  auro-input.css-parts-demo::part(label) {
    color: purple;
  }
  auro-input.css-parts-demo::part(helpText) {
    color: green;
  }
  auro-input.css-parts-demo::part(input) {
    font-style: italic;
  }
</style>
<auro-input class="css-parts-demo" required>
  <span slot="label">CSS Parts Example</span>
  <span slot="helpText">This input has custom styles applied via CSS Shadow Parts.</span>
</auro-input>

Use the dvInputOnly attribute so that the displayValue slot content only masks the HTML5 input element. The input's label will not be masked. Without this attribute, the display value slot content covers both the label and the input.

<auro-header level="4">Display Value Slot Content Only</auro-header>
<auro-input value="Hello World">
  <span slot="label">Default display value behavior</span>
  <span slot="displayValue">✨ Custom Display ✨</span>
</auro-input>
<auro-header level="4">Display Value Slot Content with <code>dvInputOnly</code></auro-header>
<auro-input dvInputOnly value="Hello World">
  <span slot="label">With dvInputOnly</span>
  <span slot="displayValue">✨ Custom Display ✨</span>
</auro-input>

Use the icon attribute to render an icon inside the input to the left of the value. Support is limited to auro-input instances with credit card format.

<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>
  <span slot="label">Default Appearance</span>
  <span slot="helpText">Help Text</span>
</auro-input>

<auro-input appearance="inverse">
  <span slot="label">Inverse Appearance</span>
  <span slot="helpText">Help Text</span>
</auro-input>

The component supports complete localization, including visible strings, screen reader announcements, and locale-based date formatting.

The visible strings rendered in the input are not derived from locale — they are projected through named slots so each language can supply its own translation. Pass a <span> with the matching slot attribute for every string you need to localize.

  <auro-input>
+   <span slot="label">出発日</span>
+   <span slot="helpText">日付を選択してください</span>
+   <span slot="optionalLabel">（任意）</span>
  </auro-input>

Assistive-technology announcements that are not visible in the UI are also exposed as named slots so they can be translated independently. These strings are not derived from locale; supply translated values for every language you support.

  <auro-input locale="de-DE" type="password" value="geheim">
    <span slot="label">Passwort</span>
    <span slot="helpText">Geben Sie Ihr Passwort ein</span>
    <span slot="optionalLabel">(freiwillig)</span>
+   <span slot="ariaLabel.clear">Eingabe löschen</span>
+   <span slot="ariaLabel.password.show">Passwort anzeigen</span>
+   <span slot="ariaLabel.password.hide">Passwort verbergen</span>
  </auro-input>

Note: Custom validation messages set via setCustomValidity* attributes are also not localized — supply translated strings yourself when using those properties.

When type="date" is set, the locale attribute drives the date format used by the input mask. Setting locale automatically selects the regional format (for example en-US → mm/dd/yyyy, de-DE → dd.mm.yyyy, ja-JP → yyyy/mm/dd), derived from the browser's Intl API, so format does not need to be set manually.

- <auro-input>
+ <auro-input locale="de-DE">
    <span slot="label">Abreisedatum</span>
    <span slot="helpText">Wählen Sie ein Datum</span>
    <span slot="optionalLabel">(freiwillig)</span>
  </auro-input>

If no locale attribute is present, the component walks up the DOM looking for the nearest ancestor with a data-locale attribute; if none is found, it defaults to en-US.

+ <div data-locale="de-DE">
    <div>
      <auro-input>
        <span slot="label">Abreisedatum</span>
        <span slot="helpText">Wählen Sie ein Datum</span>
        <span slot="optionalLabel">(freiwillig)</span>
      </auro-input>
    </div>
  </div>

If format is set alongside locale, format always wins.

- <auro-input locale="de-DE">
+ <auro-input locale="de-DE" format="MM/DD/YYYY">
    <span slot="label">Abreisedatum</span>
    <span slot="helpText">Wählen Sie ein Datum</span>
    <span slot="optionalLabel">(freiwillig)</span>
  </auro-input>

The following live example shows several locale configurations in action:

<p class="body-sm"><strong>en-GB</strong></p>
<auro-input type="date" locale="en-GB">
  <span slot="ariaLabel.clear">Clear All</span>
  <span slot="label">en-GB Date</span>
  <span slot="helpText">Help Text</span>
</auro-input>
​
<p class="body-sm"><strong>en-US</strong></p>
<auro-input type="date" locale="en-US">
  <span slot="ariaLabel.clear">Clear All</span>
  <span slot="label">en-US Date</span>
  <span slot="helpText">Help Text</span>
</auro-input>
​
<p class="body-sm"><strong>zh-CN</strong></p>
<auro-input type="date" locale="zh-CN">
  <span slot="ariaLabel.clear">全部清除</span>
  <span slot="label">中文日期</span>
  <span slot="helpText">帮助文本</span>
  <span slot="optionalLabel">（可选）</span>
</auro-input>
​
<p class="body-sm"><strong>en-US with explicit <code>format="yyyy.mm.dd"</code></strong></p>
<auro-input type="date" locale="en-US" format="yyyy.mm.dd">
  <span slot="ariaLabel.clear">Clear All</span>
  <span slot="label">en-US with yyyy.mm.dd format</span>
  <span slot="helpText">Help Text</span>
</auro-input>
​
<p class="body-sm"><strong>Inherited de-DE (via <code>data-locale</code>)</strong></p>
<div data-locale="de-DE">
  <auro-input type="date">
    <span slot="ariaLabel.clear">Alles löschen</span>
    <span slot="label">Abreisedatum (geerbt aus `data-locale="de-DE"`)</span>
    <span slot="helpText">Hilfetext</span>
    <span slot="optionalLabel">(freiwillig)</span>
  </auro-input>
</div>

Use the nested attribute to render the input without borders, help text, error text, or accents. This is intended for use when the input is embedded inside the trigger of an auro-droopdown.

<auro-input nested>
  <span slot="label">Nested Input</span>
  <span slot="helpText">Help Text</span>
</auro-input>

The <auro-input> supports an optionalLabel slot, where users can override the default (optional) notification text.

Providing the slot with empty content will remove it.

<auro-input placeholder="John Doe" bordered>
  <span slot="label">Full name</span>
  <span slot="optionalLabel"> - custom optional text</span>
  <span slot="helpText">Please enter your full name.</span>
</auro-input>

Use the placeholder attribute to add a custom placeholder message within the element.

<auro-input placeholder="John Doe" required>
  <span slot="label">Full name</span>
  <span slot="helpText">Please enter your full name.</span>
</auro-input>

Use the simple attribute to render the input without a border. This is intended for use when the input is embedded inside the trigger of an auro-droopdown.

<auro-input simple>
  <span slot="label">Simple Input</span>
  <span slot="helpText">Help Text</span>
</auro-input>

The component may be restyled by changing the values of the following token(s).

/* stylelint-disable custom-property-empty-line-before */
​
@use "@aurodesignsystem/design-tokens/dist/themes/alaska/SCSSVariables--alaska" as v;
​
:host(:not([ondark])),
:host(:not([appearance="inverse"])) {
  --ds-auro-input-border-color: var(--ds-basic-color-border-bold, #{v.$ds-basic-color-border-bold});
  --ds-auro-input-container-color: var(--ds-basic-color-surface-default, #{v.$ds-basic-color-surface-default});
  --ds-auro-input-caret-color: var(--ds-advanced-color-state-focused, #{v.$ds-advanced-color-state-focused});
  --ds-auro-input-label-text-color: var(--ds-basic-color-texticon-muted, #{v.$ds-basic-color-texticon-muted});
  --ds-auro-input-placeholder-text-color: var(--ds-basic-color-texticon-default, #{v.$ds-basic-color-texticon-default});
  --ds-auro-input-text-color: var(--ds-basic-color-texticon-default, #{v.$ds-basic-color-texticon-default});
  --ds-auro-input-error-icon-color: var(--ds-basic-color-status-error, #{v.$ds-basic-color-status-error});
​
  --ds-auro-input-outline-color: transparent;
}
​
:host([ondark]),
:host([appearance="inverse"]) {
  --ds-auro-input-border-color: var(--ds-basic-color-border-inverse, #{v.$ds-basic-color-border-inverse});
  --ds-auro-input-container-color: var(--ds-advanced-color-shared-background-inverse, #{v.$ds-advanced-color-shared-background-inverse});
  --ds-auro-input-caret-color: var(--ds-advanced-color-state-focused-inverse, #{v.$ds-advanced-color-state-focused-inverse});
  --ds-auro-input-label-text-color: var(--ds-basic-color-texticon-inverse-muted, #{v.$ds-basic-color-texticon-inverse-muted});
  --ds-auro-input-placeholder-text-color: var(--ds-basic-color-texticon-inverse, #{v.$ds-basic-color-texticon-inverse});
  --ds-auro-input-text-color: var(--ds-basic-color-texticon-inverse, #{v.$ds-basic-color-texticon-inverse});
  --ds-auro-input-error-icon-color: var(--ds-advanced-color-state-error-inverse, #{v.$ds-advanced-color-state-error-inverse});
​
  --ds-auro-input-outline-color: transparent;
}

Use the autocapitalize attribute to control whether and how text input is automatically capitalized as it is entered by the user. Supported values: off/none, on/sentences, words, characters.

<auro-input autocapitalize="none">
  <span slot="label">No capitalization</span>
  <span slot="helpText">Autocapitalize is set to none.</span>
</auro-input>
<auro-input autocapitalize="words">
  <span slot="label">Capitalize words</span>
  <span slot="helpText">Autocapitalize is set to words.</span>
</auro-input>
<auro-input autocapitalize="characters">
  <span slot="label">Capitalize characters</span>
  <span slot="helpText">Autocapitalize is set to characters.</span>
</auro-input>

Use the autocomplete attribute to control what the browser can suggest for autofill. At this time, only autocomplete="off" is supported.

<auro-input autocomplete="off">
  <span slot="label">Username</span>
  <span slot="helpText">Browser autofill is disabled for this input.</span>
</auro-input>

Use the autocorrect attribute set to off to stop iOS from auto-correcting words when typed into a text box.

<auro-input autocorrect="off">
  <span slot="label">Autocorrect off</span>
  <span slot="helpText">iOS autocorrect is disabled for this input.</span>
</auro-input>

The input provides several properties to customize the error messages displayed for different validation states. When a validation error occurs, the component checks for a state-specific message first, then falls back to the general setCustomValidity message.

• setCustomValidity — Sets a fallback error message displayed for any validation error. This message is used when no state-specific message is defined.
• setCustomValidityValueMissing — Displayed when the component is required and the user leaves it empty.
• setCustomValidityForType — Displayed when the value does not match the expected format for the declared type (e.g. invalid email, phone number).
• setCustomValidityBadInput — Displayed when the browser considers the input value to be malformed (e.g. non-numeric characters in a number field).
• setCustomValidityRangeOverflow — Displayed when the value exceeds the max constraint.
• setCustomValidityRangeUnderflow — Displayed when the value is below the min constraint.
• setCustomValidityTooLong — Displayed when the value exceeds the maxlength constraint.
• setCustomValidityTooShort — Displayed when the value is shorter than the minlength constraint.
• setCustomValidityPatternMismatch — Displayed when the value does not match the declared pattern, or when type="date" and the entered date is not a valid calendar date (e.g. month/day values out of range). Falls back to "Invalid Date Format Entered" if not set.

The priority order for error messages is: state-specific property > setCustomValidity > default browser message.

Note: Custom strings are NOT localized. It is the responsibility of the element consumer to provide localized strings when using these properties.

Use setCustomValidityBadInput to customize the message when the browser considers the input malformed.

<auro-input type="number" minlength="1" setCustomValidityBadInput="Please enter a valid whole number.">
  <span slot="label">Quantity</span>
  <span slot="helpText">Enter the number of items.</span>
</auro-input>

Use setCustomValidity to set a single message for all validation states.

<auro-input required minlength="3" setCustomValidity="Sorry, please enter your first and last name (one space required).">
  <span slot="label">Full Name</span>
  <span slot="helpText">Please enter your full name.</span>
</auro-input>

Use setCustomValidityRangeOverflow to customize the message when the value exceeds the max constraint.

<auro-input type="date" max="2025-12-31" setCustomValidityRangeOverflow="Date must be on or before 12/31/2025.">
  <span slot="label">Event Date</span>
  <span slot="helpText">Enter a date no later than 12/31/2025.</span>
</auro-input>

Use setCustomValidityRangeUnderflow to customize the message when the value is below the min constraint.

<auro-input type="date" min="2024-01-01" setCustomValidityRangeUnderflow="Date must be on or after 01/01/2024.">
  <span slot="label">Start Date</span>
  <span slot="helpText">Enter a date no earlier than 01/01/2024.</span>
</auro-input>

Use setCustomValidityTooLong to customize the message when the value exceeds the maxlength constraint.

<auro-input maxlength="10" setCustomValidityTooLong="Please shorten your entry to 10 characters or fewer.">
  <span slot="label">Username</span>
  <span slot="helpText">Maximum 10 characters.</span>
</auro-input>

Use setCustomValidityTooShort to customize the message when the value is shorter than the minlength constraint.

<auro-input minlength="3" setCustomValidityTooShort="Please enter at least 3 characters.">
  <span slot="label">Nickname</span>
  <span slot="helpText">Minimum 3 characters.</span>
</auro-input>

Use setCustomValidityForType to customize the message when the value doesn't match the declared type format.

<auro-input type="email" setCustomValidityForType="Please provide a valid email address (e.g. name@example.com).">
  <span slot="label">Email Address</span>
  <span slot="helpText">We'll use this to send your confirmation.</span>
</auro-input>

Use setCustomValidityValueMissing to customize the message when a required field is left empty.

<auro-input required setCustomValidityValueMissing="Please enter your name to continue.">
  <span slot="label">Full Name</span>
  <span slot="helpText">Enter your legal first and last name.</span>
</auro-input>

Use the disable attribute to prevent the user from interacting with the input.

<auro-input disabled>
  <span slot="label">Disabled</span>
  <span slot="helpText">Help Text</span>
</auro-input>

Use the error attribute to apply a persistent custom error that supersedes the HTML5 validation logic.

A custom error message can be set using the error attribute, or it can be used in conjunction with the setCustomValidityCustomError attribute.

<auro-button id="setCustomErrorBtn">Set Custom Error</auro-button>
<auro-button id="setCustomErrorClearBtn">Clear Custom Error</auro-button>
<br /><br />
<auro-input id="setCustomErrorExample" error="Initial error attribute value">
  <span slot="label">Name</span>
  <span slot="helpText">Please enter your full name.</span>
</auro-input>

export function customError() {
  const elem = document.querySelector('#setCustomErrorExample');
  // set custom error
  document.querySelector('#setCustomErrorBtn').addEventListener('click', () => {
    elem.error = "Custom Error Message";
  });
​
  // remove custom error
  document.querySelector('#setCustomErrorClearBtn').addEventListener('click', () => {
    elem.removeAttribute('error');
  });
}

Use the format attribute to set the format of the IMask.

Default masking definitions:

• 0 : number
• a : letter
• * : any character

See IMask for more information on how to configure a mask.

<auro-input format="47440000">
  <span slot="label">Custom format</span>
  <span slot="helpText">Format is: 47440000</span>
</auro-input>

Set the inputmode for the input.

IMPORTANT: If you are also passing a type, most browsers will use the type attribute to determine what keyboard to display on mobile devices and ignore the inputmode attribute.

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

Use the max attribute to define a maximum value used during validation. The attribute will only apply when <auro-input> also has a type attribute for number or any date format.

The setCustomValidityRangeOverflow attribute may optionally be used in combination with the max attribute to define custom help text used when the input value is greater than the value of the max attribute.

<auro-input type="date" max="2023-03-25" setCustomValidityRangeOverflow="The selected date is past the defined maximum date.">
  <span slot="label">Choose a date</span>
  <span slot="helpText">Help Text</span>
</auro-input>

<auro-input type="number" max="10" setCustomValidityRangeOverflow="The selected value is above the defined maximum.">
  <span slot="label">Choose a number</span>
  <span slot="helpText">Help Text</span>
</auro-input>

Use the maxlength attribute to control the length of the input entered.

The setCustomValidityTooLong attribute may optionally be used in combination with the maxLength attribute to define custom help text used when the length of the input is too long.

Note: This attribute is not intended to be used with a type or format that already has a defined length, such as credit-cards, dates or phone numbers.

<auro-input maxlength="12" setCustomValidityTooLong="Oops! There were too many characters entered." required>
  <span slot="label">Voucher Code</span>
  <span slot="helpText">Please enter your 12 character voucher code.</span>
</auro-input>

Use the min attribute to define a minimum value used during validation. The attribute will only apply when <auro-input> also has a type attribute for number or any date format.

The setCustomValidityRangeUnderflow attribute may optionally be used in combination with the min attribute to define custom help text used when the input value is less than the value of the min attribute.

<auro-input type="date" min="2023-03-25" setCustomValidityRangeUnderflow="The selected date is before the defined minimum date.">
  <span slot="label">Choose a date</span>
  <span slot="helpText">Help Text</span>
</auro-input>

<auro-input type="number" min="10" setCustomValidityRangeUnderflow="The selected value is below the defined minimum.">
  <span slot="label">Choose a number</span>
  <span slot="helpText">Help Text</span>
</auro-input>

Use the minlength attribute to control the length of the input entered.

The setCustomValidityTooShort attribute may optionally be used in combination with the minLength attribute to define custom help text used when the length of the input is not long enough.

<auro-input minlength="4" setCustomValidityTooShort="Please enter a full voucher code." required>
  <span slot="label">Voucher Code</span>
  <span slot="helpText">Please enter your 4 character voucher code.</span>
</auro-input>

Use the name attribute to set the form field name for the input. This populates the name attribute on the internal HTML input element, which is used to identify the field when the form is submitted.

The id attribute is for identifying an element for client-side styling (CSS) and behavior (JavaScript), while name is for sending data to a server during form submission.

<auro-input name="firstName">
  <span slot="label">First Name</span>
  <span slot="helpText">Enter your legal first name.</span>
</auro-input>
<auro-input name="lastName">
  <span slot="label">Last Name</span>
  <span slot="helpText">Enter your legal last name.</span>
</auro-input>

For use cases where the field is required, but live validation is not wanted, use the noValidate attribute.

<auro-input noValidate required>
  <span slot="label">Address</span>
  <span slot="helpText">Please enter your home address.</span>
</auro-input>

Use the pattern attribute to set custom input validation. This example also uses the spellcheck attribute set to false which in turn sets autocorrect to off and autocapitalize to none. Additionally the maxlength attribute sets the maximum length of characters that can be entered.

The <auro-input> component supports setting a custom validity message specific to the pattern validation by using the setCustomValidityPatternMismatch attribute.

<auro-input pattern="[a-z]{1,15}" spellcheck="false" setCustomValidityPatternMismatch="Only contain lowercase letters w/no spaces">
  <span slot="label">Username</span>
  <span slot="helpText">Please enter a username.</span>
</auro-input>

Use the readonly attribute to prevent the user from editing the value of the input.

In this example, the user is able to programmatically change the value of the input by clicking the button or clear out the contents of the input.

<auro-button id="setReadonlyValueBtn">Set Value to Auro Alaska</auro-button>
<auro-button id="resetReadonlyValueBtn">Reset</auro-button>
<br /><br />
<auro-input readonly id="readonlyExample">
  <span slot="label">Name</span>
  <span slot="helpText">Please enter your full name.</span>
</auro-input>

export function setReadonlyValue() {
  const elem = document.querySelector('#readonlyExample');
​
  // set value of auro-input element
  document.querySelector('#setReadonlyValueBtn').addEventListener('click', () => {
      elem.value = "Auro Alaska";
  });
​
  document.querySelector('#resetReadonlyValueBtn').addEventListener('click', () => {
    elem.value = undefined;
});
}

When present, the required attribute specifies that an input field must be filled out before submitting the form.

When the validity check fails, the validityState equals valueMissing. The error message for the valueMissing validityState can be changed to a custom string using the setCustomValidityValueMissing.

<auro-input required placeholder="John Doe">
  <span slot="label">Full name</span>
  <span slot="helpText">Please enter your full name.</span>
</auro-input>

Use the type="credit-card" attribute for a credit card formatted input.

Default help text will be added to the input type="credit-card" if custom help text is not provided.

<auro-input 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>

Use the type="credit-card" and icon attributes for a credit card formatted input with credit card icon support.

<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>

Use the type="date" attribute for a date formatted input. The default date format is mm/dd/yyyy.

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

Use the format attribute to put together any combination of mm, dd, & yyyy or yy.

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

<auro-input type="date" format="mm/yy">
  <span slot="label">Expiration date</span>
  <span slot="helpText">Help Text</span>
</auro-input>

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

Use the type="email" attribute for an email style input. These examples illustrate the default error messaging per that browser. Content may vary.

Default help text will be added to the input type="email" if custom help text is not provided.

<auro-input type="email" required>
  <span slot="label">Email address</span>
  <span slot="helpText">Please enter your email address.</span>
</auro-input>

Use the type="number" attribute for a numeric style input and invoke a numeric virtual keyboard on handheld devices.

This number input type should only be used for incremental numeric values, meaning values with decimals will be considered invalid. See MDN Web Docs for more information.

Note: We recommend using type="number" with inputmode="numeric" for the best mobile experience.

<auro-input type="number" required>
  <span slot="label">Number of Passengers</span>
  <span slot="helpText">Please enter the number of passengers.</span>
</auro-input>

Use the type="password" attribute for a password style input. The hide/show password feature will automatically appear once a user begins to enter data.

Default help text will be added to the input type="password" if custom help text is not provided.

<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>

Use the type="tel" attribute for a phone number formatted input. The default format is +1 (000) 000-0000.

Note: We recommend using type="tel" with inputmode="tel" for the best mobile experience.

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

Use the format attribute to set a custom phone number format.

<auro-input type="tel" format="+00 000 00 0000">
  <span slot="label">Telephone</span>
  <span slot="helpText">Help Text</span>
</auro-input>

Use the validateOnInput attribute to enable live validation on the input event. Recommended use is with setting a custom pattern and validation is required prior to a blur event.

<auro-input validateOnInput required pattern="[a-zA-Z-.']+( +[a-zA-Z-.']+)+" setCustomValidityPatternMismatch="Full name requires two or more names with at least one space.">
  <span slot="label">Full Name</span>
  <span slot="helpText">Please enter your full name as it appears on the card.</span>
</auro-input>

Use the value attribute to programmatically set the value of the input.

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

Example illustrates using a JavaScript function attached to an auro-button component click event to swap the values of two auro-input elements. An example of this use case would be swapping the departure and arrival airports in a flight search form.

<auro-input id="swapExampleLeft">
  <span slot="label">Left Input</span>
  <span slot="helpText">Help Text</span>
</auro-input>
<auro-button id="swapExampleBtn">Swap Values</auro-button>
<auro-input id="swapExampleRight">
  <span slot="label">Right Input</span>
  <span slot="helpText">Help Text</span>
</auro-input>

export function swapInputValues() {
  const btn = document.querySelector('#swapExampleBtn');
  const inputOne = document.querySelector('#swapExampleLeft');
  const inputTwo = document.querySelector('#swapExampleRight');
​
  btn.addEventListener('click', () => {
    const valueOne = inputOne.value;
    const valueTwo = inputTwo.value;
​
    inputOne.value = valueTwo;
    inputTwo.value = valueOne;
  });
}