Hudini Checkbox Component

Uncontrolled toggleable form control with custom icon, disabled/readOnly states, and a pop animation on state change.

Checkbox Component

A toggleable form control. The Checkbox owns its own state (uncontrolled): read it back via getValue() / isChecked(), mutate it via toggle() / setChecked(v), observe changes via the onChange callback.

For persistent named state, wire it up with phaser-hooks' withLocalState on the outside — the Checkbox stays decoupled from any store.

Features

  • 💚 Custom icon: default check, use any Font Awesome key (heart, star, thumbs-up, ...)
  • 🎨 Custom colors: box color + icon color independently
  • 🏷ī¸ Optional label: clicking the label toggles too (HTML-label behavior)
  • đŸšĢ Disabled + readOnly: separate states — disabled mutes the visual, readOnly only blocks clicks
  • ✨ Pop animation: icon scales + fades in on check, out on uncheck (Back.easeOut)
  • 📋 Form-ready: name + getValue() for building a Form later — no runtime dep on any state store

Props

  • checked - Initial state (default false)
  • label - Optional text label to the right of the box
  • icon - Font Awesome icon shown when checked (default check)
  • iconColor - Color of the icon (default white)
  • color - Box fill / border color (default blue-500)
  • labelColor, size, borderRadius, labelGap
  • disabled, readOnly
  • name - Form field name, passed as the second arg of onChange
  • onChange - (checked, name?) => void
  • onClick - Fires on any click, even if the state does not change

Methods

  • toggle() / setChecked(v)
  • isChecked() / getValue()
  • disable() / enable() / setDisabled(v) / isDisabled()
  • setReadOnly(v) / isReadOnly()
  • onChange(cb) / onClick(cb) - Replace the handlers post-construction

Live Example

Loading game...

Usage Example

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

class SettingsScene extends Phaser.Scene {
    create(): void {
        // 1. Basic checkbox with a label
        const sound = new Checkbox({
            scene: this, x: 100, y: 100,
            label: 'Enable sound',
            checked: true,
            name: 'sound',
            onChange: (v, name) => console.log(name, v),
        });

        // 2. Custom icon (a heart for "favorite")
        const favorite = new Checkbox({
            scene: this, x: 100, y: 160,
            label: 'Favorite',
            icon: 'heart',
            color: 'red-500',
        });

        // 3. Collect values later (mini form)
        const submit = () => {
            const payload = {
                sound: sound.getValue(),
                favorite: favorite.getValue(),
            };
            console.log('form:', payload);
        };
    }
}