Component primitive

Brand Input

<brand-input> wraps Web Awesome's <wa-input> and applies semantic tokens for borders, focus, guidance, and error states. Native constraints are forwarded, while error-text supplies a useful message after validation.

<brand-input>Framework-agnostic custom element

Light themeSemantic surface

Dark themeSame component API

Element: <brand-input>
Library: Brand
Runtime: Web Component
Theming: Semantic tokens

Types

Sizes

Validation

States

Usage

import { BrandInput } from '@brandos/ui';

<brand-input
  label="Email"
  type="email"
  placeholder="you@example.com"
  helper-text="Use your work email."
  error-text="Enter a valid work email address."
  required
></brand-input>

// JS
const el = document.querySelector('brand-input');
el.value = 'hello@snyder.tech';
el.reportValidity();