Controls

Additional form controls.

Get Started

1

File inputs

Reworked 3.0.0

Button Style

A simple button file input to put in forms for simple uploads. File name displaying is handle via Javascript. If your requirements are heavier, head to the File uploader section.

Reworked 3.0.0

Field Style

You may need to diplay a file input as an input field. Check the example below.

Choose File No file selected
SHOW CODE 

        <div class="file-input-wrapper">
            <div class="control">
                <input type="file" name="simple-file-input[]" id="simple-file-input" class="inputfile simple-file-input" data-multiple-caption="{count} files selected" multiple />
                <label for="simple-file-input"><i class="fa fa-cloud"></i> <span>Select a file</span></label>
            </div>
        </div>
                                                

        <div class="file-input-wrapper">
            <div class="control field-input-wrapper">
                <div class='field-input'>
                    <input type='file'>
                    <span class='button btn-align info-btn raised'>Choose File</span>
                    <span class='label' data-js-label>No file selected</span>
                </div>
            </div>
        </div>
2

Default checkboxes

Checkbox

Basic checkboxes have a light markup and work well in all browsers.

SHOW CODE 

        <div class="field">
            <div class="control">
                <label class="checkbox-wrap is-small">
                    <input id="check1" type="checkbox" class="d-checkbox">
                    <span></span>
                    This is a small checkbox
                </label>
            </div>
        </div>
                                                

        <div class="field">
            <div class="control">
                <label class="checkbox-wrap is-medium">
                    <input id="check2" type="checkbox" class="d-checkbox">
                    <span></span>
                    This is a medium checkbox
                </label>
            </div>
        </div>
                                                

        <div class="field">
            <div class="control">
                <label class="checkbox-wrap is-large">
                    <input id="check3" type="checkbox" class="d-checkbox">
                    <span></span>
                    This is a large checkbox
                </label>
            </div>
        </div>

Radio buttons

Radio groups can have their size and colors customized individually. Available color classes are .is-primary, .is-secondary and .is-accent.

SHOW CODE 

        <div class="field">
            <div class="control">
                <ul>
                    <li class="mb-20">
                        <!-- Radio -->
                        <label class="radio-wrap is-small">
                            <input type="radio" class="b-radio" name="radio-group">
                            <span></span>
                            Small option 1
                        </label>
                        <!-- /Radio -->
                    </li>
                    <li class="mb-20">
                        <!-- Radio -->
                        <label class="radio-wrap is-small">
                            <input type="radio" class="b-radio" name="radio-group" checked>
                            <span></span>
                            Small option 2
                        </label>
                        <!-- /Radio -->
                    </li>
                    <li class="mb-20">
                        <!-- Radio -->
                        <label class="radio-wrap is-small">
                            <input type="radio" class="b-radio" name="radio-group">
                            <span></span>
                            Small option 3
                        </label>
                        <!-- /Radio -->
                    </li>
                </ul>
            </div>
        </div>
                                                

        <div class="field">
            <div class="control">
                <ul>
                    <li class="mb-20">
                        <!-- Radio -->
                        <label class="radio-wrap is-medium is-primary">
                            <input type="radio" class="b-radio" name="radio-group-2" checked>
                            <span></span>
                            Medium option 1
                        </label>
                        <!-- /Radio -->
                    </li>
                    <li class="mb-20">
                        <!-- Radio -->
                        <label class="radio-wrap is-medium is-primary">
                            <input type="radio" class="b-radio" name="radio-group-2">
                            <span></span>
                            Medium option 2
                        </label>
                        <!-- /Radio -->
                    </li>
                    <li class="mb-20">
                        <!-- Radio -->
                        <label class="radio-wrap is-medium is-primary">
                            <input type="radio" class="b-radio" name="radio-group-2">
                            <span></span>
                            Medium option 3
                        </label>
                        <!-- /Radio -->
                    </li>
                </ul>
            </div>
        </div>
                                                

        <div class="field">
            <div class="control">
                <ul>
                    <li class="mb-20">
                        <!-- Radio -->
                        <label class="radio-wrap is-accent">
                            <input type="radio" class="b-radio" name="radio-group-3">
                            <span></span>
                            Large option 1
                        </label>
                        <!-- /Radio -->
                    </li>
                    <li class="mb-20">
                        <!-- Radio -->
                        <label class="radio-wrap is-accent">
                            <input type="radio" class="b-radio" name="radio-group-3">
                            <span></span>
                            Large option 2
                        </label>
                        <!-- /Radio -->
                    </li>
                    <li class="mb-20">
                        <!-- Radio -->
                        <label class="radio-wrap is-accent">
                            <input type="radio" class="b-radio" name="radio-group-3" checked>
                            <span></span>
                            Large option 3
                        </label>
                        <!-- /Radio -->
                    </li>
                </ul>
            </div>
        </div>
3

Colored checkboxes

Square checkboxes

Square checkboxes are handy when you need multiple checkboxes at once. 8 colors are available: default, .is-info, .is-success, .is-warning, .is-danger, .is-primary, .is-secondary and .is-accent

Circular checkboxes

Colored checkboxes can be circular. Add the .is-circular class to a .b-checkbox element to make it rounded.

SHOW CODE 

        <!-- Checkbox -->
        <div class="field">
            <div class="b-checkbox">
                <input id="checkbox11" class="styled" type="checkbox" checked>
                <label for="checkbox11">
                    Is Default
                </label>
            </div>
        </div>
        <div class="field mt-20">
            <!-- Checkbox -->
            <div class="b-checkbox is-primary">
                <input id="checkbox16" class="styled" type="checkbox" checked>
                <label for="checkbox16">
                    Is Primary
                </label>
            </div>
        </div>
                                                

        <!-- Checkbox -->
        <div class="field">
            <div class="b-checkbox is-circular">
                <input id="checkbox11" class="styled" type="checkbox" checked>
                <label for="checkbox11">
                    Is Default
                </label>
            </div>
        </div>
        <div class="field mt-20">
            <!-- Checkbox -->
            <div class="b-checkbox is-primary is-circular">
                <input id="checkbox16" class="styled" type="checkbox" checked>
                <label for="checkbox16">
                    Is Primary
                </label>
            </div>
        </div>
4

Switch toggles

Default switches

Switch toggles are available in 4 sizes. No javasccript required.

SHOW CODE 

        <div class="field">
            <input id="switchSmall" type="checkbox" name="switchSmall" class="switch is-small">
            <label for="switchSmall">Small</label>
        </div>
                                                

        <div class="field">
            <input id="switchNormal" type="checkbox" name="switchNormal" class="switch">
            <label for="switchNormal">Normal</label>
        </div>
                                                

        <div class="field">
            <input id="switchMedium" type="checkbox" name="switchMedium" class="switch is-medium">
            <label for="switchMedium">Medium</label>
        </div>
                                                

        <div class="field">
            <input id="switchLarge" type="checkbox" name="switchLarge" class="switch is-large">
            <label for="switchLarge">Large</label>
        </div>

Outlined switches

Switches can be outlined. Add the .is-outlined class to a .switch element to make it outlined.

Thin switches

Switches can be thin. Add the .is-thin class to a .switch element to make it thinner.

Thin outlined switches

Switches can be thin and outlined. Add the .is-outlined and .is-thin classes to a .switch element to make it both thin and outlined.

Regular colors

Add the color modifier to the .switch element. Available classes are default, .is-info, .is-success, .is-warning, .is-danger, .is-primary, .is-secondary and .is-accent

Outlined colors

Add the color modifier to the .switch.is-outlined element. Available classes are default, .is-info, .is-success, .is-warning, .is-danger, .is-primary, .is-secondary and .is-accent

Thin colors

Add the color modifier to the .switch.is-thin element. Available classes are default, .is-info, .is-success, .is-warning, .is-danger, .is-primary, .is-secondary and .is-accent

Thin outlined colors

Add the color modifier to the .switch.is-thin.is-outlined element. Available classes are default, .is-info, .is-success, .is-warning, .is-danger, .is-primary, .is-secondary and .is-accent