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 addons

Provide additional context for form inputs.

<div class="c-field has-addon-left">
    <span class="c-field__addon"><i class="fa fa-calendar"></i></span>
    <label class="c-field__label u-hidden-visually" for="input9">Disabled Input</label>
    <input class="c-input" id="input9" type="text" placeholder="Clark">
</div>

<div class="c-field has-addon-right">
    <label class="c-field__label u-hidden-visually" for="input10">Disabled Input</label>
    <input class="c-input" id="input10" type="text" placeholder="Clark">
    <span class="c-field__addon"><i class="fa fa-bullhorn"></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>

Calendar - Date Picker

Input for picking dates


<div class="c-field has-addon-right">
    <label class="c-field__label u-hidden-visually" for="input-calendar">Pick A Date</label>
    <input class="c-input" data-toggle="datepicker" id="input-calendar" type="text" placeholder="Focus to open calendar" style="max-width:300px;">
    <span class="c-field__addon"><i class="fa fa-calendar"></i></span>
</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-field u-mb-medium">
    <label class="c-field__label" for="select1">Single Select</label>

    <!-- Select2 jquery plugin is used -->
    <select class="c-select" id="select1">
        <option>First</option>
        <option>Second</option>
        <option>Third</option>
    </select>
</div>

<!-- Disabled Select -->
<div class="c-field u-m">
    <label class="c-field__label" for="select2">Disabled Select</label>

    <!-- Select2 jquery plugin is used -->
    <select class="c-select is-disabled" id="select2" disabled>
        <option>First</option>
        <option>Second</option>
        <option>Third</option>
    </select>
</div>


<!-- Select with Search Enabled Select -->
<div class="c-field u-mb-medium">
    <label class="c-field__label" for="select3">Single Select (Search Enabled)</label>

    <!-- Select2 jquery plugin is used -->
    <select class="c-select has-search" id="select3">
        <option>First</option>
        <option>Second</option>
        <option>Third</option>
    </select>
</div>

<div class="c-field u-mb-medium">
    <label class="c-field__label" for="select4">Multiple Select (Search Enabled)</label>

    <!-- Select2 jquery plugin is used -->
    <select class="c-select c-select--multiple" id="select4">
        <option>First</option>
        <option>Second</option>
        <option>Third</option>
    </select>
</div>

Range

Default range input.


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

File Upload (Dropzone)

Drag’n’drop file uploads with image previews powered by Dropzone plugin.

Drag a file here or browse for a file to upload.

<form action="/file-upload" class="dropzone" id="custom-dropzone">
    <div class="dz-message" data-dz-message>
        <i class="dz-icon fa fa-cloud-upload"></i>
        <span>Drag a file here or browse for a file to upload.</span>
    </div>
    <div class="fallback">
        <input name="file" type="file" multiple>
    </div>
</form>