Size: Theme: Gridlines:

Forms

<form>
    <label class="field">
        <input type="text" />
        <span class="label">Name</span>
    </label>
    <label class="field -inline">
        <input type="radio" name="example" />
        <span class="label">Cone</span>
    </label>
    <label class="field -inline">
        <input type="radio" name="example" />
        <span class="label">Bowl</span>
    </label>
    <label for="select" class="field">
        <select name="select">
            <option disabled="disabled" selected="selected">Flavors</option>
            <option>Chocolate</option>
            <option>Vanilla</option>
        </select>
        <span class="label">Favorite Ice Cream</span>
    </label>
    <label class="field">
        <textarea></textarea>
        <span class="label">Comments</span>
    </label>
    <label class="field">
        <input type="checkbox" />
        <span class="label">
            I consent to my ice cream flavors being saved into a database for
            eternity and understand and acknowledge this will have consequences
            for all of my decendants for decades to come.
        </span>
    </label>
</form>

4-1 Select

<label class="field ">
    <select>
        <option disabled="disabled" selected="selected">Select</option>
        <option>Option 1</option>
        <option>Option 2</option>
        <option>Option 3</option>
    </select>
    <span class="label">Select Label</span>
</label>

4-2 Checkbox

<label class="field ">
    <input type="checkbox" />
    <span class="label">Checkbox</span>
</label>

4-3 Radio

<label class="field ">
    <input type="radio" />
    <span class="label">Radio</span>
</label>

4-4 Input and text areas

<label class="field ">
    <input type="text" />
    <span class="label">Input</span>
</label>
<label class="field ">
    <textarea></textarea>
    <span class="label">Textarea</span>
</label>

4-5 Disabled Fields

<form>
    <label class="field">
        <input type="text" value="Someone" disabled />
        <span class="label">Name</span>
    </label>
    <label class="field -inline">
        <input type="radio" name="example" disabled />
        <span class="label">Cone</span>
    </label>
    <label class="field -inline">
        <input type="radio" name="example" disabled />
        <span class="label">Bowl</span>
    </label>
    <label for="select" class="field">
        <select name="select" disabled>
            <option disabled="disabled" selected="selected">Flavors</option>
            <option>Chocolate</option>
            <option>Vanilla</option>
        </select>
        <span class="label">Favorite Ice Cream</span>
    </label>
    <label class="field">
        <textarea disabled>I am some comments</textarea>
        <span class="label">Comments</span>
    </label>
    <label class="field">
        <input type="checkbox" disabled />
        <span class="label">
            I consent to my ice cream flavors being saved into a database for
            eternity and understand and acknowledge this will have consequences
            for all of my decendants for decades to come.
        </span>
    </label>
</form>