Checkbox Group

A Checkbox Group ties several checkboxes to one value, so a set of independent choices is read and written as a single array. It keeps the group's label, its layout and its disabled state in one place instead of spread across the individual boxes.

Demo

Rendered live, with the same build of the library you install.

Vertical:

Horizontal:

Usage

Source
CheckboxGroup.tsx
import { useState } from 'react';
import { NCheckGroup } from '@nayan-ui/react';


const items = [
  { label: 'Email', value: 'email' },
  { label: 'Push', value: 'push' },
  { label: 'SMS', value: 'sms', disabled: true }
];


const CheckboxGroup = () => {
  const [value, setValue] = useState<string[]>(['email']);


  return (
    <div>
      <h3 className="text-foreground mb-2 mt-4 text-sm font-semibold">Vertical:</h3>
      <div className="mb-5">
        <NCheckGroup label="Notify me by" items={items} value={value} onChange={setValue} />
      </div>


      <h3 className="text-foreground mb-2 mt-4 text-sm font-semibold">Horizontal:</h3>
      <NCheckGroup label="Notify me by" items={items} value={value} onChange={setValue} orientation="horizontal" />
    </div>
  );
};


export default CheckboxGroup;

Attributes

11 props
NameTypeDefaultDetails
itemsNCheckGroupItem[]RequiredThe items prop.
valuestring[]RequiredThe value prop.
onChange(selected: string[]) => voidRequiredThe onChange prop.
orientation'horizontal' | 'vertical''vertical'The orientation prop.
labelstringOptionalThe label prop.
showLabelbooleantrueThe showLabel prop.
disabledbooleanfalseThe disabled prop.
idstringOptionalThe id prop.
classNamestring''The className prop.
labelClassNamestring''The labelClassName prop.
itemClassNamestring''The itemClassName prop.

Tags

Other components solving nearby problems.