Cirrus

#Form Groups

Cirrus allows you to bundle input fields in form groups with other components such as buttons, dropdown menus, or labels using the form-group class. This adds some unique styling to the elements creating a unified design when combining these components together.

#Basics

Form groups come with their own set of helper classes that adds the grouping behavior to the corresponding supported elements: form-group-btn, form-group-input, and form-group-label.

<div class="form-group">
    <input type="search" class="form-group-input" placeholder="Search"/>
    <button class="form-group-btn">Go</button>
</div>
<div class="form-group">
    <label class="form-group-label">$</label>
    <input type="number" class="form-group-input" placeholder="How much would you like to donate?"/>
</div>

To display controls like buttons and labels on the right side, just place that component last.

<div class="form-group">
    <input type="number" class="form-group-input" placeholder="How about now?"/>
    <label class="form-group-label">$</label>
</div>

You can also use a select within a form-group.

<div class="form-group">
    <label class="form-group-label">github.com/</label>
    <select class="form-group-input w-100p" placeholder="Choose one">
        <option value="">Select one</option>
        <option value="option-1">Option 1</option>
        <option value="option-2">Option 2</option>
        <option value="option-3">Option 3</option>
    </select>
    <button class="form-group-btn btn-primary">Go</button>
</div>

You can also attach a bunch of these controls together.

<div class="form-group">
    <label class="form-group-label">Dimensions</label><input type="text" class="form-group-input" placeholder="Width" /><input type="text" class="form-group-input" placeholder="Height" /><button class="form-group-btn">Clear</button>
    <button class="form-group-btn btn-primary">Submit</button>
</div>

#Sizes

And of course, more controls can be combined with each other with different sizes. To make things easier, Cirrus is designed to make components to fit with other same sized controls. For instance, any *-small class matches with all components that have the small class.

<div class="form-group">
    <label class="form-group-label label--xs">github.com/</label>
    <input type="text" class="form-group-input input--xs" placeholder="Extra Small">
    <button class="form-group-btn btn-primary btn--xs">Go</button>
</div>
<div class="form-group">
    <label class="form-group-label label--sm">github.com/</label>
    <input type="text" class="form-group-input input--sm" placeholder="Small">
    <button class="form-group-btn btn-primary btn--sm">Go</button>
</div>
<div class="form-group">
    <label class="form-group-label">github.com/</label>
    <input type="text" class="form-group-input" placeholder="Normal">
    <button class="btn-primary form-group-btn">Go</button>
</div>
<div class="form-group">
    <label class="form-group-label label--lg">github.com/</label>
    <input type="text" class="form-group-input input--lg" placeholder="Large">
    <button class="form-group-btn btn-primary btn--lg">Go</button>
</div>
<div class="form-group">
    <label class="form-group-label label--xl">github.com/</label>
    <input type="text" class="form-group-input input--xl" placeholder="Extra Large">
    <button class="form-group-btn btn-primary btn--xl">Go</button>
</div>

#Example

Below is an example form that uses a bunch of different fields together.

This section is required.
<div class="mb-1">
    <label class="font-bold">Contact</label>
    <div class="section-body row">
        <div class="col-6 pl-0">
            <div class="input-control">
                <input class="input-contains-icon input-contains-icon input-contains-icon-left" type="text" placeholder="Name" />
                <span class="icon icon-left"><i class="fa fa-wrapper fa-user" aria-hidden="true"></i></span>
            </div>
        </div>
        <div class="col-6 pr-0">
            <div class="input-control">
                <input class="input-contains-icon input-contains-icon-left input-contains-icon-right text-success input-success" type="text" placeholder="Email" value="somebodyoncetoldme@gmail.com" />
                <span class="icon icon-left"><i class="fa fa-wrapper fa-envelope" aria-hidden="true"></i></span>
                <span class="icon icon-right"><i class="fa fa-wrapper fa-check" aria-hidden="true"></i></span>
            </div>
        </div>
    </div>
</div>
<div class="mb-1">
    <label class="font-bold">Phone <span class="info inline font-light">We are not telemarketers.</span></label>
    <div class="section-body">
        <div class="form-group">
            <label class="form-group-label">+1</label>
            <input type="text" class="form-group-input" placeholder="Enter your phone number" />
        </div>
    </div>
</div>
<div class="row">
    <div class="mb-1 col-6 pl-0">
        <label class="font-bold">Choose One</label>
        <select class="select" placeholder="Choose one">
            <option>Shibe</option>
            <option>Doggo</option>
            <option>Pupper</option>
        </select>
    </div>
    <div class="mb-1 col-6 pr-0">
        <label class="font-bold label--sm">Select One <span class="required">*</span></label>
        <div class="section-body">
            <label class="radio">
                <input type="radio" name="member" /> Yes
            </label>
            <label class="radio">
                <input type="radio" name="member" /> No
            </label>
        </div>
        <span class="required info">This section is required.</span>
    </div>
</div>
<div class="mb-1">
    <label class="font-bold">Message</label>
    <textarea placeholder="Enter your message"></textarea>
</div>