Input

All inputs and textareas must have .form-control. They are all block by default and are the same height as default buttons.

<input class="form-control mb2" type="text" value="Value">
<textarea class="form-control" placeholder="Placeholder"></textarea>

In order to customize the look of a file input, we need to include several bits of extra code. They also need some JavaScript to work properly (see main.js). The input area has a 250px max width and will scale down if needed.

<div class="file-input clearfix">
    <label class="float-left">
        <span class="btn btn--default">
            Browse
            <input style="display: none;" type="file" multiple>
        </span>
    </label>
    <input class="form-control float-left" type="text" value="Choose file..." readonly>
</div>

:disabled form elements will automatically receive this styling. If you need to add disabled styling to a label or something like a group of elements, use .disabled.

<input class="form-control" type="text" value="Name" disabled>

• Form