Input

Form input components with consistent styling

Overview

Form inputs with automatic dark mode support and accessible focus states.

Text Input

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

With Labels

<div s-field>
  <label s-field-label for="email">Email</label>
  <input s-input type="email" id="email" placeholder="you@example.com" />
</div>

Input Sizes

Use the s-size attribute:

<input s-input s-size="sm" type="text" placeholder="Small" />
<input s-input type="text" placeholder="Default" />
<input s-input s-size="lg" type="text" placeholder="Large" />

States

Disabled

<input s-input type="text" disabled placeholder="Disabled input" />

Input Types

Password

<input s-input type="password" placeholder="Password" />
<input s-input type="search" placeholder="Search..." />

Number

<input s-input type="number" placeholder="0" />

Textarea

<textarea s-input rows="4" placeholder="Enter message..."></textarea>

Select

<select s-input>
  <option value="">Choose an option</option>
  <option value="1">Option 1</option>
  <option value="2">Option 2</option>
  <option value="3">Option 3</option>
</select>

Form Components

Checkbox

<label s-checkbox>
  <input type="checkbox" />
  Remember me
</label>

Radio Buttons

<label s-radio>
  <input type="radio" name="option" value="1" />
  Option 1
</label>
<label s-radio>
  <input type="radio" name="option" value="2" />
  Option 2
</label>

Toggle Switch

<label s-toggle>
  <input type="checkbox" />
  Enable notifications
</label>

Form Layout

<form>
  <div s-field>
    <label s-field-label for="name">Name</label>
    <input s-input type="text" id="name" />
  </div>
  <div s-field>
    <label s-field-label for="email">Email</label>
    <input s-input type="email" id="email" />
    <span s-field-hint>We'll never share your email.</span>
  </div>
  <div s-field>
    <label s-field-label for="message">Message</label>
    <textarea s-input id="message" rows="4"></textarea>
    <span s-field-error>This field is required.</span>
  </div>
  <div>
    <button s-btn="primary" type="submit">Submit</button>
    <button s-btn="ghost" type="reset">Reset</button>
  </div>
</form>

Form Attributes

AttributePurposeExample
s-inputText input styling<input s-input>
s-fieldForm field wrapper<div s-field>
s-field-labelField label<label s-field-label>
s-field-hintHelper text<span s-field-hint>
s-field-errorError message<span s-field-error>
s-checkboxCheckbox wrapper<label s-checkbox>
s-radioRadio button wrapper<label s-radio>
s-toggleToggle switch wrapper<label s-toggle>
s-input-groupInput with addons<div s-input-group>
s-input-addonAddon element<span s-input-addon>

Input Groups

Combine inputs with addons for prefixes or suffixes:

<div s-input-group>
  <span s-input-addon>https://</span>
  <input s-input type="text" placeholder="example.com" />
</div>

<div s-input-group>
  <input s-input type="number" placeholder="0.00" />
  <span s-input-addon>USD</span>
</div>

How It Works

:where([s-input]) {
  --_input-bg: var(--s-surface-base);
  --_input-border: var(--s-border-default);
  --_input-radius: var(--s-radius-md);

  background-color: var(--_input-bg);
  border: 2px solid var(--_input-border);
  border-radius: var(--_input-radius);
  padding: var(--s-space-2) var(--s-space-3);
}

[s-input]:focus {
  --_input-border: var(--s-interactive-primary);
  box-shadow: 0 0 0 3px oklch(from var(--s-interactive-primary) l c h / 0.2);
}

Customization Examples

Rounded Inputs

[s-input] {
  --_radius: var(--s-radius-full);
}

Custom Focus Color

:root {
  --s-focus-ring: var(--s-accent-500);
}
Search