Switch Group

Groups multiple toggle switches under a shared label with consistent sizing and disabled state. Supports vertical and horizontal layouts.

Components

Switch Group

input

interactive

<arc-switch-group>

Overview

SwitchGroup wraps multiple `arc-toggle` components inside a semantic `<fieldset>` with an optional legend label. It cascades the `size` and `disabled` props down to all child toggles, so you don't set props on each one. Two orientation modes control the layout: vertical (default) stacks toggles in a column with compact spacing, while horizontal arranges them in a wrapping row with wider gaps. The vertical layout works well in settings panels, while horizontal suits toolbar-style option rows. The component renders a native `<fieldset>` for proper form semantics and sets `role="group"` with `aria-label` on the inner container, which tells assistive technology the toggles are a group.

Guidelines

When to use

Use for groups of related on/off settings like notification preferences
Provide a `label` to describe what the group of toggles controls
Use vertical orientation for settings panels and forms
Use horizontal orientation for compact toolbar-style layouts

When not to use

Do not mix toggle and non-toggle children: the component only cascades props to arc-toggle
Do not use for mutually exclusive options; use a radio group instead
Do not nest switch groups inside each other

Features

Groups `arc-toggle` children under a shared label and fieldset
Cascades `size` and `disabled` props to all child toggles
Vertical and horizontal orientation modes
Native `<fieldset>` with `role="group"` for accessible semantics
Legend label rendered above the toggle group
Exposed CSS parts: fieldset, legend, group

Preview

Usage

This component requires JavaScript. No pure HTML/CSS version is available. Use the Web Component directly or a framework wrapper.

<arc-switch-group label="Notifications">
  <arc-toggle label="Email" checked></arc-toggle>
  <arc-toggle label="Push"></arc-toggle>
  <arc-toggle label="SMS"></arc-toggle>
</arc-switch-group>

<!-- Horizontal layout -->
<arc-switch-group label="Features" orientation="horizontal">
  <arc-toggle label="Dark mode" checked></arc-toggle>
  <arc-toggle label="Compact view"></arc-toggle>
</arc-switch-group>

import { SwitchGroup, Toggle } from '@arclux/arc-ui-react';

export default function Example() {
  return (
    <SwitchGroup label="Notifications">
      <Toggle label="Email" checked />
      <Toggle label="Push" />
      <Toggle label="SMS" />
    </SwitchGroup>
  );
}

<script setup>
import { SwitchGroup, Toggle } from '@arclux/arc-ui-vue';
</script>

<template>
  <SwitchGroup label="Notifications">
    <Toggle label="Email" checked />
    <Toggle label="Push" />
    <Toggle label="SMS" />
  </SwitchGroup>
</template>

<script>
  import { SwitchGroup, Toggle } from '@arclux/arc-ui-svelte';
</script>

<SwitchGroup label="Notifications">
  <Toggle label="Email" checked />
  <Toggle label="Push" />
  <Toggle label="SMS" />
</SwitchGroup>

import { Component } from '@angular/core';
import { SwitchGroup, Toggle } from '@arclux/arc-ui-angular';

@Component({
  imports: [SwitchGroup, Toggle],
  template: `
    <arc-switch-group label="Notifications">
      <arc-toggle label="Email" checked />
      <arc-toggle label="Push" />
      <arc-toggle label="SMS" />
    </arc-switch-group>
  `,
})
export class SettingsPanel {}

import { SwitchGroup, Toggle } from '@arclux/arc-ui-solid';

export default function Example() {
  return (
    <SwitchGroup label="Notifications">
      <Toggle label="Email" checked />
      <Toggle label="Push" />
      <Toggle label="SMS" />
    </SwitchGroup>
  );
}

import { SwitchGroup, Toggle } from '@arclux/arc-ui-preact';

export default function Example() {
  return (
    <SwitchGroup label="Notifications">
      <Toggle label="Email" checked />
      <Toggle label="Push" />
      <Toggle label="SMS" />
    </SwitchGroup>
  );
}

API

labelstring='': Group heading rendered as a <legend> element.
orientation'vertical' | 'horizontal'='vertical': Layout direction. Vertical stacks toggles, horizontal arranges them in a row.
size'sm' | 'md' | 'lg'='md': Size cascaded to all child arc-toggle elements.
disabledboolean=false: Disables all child toggles and dims the group.

Switch Group

Overview

Guidelines

When to use

When not to use

Features

Preview

Usage

API

See Also

Docs

Project

Arclight