Choice Group Ready

Choice group allows user to select one choice from a set of choices. Use value on group to set the selected choice. For more usage examples, please see Choice component.

Choice Group provides the exact same API and properties as Radio Group, but optimized for Choice component usage.

Examples #

Open in new window

<duet-choice-group value="one" label="Vakuutus" direction="horizontal" name="group" responsive>
  <duet-choice label="Eläinvakuutus" type="radio" value="one" expand></duet-choice>
  <duet-choice label="Autovakuutus" type="radio" value="two" expand></duet-choice>
  <duet-choice label="Kotivakuutus" type="radio" value="three" expand></duet-choice>
</duet-choice-group>

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

  // Listen for choice changes in the group
  group.addEventListener("duetChange", function (e) {
    console.log("Option changed in choice group:", e.detail)
  })
</script>

Open in new window

<duet-choice-group label="Horizontal choice group with responsive stacking" direction="horizontal" responsive>
  <duet-choice label="Kyllä" type="radio" value="one" expand></duet-choice>
  <duet-choice label="Ei" type="radio" value="two" expand></duet-choice>
</duet-choice-group>

<duet-choice-group
  label="Horizontal choice group with responsive stacking change on x-small breakpoint"
  direction="horizontal"
  responsive
  breakpoint="x-small"
>
  <duet-choice label="Kyllä" type="radio" value="one" expand></duet-choice>
  <duet-choice label="Ei" type="radio" value="two" expand></duet-choice>
</duet-choice-group>

<duet-choice-group
  label="Horizontal choice group with responsive stacking change on small breakpoint"
  direction="horizontal"
  responsive
  breakpoint="small"
>
  <duet-choice label="Kyllä" type="radio" value="one" expand></duet-choice>
  <duet-choice label="Ei" type="radio" value="two" expand></duet-choice>
</duet-choice-group>

<duet-choice-group
  label="Horizontal choice group with responsive stacking change on medium breakpoint"
  direction="horizontal"
  responsive
  breakpoint="medium"
>
  <duet-choice label="Kyllä" type="radio" value="one" expand></duet-choice>
  <duet-choice label="Ei" type="radio" value="two" expand></duet-choice>
</duet-choice-group>

<duet-choice-group
  label="Horizontal choice group with responsive stacking change on large breakpoint"
  direction="horizontal"
  responsive
  breakpoint="large"
>
  <duet-choice label="Kyllä" type="radio" value="one" expand></duet-choice>
  <duet-choice label="Ei" type="radio" value="two" expand></duet-choice>
</duet-choice-group>

<duet-choice-group
  label="Horizontal choice group with responsive stacking change on x-large breakpoint"
  direction="horizontal"
  responsive
  breakpoint="x-large"
>
  <duet-choice label="Kyllä" type="radio" value="one" expand></duet-choice>
  <duet-choice label="Ei" type="radio" value="two" expand></duet-choice>
</duet-choice-group>

Open in new window

<duet-choice-group value="one" label="Vakuutus" direction="vertical" name="group" responsive>
  <duet-choice label="Eläinvakuutus" type="radio" value="one" expand></duet-choice>
  <duet-choice label="Autovakuutus" type="radio" value="two" expand></duet-choice>
  <duet-choice label="Kotivakuutus" type="radio" value="three" expand></duet-choice>
</duet-choice-group>

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

  // Listen for choice changes in the group
  group.addEventListener("duetChange", function (e) {
    console.log("Option changed in choice group:", e.detail)
  })
</script>

Open in new window

<duet-choice-group value="one" label="Vakuutus" direction="vertical" name="group1" responsive>
  <duet-choice label="Eläinvakuutus" type="radio" value="one" expand collapsible>
    <duet-radio-group label="Choose option" direction="vertical" margin="none" 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>
  </duet-choice>
  <duet-choice label="Autovakuutus" type="radio" value="two" expand collapsible>
    <duet-radio-group label="Choose option" direction="vertical" margin="none" name="group3">
      <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>
  </duet-choice>
  <duet-choice label="Kotivakuutus" type="radio" value="three" expand collapsible>
    <duet-fieldset label="Subselection fieldset">
      <duet-radio-group label="Choose option" direction="vertical" margin="none" name="group4">
        <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>
      <duet-input label="Type text here"></duet-input>
    </duet-fieldset>
  </duet-choice>
</duet-choice-group>

<script>
  // Select the elements we want to manipulate
  var choiceGroup = document.querySelector("duet-choice-group")
  var radioGroups = document.querySelectorAll("duet-radio-group")

  // Listen for choice changes in the group
  choiceGroup.addEventListener("duetChange", function () {
    radioGroups.forEach(function (group) {
      // Reset group value if user switches choice
      group.value = ""
    })
  })
</script>

Open in new window

<duet-choice-group value="one" label="Vakuutus" direction="horizontal" name="group" disabled responsive>
  <duet-choice label="Eläinvakuutus" type="radio" value="one" expand></duet-choice>
  <duet-choice label="Autovakuutus" type="radio" value="two" expand></duet-choice>
  <duet-choice label="Kotivakuutus" type="radio" value="three" expand></duet-choice>
</duet-choice-group>

Open in new window

<duet-choice-group
  value="one"
  label="This choice group has a tooltip"
  direction="horizontal"
  name="group"
  tooltip="Hello, I’m a tooltip! To close me, you can click outside of the tooltip,
    hit ESC key or click the X button."
  responsive
>
  <duet-choice label="Eläinvakuutus" type="radio" value="one" expand></duet-choice>
  <duet-choice label="Autovakuutus" type="radio" value="two" expand></duet-choice>
  <duet-choice label="Kotivakuutus" type="radio" value="three" expand></duet-choice>
</duet-choice-group>

Open in new window

<duet-choice-group
  value="one"
  label="Choice group with a caption and a tooltip"
  direction="horizontal"
  name="group"
  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."
  responsive
>
  <duet-choice label="Eläinvakuutus" type="radio" value="one" expand></duet-choice>
  <duet-choice label="Autovakuutus" type="radio" value="two" expand></duet-choice>
  <duet-choice label="Kotivakuutus" type="radio" value="three" expand></duet-choice>
</duet-choice-group>

Open in new window

<duet-modal
  size="small"
  heading="Onko matkapuhelimesi tai tablettisi rikkoutunut?"
  icon="damage-breakage"
  class="duet-text-center"
>
  <duet-choice-group value="one" label="Vakuutus" direction="horizontal" name="group" responsive>
    <duet-choice label="Eläinvakuutus" type="radio" value="one" expand></duet-choice>
    <duet-choice label="Autovakuutus" type="radio" value="two" expand></duet-choice>
    <duet-choice label="Kotivakuutus" type="radio" value="three" expand></duet-choice>
  </duet-choice-group>
</duet-modal>

<duet-button variation="primary" onclick="modal.show()"> Show modal </duet-button>

<script>
  // Save reference to the modal component below
  var modal = document.querySelector("duet-modal")

  // Listen for open events
  modal.addEventListener("duetOpen", function () {
    // console.log("Modal opened")
  })

  // Listen for close events
  modal.addEventListener("duetClose", function () {
    // console.log("Modal closed")
  })

  // Select the above choice group
  var group = document.querySelector("duet-choice-group")

  // Listen for choice changes in the group
  group.addEventListener("duetChange", function (e) {
    console.log("Option changed in choice group:", e.detail)
  })
</script>

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"`
`breakpoint`	`breakpoint`	Switch the breakpoint used to trigger the content stacking. These match to similar media query tokens eg.: $media-query-small, $media-query-medium.	`"large" \| "medium" \| "small" \| "x-large" \| "x-small"`	`"small"`
`caption`	`caption`	Additional caption to show inside the label of the choice group.	`string`	`undefined`
`direction`	`direction`	Direction of the choice group.	`"horizontal" \| "vertical"`	`"vertical"`
`disabled`	`disabled`	Determines, whether the control is disabled or not.	`boolean`	`undefined`
`error`	`error`	Display choice group in error state along with an error message.	`string`	`""`
`label`	`label`	Legend displayed for the choice 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 choice 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 choices to required as well.	`boolean`	`false`
`responsive`	`responsive`	Enable or disable the automatic responsive behaviour of the choice 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 choice group.	`"" \| "default" \| "turva"`	`""`
`tooltip`	`tooltip`	Tooltip to display next to the label of the choice group.	`string`	`undefined`
`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 choice 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 type choices which allow the selection of just one choice.
Choice group makes sure we provide fieldset and legend correctly and convey this information to assistive technologies.
Choice group allows you to use value on group to set the selected choice.

When not to use #

When using checkbox type choices which allow the selection of multiple choices.

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.

Choice group makes automatically sure we provide <fieldset> and <legend> correctly and convey this information to assistive technologies.
label property is always required for accessible choice group control. Label is added inside a <legend> element that describes the <fieldset>.
disabled property makes the whole choice group disabled. This prevents users from being able to interact with the choices, and convey their inactive state to assistive technologies.

Additional considerations #

Consider using horizontal direction on larger viewports if surrounding space and label lengths allow it.
Please keep in mind that Radio and Choice Groups need unique name properties for them to fully work and be accessible.

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

Troubleshooting

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

Choice Group Ready

Examples #

Properties #

Slots #

Usage #

When to use #

When not to use #

Accessibility #

Additional considerations #

Integration

Tutorials

Building Layouts

Using CLI Tools

Creating Custom Patterns

Server Side Rendering

Sharing Prototypes

Usage With Markdown

Troubleshooting