Switch

A control that allows the user to toggle between checked and not checked states.

import { Switch } from '@/components/ui/switch';
import React, { useState } from 'react';

export function SwitchDemo() {
  const [isEnabled, setIsEnabled] = useState(false);

  return (
    <Switch
      label='Enable notifications'
      value={isEnabled}
      onValueChange={setIsEnabled}
    />
  );
}

Installation


pnpm dlx bna-ui add switch

Usage

import { Switch } from '@/components/ui/switch';

<Switch
  label='Enable notifications'
  value={isEnabled}
  onValueChange={setIsEnabled}
/>

Examples

Default

import { Switch } from '@/components/ui/switch';
import React, { useState } from 'react';

export function SwitchDemo() {
  const [isEnabled, setIsEnabled] = useState(false);

  return (
    <Switch
      label='Enable notifications'
      value={isEnabled}
      onValueChange={setIsEnabled}
    />
  );
}

Without Label

import { Switch } from '@/components/ui/switch';
import React, { useState } from 'react';

export function SwitchSimple() {
  const [isEnabled, setIsEnabled] = useState(false);

  return <Switch value={isEnabled} onValueChange={setIsEnabled} />;
}

With Error State

import { Switch } from '@/components/ui/switch';
import { View } from '@/components/ui/view';
import React, { useState } from 'react';

export function SwitchError() {
  const [isEnabled, setIsEnabled] = useState(false);

  return (
    <View style={{ gap: 46 }}>
      <Switch
        label='Terms and conditions'
        value={isEnabled}
        onValueChange={setIsEnabled}
      />

      <Switch
        label='Privacy policy'
        value={false}
        onValueChange={() => {}}
        error='You must accept the privacy policy'
      />
    </View>
  );
}

Disabled State

import { Switch } from '@/components/ui/switch';
import { View } from '@/components/ui/view';
import React, { useState } from 'react';

export function SwitchDisabled() {
  const [value, setValue] = useState(false);

  return (
    <View style={{ gap: 12 }}>
      <Switch value={value} label='Disabled (Off)' onValueChange={setValue} />

      <Switch
        label='Disabled (On)'
        value={true}
        onValueChange={() => {}}
        disabled={true}
      />
    </View>
  );
}

Settings List

import { Switch } from '@/components/ui/switch';
import { View } from '@/components/ui/view';
import { useThemeColor } from '@/hooks/useThemeColor';
import { BORDER_RADIUS } from '@/theme/globals';
import React, { useState } from 'react';

export function SwitchSettings() {
  const card = useThemeColor({}, 'card');

  const [notifications, setNotifications] = useState(true);
  const [darkMode, setDarkMode] = useState(false);
  const [location, setLocation] = useState(true);
  const [analytics, setAnalytics] = useState(false);

  return (
    <View
      style={{
        backgroundColor: card,
        borderRadius: BORDER_RADIUS,
        padding: 16,
        gap: 16,
      }}
    >
      <Switch
        label='Push notifications'
        value={notifications}
        onValueChange={setNotifications}
      />
      <Switch label='Dark mode' value={darkMode} onValueChange={setDarkMode} />
      <Switch
        label='Location services'
        value={location}
        onValueChange={setLocation}
      />
      <Switch
        label='Analytics & performance'
        value={analytics}
        onValueChange={setAnalytics}
      />
    </View>
  );
}

Custom Colors

import { Switch } from '@/components/ui/switch';
import { View } from '@/components/ui/view';
import React, { useState } from 'react';

export function SwitchColors() {
  const [switch1, setSwitch1] = useState(true);
  const [switch2, setSwitch2] = useState(true);
  const [switch3, setSwitch3] = useState(true);

  return (
    <View style={{ gap: 12 }}>
      <Switch
        label='Default green'
        value={switch1}
        onValueChange={setSwitch1}
      />
      <Switch
        label='Custom blue'
        value={switch2}
        onValueChange={setSwitch2}
        trackColor={{ false: '#e0e0e0', true: '#2196F3' }}
        thumbColor={switch2 ? '#ffffff' : '#f4f3f4'}
      />
      <Switch
        label='Custom purple'
        value={switch3}
        onValueChange={setSwitch3}
        trackColor={{ false: '#e0e0e0', true: '#9C27B0' }}
        thumbColor={switch3 ? '#ffffff' : '#f4f3f4'}
      />
    </View>
  );
}

API Reference

Switch

A toggle switch component with optional label and error states.

Prop	Type	Default	Description
`label`	`string`	-	Optional label text for the switch.
`error`	`string`	-	Error message to display (changes label color).
`labelStyle`	`TextStyle`	-	Additional styles to apply to the label text.
`value`	`boolean`	-	The current state of the switch.
`onValueChange`	`(value: boolean) => void`	-	Callback fired when the switch state changes.
`disabled`	`boolean`	`false`	Whether the switch is disabled.
`...props`	`SwitchProps` (from React Native)	-	All other React Native Switch props are supported.

Accessibility

The Switch component is built with accessibility in mind:

Uses native React Native Switch for optimal platform behavior
Supports screen reader announcements for state changes
Proper focus management and keyboard navigation
Color contrast meets accessibility standards
Label text is properly associated with the switch control
Error states provide clear feedback to assistive technologies

Spinner Table

On This Page

Installation Usage Examples Default Without Label With Error State Disabled State Settings List Custom Colors API Reference Switch Accessibility