Toggle — ARC UI

Components

Toggle

input

hybrid

<arc-toggle>

Overview

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';

<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>
  <Toggle label="Push notifications"></Toggle>
  <Toggle label="Marketing emails"></Toggle>
</template>

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

<Toggle label="Email notifications" checked></Toggle>
<Toggle label="Push notifications"></Toggle>
<Toggle label="Marketing emails"></Toggle>

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

@Component({
  imports: [Toggle],
  template: `
    <Toggle label="Email notifications" checked></Toggle>
    <Toggle label="Push notifications"></Toggle>
    <Toggle label="Marketing emails"></Toggle>
  `,
})
export class SettingsPanel {}

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

<Toggle label="Email notifications" checked></Toggle>
<Toggle label="Push notifications"></Toggle>
<Toggle label="Marketing emails"></Toggle>

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

<Toggle label="Email notifications" checked></Toggle>
<Toggle label="Push notifications"></Toggle>
<Toggle label="Marketing emails"></Toggle>

<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

Prop	Type	Default	Description
`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.
`label`	`string`	—	Visible text rendered beside the toggle. Clicking the label also toggles the switch, matching native `<label>` behavior.
`size`	`string`	`'md'`	Controls the toggle size. Options: 'sm', 'md', 'lg'.
`name`	`string`	—	Form field name submitted with the toggle value. When set, the component participates in native `<form>` submission.

Events

Event	Description
`arc-change`	Fired when the toggle state changes