Switch Group — ARC UI

Components

Switch Group

input

interactive

<arc-switch-group>

Overview

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

Mix toggle and non-toggle children — the component only cascades props to arc-toggle
Use for mutually exclusive options — use a radio group instead
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';

<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: `
    <SwitchGroup label="Notifications">
      <Toggle label="Email" checked />
      <Toggle label="Push" />
      <Toggle label="SMS" />
    </SwitchGroup>
  `,
})
export class SettingsPanel {}

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

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

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

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

API

Prop	Type	Default	Description
`label`	`string`	`''`	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.
`disabled`	`boolean`	`false`	Disables all child toggles and dims the group.

Overview

Guidelines

When to use

When not to use

Features

Preview

Usage

API

See Also

ARC UI

Arclight