Skip to content
LSD Framework
Components · primitives

Inputs. Sized, toned, animated.

One .lsd-input base — text, email, number, password, search, textarea, select — with independent size, state, and style modifiers. Every input chains the universal .lsd-fx--* animation library, so the same lift / shimmer / glow / border-draw effects you wire into buttons just work on a field.

01 · base

.lsd-input

Token contract: --inp-bg, --inp-fg, --inp-border, --inp-radius, --inp-pad-x, --inp-pad-y, --inp-font, --inp-focus-color. Applies to <input>, <textarea>, and <select>.

sizes

sm / md (default) / lg

Size mods shift padding + font-size only. Border, radius, and tone stay the same.

<input class="lsd-input lsd-input--sm" />
<input class="lsd-input" />
<input class="lsd-input lsd-input--lg" />
field types

text / email / number / password / search / textarea / select

Same base class, any HTML field type. Native semantics preserved.

<input class="lsd-input" type="email" />
<textarea class="lsd-input"></textarea>
<select class="lsd-input">…</select>
states

default / focused / disabled / error / success / read-only

Use aria-invalid="true" for error, .is-success for success, disabled + readonly for inert states.

<input class="lsd-input" aria-invalid="true" />
<input class="lsd-input is-success" />
<input class="lsd-input" disabled />
width

auto (default) / block

.lsd-input--block stretches to fill its container. Default sizes to content / browser min.

<input class="lsd-input lsd-input--block" />
02 · styles

Eight input styles

Structural / decorative variants — distinct from state. Each is independent and chains with sizes, states, and the universal .lsd-fx--* library below.

.lsd-input--filled

Filled

Solid bg, no border, soft inset highlight. Reads as a tile rather than an outlined box.

<input class="lsd-input lsd-input--filled" />
.lsd-input--outlined

Outlined

Transparent bg, accent border. Loud variant for hero forms and CTAs.

<input class="lsd-input lsd-input--outlined" />
.lsd-input--underlined

Underlined

Bottom border only, no padding inline. Minimal, editorial vibe.

<input class="lsd-input lsd-input--underlined" />
.lsd-input--floating-label

Floating label

Label rises into a caption when the field is focused or filled. Pure CSS via :has + :placeholder-shown.

<label class="lsd-input-float">
  <input class="lsd-input" placeholder=" " />
  <span class="lsd-input-float__label">Email</span>
</label>
.lsd-input--icon-prefix

Icon prefix

Leading icon slot; icon tints with the focus color when the field is active.

<div class="lsd-input-icon">
  <span class="lsd-input-icon__icon">⌕</span>
  <input class="lsd-input" type="search" />
</div>
.lsd-input--addon

Pre/post addons

Addons fused to the input shell, one perceived unit. Useful for URLs, units, or currencies.

https://
USD 
<div class="lsd-input-addon">
  <span class="lsd-input-addon__addon">https://</span>
  <input class="lsd-input" />
</div>
.lsd-input--glass

Frosted glass

backdrop-filter blur + saturate over an accent-tinted surface. Best layered over imagery.

<input class="lsd-input lsd-input--glass" />
.lsd-input--terminal

Terminal

Monospace, dark, accent-2 caret that blinks. Pairs with command-palette UI.

<input class="lsd-input lsd-input--terminal"
       value="> deploy --prod" />
03 · chaining

Chain .lsd-fx--* onto a field

The universal animations from the buttons page are not button-specific — they read only --accent, --accent-2, --accent-3 from the host. Chain them onto any .lsd-input for hover/focus/loading/error feedback.

.lsd-fx--lift

Lift + bloom on focus

Field elevates with a dual-color shadow when focused. Same shadow recipe used on buttons.

<input class="lsd-input lsd-fx--lift" />
.lsd-fx--border-draw

Border draw on focus

Conic gradient animates around the outline. Triggered by :focus-within.

<input class="lsd-input lsd-fx--border-draw" />
.lsd-fx--glow-pulse

Loading state — glow pulse

Continuous halo while the field is processing. Toggle to demo.

idle 
<input class="lsd-input lsd-fx--glow-pulse" />
.lsd-fx--shimmer

Hover shimmer sweep

Diagonal light stripe sweeps across the field on hover. Pure CSS.

<input class="lsd-input lsd-input--filled
       lsd-fx--shimmer" />
.lsd-fx--glitch

Error glitch (label)

Toggle to flip aria-invalid and run a brief glitch on the error label.

INVALID 
<span class="lsd-fx--glitch is-active">
  <span class="lsd-fx__text"
        data-text="INVALID">INVALID</span>
</span>
.lsd-fx--letter-shuffle

Shuffle on label

The universal shuffle works on any text node — here on a field label.

ACCESS CODE 
<span class="lsd-fx--letter-shuffle"
      data-text="ACCESS CODE">
  ACCESS CODE
</span>
04 · input-only

.lsd-input--ripple-focus

A field-specific animation: when the input receives focus, a horizontal ripple line emanates from the center along the bottom edge until it fills the full width. Pure CSS via ::before + :focus. Different from .lsd-fx--border-draw because it only touches the bottom edge.

.lsd-input--ripple-focus

Bottom-edge focus ripple

Pair with .lsd-input--underlined for the cleanest read. Reduced-motion downgrades to a simple fade.

<input class="lsd-input lsd-input--underlined
       lsd-input--ripple-focus" />
Components · Inputs · 8 styles · animation-chained
↩ Framework index