CSS Checkbox & Radio Generator

Today

Create accessible checkbox and radio controls with custom checked, hover, focus and disabled states

InterfaceMotionAccessibility

Choice control

Element

Checkmark

Control size20px

Mark size11px

Border width2px

Radius5px

Label gap9px

Row gap12px

Unchecked fill

Unchecked border

Checked fill

Checked border

Mark

Label

CSS

.choice-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    color: #e8e8ec;
    font-size: 14px;
}

.choice-label {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    width: fit-content;
    cursor: pointer;
}

.choice-input {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
}

.choice-control {
    position: relative;
    display: grid;
    place-items: center;
    width: 20px;
    height: 20px;
    flex: 0 0 auto;
    border: 2px solid #52525b;
    border-radius: 5px;
    background: #18181b;
    transition: border-color 160ms ease, background 160ms ease, transform 160ms ease;
}

.choice-control::after {
    content: "";
    position: absolute;
    width: 6.050000000000001px;
    height: 11px;
    border-right: 2px solid #ffffff;
    border-bottom: 2px solid #ffffff;
    transform: translateY(-1px) scale(0) rotate(45deg);
    transition: transform 160ms ease;
}

.choice-label:hover .choice-control {
    border-color: #7c5cff;
}

.choice-input:checked + .choice-control {
    border-color: #7c5cff;
    background: #7c5cff;
}

.choice-input:checked + .choice-control::after {
    transform: translateY(-1px) scale(1) rotate(45deg);
}

.choice-input:focus-visible + .choice-control {
    outline: 2px solid #7c5cff;
    outline-offset: 3px;
}

.choice-input:disabled + .choice-control, .choice-label:has(.choice-input:disabled) {
    opacity: 0.4;
    cursor: not-allowed;
}

HTML

Just click on the desired preset

VioletSelected

Mint

Mono

Sunset

Ocean

Candy

Terminal

Cobalt

Sand

Outline

Feedback

Utility Lab

Utility Lab

CSS Checkbox & Radio Generator