Checkbox theme
NbCheckboxComponent
| Name | Theme Variable | Default Value | Description |
| checkbox-height | 1.25rem | ||
| checkbox-width | 1.25rem | ||
| checkbox-border-style | solid | ||
| checkbox-border-width | 1px | ||
| checkbox-border-radius | 3px | ||
| checkbox-outline-width | outline-width | 0.375rem | |
| checkbox-outline-color | outline-color | rgba(143, 155, 179, 0.16) | |
| checkbox-text-font-family | text-subtitle-2-font-family | Open Sans, sans-serif | |
| checkbox-text-font-size | text-subtitle-2-font-size | 0.8125rem | |
| checkbox-text-font-weight | text-subtitle-2-font-weight | 600 | |
| checkbox-text-line-height | text-subtitle-2-line-height | 1.5rem | |
| checkbox-text-space | 0.6875rem | ||
| checkbox-padding | unknown | ||
| checkbox-focus-inset-shadow-length | 0, 0, 0, 100vmax | ||
| checkbox-basic-text-color | text-basic-color | #222b45 | |
| checkbox-basic-background-color | color-basic-transparent-default | rgba(143, 155, 179, 0.08) | |
| checkbox-basic-border-color | color-basic-transparent-default-border | #8f9bb3 | |
| checkbox-basic-checked-background-color | color-primary-default | #3366ff | |
| checkbox-basic-checked-border-color | color-primary-default-border | #3366ff | |
| checkbox-basic-checked-checkmark-color | text-control-color | #ffffff | |
| checkbox-basic-indeterminate-background-color | color-primary-default | #3366ff | |
| checkbox-basic-indeterminate-border-color | color-primary-default-border | #3366ff | |
| checkbox-basic-indeterminate-checkmark-color | text-control-color | #ffffff | |
| checkbox-basic-focus-background-color | color-basic-transparent-focus | rgba(143, 155, 179, 0.24) | |
| checkbox-basic-focus-border-color | color-basic-transparent-focus-border | #8f9bb3 | |
| checkbox-basic-focus-checked-background-color | color-primary-focus | #274bdb | |
| checkbox-basic-focus-checked-border-color | color-primary-focus-border | #1a34b8 | |
| checkbox-basic-hover-background-color | color-primary-transparent-hover | rgba(51, 102, 255, 0.16) | |
| checkbox-basic-hover-border-color | color-primary-transparent-hover-border | #3366ff | |
| checkbox-basic-hover-checked-background-color | color-primary-hover | #598bff | |
| checkbox-basic-hover-checked-border-color | color-primary-hover-border | #598bff | |
| checkbox-basic-active-background-color | color-basic-transparent-active | rgba(143, 155, 179, 0.24) | |
| checkbox-basic-active-border-color | color-basic-transparent-active-border | #8f9bb3 | |
| checkbox-basic-active-checked-background-color | color-primary-active | #274bdb | |
| checkbox-basic-active-checked-border-color | color-primary-active-border | #274bdb | |
| checkbox-basic-disabled-background-color | color-basic-transparent-disabled | rgba(143, 155, 179, 0.16) | |
| checkbox-basic-disabled-border-color | color-basic-transparent-disabled-border | rgba(143, 155, 179, 0.24) | |
| checkbox-basic-disabled-checkmark-color | text-control-color | #ffffff | |
| checkbox-basic-disabled-text-color | text-disabled-color | rgba(143, 155, 179, 0.48) | |
| checkbox-basic-disabled-checked-background-color | color-basic-transparent-600 | rgba(143, 155, 179, 0.48) | |
| checkbox-primary-text-color | text-basic-color | #222b45 | |
| checkbox-primary-background-color | color-primary-transparent-default | rgba(51, 102, 255, 0.08) | |
| checkbox-primary-border-color | color-primary-transparent-default-border | #3366ff | |
| checkbox-primary-checked-background-color | color-primary-default | #3366ff | |
| checkbox-primary-checked-border-color | color-primary-default-border | #3366ff | |
| checkbox-primary-checked-checkmark-color | text-control-color | #ffffff | |
| checkbox-primary-indeterminate-background-color | color-primary-default | #3366ff | |
| checkbox-primary-indeterminate-border-color | color-primary-default-border | #3366ff | |
| checkbox-primary-indeterminate-checkmark-color | text-control-color | #ffffff | |
| checkbox-primary-focus-background-color | color-primary-transparent-focus | rgba(51, 102, 255, 0.24) | |
| checkbox-primary-focus-border-color | color-primary-transparent-focus-border | #3366ff | |
| checkbox-primary-focus-checked-background-color | color-primary-focus | #274bdb | |
| checkbox-primary-focus-checked-border-color | color-primary-focus-border | #1a34b8 | |
| checkbox-primary-hover-background-color | color-primary-transparent-hover | rgba(51, 102, 255, 0.16) | |
| checkbox-primary-hover-border-color | color-primary-transparent-hover-border | #3366ff | |
| checkbox-primary-hover-checked-background-color | color-primary-hover | #598bff | |
| checkbox-primary-hover-checked-border-color | color-primary-hover-border | #598bff | |
| checkbox-primary-active-background-color | color-primary-transparent-active | rgba(51, 102, 255, 0.24) | |
| checkbox-primary-active-border-color | color-primary-transparent-active-border | #3366ff | |
| checkbox-primary-active-checked-background-color | color-primary-active | #274bdb | |
| checkbox-primary-active-checked-border-color | color-primary-active-border | #274bdb | |
| checkbox-primary-disabled-background-color | color-basic-transparent-disabled | rgba(143, 155, 179, 0.16) | |
| checkbox-primary-disabled-border-color | color-basic-transparent-disabled-border | rgba(143, 155, 179, 0.24) | |
| checkbox-primary-disabled-checkmark-color | text-control-color | #ffffff | |
| checkbox-primary-disabled-text-color | text-disabled-color | rgba(143, 155, 179, 0.48) | |
| checkbox-primary-disabled-checked-background-color | color-basic-transparent-600 | rgba(143, 155, 179, 0.48) | |
| checkbox-success-text-color | text-basic-color | #222b45 | |
| checkbox-success-background-color | color-success-transparent-default | rgba(0, 214, 143, 0.08) | |
| checkbox-success-border-color | color-success-transparent-default-border | #00d68f | |
| checkbox-success-checked-background-color | color-success-default | #00d68f | |
| checkbox-success-checked-border-color | color-success-default-border | #00d68f | |
| checkbox-success-checked-checkmark-color | text-control-color | #ffffff | |
| checkbox-success-indeterminate-background-color | color-success-default | #00d68f | |
| checkbox-success-indeterminate-border-color | color-success-default-border | #00d68f | |
| checkbox-success-indeterminate-checkmark-color | text-control-color | #ffffff | |
| checkbox-success-focus-background-color | color-success-transparent-focus | rgba(0, 214, 143, 0.24) | |
| checkbox-success-focus-border-color | color-success-transparent-focus-border | #00d68f | |
| checkbox-success-focus-checked-background-color | color-success-focus | #00b887 | |
| checkbox-success-focus-checked-border-color | color-success-focus-border | #00997a | |
| checkbox-success-hover-background-color | color-success-transparent-hover | rgba(0, 214, 143, 0.16) | |
| checkbox-success-hover-border-color | color-success-transparent-hover-border | #00d68f | |
| checkbox-success-hover-checked-background-color | color-success-hover | #2ce69b | |
| checkbox-success-hover-checked-border-color | color-success-hover-border | #2ce69b | |
| checkbox-success-active-background-color | color-success-transparent-active | rgba(0, 214, 143, 0.24) | |
| checkbox-success-active-border-color | color-success-transparent-active-border | #00d68f | |
| checkbox-success-active-checked-background-color | color-success-active | #00b887 | |
| checkbox-success-active-checked-border-color | color-success-active-border | #00b887 | |
| checkbox-success-disabled-background-color | color-basic-transparent-disabled | rgba(143, 155, 179, 0.16) | |
| checkbox-success-disabled-border-color | color-basic-transparent-disabled-border | rgba(143, 155, 179, 0.24) | |
| checkbox-success-disabled-checkmark-color | text-control-color | #ffffff | |
| checkbox-success-disabled-text-color | text-disabled-color | rgba(143, 155, 179, 0.48) | |
| checkbox-success-disabled-checked-background-color | color-basic-transparent-600 | rgba(143, 155, 179, 0.48) | |
| checkbox-info-text-color | text-basic-color | #222b45 | |
| checkbox-info-background-color | color-info-transparent-default | rgba(0, 149, 255, 0.08) | |
| checkbox-info-border-color | color-info-transparent-default-border | #0095ff | |
| checkbox-info-checked-background-color | color-info-default | #0095ff | |
| checkbox-info-checked-border-color | color-info-default-border | #0095ff | |
| checkbox-info-checked-checkmark-color | text-control-color | #ffffff | |
| checkbox-info-indeterminate-background-color | color-info-default | #0095ff | |
| checkbox-info-indeterminate-border-color | color-info-default-border | #0095ff | |
| checkbox-info-indeterminate-checkmark-color | text-control-color | #ffffff | |
| checkbox-info-focus-background-color | color-info-transparent-focus | rgba(0, 149, 255, 0.24) | |
| checkbox-info-focus-border-color | color-info-transparent-focus-border | #0095ff | |
| checkbox-info-focus-checked-background-color | color-info-focus | #006fd6 | |
| checkbox-info-focus-checked-border-color | color-info-focus-border | #0057c2 | |
| checkbox-info-hover-background-color | color-info-transparent-hover | rgba(0, 149, 255, 0.16) | |
| checkbox-info-hover-border-color | color-info-transparent-hover-border | #0095ff | |
| checkbox-info-hover-checked-background-color | color-info-hover | #42aaff | |
| checkbox-info-hover-checked-border-color | color-info-hover-border | #42aaff | |
| checkbox-info-active-background-color | color-info-transparent-active | rgba(0, 149, 255, 0.24) | |
| checkbox-info-active-border-color | color-info-transparent-active-border | #0095ff | |
| checkbox-info-active-checked-background-color | color-info-active | #006fd6 | |
| checkbox-info-active-checked-border-color | color-info-active-border | #006fd6 | |
| checkbox-info-disabled-background-color | color-basic-transparent-disabled | rgba(143, 155, 179, 0.16) | |
| checkbox-info-disabled-border-color | color-basic-transparent-disabled-border | rgba(143, 155, 179, 0.24) | |
| checkbox-info-disabled-checkmark-color | text-control-color | #ffffff | |
| checkbox-info-disabled-text-color | text-disabled-color | rgba(143, 155, 179, 0.48) | |
| checkbox-info-disabled-checked-background-color | color-basic-transparent-600 | rgba(143, 155, 179, 0.48) | |
| checkbox-warning-text-color | text-basic-color | #222b45 | |
| checkbox-warning-background-color | color-warning-transparent-default | rgba(255, 170, 0, 0.08) | |
| checkbox-warning-border-color | color-warning-transparent-default-border | #ffaa00 | |
| checkbox-warning-checked-background-color | color-warning-default | #ffaa00 | |
| checkbox-warning-checked-border-color | color-warning-default-border | #ffaa00 | |
| checkbox-warning-checked-checkmark-color | text-control-color | #ffffff | |
| checkbox-warning-indeterminate-background-color | color-warning-default | #ffaa00 | |
| checkbox-warning-indeterminate-border-color | color-warning-default-border | #ffaa00 | |
| checkbox-warning-indeterminate-checkmark-color | text-control-color | #ffffff | |
| checkbox-warning-focus-background-color | color-warning-transparent-focus | rgba(255, 170, 0, 0.24) | |
| checkbox-warning-focus-border-color | color-warning-transparent-focus-border | #ffaa00 | |
| checkbox-warning-focus-checked-background-color | color-warning-focus | #db8b00 | |
| checkbox-warning-focus-checked-border-color | color-warning-focus-border | #b86e00 | |
| checkbox-warning-hover-background-color | color-warning-transparent-hover | rgba(255, 170, 0, 0.16) | |
| checkbox-warning-hover-border-color | color-warning-transparent-hover-border | #ffaa00 | |
| checkbox-warning-hover-checked-background-color | color-warning-hover | #ffc94d | |
| checkbox-warning-hover-checked-border-color | color-warning-hover-border | #ffc94d | |
| checkbox-warning-active-background-color | color-warning-transparent-active | rgba(255, 170, 0, 0.24) | |
| checkbox-warning-active-border-color | color-warning-transparent-active-border | #ffaa00 | |
| checkbox-warning-active-checked-background-color | color-warning-active | #db8b00 | |
| checkbox-warning-active-checked-border-color | color-warning-active-border | #db8b00 | |
| checkbox-warning-disabled-background-color | color-basic-transparent-disabled | rgba(143, 155, 179, 0.16) | |
| checkbox-warning-disabled-border-color | color-basic-transparent-disabled-border | rgba(143, 155, 179, 0.24) | |
| checkbox-warning-disabled-checkmark-color | text-control-color | #ffffff | |
| checkbox-warning-disabled-text-color | text-disabled-color | rgba(143, 155, 179, 0.48) | |
| checkbox-warning-disabled-checked-background-color | color-basic-transparent-600 | rgba(143, 155, 179, 0.48) | |
| checkbox-danger-text-color | text-basic-color | #222b45 | |
| checkbox-danger-background-color | color-danger-transparent-default | rgba(255, 61, 113, 0.08) | |
| checkbox-danger-border-color | color-danger-transparent-default-border | #ff3d71 | |
| checkbox-danger-checked-background-color | color-danger-default | #ff3d71 | |
| checkbox-danger-checked-border-color | color-danger-default-border | #ff3d71 | |
| checkbox-danger-checked-checkmark-color | text-control-color | #ffffff | |
| checkbox-danger-indeterminate-background-color | color-danger-default | #ff3d71 | |
| checkbox-danger-indeterminate-border-color | color-danger-default-border | #ff3d71 | |
| checkbox-danger-indeterminate-checkmark-color | text-control-color | #ffffff | |
| checkbox-danger-focus-background-color | color-danger-transparent-focus | rgba(255, 61, 113, 0.24) | |
| checkbox-danger-focus-border-color | color-danger-transparent-focus-border | #ff3d71 | |
| checkbox-danger-focus-checked-background-color | color-danger-focus | #db2c66 | |
| checkbox-danger-focus-checked-border-color | color-danger-focus-border | #b81d5b | |
| checkbox-danger-hover-background-color | color-danger-transparent-hover | rgba(255, 61, 113, 0.16) | |
| checkbox-danger-hover-border-color | color-danger-transparent-hover-border | #ff3d71 | |
| checkbox-danger-hover-checked-background-color | color-danger-hover | #ff708d | |
| checkbox-danger-hover-checked-border-color | color-danger-hover-border | #ff708d | |
| checkbox-danger-active-background-color | color-danger-transparent-active | rgba(255, 61, 113, 0.24) | |
| checkbox-danger-active-border-color | color-danger-transparent-active-border | #ff3d71 | |
| checkbox-danger-active-checked-background-color | color-danger-active | #db2c66 | |
| checkbox-danger-active-checked-border-color | color-danger-active-border | #db2c66 | |
| checkbox-danger-disabled-background-color | color-basic-transparent-disabled | rgba(143, 155, 179, 0.16) | |
| checkbox-danger-disabled-border-color | color-basic-transparent-disabled-border | rgba(143, 155, 179, 0.24) | |
| checkbox-danger-disabled-checkmark-color | text-control-color | #ffffff | |
| checkbox-danger-disabled-text-color | text-disabled-color | rgba(143, 155, 179, 0.48) | |
| checkbox-danger-disabled-checked-background-color | color-basic-transparent-600 | rgba(143, 155, 179, 0.48) | |
| checkbox-control-text-color | text-control-color | #ffffff | |
| checkbox-control-background-color | color-control-transparent-default | rgba(255, 255, 255, 0.08) | |
| checkbox-control-border-color | color-control-transparent-default-border | #ffffff | |
| checkbox-control-checked-background-color | color-control-default | #ffffff | |
| checkbox-control-checked-border-color | color-control-default-border | #ffffff | |
| checkbox-control-checked-checkmark-color | color-basic-800 | #222b45 | |
| checkbox-control-indeterminate-background-color | color-control-default | #ffffff | |
| checkbox-control-indeterminate-border-color | color-control-default-border | #ffffff | |
| checkbox-control-indeterminate-checkmark-color | color-basic-800 | #222b45 | |
| checkbox-control-focus-background-color | color-control-transparent-focus | rgba(255, 255, 255, 0.24) | |
| checkbox-control-focus-border-color | color-control-transparent-focus-border | #ffffff | |
| checkbox-control-focus-checked-background-color | color-control-focus | #edf1f7 | |
| checkbox-control-focus-checked-border-color | color-control-focus-border | #c5cee0 | |
| checkbox-control-hover-background-color | color-control-transparent-hover | rgba(255, 255, 255, 0.16) | |
| checkbox-control-hover-border-color | color-control-transparent-hover-border | #ffffff | |
| checkbox-control-hover-checked-background-color | color-control-hover | #f7f9fc | |
| checkbox-control-hover-checked-border-color | color-control-hover-border | #f7f9fc | |
| checkbox-control-active-background-color | color-control-transparent-active | rgba(255, 255, 255, 0.24) | |
| checkbox-control-active-border-color | color-control-transparent-active-border | #ffffff | |
| checkbox-control-active-checked-background-color | color-control-active | #edf1f7 | |
| checkbox-control-active-checked-border-color | color-control-active-border | #edf1f7 | |
| checkbox-control-disabled-background-color | color-control-transparent-disabled | rgba(143, 155, 179, 0.16) | |
| checkbox-control-disabled-border-color | color-control-transparent-disabled-border | rgba(143, 155, 179, 0.24) | |
| checkbox-control-disabled-checkmark-color | text-control-color | #ffffff | |
| checkbox-control-disabled-text-color | text-control-color | #ffffff | |
| checkbox-control-disabled-checked-background-color | color-basic-transparent-600 | rgba(143, 155, 179, 0.48) |
Previous page
Toggle
Next page
Need some help or found an issue?
Ask on Stack Overflow with tag `nebular` or post an issue on GitHub.