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

Property	Type	Default	Description
checked	boolean	false	Whether 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.
children	ReactText | (props) => ReactElement	undefined	Label text or render function displayed next to the toggle.

Storybook

Live examples coming soon via Storybook.