Label

Free · MIT

The name of a control. Point it at the control with htmlFor and the control's id, or wrap both in it. Clicking it focuses or toggles the control. It dims with the control beside it (a peer) when that control is disabled or locked, so keep it directly after the control in the markup, or set data-disabled on a wrapping group.

Markdown

Version 5.2.0· other versions

This page is for 5.2.0, the current release. An earlier release’s page is the Markdown that release published, so the docs match the version you have installed (candor-lock.json records it).

Not in the docs of 1.3.0, 1.4.0, 1.5.0, 1.5.1, 1.6.0, 1.7.0, 1.8.0, 1.8.1, 1.9.0, 1.9.1, 2.0.0, 2.1.0 and 2.2.0: the page came later, or had another name then.

Docs pages weren’t kept for 1.0.0, 1.0.1, 1.1.0, 1.1.1, 1.2.0 and 1.2.1: they are kept from 1.3.0 on, and before that only llms.txt was published.

Preview

Install

With the Candor CLI

Open the starter in StackBlitz

Opens the free starter app in StackBlitz, in your browser, on stackblitz.com. Label isn’t added for you: run npx candor-ui add label in its terminal. The starter’s agent needs an Anthropic API key to chat; without one it shows the components only.

First time? Get started sets up the registry and theme. Or with shadcn directly: npx shadcn@latest add @candor/label

Brings in: tokens, utils · npm: @base-ui/react@^1.9.0

Usage

TSX · The example above

"use client"

import { Label } from "@/components/candor/ui/label"
import { Input } from "@/components/candor/ui/input"

export default function Example() {
  return (
    <div className="flex w-full max-w-sm flex-col gap-2">
      <Label htmlFor="agent-name">Agent name</Label>
      <Input id="agent-name" placeholder="Billing assistant" />
    </div>
  )
}

<Label>

Prop	Type	Default	Description
render	`useRender.RenderProp \| undefined`	—	Draws this element instead of a <label>, with the label's styles: `render={<span />}` for a caption that names a group.

Also takes the props of React.ComponentProps<"label">.