Forms

Формы используют `.form-group`, `.label` и `.input`. Ошибки задаются на label через `.error`, а пояснение выводится соседним `.input-info`.

Text input

Field cannot be empty

Password

Validated

Looks good

Needs review

Check before publishing

Readonly

Disabled

Number

Text Area

Fieldset

First name

Last name

Upload file

Range

Select

Advanced Select

Field cannot be empty

Checkbox 1 Checkbox 2 Disabled Disabled & Checked

Radio 1 Radio 2 Radio 3

Forms HTML

<div class="form-group">
  <label class="label error">
    Project name
    <i class="ph ph-user"></i>
    <input class="input" type="text" placeholder="Launch Plan">
  </label>
  <div class="input-info">
    <i class="ph ph-warning-circle"></i>
    Field cannot be empty
  </div>
</div>

<fieldset class="fieldset">
  <legend class="legend">Fieldset</legend>
  <label class="label success">
    Validated
    <input class="input" type="text" value="Release Plan">
  </label>
</fieldset>

<label class="file-upload">
  Upload file
  <input type="file">
</label>