Getting StartedComponentsDesign TokensThemingTheme SynthesizerFrameworksAccessibilityUtilitiesServer RenderingBrowser SupportContributingChangelog App ShellAspect GridAuth ShellCenterContainerDashboard GridFloat BarInsetMasonryPage HeaderPage LayoutResizableResponsive SwitcherSectionSettings LayoutSplit PaneStatus BarStickyToolbar Anchor NavBottom NavBreadcrumbBreadcrumb MenuCommand BarDrawerFooterLinkMenubarNavigation MenuPage IndicatorPaginationRailScroll IndicatorScroll SpyScroll To TopSidebarSkip LinkStepper NavTabsTop BarTree View AccordionAspect RatioAvatarAvatar GroupCardCarouselCollapsibleColor SwatchCTA BannerDividerEmpty StateFeature CardIconImageImage CompareImage HotspotsInfinite ScrollLightboxMarqueeQR CodeScroll AreaSkeletonSpinnerStackVideoVirtual List Activity HeatmapAnimated NumberBadgeChartClockComparisonCountdown TimerData GridDescription ListDiffGaugeJSON TreeKanbanLevel MeterListMeterSparklineStatStepperTagTimelineUptimeValue CardWaveform BlockquoteCode BlockGradient TextHighlightKbdKeyboard MapMarkdownNumber FormatProseTerminalTextTime AgoTruncateTypewriter ButtonButton GroupCalendarCheckboxChipColor PickerComboboxCopy ButtonDate PickerDate Range PickerFieldsetFile UploadFormHotkeyIcon ButtonImage CropperInline EditInputInput GroupKnobLabelMasked InputMulti SelectNumber InputPassword InputPin InputRadio GroupRange SliderRatingSearchSegmented ControlSelectSignature PadSliderSortable ListSwitch GroupTag InputTextareaTheme ToggleTime PickerToggleTransfer ListTree Select AlertAnnouncementBannerCommand PaletteConfirmConnection StatusContext MenuConversationDialogDropdown MenuHover CardLoading OverlayNotification PanelPopoverProgressSheetToastTooltip
ARC UI ARC Radiant Components
v4.2 Docs Components Tokens Synthesizer
Getting StartedFrameworksServer Rendering Design TokensThemingTheme SynthesizerTypographyUtilities All ComponentsAccessibilityBrowser SupportChangelogContributingStats App ShellAspect GridAuth ShellCenterContainerDashboard GridFloat BarInsetMasonryPage HeaderPage LayoutResizableResponsive SwitcherSectionSettings LayoutSplit PaneStatus BarStickyToolbar Anchor NavBottom NavBreadcrumbBreadcrumb MenuCommand BarDrawerFooterLinkMenubarNavigation MenuPage IndicatorPaginationRailScroll IndicatorScroll SpyScroll To TopSidebarSkip LinkStepper NavTabsTop BarTree View AccordionAspect RatioAvatarAvatar GroupCardCarouselCollapsibleColor SwatchCTA BannerDividerEmpty StateFeature CardIconImageImage CompareImage HotspotsInfinite ScrollLightboxMarqueeQR CodeScroll AreaSkeletonSpinnerStackVideoVirtual List Activity HeatmapAnimated NumberBadgeChartClockComparisonCountdown TimerData GridDescription ListDiffGaugeJSON TreeKanbanLevel MeterListMeterSparklineStatStepperTagTimelineUptimeValue CardWaveform BlockquoteCode BlockGradient TextHighlightKbdKeyboard MapMarkdownNumber FormatProseTerminalTextTime AgoTruncateTypewriter ButtonButton GroupCalendarCheckboxChipColor PickerComboboxCopy ButtonDate PickerDate Range PickerFieldsetFile UploadFormHotkeyIcon ButtonImage CropperInline EditInputInput GroupKnobLabelMasked InputMulti SelectNumber InputPassword InputPin InputRadio GroupRange SliderRatingSearchSegmented ControlSelectSignature PadSliderSortable ListSwitch GroupTag InputTextareaTheme ToggleTime PickerToggleTransfer ListTree Select AlertAnnouncementBannerCommand PaletteConfirmConnection StatusContext MenuConversationDialogDropdown MenuHover CardLoading OverlayNotification PanelPopoverProgressSheetToastTooltip

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, ensuring visual consistency without manually setting 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, making the group relationship clear to assistive technology.

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

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.

See Also
ARC UI

Components that glow. One Lit source, seven native targets.

Docs

Project

Arclight

© 2026 Arclight Digital, LLC. All rights reserved.

Documentation generated with AI assistance and reviewed by humans. Found an issue? Open a GitHub issue.

Privacy Policy