Components

Radio buttons

The radio buttons component is a way of providing users to select one option available from a set.

Example

Radio buttons stacked

Radio buttons in a row

Reveal more on selection of radio button

Use this layout when you have radio buttons that reveal more UI for the user to interact with

                                
                                <h3>Radio buttons stacked</h3>
<div class="form__control form__radio">
<input type="radio" id="label-test1" name="radio_group_name_1"/><label class="form__label" for="label-test1"> Label for the checkbox </label>
</div>
<div class="form__control form__radio"><input type="radio" name="radio_group_name_1" id="label-test2"/><label 
class="form__label" for="label-test2"> Label for the checkbox </label></div>
<div class="form__control form__radio"><input type="radio" name="radio_group_name_1" id="label-test3"/><label 
class="form__label" for="label-test3"> Label for the checkbox </label></div>
<h3>Radio buttons in a row</h3>

<div class="form__inline">
<div class="form__control form__radio "><input type="radio" name="radio_group_name_2" id="label-test21"/><label 
class="form__label" for="label-test21"> Yes</label></div>
<div class="form__control form__radio"><input type="radio" name="radio_group_name_2" id="label-test23"/><label 
class="form__label" for="label-test23"> No </label></div>
</div>
<h3>Reveal more on selection of radio button</h3>
<p>Use this layout when you have radio buttons that reveal more UI for the user to interact with</p>
<div class="form__control  sgc-radio-reveal-container ng-scope" ng-controller="sgc-radio-reveal">

    <div class="form__control show">
        <div class=" form__radio form__control">
            <input type="radio" id="label-testr2" name="radio_group_name_3" ng-click="show = 1"/><label class="form__label" for="label-testr2"> Label for the checkbox </label>
        </div>
        <div class="radio__reveal" ng-show="show==1">
            <div class="form__control mbottom-20">
                <label for="revealed-input">Here is the revealed label</label>
                <input name="revealed-input form__input"  type="text"/>
            </div>
        </div>

         <div class="form__radio form__control">
            <input type="radio" id="label-testr3" name="radio_group_name_3"  ng-click="show = 2"/><label class="form__label" for="label-testr3"> Label for the checkbox </label>
        </div>
        <div class="radio__reveal" ng-show="show==2">
            <div class="form__control">
                <label for="revealed-input">Here is the revealed label</label>
                <input name="revealed-input form__input" type="text"/>
            </div>
        </div>
    </div>
</div>
<script>sgc.controller('sgc-radio-reveal', function ($scope, $http) {});</script>

When to use this

You should use this component if you are expecting the user to only select one option.

When not to use this

  • You should not use this component if you are expecting the user to potentially select more than one option
  • If you have more than 8 options for the user to choose from, you should use a select menu instead
Back to top