Label
Form-control label. No headless dep — Base UI's `Field.Label` is the forms-aware variant (see `form.tsx`); this is the lower-level shadcn-canon label for controls that own their own id wiring. Server component. Mirrors…
Preview
Rendered from the story the storybook (a11y) CI gate runs axe against — the preview can't show something that hasn't been verified.
Install
Two equivalent paths — the URL works in any shadcn-CLI setup; the alias works once you've registered @interlace in your components.json.
npx shadcn@latest add https://ds.interlace.tools/r/label.jsonnpx shadcn@latest add @interlace/labelHistory
This component is at v1.1.0, first shipped in @interlace/ui 1.0.0. The version is stamped as a banner into the file the install writes, so the copy in your tree says which one you have — compare it with the number above before deciding whether to re-run the install.
@interlace/ui 1.0.01 entry
- Addedminor
The component floor reaches every tier: form, overlay, navigation and display primitives were modelled to the portable 26-rule floor with skeletons, locked breakpoints, and AA contrast measured per composite rather than eyeballed.
Components- @interlace/input
- @interlace/textarea
- @interlace/select
- @interlace/checkbox
- @interlace/radio-group
- @interlace/switch
- @interlace/slider
- @interlace/number-field
- @interlace/form
- @interlace/dialog
- @interlace/alert-dialog
- @interlace/sheet
- @interlace/popover
- @interlace/tooltip
- @interlace/hover-card
- @interlace/dropdown-menu
- @interlace/context-menu
- @interlace/tabs
- @interlace/accordion
- @interlace/collapsible
- @interlace/breadcrumb
- @interlace/pagination
- @interlace/toast
- @interlace/card
- @interlace/badge
- @interlace/avatar
- @interlace/alert
- @interlace/separator
- @interlace/progress
- @interlace/skeleton
Import
2 named exports — pull the parts you need.
import { Label, MIN_VIEWPORT } from '@/components/ui/label';Anatomy
Extracted from the primitive's JSDoc header. The source is the only documentation that can't drift.
<label data-slot="label" data-min-viewport="320">…</label>
API reference
Parsed from the type declarations in the source — the same file the install writes into your tree, so this table can't drift from the component you get.
Label
Also accepts every <label> attribute.
Accessibility
Every story for this component is rendered headlessly and checked with axe-core (wcag2aa, wcag22aa, best-practice, ACT) on every PR. That gate has no continue-on-error, so what ships has zero known violations.
What follows is what static analysis can see. Axe cannot press a key and never sees an overlay open, so the operable-without-a-mouse claim lives in Behavior instead, where the keyboard path is replayed step by step.
- Focus + keyboard behaviour
- Native element semantics — no interaction layer to get wrong.
- Focus ring (WCAG 2.2 SC 2.4.13)
- Not focusable — no focus indicator required.
- Reduced motion
- No animation to gate.
- ARIA in the source
- None — semantics come from the element or the Base UI primitive rather than hand-written ARIA.
Examples
3 more states from the same story file.
R-rule compliance
Every primitive in @interlace/ui models to the portable 26-rule floor enforced by the componentApi ESLint preset. The cells below pin exactly where each rule applies in this file.
| Rule | Concept | Where |
|---|---|---|
| R4 | Extends native el | `React.ComponentProps<'label'>` |
| R6 | data-slot on the part | `data-slot="label"` |
| R7 | className merged + ...rest + ref | `cn(BASE, className)` + `{...props}` + forwarded ref |
| R12 | Reuse over wrap | native `<label>` — no bespoke association machinery |
| R14 | Declares min viewport | `data-min-viewport={String(MIN_VIEWPORT)}` + exported const |
| R18 | Tailwind only | zero inline `style` |
| R19 | Tokens only | `text-sm` / `gap-2` — scale tokens, no raw px |
| R25 | Server component | no hooks → no `'use client'` |
| R26 | A11y from native el | `<label htmlFor>` owns the control association |
Minimum viewport
This primitive declares MIN_VIEWPORT = 320 CSS px (DESIGN_PRINCIPLES #14). When mounted in a container narrower than this, the preflight contract draws a dev-mode outline so the regression is visible during local development.
<body data-interlace-dev>...</body>
Add the data-interlace-dev attribute to the body in development builds only — preflight then outlines any primitive whose container is below its declared data-min-viewport.
Dependencies
- Base UI primitive
- Native / no Base UI dependency
- Lucide icons
- none
- NPM dependencies
- none
- Registry dependencies
Source
The full implementation — components/ui/label.tsx once installed.
import * as React from 'react';
// @interlace/label v1.1.0 — Interlace design system.
// Docs, props and live preview: https://ds.interlace.tools/c/label
// What changed since: https://ds.interlace.tools/c/label#history
// Generated banner — keep it, the upgrade diff reads this version.
/**
* @interlace/ui — Label
*
* Form-control label. No headless dep — Base UI's `Field.Label` is the
* forms-aware variant (see `form.tsx`); this is the lower-level shadcn-canon
* label for controls that own their own id wiring. Server component.
* Mirrors: https://ui.shadcn.com/docs/components/label
*
* ## Anatomy
*
* <label data-slot="label" data-min-viewport="320">…</label>
*
* ## MIN_VIEWPORT — 320
…48 more lines…Registry JSON
The raw registry record — what the shadcn CLI fetches.