FORMS

Custom Checkbox

A clean custom checkbox with a modern dark style, smooth animation, and a clear checked state for forms and settings panels.

HTML
<label class="custom-checkbox">

  <input type="checkbox">

  <span class="checkbox-box">

    <svg viewBox="0 0 24 24" aria-hidden="true">
      <path d="M5 12l4 4L19 6"></path>
    </svg>

  </span>

  <span class="checkbox-text">
    Enable notifications
  </span>

</label>
CSS
.custom-checkbox{
  display:inline-flex;
  align-items:center;
  gap:12px;

  color:#c7d2e5;
  font-size:15px;

  cursor:pointer;
  user-select:none;
}

.custom-checkbox input{
  position:absolute;
  opacity:0;
  pointer-events:none;
}

.checkbox-box{
  width:22px;
  height:22px;

  display:flex;
  align-items:center;
  justify-content:center;

  border:1px solid #33445f;
  border-radius:6px;

  background:#0b1423;

  transition:.25s ease;
}

.checkbox-box svg{
  width:15px;
  height:15px;

  fill:none;
  stroke:#050914;
  stroke-width:3;
  stroke-linecap:round;
  stroke-linejoin:round;

  transform:scale(0);

  transition:.2s ease;
}

.custom-checkbox input:checked + .checkbox-box{
  border-color:#22d3ee;
  background:#22d3ee;

  box-shadow:
    0 0 16px rgba(34,211,238,.25);
}

.custom-checkbox input:checked + .checkbox-box svg{
  transform:scale(1);
}

.custom-checkbox:hover .checkbox-box{
  border-color:#22d3ee;
}

How This Custom Checkbox Works

This Custom Checkbox keeps a native HTML checkbox for its actual checked and unchecked state while replacing the browser’s default appearance with a custom CSS control. The visible component contains a square checkbox box, an SVG checkmark, and the text “Enable notifications.”

The entire component is wrapped in a .custom-checkbox label. This structure makes both the visible checkbox and its text clickable. Users do not need to click directly on the small square; clicking the surrounding label also changes the state of the checkbox.

Inside the label, the native <input type="checkbox"> appears before .checkbox-box. CSS visually hides the input using position: absolute, opacity: 0, and pointer-events: none. Although it is not visible, the native checkbox still maintains the checked state that CSS uses to determine how the custom box should look.

The .checkbox-box creates the visible control. It measures 22 Ă— 22px and uses Flexbox to center its SVG checkmark. In its default state, the box has a 1px #33445f border, a 6px border radius, and a dark #0b1423 background. A .25s ease transition smooths changes between the unchecked and checked appearances.

The checkmark itself is an inline SVG with a path running through the points defined by M5 12l4 4L19 6. CSS sets the SVG to 15 Ă— 15px and gives the path a dark #050914 stroke with a width of 3. Rounded line caps and joins soften the corners of the checkmark.

In the unchecked state, the SVG uses transform: scale(0), so the checkmark is hidden. When the native input becomes checked, the selector .custom-checkbox input:checked + .checkbox-box targets the visible box immediately after it. The box’s border and background both change to cyan #22d3ee, and a subtle cyan glow is added with box-shadow.

A second checked-state selector targets the SVG inside that box and changes its transform to scale(1). Because the SVG has a .2s ease transition, the checkmark grows smoothly into view when the checkbox is selected and shrinks away when it is cleared. For more information about styling controls according to their checked state, see the MDN :checked documentation.

The component also includes hover feedback. When the pointer moves over .custom-checkbox, the visible box’s border changes to cyan. This gives the user a visual indication that the label is interactive before the checkbox is selected.

No JavaScript is included in this component. The browser manages the checkbox state natively, and CSS handles the visual transition. The text says “Enable notifications,” but the current code does not contain logic that actually changes notification settings.

Customizing the Custom Checkbox

The component uses a small number of dimensions, colors, and transition values that can be adjusted directly in its existing CSS.

  • Change the 22 Ă— 22px .checkbox-box dimensions to make the checkbox larger or smaller.
  • Adjust the 15 Ă— 15px SVG dimensions to resize the checkmark independently.
  • Change the 6px border radius to make the box sharper or more rounded.
  • Replace #22d3ee to customize the checked background, border, hover state, and glow color.
  • Edit #0b1423 to change the unchecked checkbox background.
  • Change the SVG’s #050914 stroke color to adjust the contrast of the checkmark.
  • Modify the .25s box transition or .2s SVG transition to change the animation speed.
  • Replace “Enable notifications” inside .checkbox-text with the setting, consent option, or preference required by your form.

Where to Use This Custom Checkbox

This component is useful for independent choices where users need to turn an individual option on or off.

  • Notification preference forms
  • Terms and conditions confirmation
  • Newsletter subscription options
  • Privacy and account settings
  • Task completion controls
  • Filter and search interfaces
  • Feature preference forms

When users must select exactly one choice from several available options, the Custom Radio Buttons component is a more appropriate related control. For this checkbox, any actual notification or application-setting behavior would need to be connected separately because the current component only manages the native checked state and its CSS appearance.

Frequently Asked Questions

Does this Custom Checkbox require JavaScript?

No. The retrieved component contains no JavaScript. The native checkbox manages its checked state, and CSS uses :checked selectors to update the visible box and SVG.

How does the checkmark animation work?

The SVG begins with transform: scale(0). When the checkbox is checked, CSS changes it to scale(1). A .2s ease transition creates the grow-in and shrink-out effect.

Does checking it actually enable notifications?

No. “Enable notifications” is only the label text in this component. There is no JavaScript, browser notification API, or application-setting logic connected to the checkbox.

Can users click the text to select the checkbox?

Yes. The input, custom box, and text are all inside the same <label>. Clicking the visible text or box therefore changes the native checkbox state.

This Custom Checkbox uses the browser’s native checkbox state as its foundation while CSS provides the custom square, cyan selected state, SVG checkmark animation, hover feedback, and accompanying label.

Scroll to Top