UI MarCom 3

Radio Buttons Stable Radio Group under construction Dark theme

Radio buttons are input elements for managing selections, for example, in forms or filters. Only one in a group can be selected.

<uimc-radio-button
  label=""
></uimc-radio-button>

AttributeDescriptionValuesDefault
nameSets the name of the radio buttonString
labelSets the label of the radio buttonString
valueSets the value of the radio buttonString
checkedReflects the checked state
disabledDisables interaction on this element
idOverrides the generated id for input and label with a custom oneStringuuid
themeSet the color scheme of the componentlight, darklight

CallbackArgumentDescription
onChangecurrent radio buttonCallback function that gets triggered when it is checked
onClickeventCallback function that gets triggered when label or input is clicked

Working sample

<uimc-radio-button
  label="Radio button"
></uimc-radio-button>
<uimc-radio-button
  label=""
></uimc-radio-button>
<uimc-radio-button
  label="Radio button disabled"
  disabled="true"
></uimc-radio-button>
<uimc-radio-button
  label="Radio button disabled but checked"
  disabled="true"
  checked="true"
></uimc-radio-button>

Dark theme

<uimc-radio-button theme="dark"
  label="Radio button"
></uimc-radio-button>
<uimc-radio-button
  label=""
></uimc-radio-button>
<uimc-radio-button theme="dark"
  label="Radio button disabled"
  disabled="true"
></uimc-radio-button>
<uimc-radio-button theme="dark"
  label="Radio button disabled but checked"
  disabled="true"
  checked="true"
></uimc-radio-button>