Skip to main content

Toggle

Toggle is a switch component for boolean on/off controls. It provides a visual toggle that the user can tap or swipe.

Import​

import { Toggle } from '@ui-kitten/components';

Basic Usage​

import React, { useState } from 'react';
import { Layout, Toggle } from '@ui-kitten/components';

const ToggleExample = () => {
  const [checked, setChecked] = useState(false);

  return (
    <Layout style={{ flex: 1, padding: 16 }}>
      <Toggle
        checked={checked}
        onChange={(nextChecked) => setChecked(nextChecked)}
      >
        Notifications
      </Toggle>

      <Toggle checked={true} status="success">
        Dark Mode
      </Toggle>
    </Layout>
  );
};

Props​

PropertyTypeDefaultDescription
checkedbooleanfalseWhether the toggle is on.
onChange(checked: boolean) => void-Called when the toggle value changes.
status'basic' | 'primary' | 'success' | 'info' | 'warning' | 'danger' | 'control''basic'Semantic color of the toggle.
childrenstring | number | (props) => ReactElementundefinedLabel text or render function displayed next to the toggle.
appearance'default''default'Appearance defined in the Eva mapping.

Toggle also accepts all standard React Native TouchableOpacity props, including disabled.

Storybook​

Live examples coming soon via Storybook.