Vibes logo

Checkbox Group

Installation

Add the following Soul components

The checkbox-group component uses the field-error, label and checkbox components. Make sure you have added them to your project.

Install the following dependencies

npm install clsx

Copy and paste the following code into your project

form/checkbox-group/index.tsx

import { clsx } from 'clsx';import * as React from 'react';import { Checkbox } from '@/vibes/soul/form/checkbox';import { FieldError } from '@/vibes/soul/form/field-error';import { Label } from '@/vibes/soul/form/label';interface Option {  value: string;  label: string;  disabled?: boolean;}interface Props {  id?: string;  className?: string;  label?: string;  options: Option[];  errors?: string[];  name?: string;  value: string[];  onValueChange: (value: string[]) => void;  colorScheme?: 'light' | 'dark';}export function CheckboxGroup({  className,  label,  options,  errors,  name,  value,  onValueChange,  colorScheme,}: Props) {  const id = React.useId();  return (    <div className={clsx('space-y-2', className)}>      {label !== undefined && label !== '' && (        <Label colorScheme={colorScheme} id={id}>          {label}        </Label>      )}      <div aria-labelledby={id} className="space-y-2">        {options.map((option) => (          <Checkbox            checked={value.includes(option.value)}            colorScheme={colorScheme}            key={option.value}            label={option.label}            name={name}            onCheckedChange={(checked) =>              onValueChange(                checked === true                  ? [...value, option.value]                  : value.filter((v) => v !== option.value),              )            }            value={option.value}          />        ))}      </div>      {errors?.map((error) => <FieldError key={error}>{error}</FieldError>)}    </div>  );}

Usage

'use client';import { CheckboxGroup } from '@/vibes/soul/form/checkbox-group';import { useState } from 'react';function Usage() {  const [value, setValue] = useState<string[]>([]);  return (      <CheckboxGroup        options={[          { label: 'Option 1', value: 'option-1' },          { label: 'Option 2', value: 'option-2' },          { label: 'Option 3', value: 'option-3' },        ]}        value={value}        onValueChange={setValue}      />  );}

API Reference

CheckboxGroupProps

PropTypeDefault
className
string
id
string
label
string
options*
Option[]
errors
string[]
name
string
value*
string[]
onValueChange*
(value: string[]) => void
colorScheme
'light' | 'dark'
'light'

Option

PropTypeDefault
value*
string
label*
string
disabled
boolean