Checkbox

A simple checkbox.

Example

Props

    🕹ī¸ standard props
    value
    boolean
    The checked state of the checkbox.
    false
    id
    string
    The id of the checkbox element.
    undefined
    disabled
    boolean
    Whether the checkbox is disabled.
    false
    🎨 style props
    --checkbox-active-color
    color
    The background color of the checkbox when it is checked.
    rgb(var(--global-color-primary-500))
    --checkbox-active-inner-color
    color
    The color of the checkmark inside the checkbox when checked.
    rgb(var(--global-color-grey-50))
    --checkbox-focus-shadow
    shadow
    The shadow effect when the checkbox is focused.
    2px rgb(var(--global-color-primary-500), .3)
    --checkbox-border-color
    color
    The border color of the checkbox.
    rgb(var(--global-color-contrast-300), .2)
    --checkbox-border-hover-color
    color
    The border color when the checkbox is hovered.
    rgb(var(--global-color-primary-500))
    --checkbox-background-color
    color
    The background color of the checkbox.
    rgb(var(--global-color-background-200))
    --checkbox-disabled-color
    color
    The background color of the checkbox when disabled.
    rgb(var(--global-color-background-200), .5)
    --checkbox-disabled-active-color
    color
    The color of the checkbox when it is disabled and checked.
    rgb(var(--global-color-primary-500))

Slots

    No data available

Events

    onchange
    Triggered when the checkbox value changes.
    AttributeTypeDescription
    shiftKeyPressedbooleanIndicates whether the Shift key is pressed during the change event.
    nativeEventEventThe original event object.