Input

Displays a form input field or a component that looks like an input field.

Default

Basic input field.

html 
<input type="email" placeholder="Email" class="uc-input" />

With Label

Input with a descriptive label.

html 
<div class="uc-space-y-2">
  <label class="uc-label">Email</label>
  <input type="email" placeholder="Enter your email" class="uc-input" />
</div>

With Description

Input with a helper text below.

html

This is your public display name.

<div class="uc-space-y-2">
  <label class="uc-label">Username</label>
  <input type="text" placeholder="@johndoe" class="uc-input" />
  <p class="uc-text-sm uc-text-fg-disabled">This is your public display name.</p>
</div>

With Icon

Input with a leading or trailing icon.

html 
<!-- Leading icon -->
<div class="uc-relative">
  <svg class="uc-absolute uc-left-3 uc-top-1/2 uc--translate-y-1/2 uc-w-4 uc-h-4 uc-text-fg-disabled">...</svg>
  <input type="text" placeholder="Search..." class="uc-input uc-pl-9" />
</div>

<!-- Trailing icon -->
<div class="uc-relative">
  <input type="password" placeholder="Password" class="uc-input uc-pr-9" />
  <button class="uc-absolute uc-right-3 uc-top-1/2 uc--translate-y-1/2 uc-text-fg-disabled">
    <svg class="uc-w-4 uc-h-4">...</svg>
  </button>
</div>

Error State

Input with validation error.

html

Please enter a valid email address.

<div class="uc-space-y-2">
  <label class="uc-label">Email</label>
  <input type="email" value="invalid-email" class="uc-input uc-input-error" />
  <p class="uc-text-sm uc-text-accents-red">Please enter a valid email address.</p>
</div>

Disabled

Input in disabled state.

html 
<input type="email" placeholder="Email" class="uc-input" disabled />

Form Example

Inputs combined in a login form.

html 
<div class="uc-space-y-4">
  <div class="uc-space-y-2">
    <label class="uc-label">Email</label>
    <input type="email" placeholder="m@example.com" class="uc-input" />
  </div>
  <div class="uc-space-y-2">
    <label class="uc-label">Password</label>
    <input type="password" placeholder="Enter password" class="uc-input" />
  </div>
  <button class="uc-btn uc-btn-primary uc-w-full">Sign In</button>
</div>

API Reference

All CSS classes available for the Input component.

Class Type Description
uc-input Base Base input styles — height, padding, border, rounded, font, transition
uc-input-error State Red border for validation errors
uc-label Base Label styles — font-size, font-weight, color
uc-pl-9 Modifier Extra left padding for leading icon space
uc-pr-9 Modifier Extra right padding for trailing icon space
disabled State HTML attribute — reduced opacity, no pointer events

Accessibility

Keyboard and screen reader support.

Feature Details
Label Always associate a visible label via for/id or wrapping label element
Error Use aria-invalid="true" and aria-describedby pointing to error message
Required Use required attribute and aria-required="true" for mandatory fields
Placeholder Placeholder is not a substitute for a label — always provide a label
Disabled Disabled inputs are excluded from tab order automatically