About
Uses a native <input> inside Shadow DOM for full keyboard, IME, autocomplete, and accessibility support.
Error messages render below the input with aria-invalid and aria-describedby.
Input Types
Validation States
Clearable
<ars-input label="Clearable" clearable value="initial"></ars-input>
Prefix & Suffix Slots
<ars-input label="Price">
<span slot="prefix">$</span>
</ars-input>
Readonly & Disabled
Event Monitor
Interact with any input above to see events.
Listening for ars-input events...
Theme Toggle
Usage
<ars-input
label="Email"
type="email"
placeholder="user@example.com"
required
error="Please enter a valid email"
></ars-input>
<script>
const input = document.querySelector('ars-input');
input.addEventListener('ars-input:change', (e) => {
console.log('Value committed:', e.detail.value);
});
</script>