Build custom radio/checkbox components compatible with use-form

[bencehusi]

Hi,

We have this fantastic guide for how to customize inputs with the Input component: https://mantine.dev/core/input/

Since radio and checkbox are inputs, I assumed it would work - it didn't.

So I went ahead and tried to build Radio and Checkbox myself. But no matter what I did, I couldn't make them work with the use-form hook.

So can anyone point me in the right direction on how I can make, e.g. a Radio and RadioGroup component that works the same as Mantine's and I can use with use-form?

The desired outcome

I want to be able to write this with my custom component:

<MyCustomRadioGroup {...form.getInputProps('myRadioField')}>
    <MyCustomRadio value="one" label="One" />
    <MyCustomRadio value="two" label="Two" />
</MyCustomRadioGroup>

Why I need a custom components?

I'm building radio buttons.

Currently, it is not possible to extract the state of a radio/checbox, so I can't give a different style for a checked radio card:

Unchecked:

Checked:

(there's a dark green border around the whole checked item and it doesn't have a shadow - in case you'd use dark mode)

But we have the CSS pseudo selector ::checked that could be utilized. But Mantine's input is wrapped with a div (which, in my opinion, is unnecessary), so we can't use input::checked ~ label, because the label is not the sibling of the input. So I need to rearrange it completely.

This is want I'd need:

[AndreiOrmanji]

@bencehusi, I guess the reason it does not work is bad return value of getInputProps. I've dumped value for boolean field of form and it showed me the following:

Documentation for Сheckbox says that props for reflecting its value are checked, defaultChecked, onChange. So to make everything work (for both controlled and uncontrolled mode of form, you should manually pass value to checked and defaultValue to defaultChecked, like so:

where const difficultySliderEnabledProps = getInputProps('difficultySliderEnabled');

CC @rtivital