Input

Trace CSS styles native text inputs in every build. Choose the HTML input type that matches the value and give each field a label.

#Associate a label

Use for with a matching, unique id when the label and field are separate. You can also nest the field inside its label. Clicking either label focuses its field.

<div>
  <label for="input-display-name">Display name</label>
  <input id="input-display-name" type="text" autocomplete="nickname" />
</div>
<label>
  Email
  <input type="email" autocomplete="email" />
</label>

#Input types

An input without a type behaves like a text field. Trace CSS styles the types below. The browser supplies the date, time, and color picker interfaces, so those interfaces can vary across platforms.

<label>
  Default text field
  <input />
</label>
<label>
  Text
  <input type="text" />
</label>
<label>
  Search
  <input type="search" />
</label>
<label>
  Email
  <input type="email" />
</label>
<label>
  Website
  <input type="url" />
</label>
<label>
  Phone
  <input type="tel" />
</label>
<label>
  Password
  <input type="password" autocomplete="new-password" />
</label>
<label>
  Number
  <input type="number" />
</label>
<label>
  Date
  <input type="date" />
</label>
<label>
  Local date and time
  <input type="datetime-local" />
</label>
<label>
  Month
  <input type="month" />
</label>
<label>
  Week
  <input type="week" />
</label>
<label>
  Time
  <input type="time" />
</label>
<label>
  Color
  <input type="color" value="#005473" />
</label>

#Field states

Use disabled to make a field unavailable. Use readonly to keep its value visible and selectable while preventing edits. Set aria-invalid="true" when validation fails and link the field to a visible error with aria-describedby.

<label>
  Disabled
  <input type="text" value="Unavailable" disabled />
</label>
<label>
  Read only
  <input type="text" value="Account ID" readonly />
</label>
<label>
  Email
  <input type="email" value="invalid" aria-invalid="true" aria-describedby="input-error" />
</label>
<small id="input-error">Enter a valid email address.</small>

See Input tokens for colors, borders, and spacing.

#Extension classes

The Full build adds trace-small and trace-large. Medium is the default size.

<input type="text" class="trace-small" placeholder="Small" aria-label="Small input" />
<input type="text" placeholder="Medium" aria-label="Medium input" />
<input type="text" class="trace-large" placeholder="Large" aria-label="Large input" />

To add an icon, place it and the input directly inside trace-input-wrap. Use trace-input-icon-start or trace-input-icon-end on the icon wrapper.

<label>
  Search
  <span class="trace-input-wrap">
    <span class="trace-icon trace-input-icon-start"><!-- @license lucide-static v1.70.0 - ISC -->
<svg focusable="false" aria-hidden="true"
 
  xmlns="http://www.w3.org/2000/svg"
  width="24"
  height="24"
  viewBox="0 0 24 24"
  fill="none"
  stroke="currentColor"
  stroke-width="2"
  stroke-linecap="round"
  stroke-linejoin="round"
>
  <path d="m21 21-4.34-4.34" />
  <circle cx="11" cy="11" r="8" />
</svg>
</span>
    <input type="search" placeholder="Search documentation" />
  </span>
</label>