Out of the box validation for checkbox groups

[peeke]

It would be nice to have a validation rule (and accompanying example) for a checkbox group, with a required value.

[EECOLOR]

And the checkbox group would result in an array of values?

[peeke]

Yep, currently trying to implement this in the Full example using the array field.

[EECOLOR]

Let me know if you need help

[peeke]

I had typed up a whole essay, but forgot to press 'Comment', so this will probably be a tl:dr;-like version.

I had some trouble using the array type, from the Full example and the provided helpers, it seemed to be geared more towards an array of repeating fields, not an array of values. I based my decision to use the array type on this thread: https://kaliberinteract.slack.com/archives/C025GRZUL/p1614854341025800, but I'm wondering if that's the exact same usecase.

What I tried was something along these lines:

const fields = {
  gevondenVia: array(minLength(1), {
    vrienden: optional,
    google: optional,
    reclame: optional
  })
}

<FormArrayGroupField
  field={fields.gevondenVia}
  render={({ fields }) =>
    <fieldset>
      <legend>Gevonden via</legend>
      <FormCheckbox label='Vrienden' field={fields.vrienden} />
      <FormCheckbox label='Google' field={fields.google} />
      <FormCheckbox label='Reclame' field={fields.reclame} />
    </fieldset>
  }
/>

Though adding a value to this array using the helpers returned by useArrayFormField adds an object with all these fields to the array, resulting in - for instance - this value:

const value = {
  gevondenVia: [
    { vrienden: true, google: false, reclame: false },
    { vrienden: false, google: true, reclame: false }
  ]
}

What I'd like to see, is just:

const value = {
  gevondenVia: ['vrienden', 'google']
}

It might be easier to use a regular form field and use an array as value. Something like the below. Maybe I'm missing something?

const fields = {
  gevondenVia: minLength(1)
}

<FormCheckboxGroupField field={fields.gevondenVia} options={[
  { value: 'vrienden', label: 'Vrienden' },
  { value: 'google', label: 'Google' },
  { value: 'reclame', label: 'Reclame' }
]} />

export function FormCheckboxGroupField({ field, options }) {
  const { name, state, eventHandlers: { onChange, ...eventHandlers } } = useFormField(field)
  const { value: fieldValue = [] } = state

  return (
    <div>
      {options.map(({ value, label }, i) => {
        return (
          <label>
            <input
              key={`${name}-${i}`}
              id={`${name}-${i}`}
              type='checkbox'
              checked={fieldValue.includes(value)}
              onChange={handleChange}
              {...{ value, name }}
              {...eventHandlers}
            />
            <span>{label}</span>
          </label>
        )
      })}
    </div>
  )

  function handleChange(e) {
    const value = e.target.value
    const checked = groupValue.includes(value)

    if (e.target.checked !== checked) {
      onChange(checked ? groupValue.concat(value) : groupValue.filter(x => x !== value))
    }
  }
}

[EECOLOR]

Yes, handling it as a regular field is the way to go.

When creating the version in the Full example you can change two things about your POC:

• Add error display
• Change the signature of handleChange to something like checked => e => undefined