Forms & Inputs

All standard form elements receive automatic glassmorphic styling. No classes required.

Text Inputs

All text-like input types are styled: text, email, password, number, tel, url, search.

<input type="text" placeholder="Full name" />
<input type="email" placeholder="you@example.com" />
<input type="password" placeholder="Password" />

Textarea

<textarea> has a min-height of 120px and is resize: vertical — users can drag it taller but not wider.

<textarea placeholder="Write a message..." rows="3"></textarea>

Select

<select> has a custom caret arrow and appearance: none to remove the browser-native control, giving it a consistent glass look. <option> elements use a dark fallback background for readability.

<select>
  <option>Select a framework</option>
  <option>React</option>
  <option>Vue</option>
  <option>Astro</option>
</select>

Fieldset & Legend

<fieldset> gets a subtle glass panel for grouping related inputs. <legend> is styled as an uppercase label.

<fieldset>
  <legend>Account Details</legend>
  <input type="text" placeholder="Username" />
</fieldset>

Form Layout

The <form> element automatically becomes a flex column with gap: 1.25rem. The <label> element becomes a flex column with gap: 0.5rem — perfect for label + input stacking.

<form>
  <label>
    Username
    <input type="text" placeholder="Enter username" />
  </label>
  <label>
    Email
    <input type="email" placeholder="you@example.com" />
  </label>
  <button type="submit">Submit</button>
</form>

Input States

State	Behavior
Default	Frosted glass with subtle inset shadow
Placeholder	Uses --glass-text-muted color
Focus	Glowing accent ring (box-shadow: 0 0 0 3px with accent color), background brightens
Disabled / Readonly	Opacity 0.5, cursor: not-allowed
Textarea disabled	Also sets resize: none
Invalid	Red border (--glass-error), red glow ring. Triggered by aria-invalid="true" or :invalid:not(:placeholder-shown)

Disabled Input

<input type="text" placeholder="Cannot edit" disabled />