Components

Toggle

Turn a boolean setting on or off.

Example

Requires React 18.2+ or 19 and shared styles. See setup.

Default

Loading preview…

Code
'use client';
import { useState } from 'react';
import { Toggle } from '@swiftuijs/ui';
import { VStack } from '@swiftuijs/ui';
import { Text } from '@swiftuijs/ui';
const ToggleDemo = () => {
    const [isOn, setIsOn] = useState(false);
    return (<VStack spacing={16}>
      <Text>Toggle is {isOn ? 'on' : 'off'}</Text>
      <Toggle aria-label="Notifications" isOn={isOn} onChange={setIsOn}/>
      <Toggle aria-label="Enabled setting" isOn={true} onChange={() => { }}/>
      <Toggle aria-label="Disabled setting" isOn={false} onChange={() => { }} disabled/>
    </VStack>);
};
export default function Example() {
    return (<ToggleDemo />);
}

Usage and limitations

  • Provide isOn and boolean onChange; state is controlled by the parent. disabled blocks interaction.
  • Use a clear visible label or aria-label naming the setting. Native keyboard activation and on/off feedback are provided.
  • Group related settings and keep their state in React.

API reference

PropTypeRequiredDescription
isOnbooleanYesWhether the toggle is currently on.
onChange(value: boolean) => voidYesCallback fired when the toggle state changes.
disabledbooleanNoWhether the toggle is disabled. Default: false

Inherits additional props from Omit< IBaseElementComponent<'input'>, 'type' | 'checked' | 'onChange' | 'children' >.

Edit this page on GitHubReport an issue

TimelineView

TimelineView re-renders its content on a fixed cadence, matching SwiftUI's scheduled-update mental model with a simple interval-based web adaptation.

Toolbar

Arrange actions in a horizontal toolbar.