Skip to main content

​
Overview

The Switch component renders a boolean input toggle. Uniwind provides className prop support for styling this component.

​
Styling Convention

For style props: Use regular Tailwind classes directly (e.g., className="p-4").For non-style props (like color): Use the accent- prefix (e.g., colorClassName="accent-bg-blue-500").

​
Uniwind Bindings

​
className
string
Maps to the style prop. Use any Tailwind utility classes.
​
thumbColorClassName
string
Maps to the thumbColor prop. Requires accent- prefix for color values.
​
trackColorOnClassName
string
Maps to the trackColor.true prop (when switch is on). Requires accent- prefix for color values.
​
trackColorOffClassName
string
Maps to the trackColor.false prop (when switch is off). Requires accent- prefix for color values.
​
ios_backgroundColorClassName
string
Maps to the ios_backgroundColor prop. Requires accent- prefix for color values.

​
Usage Example

import { Switch, View } from 'react-native'

<View className="p-4">
  <Switch
    value={isEnabled}
    onValueChange={setIsEnabled}
    className="m-2"
    thumbColorClassName="accent-bg-white"
    trackColorOnClassName="accent-bg-blue-500 dark:accent-bg-blue-400"
    trackColorOffClassName="accent-bg-gray-300 dark:accent-bg-gray-700"
    ios_backgroundColorClassName="accent-bg-gray-300"
  />
</View>
⌘I