Radio buttons

Examples

Allows the user must select one mutually exclusive option from a small to medium list.

Usage

Use radio buttons when the user must select only one option from a small to medium list of mutually exclusive choices.

Do:

arrange radio buttons vertically when there are more than three options to improve readability
order the list in an alphabetical or logical manner, for example, from least to most effective
consider setting a default option if there is a clearly preferred or most commonly selected choice based on user data or research
display the entire list on the page when there are five or fewer options
the <label> tag so users can click the label, not just the small radio button
use the aria-checked attribute to indicate which radio button is selected and which are not
apply the aria-labelledby attribute to provide a clear label for the group of radio buttons
make it focusable and keyboard accessible, two options available:

aria-activedescendant attribute which would be included in the container of the group of radio buttons
having a tabindex attribute in each of the radio buttons

Avoid:

nesting a group of radio buttons within another radio button option
radio buttons for two mutually exclusive options if one can be implied by a single checkbox (for example, “Subscribe to newsletter”, ticked = yes, unticked = no)
using radio buttons when users may need to select none, one, or multiple options from a list, a checkbox group would be more appropriate in such cases
if there are five or more familiar options, consider using a single select (dropdown), unless side-by-side comparison is important

Please correct the errors and try again.

Radio buttons

Equipment

Post

Property

Other

Copy


                <turas-radio-buttons asp-for="RadioButton" asp-items="RadioButtons">
                    <turas-text-area asp-for="RadioButtonOther" />
                </turas-radio-buttons>

Copy


                <div class="form-group form-radio-buttons  has-hidden-text-area-other"><label class="control-label   ">Radio buttons</label>
<div class="form-check custom-radio"><input id="RadioButton_1" class="form-check-input radio-with-hidden" type="radio" value="1" name="RadioButton" /><label for="RadioButton_1" class="form-check-label">Equipment</label></div><div class="form-check custom-radio"><input id="RadioButton_2" class="form-check-input radio-with-hidden" type="radio" value="2" name="RadioButton" /><label for="RadioButton_2" class="form-check-label">Post</label></div><div class="form-check custom-radio"><input id="RadioButton_3" class="form-check-input radio-with-hidden" type="radio" value="3" name="RadioButton" /><label for="RadioButton_3" class="form-check-label">Property</label></div><div class="form-check custom-radio"><input id="RadioButton_4" class="form-check-input radio-with-hidden" type="radio" value="4" name="RadioButton" /><label for="RadioButton_4" class="form-check-label">Other</label></div>
<span class="field-validation-valid" data-valmsg-for="RadioButton" data-valmsg-replace="true"></span>

                    
                
<div class="form-group form-text-area  is-hidden-text-area-other"><label class="control-label   " for="RadioButtonOther">Other</label>
<div class="row">
<div class="col">
<textarea placeholder="" class="form-control" rows="5" cols="50" data-val-normalizer="trim-whitespace" data-val="true" data-val-length="The field Other must be a string with a maximum length of 255." data-val-length-max="255" id="RadioButtonOther" maxlength="255" name="RadioButtonOther">
</textarea>
</div>
<span class="field-validation-valid" data-valmsg-for="RadioButtonOther" data-valmsg-replace="true"></span>
</div>
</div>
</div>

Radio buttons required

Equipment

Post

Property

Copy


            <turas-radio-buttons asp-for="RadioButtonRequired" asp-items="RadioButtonRequireds">
            </turas-radio-buttons>

Copy


            <div class="form-group form-radio-buttons "><label class="control-label requiredFieldMarker  ">Radio buttons required</label>
<div class="form-check custom-radio"><input id="RadioButtonRequired_1" class="form-check-input" type="radio" value="1" data-val="true" data-val-required="The Radio buttons required field is required." name="RadioButtonRequired" /><label for="RadioButtonRequired_1" class="form-check-label">Equipment</label></div><div class="form-check custom-radio"><input id="RadioButtonRequired_2" class="form-check-input" type="radio" value="2" name="RadioButtonRequired" /><label for="RadioButtonRequired_2" class="form-check-label">Post</label></div><div class="form-check custom-radio"><input id="RadioButtonRequired_3" class="form-check-input" type="radio" value="3" name="RadioButtonRequired" /><label for="RadioButtonRequired_3" class="form-check-label">Property</label></div>
<span class="field-validation-valid" data-valmsg-for="RadioButtonRequired" data-valmsg-replace="true"></span>

            
</div>

Radio buttons guidance text

I am some guidance text

Equipment

Post

Property

Copy


            <turas-radio-buttons asp-for="RadioButtonGuidanceText" asp-items="RadioButtonGuidanceTexts" guidance-text="I am some guidance text">

            </turas-radio-buttons>

Copy


            <div class="form-group form-radio-buttons "><label class="control-label   ">Radio buttons guidance text</label>
<div class="form-field-guidance-text">I am some guidance text</div>
<div class="form-check custom-radio"><input id="RadioButtonGuidanceText_1" class="form-check-input" type="radio" value="1" name="RadioButtonGuidanceText" /><label for="RadioButtonGuidanceText_1" class="form-check-label">Equipment</label></div><div class="form-check custom-radio"><input id="RadioButtonGuidanceText_2" class="form-check-input" type="radio" value="2" name="RadioButtonGuidanceText" /><label for="RadioButtonGuidanceText_2" class="form-check-label">Post</label></div><div class="form-check custom-radio"><input id="RadioButtonGuidanceText_3" class="form-check-input" type="radio" value="3" name="RadioButtonGuidanceText" /><label for="RadioButtonGuidanceText_3" class="form-check-label">Property</label></div>
<span class="field-validation-valid" data-valmsg-for="RadioButtonGuidanceText" data-valmsg-replace="true"></span>


            
</div>

Radio buttons guidance text accordion

A paragraph.

List item
List item
List item

Equipment

Post

Property

Copy


                <turas-radio-buttons asp-for="RadioButtonGuidanceTextAccordion" asp-items="RadioButtonGuidanceTextAccordions">
                <turas-form-guidance collapses>
                        <p>A paragraph.</p>
                        <ul>
                            <li>List item</li>
                            <li>List item</li>
                            <li>List item</li>
                        </ul>
                    </turas-form-guidance>
            </turas-radio-buttons>

Copy


                <div class="form-group form-radio-buttons "><label class="control-label   ">Radio buttons guidance text accordion</label>
<div class="turas-form-guidance-collapse">
            <button class="turas-form-guidance-collapse-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapse-0e64f86d-b53a-450b-acce-adfcffdd5c42" aria-expanded="false" aria-controls="collapse-0e64f86d-b53a-450b-acce-adfcffdd5c42"><span class="visually-hidden">Guidance</span></button>              
            <div class="turas-form-guidance-collapse-content collapse" id="collapse-0e64f86d-b53a-450b-acce-adfcffdd5c42">   
                <div class="form-field-guidance-text"><span class=""></span>
                    
                        <p>A paragraph.</p>
                        <ul>
                            <li>List item</li>
                            <li>List item</li>
                            <li>List item</li>
                        </ul>
                       
                </div>
            </div></div>
<div class="form-check custom-radio"><input id="RadioButtonGuidanceTextAccordion_1" class="form-check-input" type="radio" value="1" name="RadioButtonGuidanceTextAccordion" /><label for="RadioButtonGuidanceTextAccordion_1" class="form-check-label">Equipment</label></div><div class="form-check custom-radio"><input id="RadioButtonGuidanceTextAccordion_2" class="form-check-input" type="radio" value="2" name="RadioButtonGuidanceTextAccordion" /><label for="RadioButtonGuidanceTextAccordion_2" class="form-check-label">Post</label></div><div class="form-check custom-radio"><input id="RadioButtonGuidanceTextAccordion_3" class="form-check-input" type="radio" value="3" name="RadioButtonGuidanceTextAccordion" /><label for="RadioButtonGuidanceTextAccordion_3" class="form-check-label">Property</label></div>
<span class="field-validation-valid" data-valmsg-for="RadioButtonGuidanceTextAccordion" data-valmsg-replace="true"></span>

                
            
</div>

Radio buttons additional classes

Equipment

Post

Property

Copy


            <turas-radio-buttons asp-for="RadioButtonAdditionalClasses" asp-items="RadioButtonAdditionalClassess" additional-classes="remove-max-width">
                
            </turas-radio-buttons>

Copy


            <div class="form-group form-radio-buttons remove-max-width"><label class="control-label   ">Radio buttons additional classes</label>
<div class="form-check custom-radio"><input id="RadioButtonAdditionalClasses_1" class="form-check-input" type="radio" value="1" name="RadioButtonAdditionalClasses" /><label for="RadioButtonAdditionalClasses_1" class="form-check-label">Equipment</label></div><div class="form-check custom-radio"><input id="RadioButtonAdditionalClasses_2" class="form-check-input" type="radio" value="2" name="RadioButtonAdditionalClasses" /><label for="RadioButtonAdditionalClasses_2" class="form-check-label">Post</label></div><div class="form-check custom-radio"><input id="RadioButtonAdditionalClasses_3" class="form-check-input" type="radio" value="3" name="RadioButtonAdditionalClasses" /><label for="RadioButtonAdditionalClasses_3" class="form-check-label">Property</label></div>
<span class="field-validation-valid" data-valmsg-for="RadioButtonAdditionalClasses" data-valmsg-replace="true"></span>

                
            
</div>

Radio buttons in a row

Equipment

Post

Property

Radio buttons in a row

Equipment

Post

Property

Copy


            <div class="row">
                    <div class="col-md-6">
                    <turas-radio-buttons asp-for="RadioButtonAInARowOne" asp-items="RadioButtonAInARowOnes">
                    
                    </turas-radio-buttons>
                    </div>
                <div class="col-md-6">
                    <turas-radio-buttons asp-for="RadioButtonAInARowTwo" asp-items="RadioButtonAInARowTwos">
                        
                    </turas-radio-buttons>
                </div>
            </div>

Copy


            <div class="row">
                    <div class="col-md-6">
                    <div class="form-group form-radio-buttons "><label class="control-label   ">Radio buttons in a row</label>
<div class="form-check custom-radio"><input id="RadioButtonAInARowOne_1" class="form-check-input" type="radio" value="1" name="RadioButtonAInARowOne" /><label for="RadioButtonAInARowOne_1" class="form-check-label">Equipment</label></div><div class="form-check custom-radio"><input id="RadioButtonAInARowOne_2" class="form-check-input" type="radio" value="2" name="RadioButtonAInARowOne" /><label for="RadioButtonAInARowOne_2" class="form-check-label">Post</label></div><div class="form-check custom-radio"><input id="RadioButtonAInARowOne_3" class="form-check-input" type="radio" value="3" name="RadioButtonAInARowOne" /><label for="RadioButtonAInARowOne_3" class="form-check-label">Property</label></div>
<span class="field-validation-valid" data-valmsg-for="RadioButtonAInARowOne" data-valmsg-replace="true"></span>

                    
                    
</div>
                    </div>
                <div class="col-md-6">
                    <div class="form-group form-radio-buttons "><label class="control-label   ">Radio buttons in a row</label>
<div class="form-check custom-radio"><input id="RadioButtonAInARowTwo_1" class="form-check-input" type="radio" value="1" name="RadioButtonAInARowTwo" /><label for="RadioButtonAInARowTwo_1" class="form-check-label">Equipment</label></div><div class="form-check custom-radio"><input id="RadioButtonAInARowTwo_2" class="form-check-input" type="radio" value="2" name="RadioButtonAInARowTwo" /><label for="RadioButtonAInARowTwo_2" class="form-check-label">Post</label></div><div class="form-check custom-radio"><input id="RadioButtonAInARowTwo_3" class="form-check-input" type="radio" value="3" name="RadioButtonAInARowTwo" /><label for="RadioButtonAInARowTwo_3" class="form-check-label">Property</label></div>
<span class="field-validation-valid" data-valmsg-for="RadioButtonAInARowTwo" data-valmsg-replace="true"></span>

                        
                    
</div>
                </div>
            </div>

Radio buttons in a row required

Equipment

Post

Property

Radio buttons in a row required

Equipment

Post

Property

Copy


            <div class="row">
                <div class="col-md-6">
                    <turas-radio-buttons asp-for="RadioButtonRequiredAInARowOne" asp-items="RadioButtonRequiredAInARowOnes">
                       
                    </turas-radio-buttons>
                </div>
                <div class="col-md-6">
                    <turas-radio-buttons asp-for="RadioButtonRequiredAInARowTwo" asp-items="RadioButtonRequiredAInARowTwos">
                        
                    </turas-radio-buttons>
                </div>
            </div>

Copy


            <div class="row">
                <div class="col-md-6">
                    <div class="form-group form-radio-buttons "><label class="control-label requiredFieldMarker  ">Radio buttons in a row required </label>
<div class="form-check custom-radio"><input id="RadioButtonRequiredAInARowOne_1" class="form-check-input" type="radio" value="1" data-val="true" data-val-required="The Radio buttons in a row required  field is required." name="RadioButtonRequiredAInARowOne" /><label for="RadioButtonRequiredAInARowOne_1" class="form-check-label">Equipment</label></div><div class="form-check custom-radio"><input id="RadioButtonRequiredAInARowOne_2" class="form-check-input" type="radio" value="2" name="RadioButtonRequiredAInARowOne" /><label for="RadioButtonRequiredAInARowOne_2" class="form-check-label">Post</label></div><div class="form-check custom-radio"><input id="RadioButtonRequiredAInARowOne_3" class="form-check-input" type="radio" value="3" name="RadioButtonRequiredAInARowOne" /><label for="RadioButtonRequiredAInARowOne_3" class="form-check-label">Property</label></div>
<span class="field-validation-valid" data-valmsg-for="RadioButtonRequiredAInARowOne" data-valmsg-replace="true"></span>

                       
                    
</div>
                </div>
                <div class="col-md-6">
                    <div class="form-group form-radio-buttons "><label class="control-label requiredFieldMarker  ">Radio buttons in a row required</label>
<div class="form-check custom-radio"><input id="RadioButtonRequiredAInARowTwo_1" class="form-check-input" type="radio" value="1" data-val="true" data-val-required="The Radio buttons in a row required field is required." name="RadioButtonRequiredAInARowTwo" /><label for="RadioButtonRequiredAInARowTwo_1" class="form-check-label">Equipment</label></div><div class="form-check custom-radio"><input id="RadioButtonRequiredAInARowTwo_2" class="form-check-input" type="radio" value="2" name="RadioButtonRequiredAInARowTwo" /><label for="RadioButtonRequiredAInARowTwo_2" class="form-check-label">Post</label></div><div class="form-check custom-radio"><input id="RadioButtonRequiredAInARowTwo_3" class="form-check-input" type="radio" value="3" name="RadioButtonRequiredAInARowTwo" /><label for="RadioButtonRequiredAInARowTwo_3" class="form-check-label">Property</label></div>
<span class="field-validation-valid" data-valmsg-for="RadioButtonRequiredAInARowTwo" data-valmsg-replace="true"></span>

                        
                    
</div>
                </div>
            </div>

Radio buttons hide validation message

Equipment

Post

Property

Copy


            <turas-radio-buttons asp-for="RadioButtonRequiredHideValidationMessage" asp-items="RadioButtonRequiredHideValidationMessages" hide-validation-message>
               
            </turas-radio-buttons>

Copy


            <div class="form-group form-radio-buttons "><label class="control-label requiredFieldMarker  ">Radio buttons hide validation message </label>
<div class="form-check custom-radio"><input id="RadioButtonRequiredHideValidationMessage_1" class="form-check-input" type="radio" value="1" data-val="true" data-val-required="The Radio buttons hide validation message  field is required." name="RadioButtonRequiredHideValidationMessage" /><label for="RadioButtonRequiredHideValidationMessage_1" class="form-check-label">Equipment</label></div><div class="form-check custom-radio"><input id="RadioButtonRequiredHideValidationMessage_2" class="form-check-input" type="radio" value="2" name="RadioButtonRequiredHideValidationMessage" /><label for="RadioButtonRequiredHideValidationMessage_2" class="form-check-label">Post</label></div><div class="form-check custom-radio"><input id="RadioButtonRequiredHideValidationMessage_3" class="form-check-input" type="radio" value="3" name="RadioButtonRequiredHideValidationMessage" /><label for="RadioButtonRequiredHideValidationMessage_3" class="form-check-label">Property</label></div>

               
            
</div>

Radio buttons disabled

Equipment

Post

Property

Copy


            <turas-radio-buttons asp-for="RadioButtonDisabled" asp-items="RadioButtonDisableds">

            </turas-radio-buttons>

Copy


            <div class="form-group form-radio-buttons "><label class="control-label   ">Radio buttons disabled </label>
<div class="form-check custom-radio"><input id="RadioButtonDisabled_1" class="form-check-input" checked="checked" disabled="disabled" type="radio" value="1" name="RadioButtonDisabled" /><label for="RadioButtonDisabled_1" class="form-check-label">Equipment</label></div><div class="form-check custom-radio"><input id="RadioButtonDisabled_2" class="form-check-input" disabled="disabled" type="radio" value="2" name="RadioButtonDisabled" /><label for="RadioButtonDisabled_2" class="form-check-label">Post</label></div><div class="form-check custom-radio"><input id="RadioButtonDisabled_3" class="form-check-input" disabled="disabled" type="radio" value="3" name="RadioButtonDisabled" /><label for="RadioButtonDisabled_3" class="form-check-label">Property</label></div>
<span class="field-validation-valid" data-valmsg-for="RadioButtonDisabled" data-valmsg-replace="true"></span>


            
</div>

Radio buttons hide label

Equipment

Post

Property

Copy


            <turas-radio-buttons asp-for="RadioButtonHideLabel" asp-items="RadioButtonHideLabels" hide-label>

            </turas-radio-buttons>

Copy


            <div class="form-group form-radio-buttons "><label class="control-label   sr-only">Radio buttons hide label </label>
<div class="form-check custom-radio"><input id="RadioButtonHideLabel_1" class="form-check-input" type="radio" value="1" name="RadioButtonHideLabel" /><label for="RadioButtonHideLabel_1" class="form-check-label">Equipment</label></div><div class="form-check custom-radio"><input id="RadioButtonHideLabel_2" class="form-check-input" type="radio" value="2" name="RadioButtonHideLabel" /><label for="RadioButtonHideLabel_2" class="form-check-label">Post</label></div><div class="form-check custom-radio"><input id="RadioButtonHideLabel_3" class="form-check-input" type="radio" value="3" name="RadioButtonHideLabel" /><label for="RadioButtonHideLabel_3" class="form-check-label">Property</label></div>
<span class="field-validation-valid" data-valmsg-for="RadioButtonHideLabel" data-valmsg-replace="true"></span>


            
</div>

Parameters for turas-radio-buttons

asp-for - Binds the radio buttons to a model property
asp-items - Specifies the list of items to be displayed as radio buttons
guidance-text - Provides additional guidance text for the radio buttons
additional-classes - Allows for custom CSS classes to be added to the radio buttons
hide-validation-message - Hides the validation message for the radio buttons
hide-label - Hides the label for the radio buttons

Multi select

Single select

Examples

Usage

Parameters for turas-radio-buttons

Was this page helpful?