CheckboxGroup

CheckboxGroup are used when multiple choices may be selected in a series of options. CheckboxGroup composes Checkbox component.

import {
  CheckboxGroup,
  useCheckboxGroupProps,
  useCheckboxGroupState,
  CheckboxGroupWrapper,
  CheckboxShowMore,
} from "@renderlesskit/react-tailwind";

💡

A complex component that supports customization as per the composition guide.

Usage


<CheckboxGroup aria-label="fruits" >
  <Checkbox value="apple" label="Apple" />
  <Checkbox value="orange" label="Orange" />
  <Checkbox value="watermelon" label="Watermelon" />
  <Checkbox value="grapes" label="Grapes" />
</CheckboxGroup>


<CheckboxGroup aria-label="fruits" >
  <Checkbox value="apple" label="Apple" />
  <Checkbox value="orange" label="Orange" />
  <Checkbox value="watermelon" label="Watermelon" />
  <Checkbox value="grapes" label="Grapes" />
</CheckboxGroup>

CheckboxGroup sizes

Sizes can be set using the size prop. The default size is md. The available sizes are: sm md lg

const CheckboxGroupBasic = props => {
  return (
    <CheckboxGroup aria-label="fruits" {...props}>
      <Checkbox value="apple" label="Apple" />
      <Checkbox value="orange" label="Orange" />
      <Checkbox value="watermelon" label="Watermelon" />
      <Checkbox value="grapes" label="Grapes" />
    </CheckboxGroup>
  );
};

const CheckboxGroupStack = props => { return (

<div className="flex space-x-2">
  <CheckboxGroupBasic size="sm" />
  <CheckboxGroupBasic size="md" />
  <CheckboxGroupBasic size="lg" />
</div>
); };

render (<CheckboxGroupStack/>);

const CheckboxGroupBasic = props => {
  return (
    <CheckboxGroup aria-label="fruits" {...props}>
      <Checkbox value="apple" label="Apple" />
      <Checkbox value="orange" label="Orange" />
      <Checkbox value="watermelon" label="Watermelon" />
      <Checkbox value="grapes" label="Grapes" />
    </CheckboxGroup>
  );
};

const CheckboxGroupStack = props => { return (

<div className="flex space-x-2">
  <CheckboxGroupBasic size="sm" />
  <CheckboxGroupBasic size="md" />
  <CheckboxGroupBasic size="lg" />
</div>
); };

render (<CheckboxGroupStack/>);

CheckboxGroup Stack

CheckboxGroup can be arranged vertical or horizontal

const CheckboxGroupBasic = props => {
  return (
    <CheckboxGroup aria-label="fruits" {...props}>
      <Checkbox value="apple" label="Apple" />
      <Checkbox value="orange" label="Orange" />
      <Checkbox value="watermelon" label="Watermelon" />
      <Checkbox value="grapes" label="Grapes" />
    </CheckboxGroup>
  );
};

const CheckboxGroupStack = props => { return (

<div className="flex flex-col space-y-2">
  <CheckboxGroupBasic size="md" stack="vertical" />
  <CheckboxGroupBasic size="md" stack="horizontal" />
</div>
); };

render (<CheckboxGroupStack/>);

const CheckboxGroupBasic = props => {
  return (
    <CheckboxGroup aria-label="fruits" {...props}>
      <Checkbox value="apple" label="Apple" />
      <Checkbox value="orange" label="Orange" />
      <Checkbox value="watermelon" label="Watermelon" />
      <Checkbox value="grapes" label="Grapes" />
    </CheckboxGroup>
  );
};

const CheckboxGroupStack = props => { return (

<div className="flex flex-col space-y-2">
  <CheckboxGroupBasic size="md" stack="vertical" />
  <CheckboxGroupBasic size="md" stack="horizontal" />
</div>
); };

render (<CheckboxGroupStack/>);

CheckboxGroup Show More

CheckboxGroup with more Checkboxs can be made hidden by adding maxVisibleItems prop

const CheckboxGroupBasic = props => {
  return (
    <CheckboxGroup aria-label="fruits" maxVisibleItems={2} {...props}>
      <Checkbox value="apple" label="Apple" />
      <Checkbox value="orange" label="Orange" />
      <Checkbox value="watermelon" label="Watermelon" />
      <Checkbox value="grapes" label="Grapes" />
    </CheckboxGroup>
  );
};

const CheckboxGroupStack = props => { return (

<div className="flex flex-col space-y-2">
  <CheckboxGroupBasic size="md" stack="vertical" className="w-32" />
  <CheckboxGroupBasic size="md" stack="horizontal" />
</div>
); };

render (<CheckboxGroupStack/>);

const CheckboxGroupBasic = props => {
  return (
    <CheckboxGroup aria-label="fruits" maxVisibleItems={2} {...props}>
      <Checkbox value="apple" label="Apple" />
      <Checkbox value="orange" label="Orange" />
      <Checkbox value="watermelon" label="Watermelon" />
      <Checkbox value="grapes" label="Grapes" />
    </CheckboxGroup>
  );
};

const CheckboxGroupStack = props => { return (

<div className="flex flex-col space-y-2">
  <CheckboxGroupBasic size="md" stack="vertical" className="w-32" />
  <CheckboxGroupBasic size="md" stack="horizontal" />
</div>
); };

render (<CheckboxGroupStack/>);

API Reference

Prop	Type	Default
`size`	`union`	`md`
`stack`	`string`	`vertical`
`maxVisibleItems`	`number`	`null`

Last updated on July 18, 2022

CheckboxGroup

Imports#

Usage#

CheckboxGroup sizes#

CheckboxGroup Stack#

CheckboxGroup Show More#

API Reference#

Imports

Usage

CheckboxGroup sizes

CheckboxGroup Stack

CheckboxGroup Show More

API Reference