Input

Usage

<input class="input" type="email" placeholder="you@example.com" />

The class styles a native <input>, so every type keeps its own behaviour, its own mobile keyboard and its own validation.

Basic

<input class="input" type="email" placeholder="Email" />
<input class="input" type="password" placeholder="Password" />
<input class="input" type="number" placeholder="Quantity" />
<input class="input" type="date" aria-label="Start date" />
<input class="input" type="file" aria-label="Attachment" />

Field

Pair it with a field for a label and help text.

We only use it for billing receipts.

<div class="field">
  <label class="label" for="input-field-email">Email</label>
  <input class="input" id="input-field-email" type="email" placeholder="you@example.com" />
  <p class="field-description">We only use it for billing receipts.</p>
</div>

Field Group

Name

Company

<div class="field-group">
  <div class="field">
    <label class="label" for="input-group-name">Name</label>
    <input class="input" id="input-group-name" />
  </div>
  <div class="field">
    <label class="label" for="input-group-company">Company</label>
    <input class="input" id="input-group-company" />
  </div>
</div>

Disabled

Workspace

Contact an owner to change this.

<div class="field">
  <label class="label" for="input-disabled">Workspace</label>
  <input class="input" id="input-disabled" value="acme" disabled />
  <p class="field-description">Contact an owner to change this.</p>
</div>

The control stops taking input and dims, and the label inside the same .field dims with it — read from the control’s own state, so there is no second attribute to keep in sync.

Invalid

Handle

This handle is already in use.

<div class="field" data-invalid>
  <label class="label" for="input-invalid">Handle</label>
  <input class="input" id="input-invalid" value="taken" aria-invalid="true"
         aria-describedby="input-invalid-error" />
  <p class="field-error" id="input-invalid-error">This handle is already in use.</p>
</div>

aria-invalid on the control recolours the border and the ring. data-invalid on the .field carries it to the label as well. Point aria-describedby at the message so it is announced with the control.

File

Attachment

PDF or PNG, up to 10 MB.

Inline

data-orientation="horizontal" on the field puts the label beside the control.

Seats

Required

Email Required

<div class="field">
  <label class="label" for="input-required">
    Email
    <span class="badge badge-outline">Required</span>
  </label>
  <input class="input" id="input-required" type="email" required />
</div>

Mark it in the markup with required so the browser and assistive tech both know. A visual marker alone is not the same thing — and an asterisk with no explanation is not a label.

Badge

A badge inside the label is a place for a short qualifier: required, beta, admin only.

Button Group

Sit an input flush with controls using a button group. The input takes the free space.

https://

<div class="button-group">
  <span class="button-group-text">https://</span>
  <input class="input" value="partialkit.dev" aria-label="Domain" />
  <button class="btn btn-outline" type="button">Copy</button>
</div>

Form

<form class="field-group">
  <div class="field">
    <label class="label" for="input-form-email">Email</label>
    <input class="input" id="input-form-email" type="email" required />
  </div>
  <div class="field">
    <label class="label" for="input-form-password">Password</label>
    <input class="input" id="input-form-password" type="password" required />
    <p class="field-description">At least 12 characters.</p>
  </div>
  <button class="btn" type="submit">Sign in</button>
</form>

RTL

Set dir="rtl" on the page or on any subtree — padding, corners and positions follow the reading direction on their own. See the button page for a live example.

Accessibility

Every input needs a name. A visible <label> with for is the first choice, because it is also a click target. When the design has no visible label, aria-label is the fallback — a placeholder is not a label, it disappears as soon as the user types.