Skip to Content
UI Components/Cupertino UI/Cupertino CheckBox

Cupertino CheckBox

iOS-style checkbox for multiple selection

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

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

API Reference

Props (React)

NameTypeDefaultDescription
checkedboolean | nullfalseChecked state (use null for mixed when `tristate`).
tristatebooleanfalseEnable mixed state.
disabledbooleanfalseDisable interactions.
onChange(event: CustomEvent<boolean>) => void-Fires on changes (`event.detail`).
onStatechange(event: CustomEvent<"checked" | "unchecked" | "mixed">) => void-Fires on changes including mixed transitions.
Full type definitions: npm package docs.