cwl/ui

CheckboxGroup

A CheckboxGroup Allows users to select one or more items from a list of choices.

Foods
What's your favorite food?
import { Checkbox, CheckboxGroup } from 'cwl-ui'
 
export function Default() {
  return (
    <div>
      <CheckboxGroup label="Foods" description="What's your favorite food?">
        <Checkbox value="pizza" name="foods">
          Pizza
        </Checkbox>
        <Checkbox value="burger" name="foods">
          Burger
        </Checkbox>
        <Checkbox value="sushi" name="foods">
          Sushi
        </Checkbox>
      </CheckboxGroup>
    </div>
  )
}

Component API

PropDefaultDescription
horizontal'vertical'determines the layout flex-row or flex-col of the checkbox items.
isDisabledfalseCan be applied on an item by item basis or on the group level.
isInvalidfalseMarks the group as invalid with data-invalid.

See React Aria CheckboxGroup for more details.

Examples

Horizontal

Foods
What's your favorite food?
import { Checkbox, CheckboxGroup } from 'cwl-ui'
 
export function Horizontal() {
  return (
    <div>
      <CheckboxGroup  orientation="horizontal" label="Foods" description="What's your favorite food?">
        <Checkbox value="pizza" name="foods">
          Pizza
        </Checkbox>
        <Checkbox value="burger" name="foods">
          Burger
        </Checkbox>
        <Checkbox value="sushi" name="foods">
          Sushi
        </Checkbox>
      </CheckboxGroup>
    </div>
  )
}

Invalid

Foods
You must select at least one food.
import React from 'react'
 
import { Checkbox, CheckboxGroup } from 'cwl-ui'
 
export function Invalid() {
  let [checked, setChecked] = React.useState<string[]>([])
  let isValid = checked.length === 1 && checked[0] === 'pizza'
 
  return (
    <div className='min-w-44'>
      <CheckboxGroup
        label="Foods"
        description={isValid ? "What's your favorite food?" : ''}
        isInvalid={!isValid}
        errorMessage={
          checked.length > 0 && checked[0] !== 'pizza'
            ? 'Pizza is the correct answer'
            : 'You must select at least one food.'
        }
        onChange={(items) => setChecked(items)}
      >
        <Checkbox value="pizza" name="foods">
          Pizza
        </Checkbox>
        <Checkbox value="burger" name="foods">
          Burger
        </Checkbox>
        <Checkbox value="sushi" name="foods">
          Sushi
        </Checkbox>
      </CheckboxGroup>
    </div>
  )
}

Disabled

Foods
What's your favorite food?
import { Checkbox, CheckboxGroup } from 'cwl-ui'
 
export function Horizontal() {
  return (
    <div>
      <CheckboxGroup label="Foods" description="What's your favorite food?">
        <Checkbox value="pizza" name="foods">
          Pizza
        </Checkbox>
        <Checkbox isDisabled value="burger" name="foods">
          Burger
        </Checkbox>
        <Checkbox value="sushi" name="foods">
          Sushi
        </Checkbox>
      </CheckboxGroup>
    </div>
  )
}
  • Disabled can be applied on the checkbox level, or on the group level to disable all checkboxes.

Installation

To install, copy the code below and paste into your project.

import * as ReactAria from 'react-aria-components'
 
import { Description, ErrorMessage, Label } from './field'
import { composeTailwindRenderProps } from './lib/utils'
 
interface CheckboxGroupProps extends ReactAria.CheckboxGroupProps {
  label?: string
  children?: React.ReactNode
  orientation?: 'vertical' | 'horizontal'
  description?: string
  errorMessage?: string | ((validation: ReactAria.ValidationResult) => string)
}
 
export const CheckboxGroup = (props: CheckboxGroupProps) => {
  return (
    <ReactAria.CheckboxGroup
      {...props}
      data-orientation={props.orientation ?? 'vertical'}
      className={composeTailwindRenderProps(props.className, 'group flex flex-col gap-2')}
    >
      <Label>{props.label}</Label>
      <div className="group-orientation-horizontal:flex-row flex flex-col gap-2">
        {props.children}
      </div>
      {props.description && <Description>{props.description}</Description>}
      <ErrorMessage>{props.errorMessage}</ErrorMessage>
    </ReactAria.CheckboxGroup>
  )
}