Field

• src
• forms
• field.scss

---

Class list

Description

Use a .field to group together information about the control being used within it, such as a .title and .help text.

<div class="field mb-2">
    <label class="title">First Name</label>
    <input type="text" class="textbox" placeholder="John">
    <p class="help">This is some help text.</p>
</div>

Required

Use the .required class on a .field to have an asterisk put after the .title. Don't forget to put the required attribute on the actual control itself.

<div class="field required mb-2">
    <label class="title">First Name</label>
    <input type="text" class="textbox" placeholder="John" required>
    <p class="help">This is some help text.</p>
</div>

Themes

The theme classes Sandbox provides sets some extra styling specifically for fields.

<div class="field primary">
    <label class="title">Title</label>
    <input type="text" class="textbox">
    <p class="help">Help text</p>
</div>
<div class="field info">
    <label class="title">Title</label>
    <input type="text" class="textbox">
    <p class="help">Help text</p>
</div>
<div class="field caution">
    <label class="title">Title</label>
    <input type="text" class="textbox">
    <p class="help">Help text</p>
</div>
<div class="field danger">
    <label class="title">Title</label>
    <input type="text" class="textbox">
    <p class="help">Help text</p>
</div>

Grid

To create a grid layout of fields, just use the fields as the content of the grid units.

First Name

Last Name

Street Address

City

State

Zip

<form class="grid tight mb-2">
    <div class="unit-6">
        <div class="field">
            <label class="title">First Name</label>
            <input type="text" class="textbox">
            <p class="help absent"></p>
        </div>
    </div>
    <div class="unit-6">
        <div class="field">
            <label class="title">Last Name</label>
            <input type="text" class="textbox">
            <p class="help absent"></p>
        </div>
    </div>
    <div class="unit-12">
        <div class="field">
            <label class="title">Street Address</label>
            <input type="text" class="textbox">
            <p class="help absent"></p>
        </div>
    </div>
    <div class="unit-4">
        <div class="field">
            <label class="title">City</label>
            <input type="text" class="textbox">
            <p class="help absent"></p>
        </div>
    </div>
    <div class="unit-4">
        <div class="field">
            <label class="title">State</label>
            <input type="text" class="textbox">
            <p class="help absent"></p>
        </div>
    </div>
    <div class="unit-4">
        <div class="field">
            <label class="title">Zip</label>
            <input type="text" class="textbox">
            <p class="help absent"></p>
        </div>
    </div>
</form>

Field horizontal

Creating a horizontal layout of fields requires the use of the .horizontal class on each .field as well as the grid system.

In this situation the fields are the immediate children of the .grid, the unit- classes are the immediate children of the .field.horizontal, and the content goes within the unit.

First Name

Likes selects

maybe yes no

Likes radio inputs

Yes No

<form class="grid tight mb-2">
    <div class="field horizontal">
        <div class="unit-4 text-right">
            <label class="title">First Name</label>
        </div>
        <div class="unit-8">
            <input type="text" class="textbox" placeholder="John">
        </div>
    </div>
    <div class="field horizontal">
        <div class="unit-4 text-right">
            <label class="title">Likes selects</label>
        </div>
        <div class="unit-8">
            <select class="textbox">
                <option value="" selected disabled>maybe</option>
                <option value="yes">yes</option>
                <option value="no">no</option>
            </select>
        </div>
    </div>
    <div class="field horizontal">
        <div class="unit-4 text-right">
            <label class="title">Likes radio inputs</label>
        </div>
        <div class="unit-8">
            <label class="radio mr-1">
                <input type="radio" name="radios" value="yes">
                Yes
            </label>
            <label class="radio">
                <input type="radio" name="radios" value="no">
                No
            </label>
        </div>
    </div>
</form>