UI MarCom 3

Checkboxes Stable Dark theme

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

<uimc-checkbox>
  Checkbox
</uimc-checkbox>

AttributeDescriptionValuesDefault
checkedReflects the checked state
indeterminateReflects the indeterminate state
invalidWarns about invalidity of the input
disabledDisables interaction on this element
hint-textPuts a small helpful text belowString
valueSets the value of the inputString
idOverrides the generated id for input and label with a custom oneuuid
themeSet the color scheme of the componentlight, darklight

CallbackArgumentDescription
onChangeObject with the isChecked state and the value of the checkboxCallback 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 samples

Checkbox

Checkbox checked

Checkbox indeterminate

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 indeterminate>
    Checkbox indeterminate
  </uimc-checkbox>
</p>
<p>
  <uimc-checkbox invalid hint-text="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>

Dark theme

Checkbox

Checkbox checked

Checkbox indeterminate

Checkbox invalid

Checkbox disabled

Checkbox disabled but checked

<p>
  <uimc-checkbox theme="dark">
    Checkbox
  </uimc-checkbox>
</p>
<p>
  <uimc-checkbox checked theme="dark">
    Checkbox checked
  </uimc-checkbox>
</p>
<p>
  <uimc-checkbox indeterminate theme="dark">
    Checkbox indeterminate
  </uimc-checkbox>
</p>
<p>
  <uimc-checkbox invalid hint-text="Please confirm this" theme="dark">
    Checkbox invalid
  </uimc-checkbox>
</p>
<p>
  <uimc-checkbox disabled theme="dark">
    Checkbox disabled
  </uimc-checkbox>
</p>
<p>
  <uimc-checkbox checked disabled theme="dark">
    Checkbox disabled but checked
  </uimc-checkbox>
</p>