Examples

Input

A Tailwind CSS input component for single-line text entry.

<div class="w-full max-w-xs">
  <input class="input" type="text" placeholder="Full name" />
</div>

With label

Pair with a Label and wrap in a Field for accessible form fields. Connect them using matching for and id attributes so clicking the label focuses the input and screen readers announce it correctly.

<div class="w-full max-w-xs">
  <div class="field">
    <label class="label" for="full-name">Full name</label>
    <input
      class="input"
      id="full-name"
      type="text"
      placeholder="John Smith"
      name="full-name"
    />
  </div>
</div>

Types

The .input class works with all native input types. Set the type attribute to change the behavior.

<div class="w-full max-w-xs">
  <div class="field-group">
    <div class="field">
      <label class="label" for="email">Email</label>
      <input
        class="input"
        id="email"
        type="email"
        placeholder="[email protected]"
        name="email"
      />
    </div>
    <div class="field">
      <label class="label" for="password">Password</label>
      <input
        class="input"
        id="password"
        type="password"
        placeholder="Enter your password"
        name="password"
      />
    </div>
    <div class="field">
      <label class="label" for="date">Date</label>
      <input class="input" id="date" type="date" name="date" />
    </div>
    <div class="field">
      <label class="label" for="cover-image">Cover image</label>
      <input class="input" id="cover-image" type="file" name="cover-image" />
    </div>
  </div>
</div>

Disabled

Add disabled to prevent interaction. The input appears faded automatically.

<div class="w-full max-w-xs">
  <div class="field">
    <label class="label" for="disabled-email">Email</label>
    <input
      class="input"
      id="disabled-email"
      type="email"
      placeholder="[email protected]"
      disabled=""
      name="email"
    />
  </div>
</div>

Validation

Add aria-invalid="true" to show the input in an error state. Connect an error message using aria-describedby on the input, pointing to the id of the error element. This lets screen readers announce the error when the input is focused.

Please enter a valid phone number 

<div class="w-full max-w-xs">
  <div class="field">
    <label class="label" for="phone-number">Phone number</label>
    <input
      class="input"
      id="phone-number"
      type="text"
      placeholder="+1 (555) 000-0000"
      aria-invalid="true"
      aria-describedby="phone-number-error"
      name="phone-number"
    />
    <p class="field-error" id="phone-number-error">
      Please enter a valid phone number
    </p>
  </div>
</div>

How it works

The input component is a CSS-only utility class applied to a native <input> element.

Structure

Use the .input class on an <input> element. Pair it with a .label element connected via for and id:

<label class="label" for="name">Name</label>
<input class="input" id="name" type="text" placeholder="Enter your name" />

Disabled state

Add disabled to the input:

<input class="input" type="text" disabled />

Validation

Add aria-invalid="true" to show the input in an error state:

<input class="input" type="text" aria-invalid="true" />

For decorating inputs with icons or text addons, see Input Group.

Class reference

ClassDescription
inputBase input styles