Checkbox Group

A group of options where multiple options can be selected.
Label
Properties
label
helpText
error
horizontal

Installation

Usage

Example
Source Code
"use client";

import React from "react";
import { Checkbox } from "@/ui/components/Checkbox";
import { CheckboxGroup } from "@/ui/components/CheckboxGroup";

function CheckboxGroupExample() {
  return (
    <CheckboxGroup label="Label" helpText="" error={false} horizontal={false}>
      <Checkbox
        label="Option"
        checked={false}
        onCheckedChange={(checked: boolean) => {}}
      />
      <Checkbox
        label="Option"
        checked={false}
        onCheckedChange={(checked: boolean) => {}}
      />
      <Checkbox
        label="Option"
        checked={false}
        onCheckedChange={(checked: boolean) => {}}
      />
    </CheckboxGroup>
  );
}

export default CheckboxGroupExample;

Props

Checkbox Group Props
Prop
Type
Default value
Notes
label
string
"Label"
helpText
string
""
error
boolean
false
horizontal
boolean
false
children
React.ReactNode

Examples

Basics

A checkbox group contains multiple checkboxes that can be controlled independently.

Horizontal

Label and help text

Use label and helpText props for additional information.

Error

Use error and helpText props for validating the entire group.