Forms
Essential building blocks for user interaction: buttons, inputs, checkboxes, and more.
Buttons
Variants
<button class="kds-btn kds-btn--solid">Solid</button>
<button class="kds-btn kds-btn--outline">Outline</button>
<button class="kds-btn kds-btn--ghost">Ghost</button>
<button class="kds-btn kds-btn--link">Link</button>
Colors
<button class="kds-btn kds-btn--solid
kds-btn--success">Success</button>
<button class="kds-btn kds-btn--solid kds-btn--danger">Danger</button>
<button class="kds-btn kds-btn--solid kds-btn--warning">Warning</button>
<button class="kds-btn kds-btn--outline kds-btn--neutral">Neutral</button>
Sizes
<button class="kds-btn kds-btn--solid
kds-btn--xs">XS</button>
<button class="kds-btn kds-btn--solid kds-btn--sm">Small</button>
<button class="kds-btn kds-btn--solid kds-btn--md">Medium</button>
<button class="kds-btn kds-btn--solid kds-btn--lg">Large</button>
<button class="kds-btn kds-btn--solid kds-btn--xl">XL</button>
Icon Buttons & Loading
<button class="kds-icon-btn kds-icon-btn--sm kds-btn--ghost"
aria-label="Settings">⚙️</button>
<button class="kds-icon-btn kds-icon-btn--md kds-btn--outline"
aria-label="Edit">✏️</button>
<button class="kds-icon-btn kds-icon-btn--lg kds-btn--solid"
aria-label="Add">＋</button>
<button class="kds-btn kds-btn--solid kds-btn--loading"
disabled>Loading…</button>
Input
Enter your legal name
Enter a valid email address
https://
<div class="kds-field">
<label class="kds-field__label">Full Name</label>
<input type="text" class="kds-input kds-input--md" placeholder="John Doe">
<span class="kds-field__hint">Enter your legal name</span>
</div>
<!-- Error state -->
<div class="kds-field">
<label class="kds-field__label">Email <span
class="kds-field__required">*</span></label>
<input type="email" class="kds-input kds-input--error">
<span class="kds-field__error">Enter a valid email address</span>
</div>
Select
<div class="kds-field">
<label class="kds-field__label">Role</label>
<select class="kds-select kds-select--md">
<option>Designer</option>
<option>Developer</option>
</select>
</div>
Textarea
<div class="kds-field">
<label class="kds-field__label">Message</label>
<textarea class="kds-textarea kds-textarea--md" rows="3" placeholder="Write your
message…"></textarea>
</div>
Selection Controls
<label class="kds-checkbox">
<input type="checkbox" class="kds-checkbox__input" checked>
<span class="kds-checkbox__control"></span>
<span class="kds-checkbox__label">Accept terms</span>
</label>
<label class="kds-radio">
<input type="radio" name="group" class="kds-radio__input">
<span class="kds-radio__control"></span>
<span class="kds-radio__label">Option A</span>
</label>
<label class="kds-switch">
<input type="checkbox" class="kds-switch__input">
<span class="kds-switch__track"><span
class="kds-switch__thumb"></span></span>
<span class="kds-switch__label">Notifications</span>
</label>
Search
<div class="kds-search kds-search--md">
<span class="kds-search__icon" aria-hidden="true">🔍</span>
<input type="search" class="kds-search__input" placeholder="Search…"
aria-label="Search">
<button class="kds-search__clear" aria-label="Clear">✕</button>
</div>
<!-- Sizes: kds-search--sm | kds-search--md | kds-search--lg -->
Date Picker
<!-- Single date -->
<div class="kds-datepicker">
<label class="kds-datepicker__label">Start date</label>
<div class="kds-datepicker__input-wrap">
<input type="date" class="kds-datepicker__input" />
<span class="kds-datepicker__icon">📅</span>
</div>
</div>
<!-- Date range -->
<div class="kds-datepicker kds-datepicker--range">
<div class="kds-datepicker__input-wrap">
<input type="date" class="kds-datepicker__input" aria-label="Start" />
</div>
<span class="kds-datepicker__separator">→</span>
<div class="kds-datepicker__input-wrap">
<input type="date" class="kds-datepicker__input" aria-label="End" />
</div>
</div>
Number Input
<div class="kds-number-input">
<label class="kds-number-input__label">Quantity</label>
<div class="kds-number-input__controls">
<button class="kds-number-input__btn kds-number-input__btn--dec">−</button>
<input type="number" class="kds-number-input__input" value="5" min="0" max="100" />
<button class="kds-number-input__btn kds-number-input__btn--inc">+</button>
</div>
<span class="kds-number-input__helper">Between 0 and 100</span>
</div>
Slider
<div class="kds-slider">
<label class="kds-slider__label">Volume</label>
<div class="kds-slider__track-wrap">
<span class="kds-slider__min-label">0</span>
<input type="range" class="kds-slider__input" min="0" max="100" value="65" />
<span class="kds-slider__max-label">100</span>
</div>
<output class="kds-slider__value">65</output>
</div>
Multiselect
Design
CSS
<div class="kds-multiselect">
<label class="kds-multiselect__label">Tags</label>
<div class="kds-multiselect__control" role="combobox">
<div class="kds-multiselect__tokens">
<span class="kds-multiselect__token">
<span class="kds-multiselect__token-text">Design</span>
<button class="kds-multiselect__token-remove">✕</button>
</span>
</div>
<input class="kds-multiselect__input" placeholder="Choose…" />
<span class="kds-multiselect__chevron">▾</span>
</div>
</div>
File Upload
Max file size is 500 KB. Supported types: .jpg, .png
Drag and drop files here or click
to upload
- photo.jpg ✓
- document.png ⏳
- too_large.png ✕
<div class="kds-file-upload">
<label class="kds-file-upload__label">Upload files</label>
<p class="kds-file-upload__description">Max 500 KB. .jpg, .png</p>
<div class="kds-file-upload__dropzone" tabindex="0" role="button">
<span class="kds-file-upload__dropzone-icon">📁</span>
<span class="kds-file-upload__dropzone-text">Drag and drop or
<strong>click</strong></span>
<input type="file" class="kds-file-upload__input" multiple hidden />
</div>
<ul class="kds-file-upload__list">
<li class="kds-file-upload__item kds-file-upload__item--complete">…</li>
<li class="kds-file-upload__item kds-file-upload__item--error">…</li>
</ul>
</div>