Customizeable <CheckboxGroup />

What problem does this feature solve?

With this we are not limited to just passing the options key values to the <CheckboxGroup /> property, we can customize how the checkboxes group would look like. We can put them inside <Card> components for example

What does the proposed API look like?

<Card>
  <Checkbox>
    Select All
  </Checkbox>
</Card>

<Card>
  <CheckboxGroup
    value={1}
  >
    Option 1
  </CheckboxGroup>
</Card>

<Card>
  <CheckboxGroup
    value={2}
  >
    Option 2
  </CheckboxGroup>
</Card>

<Card>
  <CheckboxGroup
    value={3}
  >
    Option 3
  </CheckboxGroup>
</Card>

it would look like this https://imgur.com/a/TVegf

[yesmeck]

I’ve implemented a similar feature in a internal project, I’d like the API looks like this:

<CheckboxGroup>
  <Card>
    <Checkbox all>
      Select All
    </Checkbox>
  </Card>

  <Card>
    <Checkbox value={1}>
      Option 1
    </Checkbox>
  </Card>

  <Card>
    <Checkbox value={2}>
      Option 2
    </Checkbox>
  </Card>

  <Card>
    <Checkbox value={3}>
      Option 3
    </Checkbox>
  </Card>
</CheckboxGroup>

[crisryantan]

Thanks for the help @yesmeck. When I free up some time I will help updating the documentation. 👍