Hudini Toggle Component

daisyUI-style switch — pill-shaped track + sliding handle with per-state icons that cross-fade.

Toggle Component

A daisyUI-style switch. Same contract as Checkbox — uncontrolled state, onChange callback, disabled/readOnly, getValue() for form serialization. The visual is a pill-shaped track with a handle that slides between left (off) and right (on).

Two icons — onIcon and offIcon — ride inside the handle. When the toggle flips, the handle slides while the icons cross-fade (outgoing → 0, incoming → 1).

Features

  • đŸŽ¯ Same API as Checkbox: toggle, setChecked, getValue, disable, readOnly, onChange, onClick, name
  • 🎨 Two icons: onIcon (default 'check') + offIcon (default 'xmark'). Pass null to disable either
  • đŸ’Ģ Cross-fade during slide: outgoing icon fades to 0 while incoming fades to 1, all in sync with the handle motion
  • 🖌ī¸ Two track colors: color (on) + offColor (off) — perfect for dark-mode toggles etc.
  • 🧱 Composable: reports its size so Row / Column / Stack lay it out correctly

Props

  • checked - Initial state (default false)
  • label - Optional text to the right
  • onIcon / offIcon - FA icon per state. Pass null to disable
  • iconColor - Default 'slate-700' (contrast on white handle)
  • color / offColor - Track color per state
  • handleColor - Default 'white'
  • labelColor, size, borderRadius, labelGap
  • disabled, readOnly, name
  • onChange - (checked, name?) => void
  • onClick - Fires on any click

Live Example

Loading game...

Usage Example

import Phaser from 'phaser';
import {
    createTheme,
    HUDINI_KEY,
    HudiniPlugin,
    withHudini,
    Toggle,
} from 'hudini';

class SettingsScene extends Phaser.Scene {
    create(): void {
        // 1. Default toggle — check / xmark icons that cross-fade
        const sound = new Toggle({
            scene: this, x: 200, y: 100,
            label: 'Sound',
            checked: true,
            name: 'sound',
            onChange: (v) => console.log('sound:', v),
        });

        // 2. Dark-mode toggle — moon (on) + sun (off), different track colors
        const darkMode = new Toggle({
            scene: this, x: 200, y: 160,
            label: 'Dark mode',
            onIcon: 'moon',
            offIcon: 'sun',
            color: 'indigo-600',
            offColor: 'yellow-400',
        });

        // 3. Read the current values later (form-style)
        const submit = () => ({
            sound: sound.getValue(),
            dark: darkMode.getValue(),
        });
    }
}