WinCheckbox

A classic Win2k checkbox with label. Uses a hidden native checkbox with a custom visual indicator.

When to use

Use WinCheckbox for binary options, preference toggles, and multi-select lists where each item can be independently toggled.

When not to use

Do not use WinCheckbox for mutually exclusive options. Use WinRadio instead. Do not use it for instant-acting controls; use WinToggle for that.

Installation

Install the package:

npm install win2k-ui

Then import the component:

import { WinCheckbox } 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.

Default

Remember my password

Checked

Enable automatic updates

With onChange handler

I agree to the terms of serviceState: Not agreed

Disabled

System setting (locked)Already applied (read-only)

Props

All available props for the WinCheckbox component.

Prop	Type	Default	Description
`label`	`string`	`—`	Text label displayed next to the checkbox.
`...props`	`InputHTMLAttributes`	`—`	All standard HTML input attributes except `type`.
`className`	`string`	`''`	Additional CSS classes.

Usage

Example showing the component in a typical context:

import { WinCheckbox } from 'win2k-ui'

export function Example() {
  return (
    <WinCheckbox label="Remember me" />
  )
}

Notes

WinCheckbox uses CSS appearance: none with a custom background SVG for the checkmark. The native checkbox input is preserved for accessibility and form integration. `checked` state shows a navy background with white checkmark.