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>