Skip to main content
LocalTapiola Turva

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" direction="vertical" value="one" name="group1">
  <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>
  var radioGroup = document.querySelector("duet-radio-group")
  radioGroup.addEventListener("duetChange", function(e) {
    console.log("Option changed in radio group", e)
  })
</script>
Open in new window
<duet-radio-group 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>

Properties #

PropertyAttributeDescriptionTypeDefault
directiondirectionDirection of the radio group. Can be one of: "vertical", "horizontal".string"vertical"
disableddisabledDetermines, whether the control is disabled or not.booleanundefined
errorerrorDisplay radio group in error state along with an error message.string""
labellabelLegend displayed for the radio buttons in this group.string"Label"
marginmarginControls the margin of the component. Can be one of: "auto", "none".string"auto"
namenamename for the radio buttons within this group.stringundefined
themethemeTheme of the radio group. Can be one of: "default", "turva".string""
valuevalueThe value of the selected radio button.stringundefined

Events #

EventDescriptionType
duetChangeCallback for when the value changed.CustomEvent<any>

Integration

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