storyteller.io CSS Styleguide

Forms

UI Blocks

14.1

Form Labels

Labels should almost always accompany form controls — placeholders are not a substitute. Placed inline, labels will be positioned to the left or right of a control by default. Insert breaks to place vertically. Alternate positioning options are available when grouped into a larger form.




Example Markup
<label class="ui-label" for="example-endpoint">Endpoint</label><br />
<input id="example-endpoint" name="example_endpoint" type="text" size="30" /><br />

<label class="ui-label" for="example-name">Name</label>
<input id="example-name" name="example_name" type="text" /><br />

14.2

Forms

Form labels and controls are grouped inline by default.

Gender
Example Markup
<form method="get" action="#">
    <fieldset class="ui-form">
        <label for="first_name" class="ui-label">First Name</label>
        <input id="first_name" name="first_name" type="text" size="15" />

        <label for="species" class="ui-label">Species</label>
        <select id="species" name="species">
            <option>Human</option>
            <option>Monkey</option>
            <option>Gorilla</option>
        </select>

        <input id="enhanced" value="true" type="checkbox" />
        <label for="enhanced" class="ui-label">Enhanced</label>

        <fieldset class="ui-radio-buttons">
            <strong class="ui-label" title="Gender">Gender</strong>

            <input type="radio" id="option-male" name="gender" value="option-male" />
            <label for="option-male" class="ui-label">Male</label>

            <input type="radio" id="option-female" name="gender" value="option-female" />
            <label for="option-female" class="ui-label">Female</label>
        </fieldset>
    </fieldset>
</form>
Modifiers  
--flush-right

Positions labels aligned right in a column.

--flush-left

Positions labels flush left in a column.

--vertical

Positions labels above controls for a slim profile.

14.3

Form Details

Supplement forms with supplemental details.

14.4

Properties

Groups of key/value pairs.