Form

Form layout patterns with labels, inputs, validation states, and helper text.

Login Form

Standard vertical form layout with email and password fields.

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

With Helper Text

Form fields with hint text below the input.

html

Must be 3-20 characters, letters and numbers only

Maximum 160 characters

<div class="uc-form-field">
  <label class="uc-label">Username</label>
  <input type="text" class="uc-input" />
  <p class="uc-form-hint">Must be 3-20 characters</p>
</div>

Validation States

Error and success states with colored borders and messages.

html

Please enter a valid email address

Username is available 

<div class="uc-form-field uc-form-error">
  <label class="uc-label">Email</label>
  <input type="email" class="uc-input" value="invalid" />
  <p class="uc-form-message">Please enter a valid email address</p>
</div>

Horizontal Layout

Label and input on the same row for settings-style forms.

html 
<div class="uc-form-field uc-form-horizontal">
  <label class="uc-label uc-w-32">Full Name</label>
  <div class="uc-flex-1">
    <input type="text" class="uc-input" />
  </div>
</div>

Registration Form

Complete registration form with multiple field types.

Create Account

Fill in your details to get started

Use 8+ characters with a mix of letters and numbers

API Reference

All CSS classes available for the Form component.

Class Type Description
uc-space-y-4 Spacing Vertical spacing between form fields
uc-space-y-1.5 Spacing Tight spacing between label, input, and hint
uc-text-sm uc-font-medium Typography Form label text style
uc-h-10 uc-rounded-lg Shape Input height and border radius
uc-border uc-border-border-strong Border Default input border
uc-bg-neutrals-surface Color Input background color
uc-focus-visible:ring-1 uc-focus-visible:ring-accents-blue State Blue focus ring on input focus
uc-border-accents-red State Red border for error state inputs
uc-focus-visible:ring-accents-red State Red focus ring for error state
uc-border-accents-green State Green border for success state inputs
uc-text-accents-red Color Red text for error messages
uc-text-accents-green Color Green text for success messages
uc-text-fg-disabled Color Muted text for hint/helper text
uc-btn uc-btn-primary uc-w-full Component Full-width primary submit button
uc-checkbox Component Styled checkbox input

Accessibility

Keyboard and screen reader support.

Feature Details
Labels Every input must have a visible label linked via for/id attributes
Errors Error messages linked via aria-describedby, invalid fields use aria-invalid="true"
Required Required fields should use required attribute and aria-required="true"
Groups Related fields wrapped in fieldset with legend element
Submit Form submission feedback should be announced to screen readers