Make Checkboxes behave like RadioGroup

[YO-SC]

Hello everyone 👋🏼 , this is a strange question but is there a way to make a CheckboxGroup behave like a RadioGroup.

I tried and did the research but I couldn't find anything helpful for my use case. I am using Next JS with Typescript and Tailwind CSS.

Here is some example started code if needed:

import { Checkbox, CheckboxGroup } from "@mantine/core";
import React from "react";

export default function Checkboxes() {
  return (
    <div>
      <CheckboxGroup
        defaultValue={["react"]}
        label="Select your favorite framework/library"
        description="This is anonymous"
        required
      >
        <Checkbox value="react" label="React" />
        <Checkbox value="svelte" label="Svelte" />
        <Checkbox value="ng" label="Angular" />
        <Checkbox value="vue" label="Vue" />
      </CheckboxGroup>
    </div>
  );
}

What I want to achieve is that when a checkbox is checked, the other would uncheck. Any help will be fantastic and highly appreciated. Mantine is a fantastic piece of work 💪🏼

[rtivital]

You should control CheckboxGroup value instead of using defaultValue. Other logic should be implemented on your side.

[YO-SC]

Alright, thanks for the comment. I will try an implementation around that idea 👍🏼