Forms

Examples and usage guidelines for form control styles, layout options, and custom components for creating a wide variety of forms.

Text Input

                
<form>
    <label for="text">Text Input</label>
    <input type="text" name="text">
    <label for="textplaceholder">Text Input with Placeholder</label>
    <input type="text" name="textplaceholder" placeholder="Example Input">
    <label for="textdefault">Text Input with Default Input</label>
    <input type="text" name="textdefault" value="Default Input">
    <label for="required">Required Text Input</label>
    <input type="text" name="required" required>
    <label for="password">Password</label>
    <input type="password" name="password">
    <label for="textarea">Text Area</label>
    <textarea name="textarea" cols="50" rows="4"></textarea>
</form>
                
            

Radio

                
<form>
    <div class="input-group-radio">
        <label for="option-1">
            <input id="option-1" type="radio" value="option1" name="option">
            <div class="button">Option 1</div>
        </label>
        <label for="option-2">
            <input id="option-2" type="radio" value="option2" name="option">
            <div class="button">Option 2</div>
        </label>
        <label for="option-3">
            <input id="option-3" type="radio" value="option3" name="option">
            <div class="button">Option 3</div>
        </label>
        <label for="option-4">
            <input id="option-4" type="radio" value="option4" name="option">
            <div class="button">Option 4</div>
        </label>
    </div>
</form>
                
            

Checkbox

                
<form>
    <div class="input-group-checkbox">
        <label for="show-credits">
            <input id="show-credits" type="checkbox" value="true" checked="">
            <div class="button">Credits</div>
        </label>
        <label for="show-labels">
            <input id="show-labels" type="checkbox" value="true" checked="">
            <div class="button">Labels</div>
        </label>
        <label for="show-animate">
            <input id="show-animate" type="checkbox" value="true" checked="">
            <div class="button">Animate</div>
        </label>
        <label for="show-responsive">
            <input id="show-responsive" type="checkbox" value="true" checked="">
            <div class="button">Responsive</div>
        </label>
    </div>
</form>
                
            

Input Groups

%
Inline Add-On
Inline Add-On
                
<form>
    <div class="input-group-label">
        <label class='input-group-addon' for="slider-start">Slider start position</label>
        <input type="number" size="2" placeholder="50" value="50" min="0" max="100" name="slider-start" step="1" style=" width: 70px;">
        <div class="input-group-addon">%</div>
    </div>

    <div class="input-group-label">
        <label class='input-group-addon' for="inlinelabel">Inline label</label>
        <input type="text" placeholder="Input with inline label" name="inlinelabel">
        <div class='input-group-addon'>Inline Add-On</div>
    </div>
    <div class="input-group-label">
        <label class='input-group-addon' for="inlinelabel">Inline label</label>
        <input type="text" placeholder="Input with inline label" name="inlinelabel">
    </div>
    <div class="input-group-label">
        <input type="text" placeholder="Input with inline label" name="inlinelabel">
        <div class='input-group-addon'>Inline Add-On</div>
    </div>
    <div class="input-group-button">
        <input type="text" placeholder="Input with attached submit button">
        <input type="submit" name="">
    </div>
    <div class="input-group-label">
        <label class='input-group-addon' for="inlinelabel">Inline label longer still</label>
        <input type="text" placeholder="Input with attached submit button">
        <button id="load-btn" class="button button-secondary">Load</button>
    </div>
</form>
                
            

Horizontal Input

                
<form class="form-horizontal">
    <div class="input-group">
        <label>Horizontal Input</label>
        <input type="text" name="">
    </div>
    <div class="input-group">
        <label>Form Input</label>
        <input type="text" name="">
    </div>
</form>