@zedtech/zedkit-ui

Label

Accessible labels that pair with any control via `htmlFor`.

Stable@zedtech/zedkit-ui

Wraps: @radix-ui/react-label

Project name

View props table

Who is it for?: Developers naming inputs accessibly.
When should I use it?: For every visible input name.
When should I pick something else?: For placeholder-only inputs — use `aria-label` instead; for headings — use Heading.

Use it

Examples import from the package. With copied source, import from @/components/ui/label instead.

Simple

import { Input, Label } from "@zedtech/zedkit-ui";
<Label htmlFor="name">Name</Label>
<Input id="name" placeholder="Ada" />

Required mark

Work email

Company

import { Input, Label } from "@zedtech/zedkit-ui";
<Label htmlFor="email">Email <span aria-hidden="true">*</span></Label>
<Input id="email" required />

Label a native input

City

import { Label } from "@zedtech/zedkit-ui";
<Label htmlFor="city">City</Label>
<input id="city" className="rounded-md border border-border px-field-pad py-control-block-lg" />

Kit not installed yet?

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 { Label } from "@zedtech/zedkit-ui";

export default function Page() {
  return (
    <main className="px-page-gutter py-section-sm">
      <Label htmlFor="city">City</Label>
      <input id="city" className="rounded-md border border-border px-field-pad py-control-block-lg" />
    </main>
  );
}

Package version 2.0.1.

Props

Prop

Type

Show inherited HTML attributes

Standard attributes from the underlying element. See MDN.

Prop

Type

Accessibility

Pairs with a control via htmlFor plus a matching id; clicking the label focuses the control (native behavior). A disabled peer dims the label via peer-disabled. Size is text-dense (13px) with leading-none. Identity --zk-label-transform stays on badges and table heads.

Troubleshooting

Clicking the label does nothing — the control needs a matching `id` for `htmlFor`. Label not dimming with a disabled control — `peer-disabled` needs the control as a preceding `peer` sibling.

DatePicker

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

PromptInput

One rounded surface with an auto-growing field and an in-field send control; Enter sends, Shift+Enter adds a line.