Checkbox Group

A group of options where multiple options can be selected.

Example

Source Code

Installation

"use client";

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

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

export default CheckboxGroupExample;

Props

Checkbox Group

Prop

Type

Default

Additional info

label

string

"Label"

helpText

string

""

error

boolean

false

horizontal

boolean

false

children

React.ReactNode

—

This component is a <div>. Props like onClick and className will continue to work here.

Examples

Basics

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


View code

Horizontal


View code

Label and help text

Use label and helpText props for additional information.


View code

Error

Use error and helpText props for validating the entire group.


View code