For situations where the <auro-input> web component cannot be used, a native HTML <input> element can be styled with the Auro Design System tokens to approximate the visual appearance of auro-input. Unlike auro-hyperlink, Web Core Style Sheets does not provide a prebuilt .input or .form-* class, so the styling must be authored manually using Auro design tokens.

The native input can be reset and restyled with the Auro design tokens published by @aurodesignsystem/design-tokens. The pattern below replicates the border, focus ring, padding, label, and helper text used by auro-input.

@import "./node_modules/@aurodesignsystem/design-tokens/dist/tokens/CSSCustomProperties.css";
​
.input-field {
  display: block;
  width: 100%;
  box-sizing: border-box;
  height: var(--ds-size-600, 3rem);
  padding: 0 var(--ds-size-200, 1rem);
  font-family: var(--ds-font-family-default, sans-serif);
  font-size: var(--ds-text-body-default-size, 1rem);
  line-height: var(--ds-text-body-default-line-height, 1.5);
  color: var(--ds-color-text-primary-default, #1d1d1d);
  background-color: var(--ds-color-container-primary-default, #ffffff);
  border: 1px solid var(--ds-color-border-ui-default, #6e767f);
  border-radius: var(--ds-border-radius, 4px);
  outline: none;
}
​
.input-field:focus-visible {
  border-color: var(--ds-color-border-active-default, #01426a);
  outline: 2px solid var(--ds-color-border-active-default, #01426a);
  outline-offset: 1px;
}
​
.input-field:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}
​
.input-field[aria-invalid="true"] {
  border-color: var(--ds-color-border-error-default, #d50032);
}
​
.input-label {
  display: block;
  margin-bottom: var(--ds-size-50, 0.25rem);
  font-size: var(--ds-text-body-sm-size, 0.875rem);
  color: var(--ds-color-text-secondary-default, #6e767f);
}
​
.input-helptext {
  display: block;
  margin-top: var(--ds-size-50, 0.25rem);
  font-size: var(--ds-text-body-sm-size, 0.875rem);
  color: var(--ds-color-text-secondary-default, #6e767f);
}
​
.input-helptext[data-error="true"] {
  color: var(--ds-color-text-error-default, #d50032);
}

Apply the .input-field class to a native <input type="text"> element and pair it with a <label> using for/id:

<label class="input-label" for="name">Full name</label>
<input id="name" type="text" class="input-field" name="name" />

Use type="email" to surface the browser's built-in email format validation:

<label class="input-label" for="email">Email address</label>
<input id="email" type="email" class="input-field" name="email" required />

Use type="password" to mask the entered value. Note that the show/hide toggle provided by auro-input is not present:

<label class="input-label" for="password">Password</label>
<input id="password" type="password" class="input-field" name="password" />

Use type="number" with min, max, and step for numeric constraints:

<label class="input-label" for="qty">Quantity</label>
<input id="qty" type="number" class="input-field" name="qty" min="1" max="9" step="1" />

Pair the input with a sibling element and wire it up via aria-describedby so assistive technology announces the helper content:

<label class="input-label" for="username">Username</label>
<input id="username" type="text" class="input-field" name="username" aria-describedby="username-help" />
<span id="username-help" class="input-helptext">Must be 3-20 characters.</span>

Toggle aria-invalid="true" on the input and switch the helper text to error styling to communicate validation failure:

<label class="input-label" for="email-error">Email address</label>
<input id="email-error" type="email" class="input-field" name="email" aria-invalid="true" aria-describedby="email-error-msg" />
<span id="email-error-msg" class="input-helptext" data-error="true">Enter a valid email address.</span>

While the CSS above replicates the visual styling of auro-input, the following functionality built into the auro-input web component is not available when using plain HTML:

auro-input integrates IMask to apply format patterns as the user types — for example format="(###) ###-####" for phone numbers or format="mm/dd/yyyy" for dates. Native inputs have no concept of input masks, so you must integrate a third-party masking library and manage cursor position, paste handling, and value reconciliation yourself.

auro-input with type="credit-card" auto-detects Visa, Mastercard, American Express, Discover, Diners Club, JCB, China UnionPay, and Alaska Airlines cards from the first digits, applies the correct digit grouping (e.g., 4-4-4-4 for Visa, 4-6-5 for Amex), and displays the matching card brand icon. None of this is available natively.

auro-input with type="password" includes an accessible show/hide toggle with customizable ARIA labels via the ariaLabel.password.show and ariaLabel.password.hide slots. A native password input only masks the value — you must build the toggle button, swap the type attribute, and manage its accessible name yourself.

auro-input renders an accessible clear button when the field has a value, with a customizable ARIA label via the ariaLabel.clear slot. Native inputs do not provide a clear control beyond the browser's built-in (and inconsistently styled) type="search" affordance.

auro-input exposes a full set of per-constraint setters — setCustomValidityValueMissing, setCustomValidityRangeOverflow, setCustomValidityRangeUnderflow, setCustomValidityTooLong, setCustomValidityTooShort, setCustomValidityBadInput, setCustomValidityCustomError, and setCustomValidityForType. Native inputs surface browser-controlled validation messages that cannot be customized beyond a single setCustomValidity() string.

auro-input ships dedicated type values for credit-card, month-day-year, year-month-day, day-month-year, month-year, month-fullYear, and year-month, each applying the correct mask, validation, and accent icon. With native HTML you are limited to the standard input types and must implement format-specific behavior by hand.

auro-input floats the label above the field when it is focused or populated, and automatically associates slotted label content with the underlying input. With native HTML you must wire up for/id attributes and author the floating-label animation yourself.

auro-input supports a displayValue slot that renders custom HTML in place of the raw value when the input is blurred — useful for masked account numbers or formatted currency. Native inputs always show the raw value and have no equivalent.

auro-input supports classic, emphasized, and snowflake layouts, as well as shape variants (box, pill, pill-left, pill-right). A bordered default and a borderless simple mode are also provided. With native HTML you must author each variant's CSS yourself.

auro-input renders left and right accent slots and an automatic accent icon for typed formats (credit-card brand icon, calendar icon for date types). Native inputs have no slotting mechanism, so icons must be positioned via wrapper elements and absolute positioning.

auro-input exposes a helpText slot that automatically swaps to the validation error message when the field is invalid, with the correct ARIA wiring and color treatment. With native HTML you must manage aria-describedby, error-state styling, and the switch between help and error content yourself.

auro-input supports validateOnInput to validate on every keystroke, noValidate to disable validation, and tracks touched state so errors do not appear before the user has interacted with the field. Native inputs validate on submit and have no built-in touched concept.

auro-input dispatches auroFormElement-validated events so a parent auro-form can coordinate validation across all child fields. Native inputs participate in form submission but do not emit the structured validation events that the Auro form system expects.

auro-input consumes Auro design tokens through its component logic, so it automatically picks up brand-specific theming when token packages are swapped. A CSS-only input is tied to whichever tokens were imported at author time and will not respond to runtime theme switching the way the web component does.

Use auro-input whenever possible. Fall back to a CSS-styled native input only in environments where custom elements are not supported or when integrating with third-party systems that require plain HTML — and be prepared to reimplement masking, format-specific validation, clear and password toggles, touched tracking, and label/help/error wiring yourself.