Checkboxes Stable Dark theme

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

Usage Code

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

Attribute	Description	Values	Default
checked	Reflects the checked state	–	–
indeterminate	Reflects the indeterminate state	–	–
invalid	Warns about invalidity of the input	–	–
disabled	Disables interaction on this element	–	–
hint-text	Puts a small helpful text below	String	–
value	Sets the value of the input	String	–
id	Overrides the generated id for input and label with a custom one		uuid
theme	Set the color scheme of the component	`light`, `dark`	`light`

Callback	Argument	Description
onChange	Object with the `isChecked` state and the `value` of the checkbox	Callback function that gets triggered if the state of the component changes

Slot	Slotted content
default	Label 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>