Skip to Content
UI Components/Cupertino UI/Cupertino Radio

Cupertino Radio

iOS-style radio button for single 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

Radio.tsx
1import { useState } from 'react';
2import { FlutterCupertinoRadio } from '@openwebf/react-cupertino-ui';
3
4export function RadioExample() {
5  const [selected, setSelected] = useState('a');
6
7  return (
8    <>
9      <FlutterCupertinoRadio val="a" groupValue={selected} onChange={(e) => setSelected(e.detail)} />
10      <FlutterCupertinoRadio val="b" groupValue={selected} onChange={(e) => setSelected(e.detail)} />
11    </>
12  );
13}

API Reference

Props (React)

NameTypeDefaultDescription
valstring-Value represented by this radio.
groupValuestring-Current selected value for the group.
disabledbooleanfalseDisable interactions.
onChange(event: CustomEvent<string>) => void-Fires when selected (`event.detail` is the new group value).
Full type definitions: npm package docs.