Switch

Requires:

@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
		No	-	Fires when the checked state changes; detail contains value

Valid Values

`type`

Value	Description	Since
`switch`	Switch style	-
`checkbox`	Checkbox style	-

Examples

Basic usage

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

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>
  );
}