CSS-Only

Form Layout

Form layout utilities for organizing inputs, labels, and actions with proper spacing and responsive behavior. Works with any form controls.

Example

We'll never share your email 
<form>
  <div class="omni-form-group">
    <label for="name" class="omni-label">
      Full Name
      <span class="omni-required">*</span>
    </label>
    <input type="text" id="name" class="omni-text-input" required>
  </div>

  <div class="omni-form-group">
    <label for="email" class="omni-label">Email</label>
    <input type="email" id="email" class="omni-text-input">
    <span class="omni-help-text">We'll never share your email</span>
  </div>

  <div class="omni-form-actions" data-align="end">
    <button class="omni-button" data-variant="primary">Submit</button>
  </div>
</form>

Form Groups

Use .omni-form-group to add vertical spacing between form fields:

<div class="omni-form-group">
  <label for="username" class="omni-label">Username</label>
  <input type="text" id="username" class="omni-text-input">
</div>

<div class="omni-form-group">
  <label for="password" class="omni-label">Password</label>
  <input type="password" id="password" class="omni-text-input">
</div>

Labels

Basic Labels

Required Fields

Use .omni-required to indicate required fields:

<label for="name" class="omni-label">
  Full Name
  <span class="omni-required" aria-hidden="true">*</span>
</label>
<input type="text" id="name" required aria-required="true">

Help Text and Error Messages

Help Text

Use .omni-help-text to provide additional context:

3-20 characters, letters and numbers only 
<label for="username" class="omni-label">Username</label>
<input type="text" id="username" aria-describedby="help-username">
<span id="help-username" class="omni-help-text">
  3-20 characters, letters and numbers only
</span>

Error Messages

Use .omni-error-message to display validation errors:

Please enter a valid email address 
<label for="email" class="omni-label">Email</label>
<input type="email" id="email" aria-invalid="true" aria-describedby="error-email">
<span id="error-email" class="omni-error-message" role="alert">
  Please enter a valid email address
</span>

Inline Forms

Use .omni-form-inline for horizontal layouts. Automatically stacks on mobile:

<form class="omni-form-inline">
  <div class="omni-form-group">
    <label for="search" class="omni-label">Search:</label>
    <input type="search" id="search" class="omni-text-input" data-width="md">
  </div>
  <button class="omni-button" data-variant="primary">Search</button>
</form>

Multiple Inline Fields

Two-Column Layout

Use .omni-form-row to create side-by-side fields. Automatically stacks on mobile:

<div class="omni-form-row">
  <div class="omni-form-group">
    <label for="first" class="omni-label">First Name</label>
    <input type="text" id="first" class="omni-text-input">
  </div>
  <div class="omni-form-group">
    <label for="last" class="omni-label">Last Name</label>
    <input type="text" id="last" class="omni-text-input">
  </div>
</div>

Form Actions

Use .omni-form-actions to group submit/cancel buttons with proper spacing and alignment:

Right-Aligned (default)

<div class="omni-form-actions" data-align="end">
  <button class="omni-button" data-variant="secondary">Cancel</button>
  <button class="omni-button" data-variant="primary">Save</button>
</div>

Left-Aligned

Center-Aligned

<!-- Left aligned -->
<div class="omni-form-actions" data-align="start">...</div>

<!-- Center aligned -->
<div class="omni-form-actions" data-align="center">...</div>

<!-- Right aligned -->
<div class="omni-form-actions" data-align="end">...</div>

Complete Examples

Registration Form

At least 8 characters with uppercase, lowercase, and numbers

Contact Form

API Reference

Classes

Class Element Description
.omni-form-group div Wrapper for label + input with vertical spacing
.omni-label label Form label with proper typography and spacing
.omni-required span Required field indicator (red asterisk)
.omni-help-text span Helper text below input
.omni-error-message span Error message with danger color
.omni-form-inline form, div Horizontal form layout (stacks on mobile)
.omni-form-row div Two-column layout for side-by-side fields
.omni-form-actions div Button container with border and spacing

Data Attributes

Attribute Element Values Description
data-align .omni-form-actions start, center, end Horizontal alignment of action buttons

Accessibility

  • All inputs must have associated labels using for attribute
  • Required fields use required and aria-required="true"
  • Required indicator uses aria-hidden="true" (visual only)
  • Help text uses aria-describedby to link to input
  • Error messages use aria-invalid="true" and aria-describedby
  • Error messages include role="alert" for screen reader announcements
  • Responsive layouts maintain logical tab order on mobile
  • Clear visual hierarchy with proper spacing and typography

Responsive Behavior

All layout utilities automatically adapt to mobile screens (600px and below):

  • .omni-form-inline stacks vertically on mobile
  • .omni-form-row converts to single column on mobile
  • .omni-form-actions stacks buttons vertically on mobile
  • All spacing and gaps adjust proportionally

Components Used

Other OmniUI components demonstrated on this page:

Input Button