Radio Buttons and Checkboxes

[receter]

My first naive thought was that for example a Checkbox could look like this:

<Checkbox checked={true} onChange={handleCheckbox}>Accept Terms</Checkbox>

But what if I need a Checkbox without a label?

I could just pass no child.

But what would then be rendered?

<label><input …></label>

I don't like that because the label is not at all expected IMO.

<input …>

<div><input …></div>

Just the input or the input wrapped in a div? No, that would mean that the wrapping element changes and <Checkbox> suddenly can be either <label> or <input>/<div>, not a fan of that idea either.

Maybe there could be an additional component for just the checkbox?

<Checkbox … />
<CheckboxInput … />

Hm.

Or the other way around?

<LabeledCheckbox … />
<Checkbox … />

Hm.

Not that bad…

But the "labeling" of a checkbox is something that might be needed for other components as well, like a <LabeledRadio>

This brings me to yet another solution:

<LabeledControl control={<Checkbox …/>}>
  Accept Terms
</LabeledControl>

This is quite verbose but that also does make it more clear IMO. A consumer can create a local component like<MyLabeledCheckbox> and use that instead of the more verbose markup.

Radio Groups

In HTML there is no "radio group" element. Instead a group is defined by the name attribute. And I think this library should per default also use this logic. But I understand that managing the name in a bigger application can be difficult as it must be unique in the current DOM. If a page renders two components with radio groups with the same name it would conflict.

To solve this, I think there could be a (optional) group component that manages this.

Like a <CheckboxGroup> or a <RadioGroup>

To learn more, I will now create a prototype to play and link the PR.

edit:
Here it is: #25

[receter]

Radio Groups

I am not sure anymore about making a RadioGroup/CheckboxGroup component anymore. The idea was something like:

<RadioGroup
  onChange={handleChangeRadioGroup}
>
  <LabeledControl control={<Radio value={1} />}>
    Option 1
  </LabeledControl>
  <LabeledControl control={}>
    Option 2
  </LabeledControl>
</RadioGroup>

RadioGroup would create a context that is consumed by Radio and automatically sets the name and onChange attributes.

While this would be quite handy it also adds logic to Radio that is not really needed when Radio is used on its own. Also the RadioGroup could quite easily be made locally (by the lib consumer) by creating a MyRadioGroup and MyRadio.

Further it is not obvious to me what html element to use. Most of the time no element would be best I think.

I tried a few different things and this is what I like most for now:

function ComponentWithRadioGroup() {
  const [groupValue, setGroupValue] = useState("42");

  const radioProps = useRadioGroup({
    value: groupValue,
    onChangeValue: (value) => setGroupValue(value),
    onChange: (e) => console.log(e),
  });

  return (
    <>
      <Radio {...radioProps("42")} /> Option 1;
      <Radio {...radioProps("hello")} /> Option 2;
      <Radio {...radioProps("43")} /> Option 3;
    </>
  );
}

function useRadioGroup<T extends string>({
  value,
  onChangeValue,
  onChange,
}: {
  value: T;
  onChangeValue?: (value: T) => void;
  onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
}) {
  const handleChange = useCallback(
    (e: React.ChangeEvent<HTMLInputElement>) => {
      onChange?.(e);
      if (e.target.checked) {
        onChangeValue?.(e.target.value as T);
      }
    },
    [onChange, onChangeValue],
  );

  const name = useMemo(() => uniqueId('sys42-radio-group-'), []);

  return function (radioButtonValue: T) {
    return {
      checked: value === radioButtonValue,
      onChange: handleChange,
      value: radioButtonValue,
      name,
    };
  };
}