Skip to main content

​
Overview

The lum-input utility creates consistently styled input fields with smooth transitions, hover effects, and smart padding.

​
CSS Implementation

@utility lum-input {
  @apply flex 
         motion-safe:transition duration-300 hover:duration-75 active:duration-75 ease-out 
         disabled:opacity-50 
         hover:drop-shadow-lg active:drop-shadow-lg 
         whitespace-nowrap touch-manipulation select-none 
         lum-input-p-2 
         lum-bg-lum-input-bg 
         hover:lum-bg-lum-input-hover-bg 
         active:lum-bg-lum-input-hover-bg;
  border-radius: var(--lum-border-radius);
  corner-shape: superellipse(var(--lum-border-superellipse));
}

​
Usage

<input type="text" class="lum-input" placeholder="Enter text..." />

​
Applied Classes

The lum-input utility applies the following Tailwind classes:

​
Layout

  • flex - Flexbox display

​
Animation

  • motion-safe:transition - Smooth transitions (respects reduced-motion)
  • duration-300 - 300ms transition by default
  • hover:duration-75 - Faster 75ms transition on hover
  • active:duration-75 - Faster 75ms transition on active
  • ease-out - Easing function

​
Effects

  • hover:drop-shadow-lg - Large drop shadow on hover
  • active:drop-shadow-lg - Large drop shadow on active/focus
  • disabled:opacity-50 - 50% opacity when disabled

​
Interaction

  • whitespace-nowrap - Prevents text wrapping (for single-line inputs)
  • touch-manipulation - Optimized for touch devices
  • select-none - Prevents text selection of the input container (not the value)

​
Styling

  • lum-input-p-2 - Smart padding utility (see below)
  • lum-bg-lum-input-bg - Background color
  • hover:lum-bg-lum-input-hover-bg - Hover background
  • active:lum-bg-lum-input-hover-bg - Active/focus background
  • border-radius: var(--lum-border-radius) - Rounded corners
  • corner-shape: superellipse - Smooth superellipse corners

​
lum-input-p-* (Padding Utility)

Smart padding utility for inputs with a 1.5:1 horizontal to vertical ratio.

​
CSS Implementation

@utility lum-input-p-* {
  padding: calc(var(--spacing) * --value(integer))
    calc(var(--spacing) * --value(integer) * var(--lum-input-p-x))
    calc(var(--spacing) * --value(integer))
    calc(var(--spacing) * --value(integer) * var(--lum-input-p-x));
}

​
Usage

<input type="text" class="lum-input lum-input-p-1" placeholder="Small" />

​
Padding Scale

​
lum-input-p-1
utility
Small: 0.25rem vertical, 0.375rem horizontal (4px/6px)
​
lum-input-p-2
utility
Default: 0.5rem vertical, 0.75rem horizontal (8px/12px)
​
lum-input-p-3
utility
Large: 0.75rem vertical, 1.125rem horizontal (12px/18px)
​
lum-input-p-4
utility
Extra Large: 1rem vertical, 1.5rem horizontal (16px/24px)

​
CSS Variables

​
--lum-input-p-x
number
default:"1.5"
Horizontal padding multiplier (creates 1.5:1 horizontal to vertical ratio)
​
--lum-border-radius
length
default:"var(--radius-lg)"
Border radius for input corners
​
--lum-border-superellipse
number
default:"1"
Superellipse corner smoothing (0 = circle, 1 = squircle, 2+ = rounded square)
​
--color-lum-input-bg
color
default:"var(--color-gray-800)"
Default input background color
​
--color-lum-input-hover-bg
color
default:"var(--color-gray-700)"
Hover and active background color
​
--color-lum-accent
color
default:"var(--color-blue-500)"
Border color on focus state (from lum-bg utility)

​
States

​
Hover State

<input type="text" class="lum-input" placeholder="Hover me" />
<!-- On hover: -->
<!-- - Lighter background (gray-700) -->
<!-- - Drop shadow appears -->
<!-- - Faster 75ms transition -->

​
Focus State

<input type="text" class="lum-input" placeholder="Focus me" />
<!-- On focus: -->
<!-- - Accent border appears (from lum-bg utility) -->
<!-- - Lighter background (gray-700) -->
<!-- - Drop shadow appears -->
<!-- - No outline -->

​
Disabled State

<input type="text" class="lum-input" placeholder="Disabled" disabled />
<!-- When disabled: -->
<!-- - 50% opacity -->
<!-- - No hover/focus effects -->
<!-- - Cursor: not-allowed (browser default) -->

​
Error State

<input type="text" class="lum-input lum-bg-red-900/30 border-red-500" placeholder="Invalid input" />
<!-- Custom error styling -->
The input inherits focus styles from the lum-bg utility, which provides an accent border. Don’t remove this without providing alternative focus indicators for accessibility.

​
Form Examples

<form class="space-y-4">
  <div>
    <label class="block text-sm font-medium mb-2">Name</label>
    <input type="text" class="lum-input w-full" placeholder="John Doe" />
  </div>
  <div>
    <label class="block text-sm font-medium mb-2">Email</label>
    <input type="email" class="lum-input w-full" placeholder="[email protected]" />
  </div>
  <button type="submit" class="lum-btn lum-bg-blue-600">
    Submit
  </button>
</form>

​
Customization

​
Width

<input type="text" class="lum-input w-full" /> <!-- Full width -->
<input type="text" class="lum-input w-64" />  <!-- Fixed width -->
<input type="text" class="lum-input max-w-sm" /> <!-- Max width -->

​
Colors

<!-- Light background -->
<input type="text" class="lum-input lum-bg-gray-700 hover:lum-bg-gray-600" />

<!-- Accent color -->
<input type="text" class="lum-input lum-bg-blue-900/30 hover:lum-bg-blue-900/50" />

<!-- Transparent -->
<input type="text" class="lum-input lum-bg-transparent border border-gray-700" />

​
Typography

<input type="text" class="lum-input text-lg" placeholder="Large text" />
<input type="text" class="lum-input text-sm" placeholder="Small text" />
<input type="text" class="lum-input font-mono" placeholder="Monospace" />

​
Remove Animations

<input type="text" class="lum-input transition-none hover:drop-shadow-none" />

​
Textarea Customization

<!-- Fixed height -->
<textarea class="lum-input resize-none" rows="4"></textarea>

<!-- Vertical resize only -->
<textarea class="lum-input resize-y" rows="4"></textarea>

<!-- Auto-expanding (requires JavaScript) -->
<textarea class="lum-input resize-none overflow-hidden" 
          oninput="this.style.height = 'auto'; this.style.height = this.scrollHeight + 'px'"></textarea>

​
Accessibility

The lum-input utility includes several accessibility features:
  • Respects prefers-reduced-motion with motion-safe: variants
  • Touch-optimized with touch-manipulation
  • Includes disabled state with visual feedback
  • Inherits focus styles from lum-bg utility with accent border
  • Maintains proper color contrast for readability

​
Best Practices

  1. Always include a <label> element for each input (visual or aria-label)
  2. Use appropriate type attributes (email, password, number, etc.)
  3. Provide helpful placeholder text
  4. Include validation feedback for error states
  5. Use autocomplete attributes for better UX
  6. Set required and aria-required for mandatory fields
  7. Provide clear error messages near the input
  8. Consider using aria-describedby to link inputs with help text
  9. For textareas, consider adding resize-none to prevent layout issues
  10. Use w-full for inputs in forms to ensure consistent width

Build docs developers (and LLMs) love

Get started for freeTalk to us