Select Language

Activity

Joshua S. Las Vegas, NV
Melany W. San Jose, CA
Esteban C. Miami, FL
Tara S. New York, NY
The slicer project getslicer.io
31%
5 / 24
Metamovies reworked metamovies.co
84%
28 / 31
Fast Pizza redesign fastpizza.com
60%
25 / 39

Call Danny at Colby's

Today - 11:30am

Meeting with Alice

Today - 01:00pm

Answer Annie's message

Today - 01:45pm

Send new campaign

Today - 02:30pm

Project review

Today - 03:30pm

Call Trisha Jackson

Today - 05:00pm

Write proposal for Don

Today - 06:00pm

Switch

Huro provides nicely styled switch checkboxes when you need to display such control in yoour forms. Huro switches have several color modififers. Available modifiers are is-primary, is-success, is-info is-warning, is-danger. Please refer to the markup for more details about usage.


            <div class="field is-grouped">
                <div class="control">
                    <label class="form-switch">
                        <input type="checkbox" class="is-switch">
                        <i></i>
                    </label>
                </div>
            
                <div class="control">
                    <label class="form-switch is-primary">
                        <input type="checkbox" class="is-switch" checked>
                        <i></i>
                    </label>
                </div>
            
                <div class="control">
                    <label class="form-switch is-success">
                        <input type="checkbox" class="is-switch" checked>
                        <i></i>
                    </label>
                </div>
            
                <div class="control">
                    <label class="form-switch is-info">
                        <input type="checkbox" class="is-switch" checked>
                        <i></i>
                    </label>
                </div>
            
                <div class="control">
                    <label class="form-switch is-warning">
                        <input type="checkbox" class="is-switch" checked>
                        <i></i>
                    </label>
                </div>
            
                <div class="control">
                    <label class="form-switch is-danger">
                        <input type="checkbox" class="is-switch" checked>
                        <i></i>
                    </label>
                </div>
            </div>
            

Thin Switch

Huro also provides thin switch checkboxes when you need to display such control in yoour forms. Huro switches have several color modififers. Available modifiers are is-primary, is-success, is-info is-warning, is-danger. Please refer to the markup for more details about usage.


            <div class="field is-grouped">
                <div class="control">
                    <div class="thin-switch">
                        <input id="thin-switch-1" class="input" type="checkbox" />
                        <label for="thin-switch-1" class="slider"></label>
                    </div>
                </div>
            
                <div class="control">
                    <div class="thin-switch is-primary">
                        <input id="thin-switch-2" class="input" type="checkbox" checked />
                        <label for="thin-switch-2" class="slider"></label>
                    </div>
                </div>
            
                <div class="control">
                    <div class="thin-switch is-success">
                        <input id="thin-switch-3" class="input" type="checkbox" checked />
                        <label for="thin-switch-3" class="slider"></label>
                    </div>
                </div>
            
                <div class="control">
                    <div class="thin-switch is-info">
                        <input id="thin-switch-4" class="input" type="checkbox" checked />
                        <label for="thin-switch-4" class="slider"></label>
                    </div>
                </div>
            
                <div class="control">
                    <div class="thin-switch is-warning">
                        <input id="thin-switch-5" class="input" type="checkbox" checked />
                        <label for="thin-switch-5" class="slider"></label>
                    </div>
                </div>
            
                <div class="control">
                    <div class="thin-switch is-danger">
                        <input id="thin-switch-6" class="input" type="checkbox" checked />
                        <label for="thin-switch-6" class="slider"></label>
                    </div>
                </div>
            </div>
            

Switch Block

You might have to add a label to your switches in some cases. If so, use the switch block markup, which provides a nice and clean flexbox layout. See the code example for more details about usage.

Some option

            <div class="switch-block">
                <label class="form-switch">
                    <input type="checkbox" class="is-switch" checked>
                    <i></i>
                </label>
                <div class="text">
                    <span>Some option</span>
                </div>
            </div>
            

Thin Switch Block

You might have to add a label to your switches in some cases. If so, use the switch block markup, which provides a nice and clean flexbox layout. See the code example for more details about usage.

Some option

            <div class="thin-switch-block">
                <div class="thin-switch">
                    <input id="thin-switch-7" class="input" type="checkbox" checked />
                    <label for="thin-switch-7" class="slider"></label>
                </div>
                <div class="text">
                    <span>Some option</span>
                </div>
            </div>