<div class="c-input c-input--horizontal">
<label class="c-input__label">
<span>Text field</span>
</label>
<div class="c-input__controls">
<div class="c-textfield-wrapper">
<input type="text" class="c-textfield" value="Default type size" />
</div>
</div>
</div>
<div class="c-input c-input--horizontal">
<label class="c-input__label">
<span>Text field (large)</span>
</label>
<div class="c-input__controls">
<div class="c-textfield-wrapper">
<input type="text" class="c-textfield c-textfield--large" value="Large type size" />
</div>
</div>
</div>
<div class="c-input c-input--horizontal">
<label class="c-input__label">
<span>Date field</span>
</label>
<div class="c-input__controls">
<div class="c-textfield-wrapper">
<input type="date" class="c-textfield" />
</div>
</div>
</div>
<div class="c-input c-input--horizontal">
<label class="c-input__label">
<span>Suggestion box</span>
</label>
<div class="c-input__controls">
<div class="c-suggestion-box">
<div class="c-suggestion-box__input">
<div class="c-textfield-wrapper c-textfield-wrapper--full">
<input type="text" class="c-textfield" />
</div>
</div>
<div class="c-suggestion-box__suggestions">
<div class="c-menu c-menu--inline">
<label class="c-menu__item">
<input class="c-menu__checkbox c-checkbox c-menu__checkbox" type="checkbox" />
<div class="c-menu__text">
<div class="c-menu__label">Item A</div>
</div>
</label>
<label class="c-menu__item">
<input class="c-menu__checkbox c-checkbox c-menu__checkbox" type="checkbox" />
<div class="c-menu__text">
<div class="c-menu__label">Item B</div>
</div>
</label>
<label class="c-menu__item">
<input class="c-menu__checkbox c-checkbox c-menu__checkbox" type="checkbox" />
<div class="c-menu__text">
<div class="c-menu__label">Item C</div>
</div>
</label>
<label class="c-menu__item">
<input class="c-menu__checkbox c-checkbox c-menu__checkbox" type="checkbox" />
<div class="c-menu__text">
<div class="c-menu__label">Item D</div>
</div>
</label>
<label class="c-menu__item">
<input class="c-menu__checkbox c-checkbox c-menu__checkbox" type="checkbox" />
<div class="c-menu__text">
<div class="c-menu__label">Item E</div>
</div>
</label>
<label class="c-menu__item">
<input class="c-menu__checkbox c-checkbox c-menu__checkbox" type="checkbox" />
<div class="c-menu__text">
<div class="c-menu__label">Item F</div>
</div>
</label>
</div>
</div>
</div>
</div>
</div>
<div class="c-input c-input--horizontal">
<label class="c-input__label">
<span>Number field</span>
</label>
<div class="c-input__controls">
<div class="c-textfield-wrapper">
<input type="number" class="c-textfield c-textfield--number" />
</div>
</div>
</div>
<div class="c-input c-input--horizontal">
<label class="c-input__label">
<span>Price field</span>
</label>
<div class="c-input__controls">
<div class="c-input-group">
<div class="c-input">
<div class="c-textfield-wrapper c-textfield-wrapper--icon">
<input type="number" class="c-textfield c-textfield--number" />
<i class="c-textfield__icon icon icon-eur"></i>
</div>
</div>
<div class="c-input">
<div class="c-textfield-wrapper c-textfield-wrapper--icon">
<input type="number" class="c-textfield c-textfield--number" />
<i class="c-textfield__icon icon icon-usd"></i>
</div>
</div>
<div class="c-input">
<div class="c-textfield-wrapper c-textfield-wrapper--icon">
<input type="number" class="c-textfield c-textfield--number" />
<i class="c-textfield__icon icon icon-gbp"></i>
</div>
</div>
<div class="c-input">
<div class="c-textfield-wrapper c-textfield-wrapper--icon">
<input type="number" class="c-textfield c-textfield--number" />
<i class="c-textfield__icon icon icon-jpy"></i>
</div>
</div>
</div>
</div>
</div>
<div class="c-input c-input--horizontal">
<label class="c-input__label">
<span>Read-only field</span>
</label>
<div class="c-input__controls">
<p class="u-input">Read-only field</p>
</div>
</div>
<div class="c-input c-input--horizontal">
<label class="c-input__label">
<span>Color field</span>
</label>
<div class="c-input__controls">
<div class="c-textfield-wrapper c-textfield-wrapper--color">
<input type="text" class="c-textfield" value="#00b607" />
<div class="c-textfield__color c-dot c-dot--large" style="background-color: #00b607"></div>
</div>
</div>
</div>
<div class="c-input c-input--horizontal">
<label class="c-input__label">
<span>Small upload field</span>
</label>
<div class="c-input__controls">
<div class="c-input-group">
<div class="c-input">
<div class="c-image-thumbnail">
<img src="https://source.unsplash.com/random/100x40" class="c-image-thumbnail__image" />
</div>
</div>
<div class="c-input">
<button class="c-button c-button--default">
<i class="icon icon-image c-button__icon"></i>
<span class="c-button__label">Change…</span>
</button>
</div>
</div>
</div>
</div>
<div class="c-input c-input--horizontal">
<label class="c-input__label">
<span>Upload field</span>
</label>
<div class="c-input__controls">
<div class="c-input__controls">
<div class="c-uploadfield">
<label class="c-uploadfield__dropzone">
<input type="file" class="c-uploadfield__input" />
<div class="c-uploadfield__content">
<i class="c-uploadfield__icon icon icon-image"></i>
<div class="c-uploadfield__description">
Click or drag and drop to upload a file.
</div>
</div>
</label>
</div>
<div class="c-input__helper">
Only .jpg and .png files are allowed. Upload a high-resolution image for
the best result.
</div>
</div>
</div>
</div>
<div class="c-input c-input--horizontal">
<label class="c-input__label">
<span>Textarea</span>
</label>
<div class="c-input__controls">
<div class="c-textfield-wrapper">
<textarea class="c-textfield c-textfield--textarea"></textarea>
</div>
</div>
</div>
<div class="c-input c-input--horizontal">
<label class="c-input__label">
<span>Code field</span>
</label>
<div class="c-input__controls">
<div class="c-textfield-wrapper">
<div class="c-textfield c-textfield--code" spellcheck="false" contenteditable>
<pre><span>(<span style="color: #708">select</span> <span style="color: #30a">count</span>(*) <span
style="color: #708">from</span> tm.ticket <span style="color: #708">where</span> orderid=tm.<span
style="color: #708">order</span>.id)</span></pre>
</div>
</div>
</div>
</div>
<div class="c-input c-input--horizontal">
<label class="c-input__label">
<span>Select dropdown (native)</span>
</label>
<div class="c-input__controls">
<div class="c-select-wrapper">
<select class="c-select">
<option>Option A</option>
<option>Option B</option>
<option>Option C</option>
</select>
<i class="icon icon-caret-down c-select__caret"></i>
</div>
</div>
</div>
<div class="c-input c-input--horizontal">
<label class="c-input__label">
<span>Select dropdown (custom)</span>
</label>
<div class="c-input__controls" style="height: 190px">
<div class="c-dropdown">
<div class="c-dropdown__trigger">
<button type="button" class="c-button c-button--default c-button--active">
<span class="c-button__label">Option A</span>
<i class="icon icon-caret-down c-button__caret"></i>
</button>
</div>
<div class="c-dropdown__popover c-dropdown__popover--visible">
<div class="c-menu">
<div class="c-menu__search">
<div class="c-textfield-wrapper">
<input type="search" class="c-textfield" />
<i class="icon icon-search c-textfield__icon"></i>
</div>
</div>
<a href="#" class="c-menu__item c-menu__item--active">Option A</a>
<a href="#" class="c-menu__item">Option B</a>
<a href="#" class="c-menu__item">Option C</a>
</div>
</div>
</div>
</div>
</div>
<div class="c-input c-input--horizontal">
<label class="c-input__label">
<span>Multiselect dropdown</span>
</label>
<div class="c-input__controls" style="height: 180px">
<div class="c-dropdown">
<div class="c-dropdown__trigger">
<button type="button" class="c-button c-button--default c-button--active">
<span class="c-button__label">Option A, Option B</span>
<i class="icon icon-caret-down c-button__caret"></i>
</button>
</div>
<div class="c-dropdown__popover c-dropdown__popover--visible">
<div class="c-menu">
<div class="c-menu__item">
<label class="c-checkbox-block">
<input type="checkbox" class="c-checkbox" />
<div class="c-checkbox-block__label">Select all</div>
</label>
</div>
<div class="c-menu__divider"></div>
<div class="c-menu__item">
<label class="c-checkbox-block">
<input type="checkbox" class="c-checkbox" />
<div class="c-checkbox-block__label">Option A</div>
</label>
</div>
<div class="c-menu__item">
<label class="c-checkbox-block">
<input type="checkbox" class="c-checkbox" />
<div class="c-checkbox-block__label">Option B</div>
</label>
</div>
<div href="#" class="c-menu__item">
<label class="c-checkbox-block">
<input type="checkbox" class="c-checkbox" />
<div class="c-checkbox-block__label">Option C</div>
</label>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="c-input c-input--horizontal">
<label class="c-input__label">
<span>Radio buttons</span>
</label>
<div class="c-input__controls">
<label class="c-checkbox-block">
<input type="radio" name="radio" class="c-radio" checked />
<span class="c-checkbox-block__label">
Value A
<div class="c-checkbox-block__helper">Optional helper text</div>
</span>
</label>
<label class="c-checkbox-block">
<input type="radio" name="radio" class="c-radio" />
<span class="c-checkbox-block__label">Value B</span>
</label>
<label class="c-checkbox-block c-checkbox-block--disabled">
<input type="radio" name="radio" class="c-radio" disabled />
<span class="c-checkbox-block__label">Value C (disabled)</span>
</label>
</div>
</div>
<div class="c-input c-input--horizontal">
<label class="c-input__label">
<span>Checkboxes</span>
</label>
<div class="c-input__controls">
<label class="c-checkbox-block">
<input type="checkbox" class="c-checkbox" checked />
<span class="c-checkbox-block__label">
Value A
<div class="c-checkbox-block__helper">Optional helper text</div>
</span>
</label>
<label class="c-checkbox-block">
<input type="checkbox" class="c-checkbox" />
<span class="c-checkbox-block__label">Value B</span>
</label>
<label class="c-checkbox-block c-checkbox-block--disabled">
<input type="checkbox" class="c-checkbox" disabled />
<span class="c-checkbox-block__label">Value C (disabled)</span>
</label>
</div>
</div>
<div class="c-input c-input--horizontal">
<label class="c-input__label">
<span>Toggle</span>
</label>
<div class="c-input__controls">
<label class="c-toggle">
<input type="checkbox" class="c-toggle__input" />
<div class="c-toggle__switch"></div>
</label>
</div>
</div>
<div class="c-input c-input--horizontal">
<label class="c-input__label">
<span>Thumbnail checkboxes</span>
</label>
<div class="c-input__controls">
<div class="c-input-group c-input-group--wide c-input-group--4-columns">
<label class="c-checkbox-thumb">
<input type="radio" name="template" class="c-radio" value="cards" />
<div class="c-checkbox-thumb__image">
<svg width="106" height="48" viewBox="0 0 106 48" fill="none" xmlns="http://www.w3.org/2000/svg" class="">
<rect width="32" height="48" rx="2" fill="#ECF1F6"></rect>
<path d="M0 2C0 0.89543 0.895431 0 2 0H30C31.1046 0 32 0.895431 32 2V24H0V2Z" fill="#D6DDE4"></path>
<rect x="36" width="34" height="48" rx="2" fill="#ECF1F6"></rect>
<rect x="74" width="32" height="48" rx="2" fill="#ECF1F6"></rect>
<path d="M36 2C36 0.89543 36.8954 0 38 0H68C69.1046 0 70 0.895431 70 2V24H36V2Z" fill="#D6DDE4"></path>
<path d="M74 2C74 0.89543 74.8954 0 76 0H104C105.105 0 106 0.895431 106 2V24H74V2Z" fill="#D6DDE4"></path>
</svg>
<div class="c-checkbox-thumb__label">Cards</div>
</div>
</label>
<label class="c-checkbox-thumb">
<input type="radio" name="template" class="c-radio" value="grid" />
<div class="c-checkbox-thumb__image">
<svg width="106" height="48" viewBox="0 0 106 48" fill="none" xmlns="http://www.w3.org/2000/svg" class="">
<rect width="34" height="28" fill="#D6DDE4"></rect>
<rect y="28" width="34" height="20" fill="#ECF1F6"></rect>
<rect x="35" width="35" height="28" fill="#D6DDE4"></rect>
<rect x="35" y="28" width="35" height="20" fill="#ECF1F6"></rect>
<rect x="71" width="35" height="28" fill="#D6DDE4"></rect>
<rect x="71" y="28" width="35" height="20" fill="#ECF1F6"></rect>
</svg>
<div class="c-checkbox-thumb__label">Grid</div>
</div>
</label>
<label class="c-checkbox-thumb">
<input type="radio" name="template" class="c-radio" value="full" />
<div class="c-checkbox-thumb__image">
<svg width="106" height="48" viewBox="0 0 106 48" fill="none" xmlns="http://www.w3.org/2000/svg" class="">
<rect width="106" height="28" fill="#D6DDE4"></rect>
<rect y="28" width="106" height="20" fill="#ECF1F6"></rect>
</svg>
<div class="c-checkbox-thumb__label">Full</div>
</div>
</label>
<label class="c-checkbox-thumb">
<input type="radio" name="template" class="c-radio" value="list" />
<div class="c-checkbox-thumb__image">
<svg width="106" height="48" viewBox="0 0 106 48" fill="none" xmlns="http://www.w3.org/2000/svg" class="">
<path d="M0 4C0 1.79086 1.79086 0 4 0H34C36.2091 0 38 1.79086 38 4V18C38 20.2091 36.2091 22 34 22H4C1.79086 22 0 20.2091 0 18V4Z" fill="#D6DDE4"></path>
<path d="M0 30C0 27.7909 1.79086 26 4 26H34C36.2091 26 38 27.7909 38 30V44C38 46.2091 36.2091 48 34 48H4C1.79086 48 0 46.2091 0 44V30Z" fill="#D6DDE4"></path>
<path d="M42 4C42 1.79086 43.7909 0 46 0H102C104.209 0 106 1.79086 106 4V18C106 20.2091 104.209 22 102 22H46C43.7909 22 42 20.2091 42 18V4Z" fill="#ECF1F6"></path>
<path d="M42 30C42 27.7909 43.7909 26 46 26H102C104.209 26 106 27.7909 106 30V44C106 46.2091 104.209 48 102 48H46C43.7909 48 42 46.2091 42 44V30Z" fill="#ECF1F6"></path>
</svg>
<div class="c-checkbox-thumb__label">List</div>
</div>
</label>
</div>
</div>
</div>
<div class="c-input c-input--horizontal">
<label class="c-input__label">
<span>Radio buttons (inline)</span>
</label>
<div class="c-input__controls">
<div class="c-checkbox-group c-checkbox-group--inline">
<label class="c-checkbox-block">
<input type="radio" name="radio" class="c-radio" checked />
<span class="c-checkbox-block__label">Value A</span>
</label>
<label class="c-checkbox-block">
<input type="radio" name="radio" class="c-radio" />
<span class="c-checkbox-block__label">Value B</span>
</label>
<label class="c-checkbox-block">
<input type="radio" name="radio" class="c-radio" />
<span class="c-checkbox-block__label">Value C</span>
</label>
</div>
</div>
</div>
<div class="c-input c-input--horizontal">
<label class="c-input__label">
<span>Checkboxes (inline)</span>
</label>
<div class="c-input__controls">
<div class="c-checkbox-group c-checkbox-group--inline">
<label class="c-checkbox-block">
<input type="checkbox" class="c-checkbox" checked />
<span class="c-checkbox-block__label">Value A</span>
</label>
<label class="c-checkbox-block">
<input type="checkbox" class="c-checkbox" />
<span class="c-checkbox-block__label">Value B</span>
</label>
<label class="c-checkbox-block">
<input type="checkbox" class="c-checkbox" />
<span class="c-checkbox-block__label">Value C</span>
</label>
</div>
</div>
</div>
<div class="c-input c-input--horizontal">
<label class="c-input__label">
<span>Checkboxes (sortable)</span>
</label>
<div class="c-input__controls">
<div class="c-checkbox-group c-checkbox-group--sortable">
<label class="c-checkbox-block">
<i class="icon icon-sort c-checkbox-block__sort"></i>
<input type="checkbox" class="c-checkbox" checked />
<span class="c-checkbox-block__label">Value A</span>
</label>
<label class="c-checkbox-block">
<i class="icon icon-sort c-checkbox-block__sort"></i>
<input type="checkbox" class="c-checkbox" />
<span class="c-checkbox-block__label">Value B</span>
</label>
<label class="c-checkbox-block">
<i class="icon icon-sort c-checkbox-block__sort"></i>
<input type="checkbox" class="c-checkbox" />
<span class="c-checkbox-block__label">Value C</span>
</label>
</div>
</div>
</div>
<div class="c-input c-input--horizontal">
<label class="c-input__label">
<span>Status indicator</span>
</label>
<div class="c-input__controls">
<div class="c-label-group">
<span class="c-label">Default label</span>
<span class="c-label c-label--success">Success label</span>
<span class="c-label c-label--warning">Warning label</span>
<span class="c-label c-label--error">Error label</span>
<a href="#" class="c-label c-label--clickable">Link label</a>
</div>
</div>
</div>