Switch Group

A Switch Group collects several switches under one label and one value, for a screen of settings that are each on or off. Every row names its setting and carries its own switch, and the group reports the set that is currently on.

Demo

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

Usage

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


const items = [
  { label: 'Release notes', value: 'releases' },
  { label: 'Security alerts', value: 'security' },
  { label: 'Weekly digest', value: 'digest' }
];


const SwitchGroup = () => {
  const [value, setValue] = useState<string[]>(['releases', 'security']);


  return (
    <div>
      <div className="max-w-sm">
        <NSwitchGroup label="Email me about" items={items} value={value} onChange={setValue} />
      </div>
    </div>
  );
};


export default SwitchGroup;

Attributes

12 props
NameTypeDefaultDetails
itemsNSwitchGroupItem[]RequiredThe items prop.
valuestring[]RequiredThe values currently switched on.
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.
switchClassNamestring''The switchClassName prop.

Tags

Other components solving nearby problems.