Input

Clean, accessible text inputs with subtle inset shadows, smooth focus rings, and first-class dark mode support.

Basic Input

<input type="text" class="sol-input" placeholder="Enter your name…">

With Label

Email address

<div class="sol-input-group">
  <label class="sol-label">Email address</label>
  <input type="email" class="sol-input" placeholder="you@example.com">
</div>

Validation States

Add sol-input-error to show an error focus ring.

Username

Password

<!-- Error state -->
<input type="text" class="sol-input sol-input-error" value="invalid">

<!-- Success state (manual inline style or custom class) -->
<input type="text" class="sol-input"
  style="border-color: var(--color-success);
         box-shadow: 0 0 0 3px rgba(52,199,89,0.15)"
  value="valid_user">

Disabled

<input type="text" class="sol-input" placeholder="Disabled…" disabled>

API

Class	Description
`sol-input`	Base input styles — always required
`sol-input-group`	Flex column wrapper with gap for label + input
`sol-label`	Styled label element
`sol-input-error`	Red border + red focus glow

♿ Accessibility Always pair inputs with a visible <label> or use aria-label. The sol-input-group + sol-label pattern handles this automatically.