SwitchGroup

Purpose

The SwitchGroup component is used to generate an ordered list of checkboxes.

Basic Implementation

import SwitchGroup from '@wedgekit/switch-group';
import { Text } from '@wedgekit/core';

const StyledText = styled(Text)`
  margin-top: 16px;
`;

const App = () => {
  const [value, setValue] = React.useState(['Option1', 'Option2']);

  const switchOptions = [
    { label: 'Option 1', id: 'Option1' },
    { label: 'Option 2', id: 'Option2' },
    { label: 'Option 3', id: 'Option3' },
  ];

  return (
    <>
      <SwitchGroup
        label="Switch Group Example"
        onChange={setValue}
        options={switchOptions}
        selectAll
        selectAllLabel="Select All"
        value={value}
      />
      <StyledText>{`${!!value.length ? 'Selected: ' : ''}${value.join(', ')}`}</StyledText>
    </>
  );
};

render(<App />);

Props

className

Type: string

Required: ❌

This is exposed but is only here so that styled-components will be able to style components correctly. Please do not use this unless you really know what you are doing.

disabled

Type: boolean

Required: ❌

Indicates whether the control is disabled.

info

Type InfoObject

Required: ❌

An object which is necessary if you want to display an info button for the input.

label

Type: string

Required: ✅

The overall label for the group of options.

labelHidden

Type: boolean

Required: ❌

Optional prop that will hide the label row. Note that hiding the label for switch group hides the Info-Button as well.

options

Type:

{
  id: string | number;
  label: string;
  disabled?: boolean;
}[]

Required: ✅

An Array of options to display. Each Option must contain a value and label property. Any additional key/values will be passed directly to the option.

ref

Type: React.Ref

Required: ❌

The forwarded ref giving a user access to the underlying HTML input of the Select All control.

required

type: boolean

Required: ❌

Optional prop for use in form validation.

selectAll

Type: 'boolean'

Required: ❌

Indicates if the SwitchGroup should display a Select All / Deselect All control.

selectAllLabel

Type: string

Required: ❌

The label for the select/deselect all option.

tabIndex

Type: number

Required: ❌

Property used to really font keyboard users

value

Type: (string | number)[]

Required: ✅

The value prop is an array of strings, where each string is a currently selected option.

onBlur

Type: (event: SyntheticEvent) => void

Required: ❌

onChange

Type: (value: (string | number)[], event: SyntheticEvent) => void

Required: ✅

The onChange callback receives an array of strings, representing the curently selected values as well as the source event.