Chakra UI Checkbox Custom Validation: One Required

[hjaber]

Hello RHF community,

If anyone could lend a hand, I am struggling to find the logic with getValues() to require at least one checkbox to be checked with error messages using a controller with Chakra UI.

Thanks!

Codesandbox Link

[JamesWong1999]

Maybe it's easier to wrap the controller around the entire checkbox group? then you can use validate function to check one of them are checked.

[hjaber]

Maybe it's easier to wrap the controller around the entire checkbox group? then you can use validate function to check one of them are checked.

I gave it a try and couldn't get it working, I am under the impression every checkbox needs it's own controller.

[bluebill1049]

refer to this codesandbox: https://codesandbox.io/s/chakra-ui-5mp8g?file=/src/App.js you can use the CheckboxGroup and validate function.

[hjaber]

Bill answered my question, I have added my solution for reference:

        <FormControl>
          <Controller
            name="checkboxes"
            control={control}
            render={({ field: { ref, ...rest } }) => (
              <CheckboxGroup {...rest}>
                <Checkbox value="first">first</Checkbox>
                <Checkbox value="second">second</Checkbox>
                <Checkbox value="last">last</Checkbox>
              </CheckboxGroup>
            )}
            rules={{
              required: { value: true, message: "Please select at least one" }
            }}
          />
          <FormErrorMessage>{errors.checkboxes?.message}</FormErrorMessage>
        </FormControl>

[techwithtwin]

@hjaber that solution is not working