WinRadio

A classic Win2k radio button with label. Custom-styled native radio input with circular selection indicator.

When to use

Use WinRadio for mutually exclusive options where exactly one must be selected from a group.

When not to use

Do not use WinRadio for independent binary options. Use WinCheckbox instead.

Installation

Install the package:

npm install win2k-ui

Then import the component:

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

Props

All available props for the WinRadio component.

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

Usage

Example showing the component in a typical context:

import { WinRadio } from 'win2k-ui'

export function Example() {
  return (
    <WinRadio name="group" label="Option A" />
  )
}

Notes

Radio buttons use the native HTML radio input with custom appearance styling. The checked state displays as a filled navy circle. Group radios by setting the same `name` prop on all options.