@taiga-ui/addon-mobile/styles/ios/checkbox.less

Extension package for Taiga UI that adds support for mobile specific behaviors such as custom data pickers, dropdowns, etc.

input[tuiCheckbox],
input[tuiRadio] {
    --t-size: 1.375rem;

    border-radius: 100%;
    color: var(--tui-text-primary-on-accent-2) !important;
    outline: 1px solid var(--tui-background-neutral-2);
    outline-offset: -1px;
    transition: none;
    box-shadow: none !important;
    background: var(--t-background) !important;

    &:checked,
    &:not([tuiRadio]):indeterminate {
        --t-background: var(--tui-background-accent-2);

        outline: none;

        &:disabled:not(._readonly) {
            --t-background: var(--tui-background-neutral-2);
        }

        &::before {
            display: block;
            transform: none;
            mask: var(--t-icon) center/100%;
        }

        &:invalid {
            --t-background: var(--tui-status-negative);
        }
    }

    &::before {
        --t-icon: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="none" preserveAspectRatio="xMidYMid meet" height="100%" width="100%"><path d="M12.3368 4.33683C12.7859 3.88772 13.5141 3.88772 13.9632 4.33683C14.4123 4.78593 14.4123 5.51407 13.9632 5.96317L6.96317 12.9632C6.51407 13.4123 5.78593 13.4123 5.33683 12.9632L2.33683 9.96317C1.88772 9.51407 1.88772 8.78593 2.33683 8.33683C2.78593 7.88772 3.51407 7.88772 3.96317 8.33683L6.15 10.5237L12.3368 4.33683Z" fill="black"/></svg>');

        display: none;
        inline-size: 1rem;
        block-size: 1rem;
    }

    &:not([tuiRadio]):indeterminate::before {
        --t-icon: url('data:image/svg+xml,<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><rect x="2" y="7" width="12" height="2.3" rx="1.15" fill="black" /></svg>');
    }

    &:invalid {
        outline-color: var(--tui-status-negative-pale-hover);
    }
}