@cas-smartdesign/checkbox

A checkbox element based on lit-element with SmartDesign look & feel.

Attributes

• label: string
  • The label of the checkbox.
• disabled: boolean
  • Defines whether if the checkbox is disabled. Note that it uses default disabled attribute, thus blocking pointer/mouse events.
• checked: boolean
  • The value of the checkbox.
• oneline: boolean
  • The label of the checkbox may wrap into multiple lines without this option.

Properties

• label, disabled, checked, oneline
  • Reflects the corresponding attribute
• indeterminate boolean (default=false)
  • Defines whether if the checkbox is in indeterminate state
    • When either this or the checked property becomes true then the other one becomes false

CSS Custom Properties

• --sd-checkbox-size
  • Defines the size of the checkbox, defaults to 20px
• --sd-checkbox-highlight-size
  • Defines the size of the highlight area around the checkbox, defaults to 4px
• --sd-checkbox-label-gap-size
  • Defines the gap size between the checkbox and the label, defaults to 6px
• --sd-checkbox-border-color
  • Defines the default border color of the checkbox, defaults to #808080
• --sd-checkbox-border-width
  • Defines the border width of the checkbox, defaults to 2px
• --sd-checkbox-background-color
  • Defines the default background of the checkbox, defaults to #FFFFFF
• --sd-checkbox-focused-border-color
  • Defines the border color for the checkbox in focused state, defaults to #1467ba
• --sd-checkbox-focused-highlight-color
  • Defines the highlight color for the checkbox in focused state, defaults to rgba(20, 103, 186, 0.3) (#1467ba with 0.3 alpha)
• --sd-checkbox-checked-border-color
  • Defines the border color for the checked state, defaults to #1467ba
• --sd-checkbox-checked-background-color
  • Defines the background color for the checked state, defaults to #1467ba
• --sd-checkbox-checked-icon
  • Defines the checkbox checked state icon, defaults to a white checkmark icon
• --sd-checkbox-indeterminate-border-color
  • Defines the border color for the indeterminate state, defaults to #1467ba
• --sd-checkbox-indeterminate-background-color
  • Defines the background color for the indeterminate state, defaults to #1467ba
• --sd-checkbox-indeterminate-icon
  • Defines the checkbox indeterminate state icon, defaults to a white horizontal line

Custom events

• value-change
  • This event is dispatched when the value is changed because of a user interaction

Validation

The element could show validation messages via an sd-field-validation-message element which can be configured with the following attributes & properties which are all delegated to that:

• validationMessage
• validationIconSrc
• validationLevel