Skip to Content
UI Components/Cupertino UI/Cupertino Switch

Cupertino Switch

iOS-style toggle switch for boolean values

Framework

View in WebF Go

Download WebF Go to preview this component on devices and desktop.

Installation

Install
1npm install @openwebf/react-cupertino-ui

Usage

Switch.tsx
1import { useState } from 'react';
2import { FlutterCupertinoSwitch } from '@openwebf/react-cupertino-ui';
3
4export function SwitchExample() {
5  const [enabled, setEnabled] = useState(false);
6
7  return (
8    <FlutterCupertinoSwitch
9      checked={enabled}
10      onChange={(e) => setEnabled(e.detail)}
11    />
12  );
13}

API Reference

Props (React)

NameTypeDefaultDescription
checkedbooleanfalseWhether the switch is on.
disabledbooleanfalseDisable interactions.
activeColorstring-Track color when on (hex).
inactiveColorstring-Track color when off (hex).
onChange(event: CustomEvent<boolean>) => void-Fires on toggles (`event.detail`).
Full type definitions: npm package docs.