Cyberpunk Checkbox

Checkbox primitive with label and Steez form spacing.

Components / Cyberpunk Checkbox

Formsbooleansettings

Checkbox primitive for Steez forms.

Preview

Loading preview…

Usage

Checkbox primitive with label and Steez form spacing.

<CyberpunkCheckbox
  label="Enable auto-posting"
  checked={enabled}
  onChange={setEnabled}
/>

Files

components/steez/CyberpunkCheckbox.tsxcomponent

components/steez/CyberpunkCheckbox.module.cssstyle

components/hooks/useStableId.tsfile

Install package

pnpm add @steez-ui/theme @steez-ui/icons @steez-ui/ui

import { CyberpunkCheckbox } from "@steez-ui/ui";

Install from registry

pnpm dlx shadcn@latest add https://steez-ui-6v5.pages.dev/r-steez/cyberpunk-checkbox.json

Source files install at your project root. Import styles/steez/tokens.css once in your global stylesheet or root layout. No Steez packages needed.

import { CyberpunkCheckbox } from "<project-root>/components/steez/CyberpunkCheckbox";

Replace <project-root> with a relative path from your file.

Copy standalone file

/copy/steez/cyberpunk-checkbox.tsxLoading…

Copy the entire generated TSX file into your React project. It embeds CSS, local helpers, icons, and theme fallbacks, so no Steez npm packages are required.

Open standalone source

Cyberpunk Radio

Radio and radio-group primitives for exclusive choices.

Cyberpunk Slider

Native range with value display and an optional square-to-diamond thumb.