Skip to main content
Urbicon UI
source

Input

Text input fields with validation states, icons, and form integration.

We will never share your email
Loading syntax highlighting...

01 Examples

Search input

Pair `clearable` with a left search icon — the most common real-world pattern. Press Escape or click the clear button to reset.
Loading syntax highlighting...

Password with visibility toggle

Combine `type='password'` with a clickable right icon — `onRightIconClick` turns the icon into an accessible button (note the required `rightIconAriaLabel`).
Loading syntax highlighting...

Email field with validation error

`error` overrides `helper` and forces danger styling regardless of `intent`. Combined with a left icon for visual context.
Loading syntax highlighting...

02 Customization

Branded Search Bar

The container acts as the visual boundary with ring and shadow. The input's own border is suppressed via slotClasses.
Loading syntax highlighting...

Glassmorphism Input

Frosted glass input for overlay or hero contexts.
Loading syntax highlighting...

Underline Form

The underline variant pairs well with compact forms.
Optional
Loading syntax highlighting...

Fully Custom (unstyled)

Drop all defaults for complete control.
Loading syntax highlighting...

03 Accessibility

Built-in ARIA

Labels are automatically associated via for and id. Error and helper messages are linked through aria-describedby. Validation states set aria-invalid automatically.

Keyboard

Tab to focus. Native text input behavior for all key combinations. Clearable inputs respond to Escape to clear the value. Focus indication uses focus-visible: for keyboard-only visibility.

Color Contrast

Error, warning, and success states use both color and text to convey status – never color alone. Helper and error messages meet WCAG AA contrast ratios against all surface tokens.

04 API Reference

36 props
36 props

No matching properties

No matching properties

05 Installation

Import

Loading syntax highlighting...
llm.txt