UI MarCom 3

Checkboxes Stable

Checkboxes are input elements for managing selections, for example, in forms or filters. They can be used for multiple selection.

<uimc-checkbox
>

</uimc-checkbox>

AttributeDescriptionValuesDefault
checkedReflects the checked state
invalidWarns about invalidity of the input
disabledDisables interaction on this element
hint-textPuts a small helpful text below
valueSets the value of the input
idOverrides the generated id for input and label with a custom oneuuid

CallbackArgumentDescription
onChangeObjectCallback function that gets triggered if the state of the component changes

SlotSlotted content
defaultLabel text is added as slotted content rather than a attribute

Working sample

Checkbox

Checkbox checked

Checkbox invalid

Checkbox disabled

Checkbox disabled but checked

<p>
    <uimc-checkbox
    >
      Checkbox
    </uimc-checkbox>
  </p>
  <p>
    <uimc-checkbox
      checked
    >
      Checkbox checked
    </uimc-checkbox>
  </p>
  <p>
    <uimc-checkbox
      invalid
      hintText="Please confirm this"
    >
      Checkbox invalid
    </uimc-checkbox>
  </p>
  <p>
    <uimc-checkbox
      disabled
    >
      Checkbox disabled
    </uimc-checkbox>
  </p>
  <p>
    <uimc-checkbox
      checked
      disabled
    >
      Checkbox disabled but checked
    </uimc-checkbox>
  </p>