Getting StartedComponentsDesign TokensThemingTheme SynthesizerFrameworksAccessibilityUtilitiesServer RenderingBrowser SupportContributingChangelog App ShellAspect GridAuth ShellCenterClusterContainerDashboard GridDockFloat BarInsetMasonryPage HeaderPage LayoutResizableResponsive SwitcherSectionSettings LayoutSplit PaneStatus BarStickyToolbar Anchor NavBottom NavBreadcrumbBreadcrumb MenuCommand BarDrawerFooterLinkMenubarNavigation MenuPage IndicatorPaginationRailScroll IndicatorScroll SpyScroll To TopSidebarSkip LinkSpeed DialStepper NavTabsTop BarTree View AccordionAspect RatioAvatarAvatar GroupCalloutCardCarouselCollapsibleColor SwatchCTA BannerDividerEmpty StateFeature CardIconImageImage CompareImage HotspotsInfinite ScrollLightboxMarqueeQR CodeScroll AreaSeparatorSkeletonSpinnerStackVideoVirtual List Activity HeatmapAnimated NumberBadgeChartClockComparisonCountdown TimerData GridData TableDescription ListDiffEvent CalendarGaugeJSON TreeKanbanKey ValueLevel MeterListMeterSparklineStatStepperTableTagTimelineUptimeValue CardWaveform BlockquoteCode BlockGradient TextHighlightKbdKeyboard MapMarkdownNumber FormatProseTerminalTextTime AgoTruncateTypewriter ButtonButton GroupCalendarCheckboxChipColor PickerComboboxCopy ButtonDate PickerDate Range PickerFieldsetFile UploadFormHotkeyIcon ButtonImage CropperInline EditInputInput GroupKnobLabelMasked InputMulti SelectNumber InputOTP InputPassword InputPin InputRadio GroupRange SliderRatingSearchSegmented ControlSelectSignature PadSliderSortable ListSwitch GroupTag InputTextareaTheme ToggleTime PickerToggleTransfer ListTree Select AlertAnnouncementBannerCommand PaletteConfirmConnection StatusContext MenuConversationDialogDropdown MenuGuided TourHover CardInline MessageLoading OverlayModalNotification PanelPopoverProgressProgress ToastSheetSnackbarSpotlightToastTooltip
ARC UI ARC Radiant Components
v3.2 Docs Components Tokens Synthesizer
Getting StartedFrameworksServer Rendering Design TokensThemingTheme SynthesizerTypographyUtilities All ComponentsAccessibilityBrowser SupportChangelogContributingStats App ShellAspect GridAuth ShellCenterClusterContainerDashboard GridDockFloat BarInsetMasonryPage HeaderPage LayoutResizableResponsive SwitcherSectionSettings LayoutSplit PaneStatus BarStickyToolbar Anchor NavBottom NavBreadcrumbBreadcrumb MenuCommand BarDrawerFooterLinkMenubarNavigation MenuPage IndicatorPaginationRailScroll IndicatorScroll SpyScroll To TopSidebarSkip LinkSpeed DialStepper NavTabsTop BarTree View AccordionAspect RatioAvatarAvatar GroupCalloutCardCarouselCollapsibleColor SwatchCTA BannerDividerEmpty StateFeature CardIconImageImage CompareImage HotspotsInfinite ScrollLightboxMarqueeQR CodeScroll AreaSeparatorSkeletonSpinnerStackVideoVirtual List Activity HeatmapAnimated NumberBadgeChartClockComparisonCountdown TimerData GridData TableDescription ListDiffEvent CalendarGaugeJSON TreeKanbanKey ValueLevel MeterListMeterSparklineStatStepperTableTagTimelineUptimeValue CardWaveform BlockquoteCode BlockGradient TextHighlightKbdKeyboard MapMarkdownNumber FormatProseTerminalTextTime AgoTruncateTypewriter ButtonButton GroupCalendarCheckboxChipColor PickerComboboxCopy ButtonDate PickerDate Range PickerFieldsetFile UploadFormHotkeyIcon ButtonImage CropperInline EditInputInput GroupKnobLabelMasked InputMulti SelectNumber InputOTP InputPassword InputPin InputRadio GroupRange SliderRatingSearchSegmented ControlSelectSignature PadSliderSortable ListSwitch GroupTag InputTextareaTheme ToggleTime PickerToggleTransfer ListTree Select AlertAnnouncementBannerCommand PaletteConfirmConnection StatusContext MenuConversationDialogDropdown MenuGuided TourHover CardInline MessageLoading OverlayModalNotification PanelPopoverProgressProgress ToastSheetSnackbarSpotlightToastTooltip

Toggle

On/off switch with smooth animation, glow effect, and ARIA switch role.

Components Toggle
input hybrid
<arc-toggle>

Overview

The Toggle component provides a binary on/off control that mirrors the behavior of a physical switch. It is the preferred choice whenever you need a setting that takes immediate effect — toggling a feature on or off, enabling a preference, or activating a mode. Unlike a checkbox, which typically submits with a form, a toggle communicates instant state change to the user. Internally, Toggle renders with `role="switch"` and manages `aria-checked` automatically, giving assistive technology a clear picture of the current state. The thumb slides between positions with a spring-timed CSS transition, and the active state lights up with a subtle glow drawn from the current theme's accent color. Both the track and the thumb inherit design tokens so the component stays consistent across light, dark, and high-contrast modes. Toggle works equally well as an uncontrolled element (set `checked` once and let the component manage its own state) or as a fully controlled input driven by framework reactivity. It also participates in native form submission when given a `name`, emitting a boolean value alongside other form fields.

Guidelines

When to use

  • Use a toggle for settings that take effect immediately (e.g. enable notifications)
  • Provide a clear, concise label describing what the toggle controls
  • Place toggles in a vertical list when presenting multiple related settings
  • Use the `checked` attribute to set a sensible default for each option
  • Pair with descriptive helper text when the label alone may be ambiguous

When not to use

  • Do not use a toggle when the change requires an explicit "Save" action — use a checkbox instead
  • Avoid wrapping a toggle inside a clickable card or button — the double-action confuses users
  • Do not disable a toggle without explaining why the option is unavailable
  • Avoid placing more than 8-10 toggles in a single group — consider grouping into sections
  • Do not use a toggle for mutually exclusive options — use a radio group instead

Features

  • Binary on/off state with animated thumb slide and glow transition
  • Built-in `role="switch"` and automatic `aria-checked` management
  • Keyboard accessible — Space and Enter keys toggle state
  • Paired label rendered inline, with click-to-toggle support
  • Disabled state with reduced opacity and blocked pointer events
  • Participates in native `<form>` submission when `name` is set
  • Theme-aware glow color derived from accent design tokens
  • Works as controlled or uncontrolled input across all frameworks

Preview

Usage

Layout and styling work without JavaScript via the HTML/CSS versions. Interactive features like events and state management require the Web Component or a framework wrapper.

<arc-toggle label="Email notifications" checked></arc-toggle>
<arc-toggle label="Push notifications"></arc-toggle>
<arc-toggle label="Marketing emails"></arc-toggle>
 
import { Toggle } from '@arclux/arc-ui-react';

export default function Example() {
  return (
    <>
      <Toggle label="Email notifications" checked />
      <Toggle label="Push notifications" />
      <Toggle label="Marketing emails" />
    </>
  );
}
 
<script setup>
import { Toggle } from '@arclux/arc-ui-vue';
</script>

<template>
  <Toggle label="Email notifications" checked />
  <Toggle label="Push notifications" />
  <Toggle label="Marketing emails" />
</template>
 
<script>
  import { Toggle } from '@arclux/arc-ui-svelte';
</script>

<Toggle label="Email notifications" checked />
<Toggle label="Push notifications" />
<Toggle label="Marketing emails" />
 
import { Component } from '@angular/core';
import { Toggle } from '@arclux/arc-ui-angular';

@Component({
  imports: [Toggle],
  template: `
    <arc-toggle label="Email notifications" checked></arc-toggle>
    <arc-toggle label="Push notifications"></arc-toggle>
    <arc-toggle label="Marketing emails"></arc-toggle>
  `,
})
export class SettingsPanel {}
 
import { Toggle } from '@arclux/arc-ui-solid';

export default function Example() {
  return (
    <>
      <Toggle label="Email notifications" checked />
      <Toggle label="Push notifications" />
      <Toggle label="Marketing emails" />
    </>
  );
}
 
import { Toggle } from '@arclux/arc-ui-preact';

export default function Example() {
  return (
    <>
      <Toggle label="Email notifications" checked />
      <Toggle label="Push notifications" />
      <Toggle label="Marketing emails" />
    </>
  );
}
 
<arc-toggle label="Email notifications" checked></arc-toggle>
<arc-toggle label="Push notifications"></arc-toggle>
<arc-toggle label="Marketing emails"></arc-toggle>
 
<!-- Auto-generated by @arclux/prism — do not edit manually -->
<!-- arc-toggle — self-contained, no external CSS needed -->
<div class="arc-toggle">

</div>

API

checked boolean false
Whether the toggle is in the on position. When set, the thumb slides to the active side and the track displays the accent glow.
disabled boolean false
Prevents user interaction. The toggle appears at reduced opacity and ignores pointer and keyboard events.
size 'sm' | 'md' | 'lg' 'md'
Controls the toggle size.
label string ''
Visible text rendered beside the toggle. Clicking the label also toggles the switch, matching native `<label>` behavior.
name string ''
Form field name submitted with the toggle value. When set, the component participates in native `<form>` submission.
formAssociated boolean true
properties object { required: { type: Boolean, reflect: true }, readonly: { type: Boolean, reflect: true }, }
Lit merges static properties up the prototype chain, so every consumer gets these without declaring them. `required` participates in constraint validation below; `readonly` reflects for styling and is enforced by each component's interaction handlers (the mixin can't know which gestures mutate state).
autoValidates boolean true
Components that run their own constraint-validation logic (pattern checks, range checks) opt out of the automatic required sync by overriding this to false, and own the whole validity flag set instead.
form
validity
validationMessage
required boolean false
readonly boolean false

Events

arc-change detail: { checked: boolean }
Fired when the toggle state changes

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