---
name: "Switch"
mode: "component"
versionRequirements:
  - { name: "@ray-js/ray", version: "0.5.10" }
title: "Switch - Toggle switch"
---

## Switch

> [VERSION] @ray-js/ray >= 0.5.10

### Description

Switch selector for toggling between two mutually exclusive states.

### Props

| Property | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| `checked` | `boolean` | No | - | Whether currently checked |
| `disabled` | `boolean` | No | `false` | Whether disabled |
| `color` | `string` | No | `"#007AFF"` | Switch color, same as CSS color |
| `type` | `"switch" \| "checkbox"` | No | `"switch"` | Style type; options: switch, checkbox |
| `name` | `string` | No | - | Form field name, used as the key on form submit |
| `onChange` | `(event: SwitchChangeEvent) => void` | No | - | Fires when the checked state changes; detail contains value |

### Referenced Types

##### `interface` SwitchChangeEvent

| Property | Type | Description |
| --- | --- | --- |
| `type` | `"change"` | Event type |
| `detail` | `SwitchChangeDetail` | Event data; retrieve the current value via detail.value |

##### `interface` SwitchChangeDetail

| Property | Type | Description |
| --- | --- | --- |
| `value` | `boolean` | Current selected state |

##### `interface` BaseEvent

| Property | Type | Description |
| --- | --- | --- |
| `type` | `string` | Event type |
| `timeStamp` | `number` | Time in milliseconds since the page opened |
| `target` | `Target` | Source component of the event |
| `currentTarget` | `Target` | Collection of property values for the current component |
| `mark` | `any` | Event mark data |

##### `interface` Target

| Property | Type | Description |
| --- | --- | --- |
| `id` | `string` | id of the event source component |
| `dataset` | `Record<string, unknown>` | Collection of custom attributes from the `dataset` on the event source component |


### Examples

#### Basic usage

```tsx
import React from 'react';
import { Switch, View } from '@ray-js/ray';

export default function () {
  return (
    <View style={{ padding: '20px' }}>
      <Switch
        onChange={(e) => {
          console.log('Switch changed:', e.detail.value);
        }}
      />
    </View>
  );
}
```

#### Different states

```tsx
import React, { useState } from 'react';
import { Switch, View, Text } from '@ray-js/ray';

export default function () {
  const [checked, setChecked] = useState(false);

  return (
    <View style={{ padding: '20px' }}>
      <View style={{ marginBottom: '16px' }}>
        <Text>Controlled switch:</Text>
        <Switch
          checked={checked}
          onChange={(e) => {
            console.log('Switch changed:', e.detail.value);
            setChecked(e.detail.value);
          }}
          style={{ marginTop: '8px' }}
        />
        <Text style={{ marginTop: '8px' }}>Current status: {checked ? 'On' : 'Off'}</Text>
      </View>
      <View style={{ marginBottom: '16px' }}>
        <Text>Custom color:</Text>
        <Switch color="#ff0000" checked style={{ marginTop: '8px' }} />
      </View>
      <View style={{ marginBottom: '16px' }}>
        <Text>Disabled state:</Text>
        <Switch disabled style={{ marginTop: '8px' }} />
      </View>
      <View style={{ marginBottom: '16px' }}>
        <Text>Checkbox type:</Text>
        <Switch type="checkbox" checked style={{ marginTop: '8px' }} />
      </View>
    </View>
  );
}
```