Switch

Switch is a boolean selection primitive mapping to UISwitch on iOS and Material Switch on Android. It provides a native toggle interface for Boolean configuration with customizable states for the track and thumb.

Basic Usage

The component is used as a controlled boolean input with the value and onValueChange props.

import { Switch, View, Text } from "@zynthjs/components";

function SettingsToggle() {
  const [notifications, setNotifications] = createSignal(true);

  return (
    <View style={{ flexDirection: "row", alignItems: "center", gap: 12 }}>
      <Text>Enable Notifications</Text>
      <Switch 
        value={notifications()} 
        onValueChange={setNotifications} 
      />
    </View>
  );
}

Coloring States

The trackColor and thumbColor props can be either a string (applying to the true state) or an object specifying individual false and true values.

<Switch
  value={isOn()}
  onValueChange={setIsOn}
  trackColor={{ 
    false: "#767577", 
    true: "#81b0ff" 
  }}
  thumbColor={{ 
    false: "#f4f3f4", 
    true: "#f5dd4b" 
  }}
/>

Disabling Interaction

Set the disabled prop to prevent user interaction while maintaining the current visual state.

<Switch 
  value={true} 
  disabled={true} 
  onValueChange={() => {}} 
/>

Props