Skip to main content
LocalTapiola Turva

Radio ready

Radio Buttons are graphical interface elements that allow user to choose only one of a predefined set of mutually exclusive options.

Examples

Open in new window
<duet-radio checked label="Checked"></duet-radio>

<script>
  var radio = document.querySelector("duet-radio")
  radio.addEventListener("click", function(e) {
    console.log("Click in radio", e)
  })
  radio.addEventListener("duetBlur", function(e) {
    console.log("Blur in radio", e)
  })
  radio.addEventListener("duetFocus", function(e) {
    console.log("Focus in radio", e)
  })
</script>
Open in new window
<duet-radio label="Unchecked"></duet-radio>
Open in new window
<duet-radio checked disabled label="Disabled"></duet-radio>

Properties #

PropertyAttributeDescriptionTypeDefault
accessibleActiveDescendantaccessible-active-descendantIndicates the id of a related component’s visually focused element.stringundefined
accessibleControlsaccessible-controlsUse this prop to add an aria-controls attribute. Use the attribute to indicate the id of a component controlled by this component.stringundefined
accessibleOwnsaccessible-ownsIndicates the id of a component owned by the radio.stringundefined
checkedcheckedCheck state of the radio.booleanundefined
disableddisabledMakes the radio component disabled. This prevents users from being able to interact with the radio, and conveys its inactive state to assistive technologies.booleanfalse
groupDirectiongroup-directionDetermines, whether the control is displayed horizontally or vertically within a group.stringundefined
groupDisabledgroup-disabledDetermines, whether the control is disabled from the parent group.booleanundefined
identifieridentifierAdds a unique identifier for the radio.stringundefined
labellabelLabel for the radio.string"label"
marginmarginControls the margin of the component. Can be one of: "auto", "none".string"auto"
namenameName of the radio.stringundefined
roleroleDefines a specific role attribute for the input.stringundefined
themethemeTheme of the radio. Can be one of: "default", "turva".string""
valuevalueThe value of the radio input does not mean if it's checked or not, use the checked property for that.stringundefined

Events #

EventDescriptionType
duetBlurEmitted when the checkbox loses focus.CustomEvent<any>
duetChangeEmitted when the checked property has changed.CustomEvent<any>
duetFocusEmitted when the checkbox has focus.CustomEvent<any>

Methods #

setFocus() => Promise<void> #

Sets focus on the specified duet-radio. Use this method instead of the global
input.focus().

Returns #

Type: Promise<void>


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.