Switch

Switches represent a physical toggle that allows users to instantly alternate between binary states (such as active/inactive or on/off). Unlike checkboxes — which usually queue changes until a form is submitted — switches apply changes immediately. Hashti’s Switch is built on React Aria Components Switch, providing smooth fluid animations, full keyboard accessibility, RTL layout mirroring for Persian and Arabic, and semantic color accents.

Architectural Mechanics

In architectural engineering, a valve or physical circuit breaker changes system state the moment it is engaged. The Hashti Switch embodies this instantaneous causality:

[Off State]                             [On State]
┌─────────────────────────┐             ┌─────────────────────────┐
│  (○)       Track Off    │   ──Space─► │     Track On        (●) │
└─────────────────────────┘             └─────────────────────────┘

Immediate Effect Paradigm: Use switches when toggling an option takes immediate effect (e.g., enabling Dark Mode, activating an SSL Proxy) without requiring a “Save” button click.
RTL Script Mirroring: In Persian/Arabic (dir="rtl") environments, the switch track automatically mirrors: the “off” state rests on the right and slides leftward to engage “on”, honoring natural cognitive intuition.
Fluid Spring Transition: The internal indicator thumb features GPU-accelerated CSS cubic-bezier transitions calibrated to Hashti motion tokens.

Import

import { Switch } from "@hashti/react";
import type { SwitchProps, SelectionColor } from "@hashti/react";

Usage Examples

Basic Usage

A binary toggle with an adjacent textual label:

import { useState } from "react";
import { Switch } from "@hashti/react";

export function BasicSwitchDemo() {
  const [airplaneMode, setAirplaneMode] = useState(false);

  return (
    <Switch isSelected={airplaneMode} onChange={setAirplaneMode}>
      Airplane Mode
    </Switch>
  );
}

With Label & Helper Text

Pairing a switch with supporting descriptive text provides rich clarity for system administrators:

import { useState } from "react";
import { Switch } from "@hashti/react";

export function SwitchWithDescriptionDemo() {
  const [tlsProxy, setTlsProxy] = useState(true);

  return (
    <div className="flex flex-col gap-1">
      <Switch isSelected={tlsProxy} onChange={setTlsProxy}>
        Enable Strict TLS 1.3 Termination
      </Switch>
      <span className="text-xs text-neutral-500 dark:text-neutral-400 pl-11">
        Automatically drops legacy SSL/TLS handshakes and mandates forward-secrecy cipher suites.
      </span>
    </div>
  );
}

Sizes

Hashti switches are available in two standardized sizes (sm and md):

import { Switch } from "@hashti/react";

export function SwitchSizesDemo() {
  return (
    <div className="flex flex-col gap-4">
      <Switch size="sm" defaultSelected>
        Small Switch (Dense layouts & table rows)
      </Switch>

      <Switch size="md" defaultSelected>
        Medium Switch (Standard forms & settings panels)
      </Switch>
    </div>
  );
}

Color Palettes

Switches support semantic color variants (primary, secondary, success, warning, danger):

import { Switch } from "@hashti/react";

export function SwitchColorsDemo() {
  return (
    <div className="flex flex-col gap-3">
      <Switch defaultSelected color="primary">
        Primary (Default)
      </Switch>
      <Switch defaultSelected color="success">
        System Online (Success)
      </Switch>
      <Switch defaultSelected color="warning">
        Maintenance Mode (Warning)
      </Switch>
      <Switch defaultSelected color="danger">
        Debug Interceptor (Danger)
      </Switch>
    </div>
  );
}

RTL Mirroring (Persian & Arabic)

Hashti natively mirrors switches when placed inside an RTL container (dir="rtl"):

import { useState } from "react";
import { Switch } from "@hashti/react";

export function RTLSwitchDemo() {
  const [isSecure, setIsSecure] = useState(true);

  return (
    <div dir="rtl" className="font-[Vazirmatn] flex flex-col gap-2">
      <Switch isSelected={isSecure} onChange={setIsSecure} color="success">
        احراز هویت دو مرحله‌ای (۲FA)
      </Switch>
      <p className="text-xs text-neutral-500 pr-11">
        هنگام ورود از طریق درگاه، رمز یک‌بار مصرف پیامکی درخواست می‌شود.
      </p>
    </div>
  );
}

Disabled State

Disabled switches communicate an unalterable configuration:

import { Switch } from "@hashti/react";

export function DisabledSwitchDemo() {
  return (
    <div className="flex flex-col gap-3">
      <Switch defaultSelected isDisabled>
        Automatic Daily Backups (Mandatory for Enterprise)
      </Switch>
      <Switch isDisabled>Experimental LLM Acceleration (Hardware Unsupported)</Switch>
    </div>
  );
}

Props Reference

Switch extends RACSwitchProps from react-aria-components.

Prop	Type	Default	Description
`isSelected`	`boolean`	—	Controlled active state of the switch.
`defaultSelected`	`boolean`	`false`	Uncontrolled initial state.
`onChange`	`(isSelected: boolean) => void`	—	Callback invoked when the switch is toggled.
`size`	`'sm' \| 'md'`	`'md'`	Control dimensions (`sm` for tight tables, `md` standard).
`color`	`'primary' \| 'secondary' \| 'success' \| 'warning' \| 'danger'`	`'primary'`	Semantic color token for the activated track.
`isDisabled`	`boolean`	`false`	Whether the switch is disabled and non-interactive.
`isReadOnly`	`boolean`	`false`	Prevents value changes while retaining keyboard focusability.
`name`	`string`	—	Input name attribute submitted when placed within standard HTML forms.
`value`	`string`	—	The value attribute submitted when the switch is on.
`children`	`ReactNode`	—	Text label or content rendered alongside the switch control.
`className`	`string`	—	Additional CSS class names.

Accessibility & Keyboard Interaction

Hashti switches conform to the W3C WAI-ARIA Switch Pattern:

Keyboard Interaction

Space: Toggles the switch between on and off states.
Enter: In forms, Enter submits the form rather than toggling the switch (standard browser behavior).
Tab: Moves focus to and from the switch.

Assistive Technology Notes

ARIA Role: Renders a semantic element with role="switch" and aria-checked="true" or "false".
Contrast: The track and thumb maintain WCAG 2.2 AAA minimum contrast ratios in both resting off and active on states.
Switch vs. Checkbox: Use a Switch when an action toggles on or off with immediate effect (e.g. Wifi, Dark Mode, Notification Sound). Use a Checkbox when the choice is part of a larger form requiring submission.

Keyboard Interactions

Key	Action
`Space`	Toggles switch on or off.
`Tab`	Moves focus onto or away from the switch.

WAI-ARIA & Data Attributes

Attribute	Target	Description
`[data-hovered]`	Switch	Present on pointer hover.
`[data-focused]`	Switch	Active on keyboard focus.
`[data-selected]`	Switch	Set when switch is in the active (ON) state.
`[data-disabled]`	Switch	Applied when switch is disabled.

Switch

SwitchCopy Anchor Link

Architectural MechanicsCopy Anchor Link

ImportCopy Anchor Link

Usage ExamplesCopy Anchor Link

Basic UsageCopy Anchor Link

With Label & Helper TextCopy Anchor Link

SizesCopy Anchor Link

Color PalettesCopy Anchor Link

RTL Mirroring (Persian & Arabic)Copy Anchor Link

Disabled StateCopy Anchor Link

Props ReferenceCopy Anchor Link

Accessibility & Keyboard InteractionCopy Anchor Link

Keyboard InteractionCopy Anchor Link

Assistive Technology NotesCopy Anchor Link

Keyboard InteractionsCopy Anchor Link

WAI-ARIA & Data AttributesCopy Anchor Link

On this page

Switch

Architectural Mechanics

Import

Usage Examples

Basic Usage

With Label & Helper Text

Sizes

Color Palettes

RTL Mirroring (Persian & Arabic)

Disabled State

Props Reference

Accessibility & Keyboard Interaction

Keyboard Interaction

Assistive Technology Notes

Keyboard Interactions

WAI-ARIA & Data Attributes