> ## Documentation Index
> Fetch the complete documentation index at: https://docs.thehuxdesign.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Switch

> Toggle switch component with smooth animations and theme-aware styling

## Overview

HuxSwitch is a toggle switch component with smooth animations, consistent styling, and automatic theme adaptation. It provides a clean, modern interface for binary choices while maintaining accessibility standards.

## Basic Usage

### Switch States

<img src="https://mintcdn.com/thehuxdesign/ZdTBXsPpp1-7xmRJ/images/switch/switch-off.png?fit=max&auto=format&n=ZdTBXsPpp1-7xmRJ&q=85&s=08519854771dcfb89bcf940228ad2165" alt="Switch off" width="1000" height="300" data-path="images/switch/switch-off.png" />

<img src="https://mintcdn.com/thehuxdesign/ZdTBXsPpp1-7xmRJ/images/switch/switch-on.png?fit=max&auto=format&n=ZdTBXsPpp1-7xmRJ&q=85&s=1474d6b8785ccae357f7346db2d1df72" alt="Switch on" width="1000" height="300" data-path="images/switch/switch-on.png" />

```dart theme={null}
HuxSwitch(
  value: isEnabled,
  onChanged: (value) {
    setState(() {
      isEnabled = value;
    });
  },
)
```

### Switch with Label

<img src="https://mintcdn.com/thehuxdesign/ZdTBXsPpp1-7xmRJ/images/switch/switch-label.png?fit=max&auto=format&n=ZdTBXsPpp1-7xmRJ&q=85&s=cef833e002f9b26215192cc968977b9f" alt="Switch with label off" width="1000" height="300" data-path="images/switch/switch-label.png" />

```dart theme={null}
Row(
  children: [
    Text('Enable notifications'),
    const SizedBox(width: 12),
    HuxSwitch(
      value: notificationsEnabled,
      onChanged: (value) {
        setState(() {
          notificationsEnabled = value;
        });
      },
    ),
  ],
)
```

### Disabled Switch

<img src="https://mintcdn.com/thehuxdesign/ZdTBXsPpp1-7xmRJ/images/switch/switch-disabled.png?fit=max&auto=format&n=ZdTBXsPpp1-7xmRJ&q=85&s=f6924f0f5cc3d07e150674d2f6fa158d" alt="Disabled switch" width="1000" height="300" data-path="images/switch/switch-disabled.png" />

```dart theme={null}
HuxSwitch(
  value: isEnabled,
  onChanged: null, // Disables the switch
)
```

## Properties

### Core Properties

* `value` - Current switch state (true/false)
* `onChanged` - Callback triggered when state changes (null for disabled)

### Styling Properties

* `size` - Switch size variant (small, medium, large)

## Size Variants

### Small Switch

* **Switch Size**: 32px × 20px
* **Thumb Size**: 16px × 16px
* **Track Width**: 32px
* **Track Height**: 20px

### Medium Switch ⭐ **Default**

* **Switch Size**: 40px × 24px
* **Thumb Size**: 20px × 20px
* **Track Width**: 40px
* **Track Height**: 24px

### Large Switch

* **Switch Size**: 48px × 28px
* **Thumb Size**: 24px × 24px
* **Track Width**: 48px
* **Track Height**: 28px

## Styling & Colors

### Switch Colors

* **Track (Off)**: `HuxTokens.surfaceSecondary(context)`
* **Track (On)**: `HuxTokens.primary(context)`
* **Thumb (Off)**: `HuxTokens.surfacePrimary(context)`
* **Thumb (On)**: `HuxTokens.surfacePrimary(context)`
* **Border**: `HuxTokens.borderPrimary(context)`

### Disabled State Colors

* **Track (Disabled)**: `HuxTokens.surfaceSecondary(context)` with 50% opacity
* **Thumb (Disabled)**: `HuxTokens.surfacePrimary(context)` with 50% opacity

## Animation

### Transition Timing

* **Duration**: 200ms smooth animation
* **Curve**: Natural easing for professional feel
* **Properties**: Position, color, and opacity transitions

### Interactive Feedback

* Smooth thumb movement
* Color transitions
* Hover state effects

## Accessibility

### Screen Reader Support

* Proper semantic labeling
* State announcements
* Focus management

### Keyboard Navigation

* Tab key support
* Space/Enter key activation
* Focus indicators

### Touch Targets

* Minimum 44px touch area
* Proper spacing for mobile use
* Clear visual feedback

## Examples

<CardGroup cols={2}>
  <Card title="Form Building" icon="edit" href="/examples/form-building">
    See HuxSwitch in action within forms
  </Card>

  <Card title="Interactive Examples" icon="mouse-pointer" href="/examples/interactive">
    Try different switch configurations
  </Card>
</CardGroup>

## Related Components

* [HuxInput](/components/input) - Text input component
* [HuxCheckbox](/components/checkbox) - Checkbox component
* [HuxDateInput](/components/date-input) - Date input component