Forms
Form inputs, selects, checkboxes, radios and fieldsets with focus, error and disabled states. All components support dark mode.
Text Inputs
States
The display name visible to customers.
Invalid API key format.
<div class="form-group">
<label class="form-label">Store name</label>
<input type="text" class="form-input" placeholder="Enter store name">
<span class="form-hint">Help text here.</span>
</div>
<!-- Invalid state -->
<input type="text" class="form-input invalid" value="bad value">
<span class="form-error">Error message.</span>
<!-- Disabled -->
<input type="text" class="form-input" disabled>Input Group
Input + Button
<div class="form-input-group">
<input type="text" class="form-input" placeholder="Search...">
<button class="btn btn-blue">Search</button>
</div>Textarea
Textarea
<textarea class="form-textarea" placeholder="Notes..."></textarea>Select
Select
<select class="form-select">
<option value="">Select a region...</option>
<option value="eu-west">EU West</option>
</select>Checkbox & Radio
Checkbox
Radio
<label class="form-check">
<input type="checkbox" checked>
<span class="form-check-label">Enable notifications</span>
</label>
<label class="form-check">
<input type="radio" name="mode" value="live">
<span class="form-check-label">Live mode</span>
</label>Fieldset
Grouped fields
<fieldset class="form-fieldset">
<legend class="form-legend">Store settings</legend>
<div class="form-group">
<label class="form-label">Store name</label>
<input type="text" class="form-input">
</div>
</fieldset>