We are working on something new! Check it out here!

Datepicker

Datepicker input

Example

<div class="form-group">
    <label for="date">Date</label>
    <input type="text" name="date" id="date" placeholder="Select date…" class="datepicker">
</div>
Source file: ~/source/sass/components/form/_datepicker.scss

File input

File upload input

Modifiers

  • .invalid - Invalid input value

Example

<div class="form-group">
    <label>Upload file(s)</label>
    <label class="input-file">
       <input type="file" name="file[]">
       <span>Select file…</span>
    </label>
</div>
Source file: ~/source/sass/components/form/_file.scss

Form

Basic form

Example

<form method="post" action="/">
    <div class="form-group">
        <label for="name">Name</label>
        <input type="text" name="name" id="name" placeholder="Name">
    </div>
    <div class="form-group">
        <label for="email">Email address</label>
        <input type="email" name="email" id="email" placeholder="Email">
    </div>
    <div class="form-group">
        <label for="yummie">Yummie</label>
        <select name="yummie" id="yummie">
            <option value="Gingerbread">Gingerbread</option>
            <option value="Brownie">Brownie</option>
            <option value="Candy canes">Candy canes</option>
            <option value="Marzipan jujubes">Marzipan jujubes</option>
            <option value="Macaroon">Macaroon</option>
            <option value="Lollipop">Lollipop</option>
        </select>
    </div>
    <div class="form-group">
        <input type="submit" class="btn btn-primary" value="Send">
    </div>
</form>
Source file: ~/source/sass/components/form/_general.scss

Horizontal form

A basic horizontal form

Example

<form method="post" action="/" class="form-horizontal">
    <div class="form-group">
        <label for="name">Name</label>
        <input type="text" name="name" id="name" placeholder="Name">
    </div>
    <div class="form-group">
        <label for="email">Email address</label>
        <input type="email" name="email" id="email" placeholder="Email">
    </div>
    <div class="form-group">
        <input type="submit" class="btn btn-primary" value="Send">
    </div>
</form>
Source file: ~/source/sass/components/form/_general.scss

Image upload

Drag and drop ui for image uploading

Example

Drag a photo here or
<div class="image-upload">
    <div class="placeholder">
        <span class="fa-stack fa-2x">
            <i class="fa fa-picture-o fa-stack-2x"></i>
            <i class="fa fa-plus-circle fa-stack-1x"></i>
        </span>
        <div class="placeholder-text">
            <span class="placeholder-text-drag">Drag a photo here</span>
            <span class="placeholder-text-browse">
                <em class="placeholder-text-or">or</em>
                <button class="btn btn-secondary">Select a photo</button>
            </span>
        </div>
    </div>
</div>
Source file: ~/source/sass/components/form/_image-upload.scss

Input group

Grouped input combination. Use .input-group-addon to append text or use .input-group-addon-btn to append buttons.

Example

<div class="input-group">
    <span class="input-group-addon"><i class="pricon pricon-file"></i></span>
    <input type="text" name="keyword" class="form-control">
    <span class="input-group-addon-btn">
        <input type="submit" class="btn btn-primary" value="Send">
    </span>
</div>
Source file: ~/source/sass/components/form/_input-group.scss

Inputs

Input fields

Modifiers

  • .invalid (or :invalid) - Invalid input value

Example

<div class="form-group">
    <label for="firstname">First name</label>
    <input type="text" name="firstname" id="firstname" placeholder="First name">
</div>
<div class="form-group">
    <label for="disabledInput">Disabled input</label>
    <input type="text" name="disabledInput" id="disabledInput" placeholder="Disabled input[text]" disabled>
</div>
<div class="form-group">
    <label for="textarea">Textarea</label>
    <textarea id="textarea" required></textarea>
</div>
Source file: ~/source/sass/components/form/_input.scss

Checkboxes and radiobuttons

Example

<div class="form-group">
    <label class="checkbox">
        <input type="checkbox"> Check me
    </label>
    <label class="checkbox disabled">
        <input type="checkbox" disabled> But you can't check me
    </label>
</div>
<div class="form-group">
    <label class="radio">
        <input type="radio" name="radio"> Alternative 1
    </label>
    <label class="radio">
        <input type="radio" name="radio"> Alternative 2
    </label>
</div>
Source file: ~/source/sass/components/form/_input.scss

Segment control

A control for segmentating radiobuttons or checkboxes

Example

<ul class="segmented-control">
    <li>
        <input id="search-level-subscriptions" type="radio" name="level" value="subscriptions">
        <label for="search-level-subscriptions" class="checkbox inline-block">Subscriptions</label>
    </li>
    <li>
        <input id="search-level-all" type="radio" name="level" value="all">
        <label for="search-level-all" class="checkbox inline-block">All</label>
    </li>
    <li>
        <input id="search-level-current" type="radio" name="level" value="current">
        <label for="search-level-current" class="checkbox inline-block">Current</label>
    </li>
</ul>
Source file: ~/source/sass/components/form/_segmented.scss

Select

Select field. Single and multiple choises.

Example

<select name="yummie">
    <option value="Gingerbread">Gingerbread</option>
    <option value="Brownie">Brownie</option>
    <option value="Candy canes">Candy canes</option>
    <option value="Marzipan jujubes">Marzipan jujubes</option>
    <option value="Macaroon">Macaroon</option>
    <option value="Lollipop">Lollipop</option>
</select>
<select name="yummie" disabled>
    <option value="Gingerbread">Gingerbread</option>
    <option value="Brownie">Brownie</option>
    <option value="Candy canes">Candy canes</option>
    <option value="Marzipan jujubes">Marzipan jujubes</option>
    <option value="Macaroon">Macaroon</option>
    <option value="Lollipop">Lollipop</option>
</select>
<select name="yummie" multiple>
    <option value="Gingerbread">Gingerbread</option>
    <option value="Brownie">Brownie</option>
    <option value="Candy canes">Candy canes</option>
    <option value="Marzipan jujubes">Marzipan jujubes</option>
    <option value="Macaroon">Macaroon</option>
    <option value="Lollipop">Lollipop</option>
</select>
Source file: ~/source/sass/components/form/_select.scss

Tag manager

Tags input and list (js dependet)

Example

  • Predefined tag
<div class="tag-manager" data-input-name="tags">
    <div class="tag-manager-input">
        <div class="input-group">
            <input type="text" name="tag" class="form-control" placeholder="Add tags…" autocomplete="off">
            <span class="input-group-addon-btn"><button name="add-tag" class="btn">Add</button></span>
        </div>
    </div>
    <div class="tag-manager-selected">
        <label class="label-sm">Tags</label>
        <ul class="tags">
            <li>
                <button class="btn btn-plain" data-action="remove">×</button>
                Predefined tag
                <input type="hidden" name="tags[]" value="{{ $item }}">
            </li>
        </ul>
    </div>
</div>
Source file: ~/source/sass/components/form/_tag-manager.scss