.checkbox {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;

  label {
    display: flex;
    align-items: center;
    gap: 0 0.5rem;
    position: relative;
    cursor: pointer;
    background-color: var(--c-background, #fff);
    padding: 1rem;
    border-radius: 5px;
    border: 1px solid var(--c-border, #e4e4e7);

    &:has(:checked) {
      background-color: var(--c-primary, #2b7fff);
      border-color: var(--c-primary, #2b7fff);
      color: var(--c-white, #fff);
    }

    &:has(:checked)::before {
      background-color: var(--c-white, #fff);
      border-color: var(--c-white, #fff);
    }

    &:has(:checked)::after {
      position: absolute;
      top: 22px;
      left: 24px;
      transform: rotate(45deg);
      width: 6px;
      height: 12px;
      border: 1px solid var(--c-primary, #2b7fff);
      border-width: 0 3px 3px 0;
      content: "";
    }
  }

  label::before {
    width: 20px;
    height: 20px;
    border-radius: 4px;
    border: 2px solid var(--c-border, #e4e4e7);
    content: "";
  }

  input {
    display: none;
  }
}

Filled Box Checkboxes

Other Checkboxes UI parts

Vertical Outline Checkbox

Vertical Filled Checkbox

Horizontal Outline Checkboxes

Other CSS UI parts

Accordions

Balloons

Boxes

Breadcrumbs

Buttons

Checkboxes

Headings and Texts

Icons

Lists

Paginations

Quotations

Read More

Search Forms

Select Boxes

Switches

Tabs

Text Boxes

Tooltips

Stack Layouts

Standard Layout

Headers