Import
import { Toggle } from '@ui-kitten/components';
Usage
import React from 'react';
import { Toggle } from '@ui-kitten/components';
export const ToggleExample = () => {
const [checked, setChecked] = React.useState(false);
return (
<Toggle
checked={checked}
onChange={nextChecked => setChecked(nextChecked)}
>
Enable notifications
</Toggle>
);
};
States
Toggle supports checked, unchecked, and disabled states.<Toggle checked={true}>
Enabled
</Toggle>
<Toggle checked={false}>
Disabled
</Toggle>
<Toggle checked={true} disabled>
Disabled Checked
</Toggle>
<Toggle checked={false} disabled>
Disabled Unchecked
</Toggle>
Status
Toggle can be styled with different status colors.<Toggle status='primary' checked={true}>
Primary
</Toggle>
<Toggle status='success' checked={true}>
Success
</Toggle>
<Toggle status='info' checked={true}>
Info
</Toggle>
<Toggle status='warning' checked={true}>
Warning
</Toggle>
<Toggle status='danger' checked={true}>
Danger
</Toggle>
<Toggle status='control' checked={true}>
Control
</Toggle>
Props
Whether the toggle is checked (on).
Called when the toggle should switch its value.
String, number or a function component to render next to the toggle. If it is a function, expected to return a Text component.
Status of the component. Can be
basic, primary, success, info, warning, danger or control.Whether the toggle is disabled.
Form Examples
Settings Panel
import React from 'react';
import { Toggle, Layout, Text, Divider } from '@ui-kitten/components';
const SettingsPanel = () => {
const [notifications, setNotifications] = React.useState(true);
const [darkMode, setDarkMode] = React.useState(false);
const [autoSave, setAutoSave] = React.useState(true);
const [analytics, setAnalytics] = React.useState(false);
return (
<Layout style={{ padding: 16, gap: 16 }}>
<Text category='h6'>Settings</Text>
<Toggle
checked={notifications}
onChange={setNotifications}
>
Push Notifications
</Toggle>
<Divider />
<Toggle
checked={darkMode}
onChange={setDarkMode}
>
Dark Mode
</Toggle>
<Divider />
<Toggle
checked={autoSave}
onChange={setAutoSave}
>
Auto Save
</Toggle>
<Divider />
<Toggle
checked={analytics}
onChange={setAnalytics}
>
Share Analytics
</Toggle>
</Layout>
);
};
Notification Preferences
import React from 'react';
import { Toggle, Layout, Text } from '@ui-kitten/components';
const NotificationPreferences = () => {
const [settings, setSettings] = React.useState({
email: true,
push: true,
sms: false,
marketing: false,
});
const updateSetting = (key, value) => {
setSettings(prev => ({ ...prev, [key]: value }));
};
return (
<Layout style={{ padding: 16, gap: 12 }}>
<Text category='h6'>Notification Preferences</Text>
<Layout style={{ gap: 12, paddingVertical: 8 }}>
<Layout>
<Toggle
checked={settings.email}
onChange={(checked) => updateSetting('email', checked)}
>
Email Notifications
</Toggle>
<Text appearance='hint' category='c1' style={{ marginLeft: 56 }}>
Receive updates via email
</Text>
</Layout>
<Layout>
<Toggle
checked={settings.push}
onChange={(checked) => updateSetting('push', checked)}
>
Push Notifications
</Toggle>
<Text appearance='hint' category='c1' style={{ marginLeft: 56 }}>
Receive push notifications
</Text>
</Layout>
<Layout>
<Toggle
checked={settings.sms}
onChange={(checked) => updateSetting('sms', checked)}
>
SMS Notifications
</Toggle>
<Text appearance='hint' category='c1' style={{ marginLeft: 56 }}>
Receive text messages
</Text>
</Layout>
<Layout>
<Toggle
checked={settings.marketing}
onChange={(checked) => updateSetting('marketing', checked)}
>
Marketing Emails
</Toggle>
<Text appearance='hint' category='c1' style={{ marginLeft: 56 }}>
Receive promotional content
</Text>
</Layout>
</Layout>
</Layout>
);
};
Feature Flags
import React from 'react';
import { Toggle, Layout, Text, Button } from '@ui-kitten/components';
const FeatureFlags = () => {
const [features, setFeatures] = React.useState({
betaFeatures: false,
experimentalUI: false,
debugMode: false,
});
const toggleFeature = (key) => {
setFeatures(prev => ({ ...prev, [key]: !prev[key] }));
};
const resetFeatures = () => {
setFeatures({
betaFeatures: false,
experimentalUI: false,
debugMode: false,
});
};
return (
<Layout style={{ padding: 16, gap: 16 }}>
<Text category='h6'>Feature Flags</Text>
<Toggle
checked={features.betaFeatures}
onChange={() => toggleFeature('betaFeatures')}
status='info'
>
Beta Features
</Toggle>
<Toggle
checked={features.experimentalUI}
onChange={() => toggleFeature('experimentalUI')}
status='warning'
>
Experimental UI
</Toggle>
<Toggle
checked={features.debugMode}
onChange={() => toggleFeature('debugMode')}
status='danger'
>
Debug Mode
</Toggle>
<Button
appearance='outline'
size='small'
onPress={resetFeatures}
>
RESET ALL
</Button>
</Layout>
);
};
Conditional Settings
import React from 'react';
import { Toggle, Layout, Text } from '@ui-kitten/components';
const ConditionalSettings = () => {
const [masterToggle, setMasterToggle] = React.useState(false);
const [detailedSettings, setDetailedSettings] = React.useState({
option1: false,
option2: false,
option3: false,
});
const updateDetailedSetting = (key, value) => {
setDetailedSettings(prev => ({ ...prev, [key]: value }));
};
return (
<Layout style={{ padding: 16, gap: 16 }}>
<Toggle
checked={masterToggle}
onChange={setMasterToggle}
status='primary'
>
Enable Advanced Features
</Toggle>
{masterToggle && (
<Layout style={{ paddingLeft: 24, gap: 12 }}>
<Toggle
checked={detailedSettings.option1}
onChange={(checked) => updateDetailedSetting('option1', checked)}
>
Feature Option 1
</Toggle>
<Toggle
checked={detailedSettings.option2}
onChange={(checked) => updateDetailedSetting('option2', checked)}
>
Feature Option 2
</Toggle>
<Toggle
checked={detailedSettings.option3}
onChange={(checked) => updateDetailedSetting('option3', checked)}
>
Feature Option 3
</Toggle>
</Layout>
)}
</Layout>
);
};