Forms

Buttons

Variants

<div class="cluster">
  <button type="button">Primary</button>
  <button type="button" data-variant="secondary">Secondary</button>
  <button type="button" data-variant="ghost">Ghost</button>
  <button type="button" data-variant="accent">Accent</button>
  <button type="button" data-variant="danger">Danger</button>
</div>

Sizes

<div class="cluster">
  <button type="button" data-size="sm" data-variant="accent">Small</button>
  <button type="button">Default</button>
  <button type="button" data-size="lg">Large</button>
</div>

With arrow, as links

<div class="cluster">
  <button type="button" data-icon="arrow">Try 7 days free</button>
  <a role="button" href="#h-buttons" data-variant="secondary">Book a demo</a>
  <a role="button" href="#h-buttons" data-variant="accent" data-size="sm" data-icon="arrow">Link small</a>
</div>

Disabled

<div class="cluster">
  <button type="button" disabled>Primary</button>
  <button type="button" data-variant="secondary" disabled>Secondary</button>
  <button type="button" data-variant="accent" disabled>Accent</button>
  <a role="button" href="#h-buttons" aria-disabled="true">Link</a>
</div>

Groups

<div class="cluster">
  <menu>
    <li><button type="button">Save</button></li>
    <li><button type="button" data-variant="secondary">Cancel</button></li>
  </menu>
  <div role="group" aria-label="View" data-joined>
    <button type="button" data-variant="secondary" aria-pressed="true">Day</button>
    <button type="button" data-variant="secondary" aria-pressed="false">Week</button>
    <button type="button" data-variant="secondary" aria-pressed="false">Month</button>
  </div>
</div>

Inputs

<form class="grid" data-min="18" action="#">
  <div>
    <label for="f-text">Text</label>
    <input id="f-text" type="text" placeholder="Your name">
    <small data-hint>Helper text goes here.</small>
  </div>
  <div>
    <label for="f-email">Email</label>
    <input id="f-email" type="email" placeholder="[email protected]" value="[email protected]">
  </div>
  <div>
    <label for="f-pw">Password</label>
    <input id="f-pw" type="password" value="hunter2hunter2">
  </div>
  <div>
    <label for="f-search">Search</label>
    <input id="f-search" type="search" placeholder="Search docs">
  </div>
  <div>
    <label for="f-num">Number</label>
    <input id="f-num" type="number" value="42">
  </div>
  <div>
    <label for="f-url">URL</label>
    <input id="f-url" type="url" placeholder="https://">
  </div>
  <div>
    <label for="f-dis">Disabled</label>
    <input id="f-dis" type="text" value="Can't edit" disabled>
  </div>
  <div>
    <label for="f-inv">Invalid (type, then leave the field)</label>
    <input id="f-inv" type="email" value="not-an-email" required aria-describedby="f-inv-e">
    <small id="f-inv-e" data-error>Enter a valid email address.</small>
  </div>
  <div>
    <label for="f-sel">Select</label>
    <select id="f-sel">
      <option>Serverless</option>
      <option>Dedicated</option>
      <option>BYOC</option>
    </select>
  </div>
  <div>
    <label for="f-seld">Select disabled</label>
    <select id="f-seld" disabled><option>Serverless</option></select>
  </div>
  <div>
    <label for="f-seli">Select (required)</label>
    <select id="f-seli" required><option value="">Choose…</option><option>Serverless</option></select>
  </div>
  <div>
    <label for="f-ta">Textarea</label>
    <textarea id="f-ta" placeholder="Tell us more"></textarea>
  </div>
  <div>
    <label for="f-range">Range</label>
    <input id="f-range" type="range" min="0" max="100" value="40">
  </div>
  <div>
    <label for="f-file">File</label>
    <input id="f-file" type="file">
  </div>
</form>

Checkbox, radio, switch

<form class="grid" action="#">
  <fieldset>
    <legend>Checkboxes</legend>
    <label><input type="checkbox"> Unchecked</label>
    <label><input type="checkbox" checked> Checked</label>
    <label><input type="checkbox"> Another option</label>
    <label><input type="checkbox" disabled> Disabled</label>
    <label><input type="checkbox" checked disabled> Disabled checked</label>
    <label><input type="checkbox" required> Required</label>
  </fieldset>
  <fieldset>
    <legend>Radios</legend>
    <label><input type="radio" name="plan" checked> Free</label>
    <label><input type="radio" name="plan"> Lite</label>
    <label><input type="radio" name="plan"> Business</label>
    <label><input type="radio" name="plan2" disabled> Disabled</label>
    <label><input type="radio" name="plan3" checked disabled> Disabled checked</label>
  </fieldset>
  <fieldset>
    <legend>Switches</legend>
    <label><input type="checkbox" role="switch"> Off</label>
    <label><input type="checkbox" role="switch" checked> On</label>
    <label><input type="checkbox" role="switch" disabled> Disabled</label>
    <label><input type="checkbox" role="switch" checked disabled> Disabled on</label>
  </fieldset>
</form>

<form action="#">
  <fieldset data-plain>
    <legend>Plain fieldset with error</legend>
    <label><input type="checkbox" required aria-describedby="terms-e"> I accept the terms</label>
    <small id="terms-e" data-error>You must accept to continue.</small>
  </fieldset>
</form>

Inline forms

<form data-inline action="#">
  <label class="visually-hidden" for="i-email">Email</label>
  <input id="i-email" type="email" placeholder="Enter your email">
  <button type="submit" data-icon="arrow">Sign up</button>
</form>

<form data-inline role="search" action="#">
  <label class="visually-hidden" for="i-search">Search</label>
  <input id="i-search" type="search" placeholder="Search…">
  <button type="submit" data-variant="accent">Search</button>
</form>

<form data-inline data-size="lg" data-stack-mobile action="#">
  <label class="visually-hidden" for="i-big">Email</label>
  <input id="i-big" type="email" placeholder="[email protected]" required>
  <button type="submit">Start free</button>
</form>