Radios

[jrbarnes9]

Use this place to discuss the radios component in the ONS Design System

[jrbarnes9]

#135 resolved

[jrbarnes9]

#207 resolved

[jrbarnes9]

#272 resolved

[jrbarnes9]

#296 resolved

[jrbarnes9]

#352 resolved

[jrbarnes9]

#418 resolved

[jrbarnes9]

#444 resolved

[jrbarnes9]

#523 resolved

[jrbarnes9]

#850 resolved

[jrbarnes9]

#1077 resolved

[jrbarnes9]

#1180 resolved

[jrbarnes9]

#1192 resolved

[jrbarnes9]

#1263 resolved

[jrbarnes9]

#1562 resolved

[jrbarnes9]

#1562 resolved

[jrbarnes9]

#1628 resolved

[jrbarnes9]

#1708 raised

[jrbarnes9]

Issue #1648 raised

[mr-nick17]

The radio button component when selected and zoomed to less than 100% is not aligned correctly (see image)

[mr-nick17]

Seems to be more of an issue on MacOS

[daniellecorke]

Hi Nick, thanks for highlighting this. I've raised #3133 to investigate.

[daniellecorke]

Hi Nick, this bug was fixed as part of Release 70.0.4. Please let us know if you have any further issues.

[katie-gardner]

Please could support be added for having textarea as the input type in the reveal variant for radios? One of the IDS screens is looking to have something like this

Additionally, please could there be an option to have all the radios the same width, all matching the length of the longest? The IDS designs have multiple radio pages with all the fields aligned

[daniellecorke]

Hi Katie, thanks for your suggestions and feedback. I've added #3128 and #3129 to our backlog so that we can look into this for you.

[katie-gardner]

Great, thank you!

[daniellecorke]

Hi Katie, I'm pleased to say these changes have been released in Release 70.0.4. Please let us know if you have any further feedback.

[katie-gardner]

Will do - thank you!

[cconway-ext-ons]

Could I please request that a pre-set value be available in a texarea within a radio, which was added in Release 70.0.4?

The ids hub team would like to use this for a multiple page form, so that if you return to a previous page your inputs will be loaded from the session and displayed.

The change I would like made is to add the line "value": radio.other.value to as line 133 in the file src/components/radios/_macro.njk , so that the text area elif text area part is

{% elif otherType == "textarea" %}
    {% from "components/textarea/_macro.njk" import onsTextarea %}
    {{
        onsTextarea({
            "id": radio.other.id,
            "name": radio.other.name,
            "label": {
                "id": radio.other.id + "-label",
                "text": radio.other.label.text,
                "classes": 'ons-u-fw-n',
                "description": radio.other.label.description
            },
            "charCheckLimit": {
                "limit": radio.other.charCheckLimit.limit,
                "charCountSingular": radio.other.charCheckLimit.charCountSingular,
                "charCountPlural": radio.other.charCheckLimit.charCountPlural
            },
            "value": radio.other.value
        })
    }}
{% endif %}

[MagdalenaLarge]

Hi, I would like to give you the update about your request.
It has been addressed to our dev team and fix has been included in our latest release: 70.0.9.
Please let us know in case of any further questions.
Thank you.

[AlanHONS]

See https://onsdigital.slack.com/archives/C038E2C4K2R/p1730308652383799 for an Interaction Design discussion about Service Manual information text about when to use Boxed vs UnBoxed radio options.
Highlighting here for Design System team to consider if they want to update that Service Manual wording for greater clarity?

[MagdalenaLarge]

Thank you @AlanHONS for your suggestion. We will look into it.