Skip to content
Admin design systemv0.20.1

Inputs

Examples

Section titled “Examples”

Variants

Section titled “Variants”
<input class="input" placeholder="Bordered (default)" />
<input class="input input-ghost" placeholder="Ghost" />
<input class="input input-danger" placeholder="Danger" value="invalid" />

Status variants

Section titled “Status variants”
<input class="input input-info" value="Info" />
<input class="input input-success" value="Success" />
<input class="input input-warning" value="Warning" />

Sizes

Section titled “Sizes”
<input class="input input-sm" placeholder="Small" />
<input class="input" placeholder="Medium" />
<input class="input input-lg" placeholder="Large" />

Disabled

Section titled “Disabled”
<input class="input" disabled value="Disabled" />

With icons

Section titled “With icons”
<label class="input-icon">
  <i class="ti ti-search" aria-hidden="true"></i>
  <input class="input" type="search" placeholder="Search…" />
</label>
<label class="input-icon">
  <input class="input" type="email" placeholder="you@example.com" />
  <i class="ti ti-mail" aria-hidden="true"></i>
</label>
<label class="input-icon">
  <i class="ti ti-search" aria-hidden="true"></i>
  <input class="input input-ghost" type="search" placeholder="Filter rows…" />
</label>

Clearable

Section titled “Clearable”
<label class="input-icon">
  <input class="input" type="search" value="report" />
  <button
    type="button"
    class="input-action"
    aria-label="Clear"
    onclick="
      const i = this.previousElementSibling;
      i.value = '';
      i.focus();
    "
  >
    <i class="ti ti-x" aria-hidden="true"></i>
  </button>
</label>

Password

Section titled “Password”
<label class="input-icon">
  <input class="input" type="password" value="hunter2" />
  <button
    type="button"
    class="input-action"
    aria-label="Show password"
    aria-pressed="false"
    onclick="
      const i = this.parentElement.querySelector('input');
      const shown = i.type === 'text';
      i.type = shown ? 'password' : 'text';
      this.setAttribute('aria-pressed', String(!shown));
      i.focus();
    "
  >
    <i class="ti ti-eye" aria-hidden="true"></i>
  </button>
</label>

Types

Section titled “Types”
<input class="input" type="email" placeholder="you@example.com" />
<input class="input" type="password" placeholder="Password" />
<input class="input" type="number" placeholder="42" />
<input class="input" type="search" placeholder="Search" />
<input class="input" type="url" placeholder="https://example.com" />
<input class="input" type="tel" placeholder="+45 12 34 56 78" />

Date and time

Section titled “Date and time”
<input class="input" type="date" />
<input class="input" type="time" />
<input class="input" type="datetime-local" />
<input class="input" type="month" />
<input class="input" type="week" />

Reference

Section titled “Reference”

React

Section titled “React”
Component Prop Type Default
Input variant "bordered" | "ghost" | "danger" | "info" | "success" | "warning" "bordered"
Input inputSize "sm" | "md" | "lg" "md"
Input icon IconProp —
Input iconTrailing IconProp —
Input clearable boolean false
Input clearLabel string "Clear"
Input onClear () => void —
Input action ReactNode —
Input classNames slots —
PasswordInput revealLabel string "Show password"

The size prop is inputSize because <input> has a native size attribute — see Conventions › Sizes. type defaults to "text".

Any of icon, iconTrailing, clearable or action wraps the input in an input-icon label; without them the <input> is rendered bare. classNames covers wrapper and action. clearable shows the × only while the field holds a value and is neither disabled nor read-only; clearing sets the value through the native setter and dispatches a real input event, so controlled components and form libraries both see the change, then calls onClear. action replaces the clear button with your own control — style it input-action.

PasswordInput is Input with a built-in reveal toggle that flips type between password and text, keeps focus, and tracks state in aria-pressed. It accepts every Input prop except type and the clear-button set.

Wraps Base UI Input, so inside a Field it picks up the id, label association and validity wiring. Plus native <input> attributes.

Vanilla

Section titled “Vanilla”
Class Effect
input Full-width field, 0.75rem/0.5rem padding, 0.5rem radius, text-sm, bordered surface
input-ghost No fill or border until hover
input-danger Danger border and focus outline
input-info input-success input-warning Status border and focus outline
input-sm text-xs, 0.625rem/0.375rem padding
input-lg text-base, 1rem/0.625rem padding
input-icon Wrapper that floats icons over a contained input and pads the field to clear them
input-action 1.25rem interactive trailing control (clear, reveal) with a currentColor hover wash

There is no input-bordered or input-md — both are the unmodified input. The status variants tint the border and focus ring only, never the text: warning’s yellow fails AA at text size.

input-icon is position-driven, so no modifier picks a side: an <i>/<svg> before the input is leading, one after it is trailing, and the wrapper reads the contained input-sm / input-lg to match its own text size and padding. Decorative glyphs are pointer-events: none so clicks reach the field; an input-action button stays clickable. A disabled input dims both. The wrapper is usually a <label>, which also makes the icon a click target for focusing the field.

Both input-action behaviours — clearing and password reveal — need a line of your own JS in vanilla; the button styling ships in both bundles. Native date and time pickers follow the document’s color-scheme in dark mode, and the calendar glyph is dimmed to 0.6 until hover.

For a bordered segment attached to the field instead of a floating glyph, use input groups. For the file picker, FileInput; for steppers and clamping, Number inputs.