Radio Button

[usethetics]

Naam

Radio Button

• Link naar GitHub Discussion
• Link naar Figma Schetsboek

---

Notities

Radio buttons are used for single selection of multiple choices within a radio group.

Use when

Radio buttons are always part of a radio group

Don’t use when:

Users are allowed to select multiple options, in that case use checkboxes instead

Development

CSS

• [ ] min-width and min-height are configurable
• [ ] sane defaults for minimum target size

HTML

• [ ] radio role is used
• [ ] ideally <input type="radio">

Naming

In documentation we'll use radio-button where in code and the component in Figma well use radio according to our naming convention. This is the same as MDN, who also calls it radio button everywhere eventhough type='radio' and role='radio'

https://www.uiguideline.com/components/radio

Documentation

Design

• [ ] Recognisable as radio button (round shape)
• [ ] Minimum target size (WCAG 2.5.5)

Developer

• [ ] Use role="radio"
• [ ] Use <input type="radio"> and avoid custom ARIA implementation

[macedvisioned]

How to define a good radiobutton to your website or webformpage?

WCAG description https://www.w3.org/Translations/WCAG21-nl/#aanpasbaar

Design tips https://webaim.org/techniques/forms/controls#radio

Use when: when you have just one choice to make Don't use: with multiple choice and don't use default aria-checked="true", this will conflict when the field is required after you change the input. Or when you use conditions in a related fields.

Radiobutton code snippet

<!--radiobutton field-->
<h2>Radio button fields formatting according to WCAG guidelines</h2>
<div id="uniquecontrolID" class="question-required-field" data-active="True" data-isfirstcontrol="False" data-type="question"> 
<!--field data specifications here above--> 
    <div class="label">
        <label for="uniqueLabelName" id="uniqueLabelID" class="question-label" aria-labelledby="label"><!--labelDescription--></label></div>
            <div class="control">
                <fieldset>
                    <legend>Maak uw keuze uit een van de volgende opties:</legend>
                        <div>
                            <span id="rbKeuzeTest" title="Kies hier of de test een formulier of een website betreft" class="radiobutton-input question-control" aria-label="Kies hier of de test een formulier of een website betreft"><span>
                                <input id="rbKeuzeTest_0" type="radio" name="rbKeuzeTest" value="A" aria-checked="false">
                                <label for="keuzeTest_0">Formulier Rijksoverheid</label><br>
                                <input id="rbKeuzeTest_1" type="radio" name="rbKeuzeTest" value="B" aria-checked="false">
                                <label for="keuzeTest_1">Formulier Decentrale Overheid</label><br>
                                <input id="rbKeuzeTest_2" type="radio" name="rbKeuzeTest" value="C" aria-checked="false">
                                <label for="keuzeTest_2">Formulier Bedrijven</label><br>
                                <input id="rbKeuzeTest_3" type="radio" name="rbKeuzeTest" value="D" aria-checked="false">
                                <label for="keuzeTest_3">Website Rijksoverheid</label><br>
                                <input id="rbKeuzeTest_4" type="radio" name="rbKeuzeTest" value="E" aria-checked="false">
                                <label for="keuzeTest_4">Website Decentrale Overheid</label><br>
                                <input id="rbKeuzeTest_5" type="radio" name="rbKeuzeTest" value="F" aria-checked="false">
                                <label for="keuzeTest_5">Website Bedrijven</label></span><span></span></span>
                        </div>
                </fieldset>
            <div>
<!--If field is required-->
<span id="UniqueErrorMessageID" class="errormessage" style="display: inline;"></span>
<!--validating code, in some cases you will use an external source like in Visual Studio for validating form fields-->                                      
<div class="validate-callout" aria-live="assertive" role="alert" style="top: 60px; left: 1px; display: none;"><strong aria-hidden="true"><!--understandable value--></strong><br><!--required description--><br>
<div class="validate-callout-co-up2" style="left: 0px;"></div><div class="validate-callout-co-up" style="left: 0px;"></div></div><img id="uniqueElementID_callout-validator_0" class="callout-validator" src="/external webresource that validates, like a js or external css file" alt="alt description here" style="inline css code">
</div>
</div>
</div>
<!--end radiobutton field-->