1. Docs
  2. Components
  3. Form Elements
Buy Now Contact

Form Elements

Usage examples for inputs, selects, checkboxes, radio and different components of form elements.

Inputs

Use c-input class to style textual inputs like <input> and <textarea>.

<input class="c-input" type="text" placeholder="Placeholder">
<input class="c-input c-input--success" type="text" placeholder="Placeholder" value="Success">
<input class="c-input c-input--warning" type="text" placeholder="Placeholder" value="Warning">
<input class="c-input c-input--danger" type="text" placeholder="Placeholder" value="Danger">

Fields

Fields are used as a wrapper for inputs and other form elements to extend its styles and variations.


<div class="c-field">
    <label class="c-field__label" for="input1">Label</label>
    <input class="c-input" id="input1" type="text" placeholder="Placeholder">
</div>

Fields with icons

Provide visual feedback for form inputs.

<div class="c-field has-icon-right">
    <label class="c-field__label u-hidden-visually" for="input5">Warning Input</label>
    <input class="c-input c-input--warning" id="input5" type="text" value="Warning" placeholder="Warning">
    <span class="c-field__icon">
        <i class="fa fa-exclamation-triangle u-color-warning"></i>
    </span>
</div>

<div class="c-field has-icon-right">
    <label class="c-field__label u-hidden-visually" for="input6">Success Input</label>
    <input class="c-input c-input--success" id="input6" type="text" value="Success" placeholder="Success">
    <span class="c-field__icon">
        <i class="fa fa-check u-color-success"></i>
    </span>
</div>

<div class="c-field has-icon-right">
    <label class="c-field__label u-hidden-visually" for="input7">Danger Input</label>
    <input class="c-input c-input--danger" id="input7" type="text" value="Danger" placeholder="Danger">
    <span class="c-field__icon">
        <i class="fa fa-times u-color-danger"></i>
    </span>
</div>

Fields with messages

Used as hints or feedback messages

This is a required field
Positive Feedback
Danger Feedback 
<div class="c-field">
    <label class="c-field__label" for="input13">Label</label>
    <input class="c-input" type="text" id="input13" placeholder="Clark">
    <small class="c-field__message">
        <i class="fa fa-info-circle"></i>This is a required field
    </small>
</div>

<div class="c-field">
    <label class="c-field__label" for="input14">Label</label>
    <input class="c-input" id="input14" type="text" placeholder="Clark">
    <small class="c-field__message u-color-success">
        <i class="fa fa-check-circle"></i>Positive Feedback
    </small>
</div>

<div class="c-field">
    <label class="c-field__label" for="input15">Label</label>
    <input class="c-input" id="input15" type="text" placeholder="Clark">
    <small class="c-field__message u-color-danger">
        <i class="fa fa-times-circle"></i>Danger Feedback
    </small>
</div>

Choices

Checkboxes and Radio buttons.


<!-- Checkboxes -->
<div class="c-choice c-choice--checkbox">
    <input class="c-choice__input" id="checkbox1" name="checkboxes" type="checkbox">
    <label class="c-choice__label" for="checkbox1">Checkbox 1</label>
</div>

<div class="c-choice c-choice--checkbox">
    <input class="c-choice__input" id="checkbox2" name="checkboxes" type="checkbox">
    <label class="c-choice__label" for="checkbox2">Checkbox 2</label>
</div>

<div class="c-choice c-choice--checkbox">
    <input class="c-choice__input" id="checkbox3" name="checkboxes" type="checkbox">
    <label class="c-choice__label" for="checkbox3">Checkbox 3</label>
</div>  

<div class="c-choice c-choice--checkbox is-disabled">
    <input class="c-choice__input" id="checkbox4" name="checkboxes" type="checkbox" disabled>
    <label class="c-choice__label" for="checkbox4">Disabled Checkbox</label>
</div>

<!-- Radio Buttons -->
<div class="c-choice c-choice--radio">
    <input class="c-choice__input" id="radio1" name="radios" type="radio">
    <label class="c-choice__label" for="radio1">Radio 1</label>
</div>

<div class="c-choice c-choice--radio">
    <input class="c-choice__input" id="radio2" name="radios" type="radio">
    <label class="c-choice__label" for="radio2">Radio 2</label>
</div>

<div class="c-choice c-choice--radio">
    <input class="c-choice__input" id="radio3" name="radios" type="radio">
    <label class="c-choice__label" for="radio3">Radio 3</label>
</div>

<div class="c-choice c-choice--radio is-disabled">
    <input class="c-choice__input" id="radio4" name="radios" type="radio" disabled>
    <label class="c-choice__label" for="radio4">Disabled Radio</label>
</div>

Select

Select element provides a list of options to choose from.



<!-- Normal Select -->
<div class="c-select u-mb-xsmall">
  <select class="c-select__input" type="text" placeholder="Select">
    <option>Value One</option>
    <option>Value Two</option>
    <option>Value Three</option>
  </select>
</div>

<!-- Disabled Select -->
<div class="c-select is-disabled">
  <select class="c-select__input" type="text" placeholder="Select" disabled>
    <option>Value One</option>
    <option>Value Two</option>
    <option>Value Three</option>
  </select>
</div>

Range

Default range input.


<input type="range" class="c-range c-range--inline">
Contents: