CSS-Only

Input

Text input, textarea, and temporal input components with flexible sizing and width options. Works by default, enhances with data attributes.

Example

<label for="email">Email</label>
<input type="email" id="email" class="omni-text-input" data-size="md" placeholder="you@example.com">

<label for="message">Message</label>
<textarea id="message" class="omni-textarea" data-size="md" placeholder="Enter your message..."></textarea>

Text Input

Standard text inputs using the .omni-text-input class.

Input Types

Sizes

Use data-size to adjust input dimensions:

<input type="text" class="omni-text-input" data-size="sm" placeholder="Small">
<input type="text" class="omni-text-input" data-size="md" placeholder="Medium">
<input type="text" class="omni-text-input" data-size="lg" placeholder="Large">

Width Variants

Use data-width to control input width:

<input type="text" class="omni-text-input" data-size="md" data-width="sm">
<input type="text" class="omni-text-input" data-size="md" data-width="md">
<input type="text" class="omni-text-input" data-size="md" data-width="lg">

Full Width

<input type="text" class="omni-text-input" data-size="md" data-width="full">

States

Please enter a valid email address

Textarea

Multi-line text input using the .omni-textarea class.

Sizes

Rows Variants

Use data-rows to set specific heights:

<textarea class="omni-textarea" data-size="md" data-rows="3"></textarea>
<textarea class="omni-textarea" data-size="md" data-rows="5"></textarea>
<textarea class="omni-textarea" data-size="md" data-rows="8"></textarea>

Width Variants

Temporal Inputs

Date, time, and datetime inputs are automatically styled without requiring the .omni-text-input class.

Input Types

<input type="date" aria-label="Select date">
<input type="time" aria-label="Select time">
<input type="datetime-local" aria-label="Select date and time">
<input type="month" aria-label="Select month">
<input type="week" aria-label="Select week">

Temporal Range

Use the .omni-temporal-range container for date/time ranges:

to
to 
<div class="omni-temporal-range">
  <input type="date" aria-label="Start date">
  <span>to</span>
  <input type="date" aria-label="End date">
</div>

API Reference

Text Input

Attribute Values Default Description
data-size sm, md, lg — Input padding and font size
data-width sm (200px), md (300px), lg (400px), full (100%) full Input width

Textarea

Attribute Values Default Description
data-size sm (60px), md (80px), lg (120px) — Textarea min-height and padding
data-rows 3 (60px), 5 (100px), 8 (160px) — Explicit row heights
data-width sm (300px), md (400px), lg (500px), full (100%) full Textarea width

Temporal Inputs

Date, time, datetime-local, month, and week inputs are automatically styled. No data attributes required, but data-size and data-width can be used if needed.

Accessibility

  • Labels are required: All inputs must have associated <label> elements using the for attribute, or use aria-label for icon-only inputs
  • Required fields: Use both required attribute and aria-required="true" for screen reader support
  • Error states: Use aria-invalid="true" and aria-describedby to link to error messages with role="alert"
  • Placeholder text: Should not replace labels; use for examples or formatting hints only
  • Focus indicators: All inputs have visible focus rings with 3px outline offset
  • Keyboard navigation: Full keyboard support (Tab, Shift+Tab, Enter)
  • Autofill styling: Text inputs prevent browser yellow autofill background while maintaining readability
  • Resize: Textareas allow vertical resizing only to prevent layout issues
  • Temporal inputs: Native browser date/time pickers provide accessible selection interfaces

Example: Accessible Form

<form>
  <div>
    <label for="name">Name <span aria-hidden="true">*</span></label>
    <input type="text" id="name" class="omni-text-input"
           data-size="md" required aria-required="true">
  </div>

  <div>
    <label for="email">Email <span aria-hidden="true">*</span></label>
    <input type="email" id="email" class="omni-text-input"
           data-size="md" required aria-required="true"
           aria-invalid="true" aria-describedby="email-error">
    <span id="email-error" role="alert">Please enter a valid email</span>
  </div>

  <div>
    <label for="message">Message</label>
    <textarea id="message" class="omni-textarea" data-size="md" data-rows="5"></textarea>
  </div>
</form>