Forms

stable

13 componentes de formulário: Input, Textarea, Select, Checkbox, Radio, Switch, SearchInput, DateInput, FormGroup, Label, Hint, Error, FilterBar.

Input

<input class="ds-input ds-input--md" type="text" placeholder="...">
<input class="ds-input ds-input--md ds-input--error" type="text">

FormGroup + Label + Hint + Error

Use seu e-mail corporativo.
Mínimo 8 caracteres. 
<div class="ds-form-group">
  <label class="ds-label ds-label--required" for="email">E-mail</label>
  <input class="ds-input ds-input--md" type="email" id="email">
  <span class="ds-hint">Dica de preenchimento.</span>
</div>

Select

<select class="ds-select ds-select--md">
  <option>Selecionar...</option>
  <option>Opção 1</option>
</select>

Checkbox e Radio

<label class="ds-checkbox">
  <input type="checkbox" class="ds-checkbox__input">
  <span class="ds-checkbox__box"></span>
  <span class="ds-checkbox__label">Label</span>
</label>

Switch

<label class="ds-switch">
  <input type="checkbox" class="ds-switch__input">
  <span class="ds-switch__track"></span>
  <span class="ds-switch__label">Label</span>
</label>

SearchInput

<div class="ds-search-input ds-search-input--md">
  <input type="search" class="ds-search-input__input" placeholder="Buscar...">
</div>

FilterBar

<div class="ds-filter-bar">
  <button class="ds-filter-bar__item ds-filter-bar__item--active">Todos</button>
  <button class="ds-filter-bar__item">Android</button>
</div>
Copiado!