Brand Input
<brand-input> wraps Shoelace's <sl-input> and applies
semantic tokens for colours, borders, and focus rings. All native attributes are forwarded,
and the component exposes .value, .focus(), and
.checkValidity() for JS integration.
Types
Sizes
Helper and error text
States
Usage
import { BrandInput } from '@brandos/ui';
<brand-input
label="Email"
type="email"
placeholder="you@example.com"
required
></brand-input>
// JS
const el = document.querySelector('brand-input');
el.value = 'hello@snyder.tech';
el.addEventListener('sl-change', () => console.log(el.value));