Checkbox Group

You can make a group of multiple choices Checkbox using CheckboxGroup component.

import { CheckboxGroup } from "rizzui";

With Simple Checkbox

Checkout the CheckboxGroup demo with Checkbox components.

Apple

Pear

Orange

Blueberry

import { useState } from "react";
import { Checkbox, CheckboxGroup } from "rizzui";

export default function App() {
  const [values, setValues] = useState(["apple"]);
  return (
    <CheckboxGroup
      values={values}
      setValues={setValues}
      className="flex flex-row gap-4"
    >
      <Checkbox label="Apple" value="apple" />
      <Checkbox label="Pear" value="pear" />
      <Checkbox label="Orange" value="orange" disabled />
      <Checkbox label="Blueberry" value="blueberry" />
    </CheckboxGroup>
  );
}

With AdvancedCheckbox

Checkout the CheckboxGroup demo with AdvancedCheckbox components.

Single Payment

Charge a one-time fee.

Subscription

Charge an ongoing fee.

Lead Magnet

Allow access for free.

import React from "react";
import { CheckCircleIcon } from "@heroicons/react/20/solid";
import { AdvancedCheckbox, CheckboxGroup, Text } from 'rizzui';

const options = [
  {
    value: 'single'
    title: 'Single Payment',
    description: 'Charge a one-time fee',
  }
  ...
]

export default function App() {
  const [values, setValues] = React.useState<string[]>(["single"]);

  return (
    <CheckboxGroup
      values={values}
      setValues={setValues}
      className="grid grid-cols-1 sm:grid-cols-3 max-w-2xl mx-auto gap-4"
    >
      {options.map((item) => (
        <AdvancedCheckbox
          key={item.value}
          name="payment"
          value={item.value}
          inputClassName="[&:checked~span_.icon]:block"
        >
          <span className="flex justify-between">
            <Text as="b">{item.title}</Text>
            <CheckCircleIcon className="icon hidden h-5 w-5 text-secondary" />
          </span>
          <Text>{item.description}</Text>
        </AdvancedCheckbox>
      ))}
    </CheckboxGroup>
  );
}

API Reference

---

CheckboxGroup Props

Here is the API documentation of the CheckboxGroup component.

Props	Type	Description	Default
values	string[]	Selected value	__
setValues	Dispatch<SetStateAction<string[]>>	Pass function to select value	__
children	ReactNode	Radio buttons as children	__