@zedtech/zedkit-ui

Checkbox

Accessible checkbox and switch toggles.

Stable@zedtech/zedkit-ui

Wraps: @radix-ui/react-checkbox, @radix-ui/react-switch

I accept the terms of sale

Notify me when the order ships

One email with the tracking link.

View props table

Who is it for?: Form builders collecting booleans and on/off settings.
When should I use it?: Checkbox for agreements and multi-picks, switch for instant on/off settings.
When should I pick something else?: For exclusive choices — use Select or radio inputs instead.

Use it

Simple

import { Checkbox, Label, Switch } from "@zedtech/zedkit-ui";
<Checkbox id="terms" />
<Label htmlFor="terms">Accept the terms</Label>
<Switch id="notify" aria-label="Notify me" />

Kit not installed yet?

This ships on npm only; there is no copy-source brick for it.

You get

Every component from one import, with the theme tokens included. Updates arrive with your package manager.

You need

React 19 and Tailwind CSS 4, for example a Next.js app created with the Tailwind option.

Install

Terminal

pnpm add @zedtech/zedkit-ui @fontsource-variable/inter @fontsource-variable/space-grotesk

Load the styles

Tailwind does not scan node_modules, so the @source line points it at the kit's class names. The path is relative to this file.

src/app/globals.cssReplace the contents

@import "tailwindcss";
@import "@zedtech/zedkit-ui/styles.css";
@source "../../node_modules/@zedtech/zedkit-ui/src/**/*.{ts,tsx}";
@source not "../../node_modules/@zedtech/zedkit-ui/src/**/*.test.*";

Pick a look

Set data-identity="glass" on <html> so the finished app matches the site. Fresh app: replace src/app/layout.tsx. Existing app: merge, and keep ThemeProvider and other providers.

src/app/layout.tsxReplace the contents

import "./globals.css";
import "./fonts";

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en" data-identity="glass">
      <body>{children}</body>
    </html>
  );
}

4
Load the fonts
The Glass look uses Inter and Space Grotesk; these imports self-host them.
src/app/fonts.tsCreate the file
```
import "@fontsource-variable/inter";
import "@fontsource-variable/space-grotesk";
```

Import and render

src/app/page.tsxReplace the contents

import { Checkbox, Label, Switch } from "@zedtech/zedkit-ui";

export default function Page() {
  return (
    <main className="px-page-gutter py-section-sm">
      <Checkbox id="terms" />
      <Label htmlFor="terms">Accept the terms</Label>
      <Switch id="notify" aria-label="Notify me" />
    </main>
  );
}

Package version 2.0.1.

Props

Prop

Type

Show inherited HTML attributes

Standard attributes from the underlying element. See MDN.

Prop

Type

Accessibility

Built on Radix: Checkbox has role="checkbox" and Switch has role="switch", both toggled with Space (Enter also toggles a Switch, not a Checkbox) and exposing their state through aria-checked. Neither has a visible name of its own: pair each with a Label using htmlFor/id, or pass aria-label. Use Switch only for settings that apply immediately.

MultiSelect

Searchable multi-select with removable chips, shared empty/loading states, keyboard support.

DatePicker

Button that opens a calendar in a popover. `id` pairs with `FieldLabel`.