Radio

Radios let users choose a single option from a list.

Demo

<div class="eds-c-form">
    <fieldset class="eds-c-fieldset">
        <legend class="eds-c-fieldset__legend">{{legend}}</legend>
        {{#each inputs}}
            {{> eds-c-radio}}
        {{/each}}
    </fieldset>
</div>

When to use this component

Use the Radio component when users need to select only 1 option from a list of choices.

When not to use this component

Do not use the Radio component if users may need to choose more than 1 option.

How it works

Use the fieldset component to group radios together and give the group a label using the legend element.

Place radios to the left of their label. This makes them easier to find, especially for screen magnification users.

Do not assume that users will know that they can only choose 1 option. Consider using hint text, such as 'Select 1 option'.

Do not pre-select an option for the user, even if you think it is the most common answer. This could lead to them submitting an incorrect answer or not realising they have missed the question.

Installation

To install the components, go to the get started guide for developers.

To use the Radio component, enter the following command in your Terminal:

npm install @springernature/elements

Styles

First, import the styles of the Form component:

@import '../path/to/@springernature/elements/components/eds-c-form';

Then, import the styles of the Fieldset component into your scss file:

@import '../path/to/@springernature/elements/components/eds-c-fieldset';

Finally, import the styles of the Radio component into your scss file:

@import '../path/to/@springernature/elements/components/eds-c-radio';

Configuration

Properties

For more detailed information on how to use the properties correctly, go to the radio schema file.

Pass this property to the label object:

"cssClass": "eds-c-radio__label"

For more information on the label object, go to the label schema file.

Templates

Use the Radio component with the Form component.

Use the form template and read the schema file.

You can pass the Radio component in the inputs array as many times as you need.

Help improve this page

If you’ve got a question, idea or suggestion about how to improve this component or guidance,
post in the #ask-elements Slack channels.