Switch

Forms

A toggle switch with label, description, 3 sizes, custom color, loading state, left/right label position, and haptic feedback.

GitHub

Installation

bash

npx native-mate add switch

Examples

#FAFAFA

Radius100%

Usage

tsx

import { Switch } from '~/components/ui/switch'
import { useState } from 'react'

const [enabled, setEnabled] = useState(false)

<Switch
  label="Enable notifications"
  value={enabled}
  onValueChange={setEnabled}
/>

Props

Prop	Type	Default	Description
value	boolean	—	The current on/off state.
onValueChange	(value: boolean) => void	—	Callback fired when toggled.
label	string	—	Text label rendered beside the switch.
description	string	—	Secondary description text below the label.
size	"sm" \| "md" \| "lg"	"md"	Controls track and thumb dimensions.
color	string	—	Custom active track color. Defaults to theme primary.
loading	boolean	false	Shows a spinner inside the thumb, prevents toggling.
haptic	boolean	true	Fires a light haptic when toggled (requires expo-haptics).
labelPosition	"left" \| "right"	"right"	Which side the label appears on.
disabled	boolean	false	Prevents toggling and reduces opacity.

Example

tsx

import { useState } from 'react'
import { Switch } from '~/components/ui/switch'
import { View } from 'react-native'
import { Text } from '@native-mate/core'

export function SwitchExample() {
  const [notifications, setNotifications] = useState(true)
  const [darkMode, setDarkMode] = useState(false)
  const [analytics, setAnalytics] = useState(false)

  return (
    <View style={{ gap: 16, padding: 16 }}>
      <Switch label="Push notifications" value={notifications} onValueChange={setNotifications} />
      <Switch label="Dark mode" value={darkMode} onValueChange={setDarkMode} />
      <Switch label="Usage analytics" value={analytics} onValueChange={setAnalytics} disabled />
    </View>
  )
}

Checkbox

Slider