The native <input> element is the workhorse of HTML forms, but it has significant limitations in styling, validation messaging, input formatting, and accessibility. auro-input addresses these while remaining a drop-in upgrade for common input types.

Native inputs require manual <label> wiring, have no standard pattern for error announcements, and provide no built-in clear or show/hide password controls.

auro-input provides:

• Automatic label binding — The label slot is automatically associated with the input. No for/id wiring required.
• Dynamic label positioning — Labels float above the input when focused or populated, providing context without consuming space.
• Clear button — An accessible clear button appears when the input has a value, with a customizable ARIA label via the ariaLabel.clear slot.
• Password toggle — For type="password", a show/hide toggle is built in with customizable ARIA labels for both states (ariaLabel.password.show, ariaLabel.password.hide).
• Validation announcements — Error messages display in help text with appropriate ARIA roles so screen readers announce validity changes.

Native inputs have no concept of input masks. Building formatted input (phone numbers, dates, credit card numbers) requires third-party libraries and manual integration.

auro-input includes IMask integration:

• Format attribute — Set format="(###) ###-####" for phone numbers, format="mm/dd/yyyy" for dates, or any custom pattern.
• Auto-formatting — Characters are formatted as the user types, with cursor position preserved.
• Date formats — Supports mm/dd/yyyy, dd/mm/yyyy, yyyy-mm-dd with automatic conversion.

There is no native way to detect a credit card type from input, apply the correct formatting mask, or display the appropriate card icon.

auro-input with type="credit-card" provides:

• Auto-detection — Identifies Visa, Mastercard, American Express, Discover, Diners Club, JCB, China UnionPay, and Alaska Airlines cards from the first digits typed.
• Dynamic formatting — Applies the correct digit grouping (e.g., 4-4-4-4 for Visa, 4-6-5 for Amex).
• Card icon — Displays the detected card brand icon automatically.

Native input validation provides required, min, max, minlength, maxlength, and pattern, but error messages are browser-controlled and cannot be customized.

auro-input provides:

• Custom error messages for every validity state: setCustomValidityValueMissing, setCustomValidityRangeOverflow, setCustomValidityRangeUnderflow, setCustomValidityTooLong, setCustomValidityTooShort, setCustomValidityBadInput, setCustomValidityCustomError, setCustomValidityForType
• Type-specific validation (email format, credit card format, phone format, date format)
• Validation timing control: on blur (default), on every input (validateOnInput), or disabled (noValidate)
• Programmatic vs. user input distinction — the component tracks whether a value change was user-initiated or programmatic

Native inputs show the raw value at all times. There is no way to display a formatted or alternative representation when the input is not focused.

auro-input supports a displayValue slot that shows custom HTML when the input is blurred, hiding the raw value. This is useful for displaying formatted currency, masked account numbers, or rich content while keeping the underlying value clean for submission.

Native inputs have a single visual presentation controlled by browser defaults.

auro-input offers:

• Three layouts — Classic (floating label), emphasized (prominent label), and snowflake (custom positioning)
• Shape variants — Box, pill, pill-left, pill-right for different visual contexts
• Nested mode — Removes borders and hides help/error text for embedding inside other components
• Simple mode — Borderless variant for inline use

Native input styling varies across browsers and requires extensive CSS resets to normalize.

auro-input is built with the Auro Design System:

• Consistent visual language across all browsers and platforms
• Light and dark theme support (appearance)
• CSS ::part() selectors for granular styling (wrapper, label, input, helpText, accentIcon, iconContainer, displayValue)
• Design token integration for colors, spacing, and typography