Important

We are updating the images for OroCommerce version 6.1 to align with the latest changes in the back-office design. During this transition, some images may still show older versions. Thank you for your patience as we work to update all visuals to reflect these changes.

How to Customize Checkboxes

To customize checkboxes, change the following base variables:

// Variables for both checkbox and radio
$checkbox-background: get-var-color('neutral', 'white-100');
$checkbox-size: 16px;
$checkbox-size-var: var(--checkbox-size, #{$checkbox-size});
$checkbox-border: 1px solid get-var-color('neutral', 'grey3');
$checkbox-color: get-var-color('neutral', 'white-100');
$checkbox-border-radius: 3px;

// Variables for checkbox icon
$checkbox-icon-size: 16px;
$checkbox-icon-line-height: 1;
$checkbox-icon-checked: url('data:image/svg+xml;utf8, <svg>...</svg>');
$checkbox-icon-indeterminate: url('data:image/svg+xml;utf8, <svg>...</svg>');
$checkbox-icon-place-self: center;
$checkbox-icon-opacity: 0;
$checkbox-icon-opacity-checked: 1;

// Checked
$checkbox-background-checked: get-var-color('primary', 'main');
$checkbox-border-color-checked: get-var-color('primary', 'main');

// Indeterminate
$checkbox-background-indeterminate: get-var-color('primary', 'main');
$checkbox-border-color-indeterminate: get-var-color('primary', 'main');

// Hover
$checkbox-background-hover: get-var-color('primary', 'hover');
$checkbox-border-color-hover: get-var-color('primary', 'hover');

// Disable
$checkbox-border-color-disabled:get-var-color('neutral', 'grey2');
$checkbox-background-checked-disabled: get-var-color('neutral', 'grey1');
$checkbox-border-color-checked-disabled: get-var-color('neutral', 'grey2');
$checkbox-color-disabled: get-var-color('text', 'disabled');

// Variables for radio
$checkbox-radio-border-radius: 50%;

$checkbox-radio-icon-content: '';
$checkbox-radio-icon-background-checked: get-var-color('primary', 'main');
$checkbox-radio-icon-size: 12px;
$checkbox-radio-icon-border-radius: 50%;

Change Checkbox Size

You can update the checkbox size globally via the $checkbox-size variable. To change the size in a specific place, use css-variable --checkbox-size.

.custom-checkbox {
    --checkbox-size: 13px;
}

Change Checkbox Color

To change the base checkbox color, update the following variables:

// Checked
$checkbox-background-checked: get-var-color('primary', 'main');
$checkbox-border-color-checked: get-var-color('primary', 'main');

// Indeterminate
$checkbox-background-indeterminate: get-var-color('primary', 'main');
$checkbox-border-color-indeterminate: get-var-color('primary', 'main');

// Hover
$checkbox-background-hover: get-var-color('primary', 'hover');
$checkbox-border-color-hover: get-var-color('primary', 'hover');

// Disable
$checkbox-border-color-disabled: get-var-color('neutral', 'grey2');
$checkbox-background-checked-disabled: get-var-color('neutral', 'grey1');
$checkbox-border-color-checked-disabled: get-var-color('neutral', 'grey2');

To change colors dynamically, use the same approach as with the checkbox size using the css-variable.

// Checked
$checkbox-background-checked: var(--checkbox-skin-color, get-var-color('primary', 'main'));
$checkbox-border-color-checked: var(--checkbox-skin-color, get-var-color('primary', 'main'));

You can then change the color dynamically via JavaScript by setting the value of the css-variable:

<input type="checkbox" style="--checkbox-skin-color: #380;">