RadCN
Inputsreadycomponentready

Label

A native label primitive for explicit form-control association, disabled state, and app-owned control composition.

Importimport { Label } from 'radcn/label'
Preview

Live package example

Render the upstream Checkbox and Label composition with exact terms copy, flex row layout, and native label activation.

Label Demo

Render the upstream Checkbox and Label composition with exact terms copy, flex row layout, and native label activation.

Preview
import { Checkbox } from 'radcn/checkbox'
import { Label } from 'radcn/label'

export function LabelDemo() {
  return (
    <div>
      <div class="flex items-center space-x-2">
        <Checkbox id="terms" />
        <Label for="terms">Accept terms and conditions</Label>
      </div>
    </div>
  )
}

Installation

Intended future install command. RadCN is private and not published to npm yet, so this snippet documents the target user-facing API rather than something external consumers can run today.

pnpm add radcn # intended future package
import { Label } from 'radcn/label'

Theming

RadCN tokens read the resolved theme from the document. Store the user's preference separately, then resolve system preferences to a concrete light or dark theme before setting package tokens.

<html data-radcn-theme-mode="system" data-radcn-theme="dark">
  ...
</html>

Accessibility

  • Label renders native label markup, so for links directly to a form control id in server HTML.
  • Clicking the Label activates the associated native Checkbox without React state or Radix Label behavior.
  • The upstream htmlFor prop maps to the native for prop in Remix UI.
  • Disabled label presentation is explicit through disabled, data-disabled, and native disabled controls composed by the app.

Customization

  • Label exposes class, style, data-disabled, and data-radcn-label for app-level styling and tests.
  • Checkbox composition exposes data-radcn-checkbox-wrapper, data-radcn-checkbox-input, and data-radcn-checkbox-indicator hooks.
  • The upstream flex items-center space-x-2 wrapper maps to app-owned row layout around RadCN primitives.
  • className, cn, and data-slot map to class and data-radcn-label hooks.

Remix 3 Notes

  • use client and Radix LabelPrimitive Root map to native label markup.
  • Radix Label remains a non-dependency because browser label semantics provide the required association and activation.
  • Tailwind text-sm, leading-none, font-medium, and select-none styling maps to package CSS plus app-owned class/style overrides.
  • group-data disabled and peer-disabled behavior map to explicit disabled props, native disabled controls, and app-owned composition.
  • Vendor source remains read-only evidence and is not imported by RadCN.