Forms Radio Button
Radio button

Radio buttons allow users to select one option from a set of options.

Default stacked group
                        
                        <div class="ds-form-group">
    <div class="ds-form-set-stacked">
        <div class="ds-form-radio-group">
            <input class="ds-radio" type="radio" id="male3" name="type" checked="true"/>
            <label class="ds-radio-label" for="male3">Male</label>
        </div>
        <div class="ds-form-radio-group">
            <input class="ds-radio" type="radio" id="female3" name="type"/>
            <label class="ds-radio-label" for="female3">Female</label>
        </div>
    </div>
</div>
Disabled
                        
                        <div class="ds-form-group">
 <div class="ds-form-set-stacked">
    <div class="ds-form-radio-group">
        <input class="ds-radio" type="radio" id="male3" name="type" checked="true" disabled="true"/>
        <label class="ds-radio-label" for="male3">Male</label>
    </div>
    <div class="ds-form-radio-group">
        <input class="ds-radio" type="radio" id="female3" name="type" disabled="true"/>
        <label class="ds-radio-label" for="female3">Female</label>
    </div>
 </div>
</div>
Inline group
                    
                    <div class="ds-form-group">
 <div class="ds-form-set">
    <div class="ds-form-radio-group">
            <input class="ds-radio" type="radio" id="male2" name="genders" checked="true" />
            <label class="ds-radio-label" for="male2">Male</label>
    </div>
    <div class="ds-form-radio-group">
        <input class="ds-radio" type="radio" id="female2" name="genders" />
        <label class="ds-radio-label" for="female2">Female</label>
    </div>
    <div class="ds-form-radio-group">
        <input class="ds-radio" type="radio" id="other" name="genders" />
        <label class="ds-radio-label" for="other">Female</label>
    </div>
 </div>
</div>

Guidelines

  • List the options in a logical order for example, alphabetically or by priority.
  • Write labels in sentence case.
  • Use the radio buttons when there are five or fewer options.