Switch

Switch represents an immediate boolean setting such as notifications, synchronization, or a persistent preference.

Import

import { Switch } from '@vellira-ui/react-native';

API

API details are generated from packages/react-native/API.md.

Prop	Type	Required	Description
accessibilityLabel	string	No	Accessible name announced by assistive technology.
checked	boolean	No	Controlled checked state.
defaultChecked	boolean	No	Initial checked state for uncontrolled usage.
disabled	boolean	No	Disables interaction.
required	boolean	No	Marks the control as required.
invalid	boolean	No	Marks the control as invalid.
onCheckedChange	(checked: boolean) => void	No	Called when the checked state changes.

When To Use

• Notifications.
• Background synchronization.
• Feature enablement.
• Persistent user preferences.
• Use Checkbox for form-like independent selections.

Accessibility

• Switch uses accessibilityRole='switch' and exposes checked and disabled state through accessibilityState.
• Provide a meaningful accessibilityLabel for every production switch whose purpose is not already obvious.
• Required and invalid state are currently communicated through the component's accessibility hint.
• Verify state announcements with VoiceOver and TalkBack when Switch is used in critical settings flows.

See Also

• Checkbox - Checkbox for form-like independent selections.
• FormField - FormField for labels, descriptions, and validation layout.

Basic Usage

<Switch accessibilityLabel='Enable notifications' defaultChecked />

Controlled Usage

import { Switch } from '@vellira-ui/react-native';
import { useState } from 'react';

export function NotificationsSetting() {
  const [enabled, setEnabled] = useState(false);

  return (
    <Switch
      accessibilityLabel='Enable notifications'
      checked={enabled}
      onCheckedChange={setEnabled}
    />
  );
}

Uncontrolled Usage

<Switch accessibilityLabel='Enable automatic updates' defaultChecked />

States

<Switch accessibilityLabel='Available setting' />

<Switch accessibilityLabel='Enabled setting' checked />

<Switch accessibilityLabel='Unavailable setting' disabled />

<Switch accessibilityLabel='Required setting' required />

<Switch accessibilityLabel='Invalid setting' invalid />

Platform Pair

• React Switch for the web implementation.