Checkboxes & Switches

All checkbox, switch, and toggle components

SkrCheckbox — States

The main checkbox component used across 25+ locations. Wraps v-checkbox with custom icons, dynamic color binding, and label styling that bolds on check.

Unchecked

Checked

Disabled

Indeterminate

Required (validation)

SkrCheckbox — Colors

Default is primary. Error color used for destructive confirmations (delete account, remove domain). Grey-darker used for batch selection and filters.

Primary (default)

Error

Grey-darker

SkrCheckbox — Icon Sizes

Default 24px. Smaller 20px used in compact filter contexts (SentByMeFilter).

Default size (24px)

Small icon (20px)

SkrCheckbox — Slot Label

Rich content via slot instead of plain label prop. Used for terms acceptance with links (signup, GTC forms, upgrade dialogs).

I agree to the Terms and Conditions and Privacy Policy

SettingsCheckbox

Label on left, checkbox on right. Bold label when checked. Enterprise badge for gated features. Used in business/settings.vue for feature toggles.

Enable email notifications

Allow batch signing

Custom branding

enterprise

Disabled feature

SkrSwitch

Toggle switch wrapping v-switch with custom track and thumb styling. Used for on/off settings.

Off

Dark mode