SwitchGroup

Stacked rows of labeled switches for settings panels, tracked as an array of on values.

SwitchGroup renders a list of options as labeled switch rows, ideal for preference and settings panels. It is controlled — value is the array of values currently switched on and onChange fires with the next array on every toggle. Each option can carry a description, and by default the rows sit in a bordered, divided panel (bordered, on by default).

Example

Preview

Weekly digestSent every Monday

Product updates

Security alertsAlways recommended

import { SwitchGroup } from '@officina/ui';
import { useState } from 'react';

function Example() {
  const [value, setValue] = useState<string[]>(['marketing']);
  return (
    <SwitchGroup
      value={value}
      onChange={setValue}
      options={[
        { value: 'marketing', label: 'Marketing emails', description: 'Product news and offers.' },
        { value: 'security', label: 'Security alerts' },
      ]}
    />
  );
}

API

Prop	Type	Default	Description
onChange*	(value: string[]) => void	—	Called with the next array of on values when any switch toggles.
options*	SwitchGroupOption[]	—	Switch options rendered as toggle rows.
value*	string[]	—	Values of the switches currently on (controlled).
bordered	boolean	true	Wrap each row in a bordered settings panel.
disabled	boolean	—	Disables every switch in the group.

Example

API

On this page