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

Outlined Radio

Huro provides default styled radio buttons in 2 main styles, outlined and solid. Those checkboxes also support all main colors. The available modifiers are is-primary, is-success, is-info is-warning, is-danger.


            <div class="field">
                <div class="control">
                    <label class="radio">
                        <input type="radio" name="outlined_radio">
                        <span></span>
                        Choice 1
                    </label>
            
                    <label class="radio is-outlined is-primary">
                        <input type="radio" name="outlined_radio">
                        <span></span>
                        Choice 2
                    </label>
            
                    <label class="radio is-outlined is-info">
                        <input type="radio" name="outlined_radio">
                        <span></span>
                        Choice 3
                    </label>
            
                    <label class="radio is-outlined is-success">
                        <input type="radio" name="outlined_radio">
                        <span></span>
                        Choice 4
                    </label>
            
                    <label class="radio is-outlined is-warning">
                        <input type="radio" name="outlined_radio">
                        <span></span>
                        Choice 5
                    </label>
            
                    <label class="radio is-outlined is-danger">
                        <input type="radio" name="outlined_radio">
                        <span></span>
                        Choice 6
                    </label>
                </div>
            </div>
            

Outlined Square

Huro radio buttons can be squares instead of circles. Simply add the is-square modifier class to your radio element. See the code example for more details about usage.


            <div class="field">
                <div class="control">
                    <label class="radio is-square">
                        <input type="radio" name="outlined_square_radio">
                        <span></span>
                        Choice 1
                    </label>
            
                    <label class="radio is-square is-outlined is-primary">
                        <input type="radio" name="outlined_square_radio">
                        <span></span>
                        Choice 2
                    </label>
            
                    <label class="radio is-square is-outlined is-info">
                        <input type="radio" name="outlined_square_radio">
                        <span></span>
                        Choice 3
                    </label>
            
                    <label class="radio is-square is-outlined is-success">
                        <input type="radio" name="outlined_square_radio">
                        <span></span>
                        Choice 4
                    </label>
            
                    <label class="radio is-square is-outlined is-warning">
                        <input type="radio" name="outlined_square_radio">
                        <span></span>
                        Choice 5
                    </label>
            
                    <label class="radio is-square is-outlined is-danger">
                        <input type="radio" name="outlined_square_radio">
                        <span></span>
                        Choice 6
                    </label>
                </div>
            </div>
            

Solid Radio

Huro provides default styled radio buttons in 2 main styles, outlined and solid. Those checkboxes also support all main colors. The available modifiers are is-primary, is-success, is-info is-warning, is-danger.


            <div class="field">
                <div class="control">
                    <label class="radio is-solid">
                        <input type="radio" name="solid_radio">
                        <span></span>
                        Choice 1
                    </label>
            
                    <label class="radio is-solid is-primary">
                        <input type="radio" name="solid_radio">
                        <span></span>
                        Choice 2
                    </label>
            
                    <label class="radio is-solid is-info">
                        <input type="radio" name="solid_radio">
                        <span></span>
                        Choice 3
                    </label>
            
                    <label class="radio is-solid is-success">
                        <input type="radio" name="solid_radio">
                        <span></span>
                        Choice 4
                    </label>
            
                    <label class="radio is-solid is-warning">
                        <input type="radio" name="solid_radio">
                        <span></span>
                        Choice 5
                    </label>
            
                    <label class="radio is-solid is-danger">
                        <input type="radio" name="solid_radio">
                        <span></span>
                        Choice 6
                    </label>
                </div>
            </div>
            

Solid Square

Huro radio buttons can be squares instead of circles. Simply add the is-square modifier class to your radio element. See the code example for more details about usage.


            <div class="field">
                <div class="control">
                    <label class="radio is-solid is-square">
                        <input type="radio" name="solid_square_radio">
                        <span></span>
                        Choice 1
                    </label>
            
                    <label class="radio is-solid is-square is-primary">
                        <input type="radio" name="solid_square_radio">
                        <span></span>
                        Choice 2
                    </label>
            
                    <label class="radio is-solid is-square is-info">
                        <input type="radio" name="solid_square_radio">
                        <span></span>
                        Choice 3
                    </label>
            
                    <label class="radio is-solid is-square is-success">
                        <input type="radio" name="solid_square_radio">
                        <span></span>
                        Choice 4
                    </label>
            
                    <label class="radio is-solid is-square is-warning">
                        <input type="radio" name="solid_square_radio">
                        <span></span>
                        Choice 5
                    </label>
            
                    <label class="radio is-solid is-square is-danger">
                        <input type="radio" name="solid_square_radio">
                        <span></span>
                        Choice 6
                    </label>
                </div>
            </div>