Inputs¶

Text inputs¶

Label text

<label>
  Label text
  <input type="text" placeholder="Placeholder text" />
</label>

Select¶

Choose an option

<label>
  Choose an option
  <select>
    <option>Option one</option>
    <option>Option two</option>
  </select>
</label>

Textarea¶

Description

<label>
  Description
  <textarea rows="3" placeholder="Enter details..."></textarea>
</label>

Help text¶

Use <small> below inputs for additional guidance.

API key Found in your provider's dashboard under API settings.

<label>
  API key
  <input type="password" placeholder="sk-..." aria-describedby="api-key-hint" />
  <small id="api-key-hint">Found in your provider's dashboard.</small>
</label>

Switch¶

Toggle using role="switch" on a checkbox.

Enable notifications

<label>
  <input type="checkbox" role="switch" />
  Enable notifications
</label>