Input

The input captures a single line of text, from names and emails to search queries. Pair it with a field for a label and description; for multi-line text, reach for the textarea.

<div class="field">
  <label class="label" for="input-demo-api-key">API Key</label>
  <input
    class="input"
    id="input-demo-api-key"
    type="password"
    placeholder="sk-..."
  />
  <p class="field-description">
    Your API key is encrypted and stored securely.
  </p>
</div>

Usage

Add the input class to an <input> element. It styles all the textual types plus file inputs, and reads validation state from aria-invalid.

Class	Description
`input`	Add to an `<input>` element
`input-sm`	Add to `input` for a compact field

<input class="input" type="email" placeholder="Email" />

Examples

Basic

A bare input with only a placeholder.

<input class="input" placeholder="Enter text" />

Field

Wrap the input in a field with a label and description.

<div class="field">
  <label class="label" for="input-field-username">Username</label>
  <input
    class="input"
    id="input-field-username"
    type="text"
    placeholder="Enter your username"
  />
  <p class="field-description">Choose a unique username for your account.</p>
</div>

Field group

Stack several fields with a field group.

<div class="field-group">
  <div class="field">
    <label class="label" for="fieldgroup-name">Name</label>
    <input class="input" id="fieldgroup-name" placeholder="Jordan Lee" />
  </div>
  <div class="field">
    <label class="label" for="fieldgroup-email">Email</label>
    <input
      class="input"
      id="fieldgroup-email"
      type="email"
      placeholder="[email protected]"
    />
    <p class="field-description">We'll send updates to this address.</p>
  </div>
  <div class="field field-horizontal">
    <button type="reset" class="btn btn-outline">Reset</button>
    <button type="submit" class="btn">Submit</button>
  </div>
</div>

Disabled

Add disabled and the input mutes itself and blocks interaction.

<div class="field">
  <label class="label" for="input-demo-disabled">Email</label>
  <input
    class="input"
    id="input-demo-disabled"
    type="email"
    placeholder="Email"
    disabled
  />
  <p class="field-description">This field is currently disabled.</p>
</div>

Invalid

Set aria-invalid on the input for the error ring.

<div class="field">
  <label class="label" for="input-invalid">Invalid Input</label>
  <input
    class="input"
    id="input-invalid"
    placeholder="Error"
    aria-invalid="true"
  />
  <p class="field-description">This field contains validation errors.</p>
</div>

File

File inputs get matching button-like styling for the browse control.

<div class="field">
  <label class="label" for="input-picture">Picture</label>
  <input class="input" id="input-picture" type="file" />
  <p class="field-description">Select a picture to upload.</p>
</div>

Inline

Lay the input out beside a button with a horizontal field.

<div class="field field-horizontal">
  <input class="input" type="search" placeholder="Search..." />
  <button class="btn">Search</button>
</div>

Grid

Arrange fields in columns with grid utilities on a field group.

<div class="field-group grid grid-cols-2">
  <div class="field">
    <label class="label" for="input-first-name">First Name</label>
    <input class="input" id="input-first-name" placeholder="Jordan" />
  </div>
  <div class="field">
    <label class="label" for="input-last-name">Last Name</label>
    <input class="input" id="input-last-name" placeholder="Lee" />
  </div>
</div>

Required

Mark the label and add required so the browser enforces the field.

<div class="field">
  <label class="label" for="input-required">
    Required Field
    <span class="text-destructive">*</span>
  </label>
  <input
    class="input"
    id="input-required"
    placeholder="This field is required"
    required
  />
  <p class="field-description">This field must be filled out.</p>
</div>

Badge

Labels are flex rows, so a badge slots in next to the text.

<div class="field">
  <label class="label" for="input-badge">
    Webhook URL
    <span class="badge badge-secondary ml-auto">Beta</span>
  </label>
  <input
    class="input"
    id="input-badge"
    type="url"
    placeholder="https://api.example.com/webhook"
  />
</div>

Input group

Prefix or suffix the input with an input group.

<div class="field">
  <label class="label" for="input-group-url">Website URL</label>
  <div class="input-group">
    <span class="input-group-addon">
      <span class="input-group-text">https://</span>
    </span>
    <input class="input" id="input-group-url" placeholder="example.com" />
    <span class="input-group-addon input-group-addon-end">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M12 16v-4"/><path d="M12 8h.01"/></svg>
    </span>
  </div>
</div>

Button group

Attach a button to the input with a button group.

<div class="field">
  <label class="label" for="input-button-group">Search</label>
  <div class="btn-group">
    <input
      class="input"
      id="input-button-group"
      placeholder="Type to search..."
    />
    <button class="btn btn-outline">Search</button>
  </div>
</div>

Form

Compose inputs, a select, and actions into a full form.

<form class="field-group">
  <div class="field">
    <label class="label" for="form-name">Name</label>
    <input
      class="input"
      id="form-name"
      type="text"
      placeholder="Evil Rabbit"
      required
    />
  </div>
  <div class="field">
    <label class="label" for="form-email">Email</label>
    <input
      class="input"
      id="form-email"
      type="email"
      placeholder="[email protected]"
    />
    <p class="field-description">We'll never share your email with anyone.</p>
  </div>
  <div class="grid grid-cols-2 gap-4">
    <div class="field">
      <label class="label" for="form-phone">Phone</label>
      <input
        class="input"
        id="form-phone"
        type="tel"
        placeholder="+1 (555) 123-4567"
      />
    </div>
    <div class="field">
      <label class="label" for="form-country">Country</label>
      <select class="select" id="form-country">
        <option>United States</option>
        <option>United Kingdom</option>
        <option>Canada</option>
      </select>
    </div>
  </div>
  <div class="field">
    <label class="label" for="form-address">Address</label>
    <input
      class="input"
      id="form-address"
      type="text"
      placeholder="123 Main St"
    />
  </div>
  <div class="field field-horizontal">
    <button type="button" class="btn btn-outline">Cancel</button>
    <button type="submit" class="btn">Submit</button>
  </div>
</form>