CheckboxGroup

A checkbox group allows a user to select multiple items from a list of options.

Usage#

Demo#

import { Checkbox, CheckboxGroup } from "pigment-ui";

function CheckboxGroupDemo() {
  return (
    <CheckboxGroup label="Favorite sports" description="Lorem ipsum dolor sit amet.">
      <Checkbox value="soccer">Soccer</Checkbox>
      <Checkbox value="baseball">Baseball</Checkbox>
      <Checkbox value="basketball">Basketball</Checkbox>
    </CheckboxGroup>
  );
}

Orientation#

import { Checkbox, CheckboxGroup } from "pigment-ui";

function CheckboxGroupOrientation() {
  return (
    <CheckboxGroup orientation="horizontal" label="Favorite sports" description="Lorem ipsum dolor sit amet.">
      <Checkbox value="soccer">Soccer</Checkbox>
      <Checkbox value="baseball">Baseball</Checkbox>
      <Checkbox value="basketball">Basketball</Checkbox>
    </CheckboxGroup>
  );
}

Size#

import { Checkbox, CheckboxGroup } from "pigment-ui";

function CheckboxGroupSize() {
  return (
    <div className="flex flex-col gap-4">
      <CheckboxGroup size="sm" orientation="horizontal" label="Favorite sports" description="Lorem ipsum dolor sit amet.">
        <Checkbox value="soccer">Soccer</Checkbox>
        <Checkbox value="baseball">Baseball</Checkbox>
        <Checkbox value="basketball">Basketball</Checkbox>
      </CheckboxGroup>

      <CheckboxGroup size="md" orientation="horizontal" label="Favorite sports" description="Lorem ipsum dolor sit amet.">
        <Checkbox value="soccer">Soccer</Checkbox>
        <Checkbox value="baseball">Baseball</Checkbox>
        <Checkbox value="basketball">Basketball</Checkbox>
      </CheckboxGroup>

      <CheckboxGroup size="lg" orientation="horizontal" label="Favorite sports" description="Lorem ipsum dolor sit amet.">
        <Checkbox value="soccer">Soccer</Checkbox>
        <Checkbox value="baseball">Baseball</Checkbox>
        <Checkbox value="basketball">Basketball</Checkbox>
      </CheckboxGroup>
    </div>
  );
}

Radius#

import { Checkbox, CheckboxGroup } from "pigment-ui";

function CheckboxGroupRadius() {
  return (
    <div className="flex flex-col gap-4">
      <CheckboxGroup radius="sm" orientation="horizontal" label="Favorite sports" description="Lorem ipsum dolor sit amet.">
        <Checkbox value="soccer">Soccer</Checkbox>
        <Checkbox value="baseball">Baseball</Checkbox>
        <Checkbox value="basketball">Basketball</Checkbox>
      </CheckboxGroup>

      <CheckboxGroup radius="md" orientation="horizontal" label="Favorite sports" description="Lorem ipsum dolor sit amet.">
        <Checkbox value="soccer">Soccer</Checkbox>
        <Checkbox value="baseball">Baseball</Checkbox>
        <Checkbox value="basketball">Basketball</Checkbox>
      </CheckboxGroup>

      <CheckboxGroup radius="lg" orientation="horizontal" label="Favorite sports" description="Lorem ipsum dolor sit amet.">
        <Checkbox value="soccer">Soccer</Checkbox>
        <Checkbox value="baseball">Baseball</Checkbox>
        <Checkbox value="basketball">Basketball</Checkbox>
      </CheckboxGroup>

      <CheckboxGroup radius="full" orientation="horizontal" label="Favorite sports" description="Lorem ipsum dolor sit amet.">
        <Checkbox value="soccer">Soccer</Checkbox>
        <Checkbox value="baseball">Baseball</Checkbox>
        <Checkbox value="basketball">Basketball</Checkbox>
      </CheckboxGroup>

      <CheckboxGroup radius="none" orientation="horizontal" label="Favorite sports" description="Lorem ipsum dolor sit amet.">
        <Checkbox value="soccer">Soccer</Checkbox>
        <Checkbox value="baseball">Baseball</Checkbox>
        <Checkbox value="basketball">Basketball</Checkbox>
      </CheckboxGroup>
    </div>
  );
}

Invalid#

import { Checkbox, CheckboxGroup } from "pigment-ui";

function CheckboxGroupInvalid() {
  return (
    <CheckboxGroup isInvalid errorMessage="This is an error message." label="Favorite sports" description="Lorem ipsum dolor sit amet.">
      <Checkbox value="soccer">Soccer</Checkbox>
      <Checkbox value="baseball">Baseball</Checkbox>
      <Checkbox value="basketball">Basketball</Checkbox>
    </CheckboxGroup>
  );
}

Disabled#

import { Checkbox, CheckboxGroup } from "pigment-ui";

function CheckboxGroupDisabled() {
  return (
    <CheckboxGroup isDisabled label="Favorite sports" description="Lorem ipsum dolor sit amet.">
      <Checkbox value="soccer">Soccer</Checkbox>
      <Checkbox value="baseball">Baseball</Checkbox>
      <Checkbox value="basketball">Basketball</Checkbox>
    </CheckboxGroup>
  );
}

Disabled individual#

import { Checkbox, CheckboxGroup } from "pigment-ui";

function CheckboxGroupDisabledIndividual() {
  return (
    <CheckboxGroup label="Favorite sports" description="Lorem ipsum dolor sit amet.">
      <Checkbox value="soccer">Soccer</Checkbox>
      <Checkbox value="baseball" isDisabled>Baseball</Checkbox>
      <Checkbox value="basketball">Basketball</Checkbox>
    </CheckboxGroup>
  );
}

Validation#

import { Button, Checkbox, CheckboxGroup } from "pigment-ui";

function CheckboxGroupValidation() {
  return (
    <form className="space-y-4 w-64">
      <CheckboxGroup isRequired label="Favorite sports" description="Lorem ipsum dolor sit amet.">
        <Checkbox value="soccer">Soccer</Checkbox>
        <Checkbox value="baseball">Baseball</Checkbox>
        <Checkbox value="basketball">Basketball</Checkbox>
      </CheckboxGroup>
      <Button type="submit">Submit</Button>
    </form>
  );
}

Edit this page

Checkbox Chip