Form elements 3.0
Inputs and labels, buttons and fieldsets
Form basic components 3.1
The example features most elements and modification together.
Inputs allow the placeholder attribute, necessary fallback provided.
Fieldsets are required inside forms.
Banded fieldsets have a contrast background.
Grouped fieldsets connect containing .text-inputs to a visually unite component.
Simulated inputs are great for previews without editing option.
Default styling
<form class="form pit">
<div class="grid grid--center--palm"><!--
--><div class="grid__item e-6--palm e-10">
<fieldset class="form__fieldset">
<legend class="form__legend">Hlavě pole vědecké</legend>
<textarea placeholder="Dosáhl sen údaje podobu v mobilní severně"
class="form__textarea" rows="5"></textarea>
</fieldset>
<fieldset class="form__fieldset form__fieldset--banded">
<legend class="form__legend">Návštěvníky dost gladiátora</legend>
<input class="form__file-input" type="file">
<input class="form__file-input" type="file">
</fieldset>
<fieldset class="form__fieldset">
<legend class="form__legend">Kolektivního nervózně zdajízní</legend>
<label class="form__label" for="name">Jméno</label>
<input class="form__text-input" id="name" required
type="text" placeholder="Otakar Houba">
<div class="form__validation-error">Vyplňte prosím Jméno</div>
<label class="form__label" for="email">Email</label>
<input class="form__text-input" id="email"
type="email" placeholder="otakar@houba.cz">
<label class="form__label" for="phone">Telefon</label>
<input class="form__text-input" id="phone" pattern="[0-9]+"
type="tel" placeholder="+420 200 570 862">
<label class="form__label form__label--spaced" for="terms">Termíny</label>
<select class="form__select" id="terms">
<option value="1">leden</option>
<option value="2">únor</option>
<option value="3">březen</option>
</select>
<label class="form__label form__label--faded" for="locality">Města</label>
<select class="form__select select-filter" id="locality">
<option>choose</option>
<option value="1">Prague</option>
<option value="2">Bratislava</option>
<option value="3">Berlin</option>
<option value="4">Warszawa</option>
<option value="5">Wien</option>
</select>
<label class="form__label form__label--muted" for="name">Profese</label>
<input class="form__text-input" id="name" required
type="text" placeholder="Hrnčíř">
<label class="form__label" for="age">Věk</label>
<span class="form__simulated">Kolektivního nervózně zdajízní</span>
<label class="form__label" for="place">Místo narození</label>
</fieldset>
<fieldset class="form__fieldset">
<legend class="form__legend">Bajka majestát</legend>
<label class="form__label form__radio">
<input type="radio" name="demo_radio">
<span class="form__radio__text">Slábnou argumenty současné největších všem nastěhovali loni upozornila sice technologie pracovníci, dnů.</span>
</label>
<label class="form__label form__radio">
<input type="radio" name="demo_radio">
<span class="form__radio__text">Stran rozšiřující tmavou nazvaný systém.</span>
</label>
</fieldset>
<fieldset class="form__fieldset form__fieldset--grouped">
<legend class="form__legend">Pohled slavnost</legend>
<input class="form__text-input" id="user"
type="text" placeholder="Uživatelské jméno">
<input class="form__text-input form__text-input--invalid" id="password"
type="password" placeholder="Heslo">
<div class="form__validation-error">Vyplňte prosím Heslo</div>
<input class="form__text-input" id="code"
type="text" placeholder="Kód">
</fieldset>
<fieldset class="form__fieldset">
<label for="option" class="form__checkbox">
<input id="option" type="checkbox" value="">
Vyčíslená zrovna ke uvelebil <a href="#">dobyvačné u duší</a>.
</label>
<button class="button button--block" type="submit">Odeslat</button>
</fieldset>
</div><!--
--></div>
</form>
Button 3.2
Default styling
.button--secondary
Secondary button for less important actions
.button--tertiary
Tertiary button for even less eye-catching actions
.button--inverse-tertiary
Tertiary button for even less eye-catching actions on light background
.button--slim
Slimmer button with smaller horizontal padding
.button--block
Full width button
<a class="button [modifier class]" href="#">Link</a>
<button class="button [modifier class]" type="submit">Button</button>
Button group 3.3
Default styling
<div class="button-group button-group--spaced">
<a class="button" href="#">Link</a>
<a class="button" href="#">Link</a>
<a class="button" href="#">Link</a>
</div>
Small search 3.4
This is compact variant of search form
Default styling
<form method="get" class="small-search">
<input type="text" placeholder="Hledat" class="small-search__input"><!--
--><button type="submit" class="button button--slim">
<span class="icon icon--search" aria-hidden="true"></span>
</button>
</form>
Select filter 3.5
Special form of select with active modifier. You can use arrow modifier to change browser's default view.
Style of the select element will be changed automaticaly
in case that non first option is selected.
Default styling
<form class="form pit">
<div class="grid grid--center--palm"><!--
--><div class="grid__item e-3--palm e-7">
<div class="select-filter">
<label class="form__label form__label--faded" for="animals">
Pet
<span class="icon icon--spinner icon--rotating" aria-hidden="true"></span>
</label>
<select class="form__select" id="animals">
<option>choose</option>
<option value="1">Cat</option>
<option value="2">Dog</option>
<option value="3">Cow</option>
<option value="4">Crocodile</option>
</select>
</div>
</div><!--
--><div class="grid__item e-3--palm e-7">
<div class="select-filter select-filter--active">
<label class="form__label form__label--faded" for="animals">
Pet
<span class="icon icon--spinner icon--rotating" aria-hidden="true"></span>
</label>
<select class="form__select" id="animals2">
<option>choose</option>
<option value="1">Cat</option>
<option value="2" selected>Dog</option>
<option value="3">Cow</option>
<option value="4">Crocodile</option>
</select>
</div>
</div><!--
--></div><!--
--><div class="grid grid--center--palm"><!--
--><div class="grid__item e-3--palm e-7">
<div class="select-filter select-filter--arrow">
<label class="form__label form__label--faded" for="animals">
Pet
<span class="icon icon--spinner icon--rotating" aria-hidden="true"></span>
</label>
<select class="form__select" id="animals3">
<option>choose</option>
<option value="1">Cat</option>
<option value="2">Dog</option>
<option value="3">Cow</option>
<option value="4">Crocodile</option>
</select>
</div>
</div><!--
--><div class="grid__item e-3--palm e-7">
<div class="select-filter select-filter--arrow">
<label class="form__label form__label--faded" for="animals">
Pet
<span class="icon icon--spinner icon--rotating" aria-hidden="true"></span>
</label>
<select class="form__select" id="animals4">
<option>choose</option>
<option value="1">Cat</option>
<option value="2" selected>Dog</option>
<option value="3">Cow</option>
<option value="4">Crocodile</option>
</select>
</div>
</div><!--
--></div><!--
--><div class="grid grid--center--palm"><!--
--><div class="grid__item e-6--palm e-7">
<div class="select-filter select-filter--active">
<span class="select-filter__item">
stomatologie
<span class="icon icon--remove" aria-hidden="true"></span>
</span>
</div>
</div><!--
--><div class="grid__item e-6--palm e-7">
<div class="select-filter select-filter--active">
<span class="select-filter__item">
nature údaje pohyb houbovitou
<span class="icon icon--remove" aria-hidden="true"></span>
</span>
</div>
</div><!--
--></div>
</form>
Dropdown 3.6
Styling of the option list.
Please note that provided JavaScript is for demonstration purposes only.
Style of the select element will be changed automaticaly in case that non first option is selected.
Note: It is expected that shown icons will be used.
Default styling
Moje
Počátku
Moje
Biology
Zkrátka
<!--Closed-->
<div id="drop1" class="dropdown">
<div class="dropdown__head">
Moje
<span class="icon icon--arrow-down"></span>
</div>
<div class="dropdown__list">
<div class="dropdown__item">Počátku</div>
<div class="dropdown__item">Moje</div>
<div class="dropdown__item">Biology</div>
<div class="dropdown__item">Zkrátka</div>
</div>
</div>
<!--Opened-->
<div id="drop2" class="dropdown">
<div class="dropdown__head dropdown__head--selected">
Počátku
<span class="icon icon--arrow-down"></span>
</div>
<div class="dropdown__list dropdown__list--opened">
<div class="dropdown__item dropdown__item--selected">Počátku<div class="dropdown__icon"><span class="icon icon--check"></span></div></div>
<div class="dropdown__item">Moje</div>
<div class="dropdown__item">Biology</div>
<div class="dropdown__item">Zkrátka</div>
</div>
</div>
<!--Only for preview-->
<div class="visible--desk" style="margin-top: 180px;"></div>
Tagselect 3.7
The component is used to select or enter values into input form.
Default styling
<div class="tagselect">
<div class="tagselect__item">Multikulturním ptáků <a class="tagselect__close" href="#"><span class="icon icon--remove" aria-hidden="true"></span></a></div>
<div class="tagselect__item">Pole automatický... <a class="tagselect__close" href="#"><span class="icon icon--remove" aria-hidden="true"></span></a></div>
<div class="tagselect__item">Občany ... <a class="tagselect__close" href="#"><span class="icon icon--remove" aria-hidden="true"></span></a></div>
<div class="tagselect__item">Si korun slabého <a class="tagselect__close" href="#"><span class="icon icon--remove" aria-hidden="true"></span></a></div>
<div class="tagselect__item tagselect__item--selected">Pohár ulice <a class="tagselect__close" href="#"><span class="icon icon--remove" aria-hidden="true"></span></a></div>
<input class="tagselect__input" placeholder="Vodách realitu" autocomplete="off" autocorrect="off"/>
</div>
