Skip to main content

Choice Group new

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
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" 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" 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-radio-group label="Choose" 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-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>

Properties #

Property Attribute Description Type Default
caption caption Additional caption to show inside the label of the choice group. string ""
direction direction Direction of the choice group. Can be one of: "vertical", "horizontal". string "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"
margin margin Controls the margin of the component. Can be one of: "auto", "none". string "auto"
name name name for the choice buttons within this group. string undefined
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. Can be one of: "default", "turva". string ""
tooltip tooltip Tooltip to display next to the label of the choice group. string ""
value value The value of the selected choice button. string undefined

Events #

Event Description Type
duetChange Callback for when the value changed. CustomEvent<any>

Dependencies #

Depends on #

Graph #

graph TD;
duet-choice-group --> duet-tooltip
duet-choice-group --> duet-spacer
duet-choice-group --> duet-paragraph
duet-tooltip --> duet-visually-hidden
style duet-choice-group fill:#f9f,stroke:#333,stroke-width:4px

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.



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

Server Side Rendering


Troubleshooting

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