#Input

Include CSS

Import Tailwind and one full A3S UI style bundle.

@import "tailwindcss";
@import "@a3s-lab/ui/a3s.css";

Or import only the base CSS, Input component CSS, and one style pack.

@import "tailwindcss";
@import "@a3s-lab/ui/base.css";
@import "@a3s-lab/ui/components/input.css";
@import "@a3s-lab/ui/styles/a3s.css";

Using CDN or bundler imports? See the Installation page.

Add your input HTML

Add class="input" to supported <input> elements. Inputs inside a class="field" container also receive the same styling automatically for common text-like input types.

Use native HTML attributes for behavior: disabled for disabled inputs, required for required fields, and aria-invalid="true" for invalid state styling.

<input class="input" type="email" aria-label="Email" placeholder="Email" />