Switch

A customizable Switch component with animation support. It allows users to toggle between on and off states with smooth animations and customizable styles.

Import

Phaselis exports one main component for Switch.

import { Switch } from "phaselis";

• Switch: Main Component import for Switch

Usage

Basic Switch

import { Switch } from "phaselis";

const Example = () => {
  return (
    <Switch
      value={true}
      onChange={(e, value) => console.log("Switch toggled:", value)}
    />
  );
};

export default Example;

Props

value

boolean Optional boolean value to control the state of the switch. Defaults to false.

<Switch value={true} />

onChange

(event: any, value: boolean) => void

Callback function triggered when the switch value changes. Receives event and new value.

<Switch onChange={(e, value) => console.log("New switch state:", value)} />

duration

number

Duration of the animation in milliseconds. Defaults to 300.

<Switch duration={500} />

name

string

Name attribute for the switch.

<Switch
  name="notificationsToggle"
  value={true}
/>

showIcons

boolean

Boolean to control whether to show icons inside the switch.

<Switch showIcons />

onIcon / offIcon

SlotIconName

The icons to display inside the switch when showIcons is true. Defaults to "Check" for onIcon and "X" for offIcon.

<Switch showIcons onIcon="Power" offIcon="PowerOff" />

LeftSlot / RightSlot

ReactNode

Components to render on the left or right side of the switch.

import { LucideIcon } from "phaselis";

<Switch
  LeftSlot={() => <LucideIcon name="PowerOff" />}
  RightSlot={() => <LucideIcon name="Power" />}
/>

style

Name	Type	Description
container	ViewStyle	Style for the outer container view of the switch.
track	ViewStyle	Style for the switch's track background.
thumb	ViewStyle	Style for the switch's thumb (toggle knob).
leftIcon	IconStyle	Style for the icon on the left side.
rightIcon	IconStyle	Style for the icon on the right side.

You can style the Switch with the style prop using either an object with named styles or directly provide ViewStyle properties that will be applied to the track element.

// Object with named styles
<Switch
  style={{
    container: { marginVertical: 10, padding: 5 },
    track: { backgroundColor: "#eef8ff", width: 80, height: 36 },
    thumb: { backgroundColor: "#007bff", width: 24, height: 24 },
    leftIcon: { color: "green" },
    rightIcon: { color: "red" }
  }}
/>

// Direct track styling
<Switch
  style={{ backgroundColor: "#f0f0f0", width: 80, height: 40, borderRadius: 20 }}
/>

containerStyle

ViewStyle

Additional style applied directly to the container View.

<Switch containerStyle={{ marginVertical: 10, padding: 8 }} />

thumbStyle

ViewStyle

Additional style applied directly to the thumb (toggle knob).

<Switch thumbStyle={{ backgroundColor: "#0066cc", width: 28, height: 28 }} />

leftIconStyle / rightIconStyle

IconStyle

Additional styles applied directly to the left or right icons when showIcons is true.

<Switch 
  showIcons 
  leftIconStyle={{ color: "green" }}
  rightIconStyle={{ color: "red" }}
/>

variation

default | primary | secondary | tertiary

Determines the style of the switch.

• default: Applies the default switch style.
• primary: Applies the primary switch style.
• secondary: Applies the secondary switch style.
• tertiary: Applies the tertiary switch style.

<Switch variation="tertiary" />