CheckboxGroup

CheckboxGroup are used when multiple choices may be selected in a series of options. CheckboxGroup composes Checkbox component. It uses Ariakit's Checkbox component internally.

import {
  CheckboxGroup,
  CheckboxGroupWrapper,
  CheckboxShowMore,
} from "@adaptui/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

import { CheckboxGroup, Checkbox } from "@adaptui/react-tailwind";

export const App = props => {
  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>
    );
  };

  return <CheckboxGroupStack />;
};

import { CheckboxGroup, Checkbox } from "@adaptui/react-tailwind";

export const App = props => {
  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>
    );
  };

  return <CheckboxGroupStack />;
};

CheckboxGroup Stack

CheckboxGroup can be arranged vertical or horizontal

import { CheckboxGroup, Checkbox } from "@adaptui/react-tailwind";

export const App = props => {
  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>
    );
  };

  return <CheckboxGroupStack />;
};

import { CheckboxGroup, Checkbox } from "@adaptui/react-tailwind";

export const App = props => {
  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>
    );
  };

  return <CheckboxGroupStack />;
};

CheckboxGroup Show More

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

import { CheckboxGroup, Checkbox } from "@adaptui/react-tailwind";

export const App = props => {
  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>
    );
  };

  return <CheckboxGroupStack />;
};

import { CheckboxGroup, Checkbox } from "@adaptui/react-tailwind";

export const App = props => {
  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>
    );
  };

  return <CheckboxGroupStack />;
};

API Reference

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

Last updated on July 27, 2022

CheckboxGroup

Imports#

Usage#

CheckboxGroup sizes#

CheckboxGroup Stack#

CheckboxGroup Show More#

API Reference#

Imports

Usage

CheckboxGroup sizes

CheckboxGroup Stack

CheckboxGroup Show More

API Reference