Input – Tsunami

Standalone input

Outside a .field, add class="input" and an aria-label, since there is no visible label. Inside a .field the input gets the same look with no class.

SKU

<div class="stack docs-narrow">
  <input class="input" type="email" placeholder="Customer email" aria-label="Customer email" />
  <div class="field">
    <label for="in-sku">SKU</label>
    <input id="in-sku" type="text" value="TS-001-BLK" />
  </div>
</div>

Sizes: sm, default and lg

data-size works on .input and on inputs inside a .field.

<div class="stack docs-narrow">
  <input class="input" data-size="sm" type="text" placeholder="Small" aria-label="Small input" />
  <input class="input" type="text" placeholder="Default" aria-label="Default input" />
  <input class="input" data-size="lg" type="text" placeholder="Large" aria-label="Large input" />
</div>

Each size beside a button of the same size

An input is as tall as a .btn of the same size (26, 32, 40px), so they line up in a row.

<div class="stack">
  <div class="stack" data-direction="row" data-gap="sm">
    <input class="input" data-size="sm" type="text" placeholder="Discount code" aria-label="Discount code" style="width: 14rem" />
    <button type="button" class="btn" data-size="sm">Apply</button>
  </div>
  <div class="stack" data-direction="row" data-gap="sm">
    <input class="input" type="text" placeholder="Discount code" aria-label="Discount code" style="width: 14rem" />
    <button type="button" class="btn">Apply</button>
  </div>
  <div class="stack" data-direction="row" data-gap="sm">
    <input class="input" data-size="lg" type="text" placeholder="Discount code" aria-label="Discount code" style="width: 14rem" />
    <button type="button" class="btn" data-size="lg">Apply</button>
  </div>
</div>

Disabled

<div class="stack docs-narrow">
  <input class="input" type="email" value="emma.wilson@example.com" aria-label="Email" disabled />
</div>

File

The browser's file button sits flush inside the border. Use accept and multiple as usual.

Import products (CSV) Up to 5 MB

<div class="stack docs-narrow">
  <input class="input" type="file" accept="image/*" aria-label="Upload product image" />
  <div class="field">
    <label for="in-csv">Import products (CSV)</label>
    <input id="in-csv" type="file" accept=".csv" aria-describedby="in-csv-hint" />
    <small id="in-csv-hint">Up to 5 MB</small>
  </div>
</div>

With an icon and text beside the input

Use .input-group. A <span> before or after the input sits at the start or end, following the HTML order. See Input group.

12 results

<div class="stack docs-narrow">
  <div class="input-group">
    <span><i class="icon icon-search" aria-hidden="true"></i></span>
    <input type="search" placeholder="Search orders" aria-label="Search orders" />
    <span>12 results</span>
  </div>
</div>

Ghost, for a search field in a card header

data-variant="ghost" has no border or background, so it blends into the card header. An accent border shows on focus.

Product	Price
T-shirt	$24.00
Tote bag	$18.00

<div class="card">
  <header>
    <div class="input-group" data-variant="ghost">
      <span><i class="icon icon-search" aria-hidden="true"></i></span>
      <input type="search" placeholder="Search by product title" aria-label="Search by product title" />
    </div>
  </header>
  <table class="table">
    <thead>
      <tr><th scope="col">Product</th><th scope="col">Price</th></tr>
    </thead>
    <tbody>
      <tr><td>T-shirt</td><td>$24.00</td></tr>
      <tr><td>Tote bag</td><td>$18.00</td></tr>
    </tbody>
  </table>
</div>

Textarea

<textarea class="input"> is at least 5rem tall and can be resized vertically. Set the starting height with rows.

<div class="stack docs-narrow">
  <textarea class="input" placeholder="Type your message here" aria-label="Message"></textarea>
</div>

Attributes

Attribute / element	Values	Description
`.input`		On an input, select or textarea outside a `.field`. Inputs inside a `.field` get the same look without it.
`data-size`	`sm`, `lg` (none = default 36px)	Height 26 / 32 / 40px, matching a `.btn` of the same size
`data-variant`	`ghost` (none = bordered)	No border or background. Accent border on focus
`type="file"`		File button flush left inside the border
`textarea.input`		At least 5rem tall, resizes vertically
`placeholder`		Muted sample text. Not a replacement for a label
`aria-label`		Required when there is no visible `<label>`
`aria-invalid`	`true`	Danger border
`disabled`		Subtle background, muted text, cursor not-allowed