WinToggle

A minimal, plain-text toggle styled as a clickable label. Red for checked, muted grey for unchecked.

When to use

Use WinToggle for binary settings, on/off switches, or attendance toggles.

When not to use

Do not use WinToggle when you need a multi-state control. Use WinSelect instead.

Installation

Install the package:

npm install win2k-ui

Then import the component:

import { WinToggle } from 'win2k-ui'

Make sure you have Tailwind CSS v4 set up, then add this to your root CSS file:

@import "tailwindcss";
@import "win2k-ui/styles.css";

No other dependencies required. The components ship with zero third-party UI dependencies — just Tailwind CSS 4 and React.

Preview

Interactive examples showing various states and configurations. Click “Show Code” to view the source for each variation.

Unchecked state

Disabled

Checked state

Enabled

Settings panel

Auto Save

Show Hidden

Sound Enabled

Props

All available props for the WinToggle component.

Prop	Type	Default	Description
`checked`	`boolean`	`—`	Current toggle state.
`onToggle`	`() => void`	`—`	Toggle handler.
`label`	`string`	`'✓ On' / '○ Off'`	Custom label text.
`className`	`string`	`''`	Additional CSS classes.

Usage

Example showing the component in a typical context:

import { useState } from 'react'
import { WinToggle } from 'win2k-ui'

export function Example() {
  const [checked, setChecked] = useState(false)
  return (
    <WinToggle
      checked={checked}
      onToggle={() => setChecked(!checked)}
      label={checked ? 'Enabled' : 'Disabled'}
    />
  )
}