Get help Color blind mode Low vision mode

Radio Group Ready

Radio group allows user to select one option from a set of options. Use value on group to set the selected option.

Examples #

Open in new window 
<duet-radio-group label="Choose" value="one" name="group">
  <duet-radio value="one" label="Option one"></duet-radio>
  <duet-radio value="two" label="Option two"></duet-radio>
  <duet-radio value="three" label="Option three"></duet-radio>
</duet-radio-group>

<script>
  // Select the above radio group component
  var radioGroup = document.querySelector("duet-radio-group")

  // Listen for change events in the radio group
  radioGroup.addEventListener("duetChange", function (e) {
    console.log("Option changed in radio group:", e.detail)
  })
</script>
Open in new window 
<duet-radio-group responsive label="Choose" direction="horizontal" value="one" name="group2">
  <duet-radio value="one" label="Option one"></duet-radio>
  <duet-radio value="two" label="Option two"></duet-radio>
  <duet-radio value="three" label="Option three"></duet-radio>
</duet-radio-group>
Open in new window 
<duet-radio-group responsive label="Choose" direction="horizontal" value="one" disabled name="group2">
  <duet-radio value="one" label="Option one"></duet-radio>
  <duet-radio value="two" label="Option two"></duet-radio>
  <duet-radio value="three" label="Option three"></duet-radio>
</duet-radio-group>
Open in new window 
<duet-radio-group
  responsive
  label="This choice group has a tooltip"
  tooltip="Hello, I’m a tooltip! To close me, you can click outside of the tooltip, hit ESC key or click the X button."
  direction="horizontal"
  value="one"
  name="group2"
>
  <duet-radio value="one" label="Option one"></duet-radio>
  <duet-radio value="two" label="Option two"></duet-radio>
  <duet-radio value="three" label="Option three"></duet-radio>
</duet-radio-group>
Open in new window 
<duet-radio-group
  responsive
  label="This choice group has a tooltip"
  tooltip="Hello, I’m a tooltip! To close me, you can click outside of the tooltip, hit ESC key or click the X button."
  caption="This is a caption lorem ipsum dolor sit amet consectetuer adipiscing elit."
  direction="horizontal"
  value="one"
  name="group2"
>
  <duet-radio value="one" label="Option one"></duet-radio>
  <duet-radio value="two" label="Option two"></duet-radio>
  <duet-radio value="three" label="Option three"></duet-radio>
</duet-radio-group>

Properties #

Property Attribute Description Type Default
accessibleLiveError accessible-live-error The aria-live attribute for the error message. When the input is validated on blur, use "off", as using "polite" or "assertive" makes the screen reader read the error message twice. When the input is validated on submit, use "polite", as "off" would leave the messages unread by screen readers. Use "assertive" only in those rare cases when "polite" would leave the error message unread by screen readers. "assertive" | "off" | "polite" "polite"
caption caption Additional caption to show inside the label of the radio group. string ""
direction direction Direction of the radio group. "horizontal" | "vertical" "vertical"
disabled disabled Determines, whether the control is disabled or not. boolean undefined
error error Display radio group in error state along with an error message. string ""
label label Legend displayed for the radio buttons in this group. string "Label"
labelHidden label-hidden Visually hide the label, but still show it to screen readers. boolean false
margin margin Controls the margin of the component. "auto" | "none" "auto"
name name Name for the radio buttons within this group. This must be unique amongst all other inputs. string undefined
required required Sets whether making a choice is required or optional. Will set contained duet-radio components to required as well. boolean false
responsive responsive Enable or disable the automatic responsive behaviour of the radio group component when horizontal setting is used. Setting this option to "true" makes sure that contents are stacked vertically on mobile. boolean false
theme theme Theme of the radio group. "" | "default" | "turva" ""
tooltip tooltip Tooltip to display next to the label of the radio group. string ""
tooltipDirection tooltip-direction With direction setting you can force the tooltip to always open towards left or right instead of automatically determining the direction. "auto" | "left" | "right" "auto"
value value The value of the selected radio button. string undefined

Slots #

Slot Description
"tooltip" Use to place a tooltip alongside the label.

Usage #

This section includes guidelines for designers and developers about the usage of this component in different contexts.

When to use #

  • When using radio components which allow the selection of just one option.
  • Radio group makes sure we provide fieldset and legend correctly and convey this information to assistive technologies.
  • Radio group allows you to use value on group to set the selected option.

When not to use #

Accessibility #

This component has been validated to meet the WCAG 2.1 AA accessibility guidelines. You can find additional information regarding accessibility of this component below.

Additional considerations #

Integration

For integration, event and theming guidelines, please see Using Components. This documentation explains how to implement and use Duet’s components across different technologies like Angular, React or Vanilla JavaScript.

Integration guidelines

Tutorials

Follow these practical tutorials to learn how to build simple page layouts using Duet’s CSS Framework, Web Components and other features:

Tutorials

Building Layouts

 Tutorials

Using CLI Tools

 Tutorials

Creating Custom Patterns

 Tutorials

Server Side Rendering

 Tutorials

Sharing Prototypes

 Tutorials

Usage With Markdown

Troubleshooting

If you experience any issues while using a component, please head over to the Support page for more guidelines and help.