Function Checkbox

example/src/components/form/Checkbox.jsx:5–43

({ label, name, options, values, onChange })

import Legend from './Legend';

function Checkbox({ label, name, options, values, onChange }) {
  const handleChange = useCallback(
    (event) => {
      const { value } = event.target;

      const nextValues = values.includes(value)
        ? values.filter((v) => v !== value)
        : [...values, value];

      onChange(nextValues);
    },
    [values, onChange]
  );

  return (
    <fieldset>
      <Legend>{label}</Legend>
      {options.map(({ value, label: optionLabel }) => {
        const fieldId = `${name}-${value}`;

        return (
          <div className="block" key={fieldId}>
            <input
              id={fieldId}
              name={name}
              value={value}
              type="checkbox"
              onChange={handleChange}
              checked={values.includes(value)}
            />
            <label htmlFor={fieldId} className="ml-2">
              {optionLabel}
            </label>
          </div>
        );
      })}
    </fieldset>
  );
}

Checkbox.propTypes = {
  label: T.string.isRequired,