Forms

Inputs, selects, checkboxes, labels, help/error text, toggles, and layout helpers. Shared shells are exposed as .form-control and .form-choice.

Text inputs — .form-control + .form-input, .form-input .form-input-error

This is a help message.

Please enter a valid email address.

<label class="form-label">Label</label>
<input type="text" class="form-control form-input" />

<label class="form-label form-label-required">Required</label>
<input type="text" class="form-control form-input" />
<p class="form-help">Help text.</p>

<input type="email" class="form-control form-input form-input-error" />
<p class="form-error">Error message.</p>

<input type="text" disabled class="form-control form-input" />

Select — .form-control + .form-select

<select class="form-control form-select">
  <option>Monthly</option>
  <option>Yearly</option>
</select>

Textarea — .form-control + .form-textarea, .form-textarea .form-textarea-error 

<textarea rows="3" class="form-control form-textarea"></textarea>

Checkbox & Radio — .form-choice + .form-checkbox / .form-radio 

<div class="flex items-center gap-2">
  <input type="checkbox" class="form-choice form-checkbox" id="ck1" />
  <label for="ck1">I agree</label>
</div>

<input type="radio" name="plan" class="form-choice form-radio" id="r1" />
<label for="r1">Monthly</label>

File upload — .form-file, .form-file-dropzone

<input type="file" class="form-file" />

<label class="form-file-dropzone">
  <div class="text-center">
    Drop files here
  </div>
</label>

Toggle switch — .form-toggle + .form-toggle-track 

<!-- Sizes: form-toggle-track form-toggle-track-sm / form-toggle-track / form-toggle-track form-toggle-track-lg -->
<label class="form-toggle">
  <input type="checkbox" checked class="peer sr-only" />
  <div class="form-toggle-track form-toggle-track-sm"></div>
  <span class="ml-3 text-sm">Small</span>
</label>

<label class="form-toggle">
  <input type="checkbox" checked class="peer sr-only" />
  <div class="form-toggle-track"></div>
  <span class="ml-3 text-sm">Default (on)</span>
</label>

<label class="form-toggle">
  <input type="checkbox" class="peer sr-only" />
  <div class="form-toggle-track"></div>
  <span class="ml-3 text-sm">Default (off)</span>
</label>

<label class="form-toggle">
  <input type="checkbox" checked class="peer sr-only" />
  <div class="form-toggle-track form-toggle-track-lg"></div>
  <span class="ml-3 text-sm">Large</span>
</label>

Inline form row — .form-inline

<div class="form-inline">
  <input class="form-control form-input has-addon-right" />
  <button class="btn-danger form-addon-right">Search</button>
</div>

Input addons — .form-addon

https://
@example.com
USD 
<div class="form-addon">
  <span class="form-addon-left">https://</span>
  <input type="text" class="form-control form-input has-addon-left" />
</div>

<div class="form-addon">
  <input type="text" class="form-control form-input has-addon-right" />
  <span class="form-addon-right">@example.com</span>
</div>

<div class="form-addon">
  <span class="form-addon-left form-addon-disabled">USD</span>
  <input type="text" class="form-control form-input has-addon-left" disabled />
</div>