---
title: "Label"
description: "The visible label of a control. Inside Field it connects itself; outside Field it uses htmlFor and keeps the same look and focus."
kind: component
id: C-062
registry: "label"
docs: "https://koten.codehive.com.co/components/label"
markdown: "https://koten.codehive.com.co/md/components/label.md"
install: "npx shadcn@latest add https://koten.codehive.com.co/r/label.json"
language: en
---

# Label · ラベル

> Component C-062 in the Koten UI catalog.

The visible label of a control. Inside Field it connects itself; outside Field it uses htmlFor and keeps the same look and focus.

> Japanese labels in this page are documentation metadata. Keep the consumer UI in the product's language and do not add Japanese decoration unless the user asks (R-031).

## Install

Install `koten-theme` first when the project does not have Koten tokens yet. Use the runner of your project.

```bash
# Node
npx shadcn@latest add https://koten.codehive.com.co/r/label.json

# Bun
bunx shadcn@latest add https://koten.codehive.com.co/r/label.json
```

## Files

- `@/components/ui/label.tsx`
- `@/lib/koten/cn.ts`
- `@/lib/koten/format.ts`
- `@/lib/koten/intl.ts`
- `@/lib/koten/labels.ts`
- `@/lib/koten/provider.tsx`

## Reference

- Upstream primitive: https://base-ui.com/react/components/field

## Examples

### Inside Field

Field renders Label and manages htmlFor, required and the disabled state.

```tsx
<Field label="Código de cliente" description="Se genera al guardar." required>
  <Input placeholder="KURA-0142" />
</Field>
```

### Standalone use

Outside Field, htmlFor must point to the control id. The label remains a native <label>.

```tsx
<Label htmlFor="customer-name" required>
  Nombre del cliente
</Label>
<Input id="customer-name" placeholder="KURA Distribución" />
```

### Use inside a form

A Label with htmlFor, linked help text and submission, without relying on Field.

```tsx
<form className="grid max-w-md gap-[var(--koten-gap)]">
  <div className="grid gap-[calc(var(--koten-gap)*0.5)]">
    <Label htmlFor="customer-name" required>Nombre del cliente</Label>
    <Input
      id="customer-name"
      name="customer"
      autoComplete="organization"
      aria-describedby="customer-name-hint"
      required
    />
    <p id="customer-name-hint" className="text-2xs leading-relaxed text-faint">
      Tal como aparece en la factura.
    </p>
  </div>

  <div className="flex flex-wrap items-center gap-[var(--koten-gap)]">
    <Button type="submit" variant="primary">Guardar cliente</Button>
  </div>
</form>
```

## Props

| Prop | Type | Default | Notes |
| --- | --- | --- | --- |
| `children` | `ReactNode` | `—` | Visible label text; it should name the field, not describe its format. |
| `htmlFor` | `string` | `—` | Control id when used outside Field; inside, Base UI manages it. |
| `required` | `boolean` | `false` | Adds an aria-hidden asterisk; it does not replace the control's required attribute. |
| `render` | `ReactElement \| function` | `—` | Base UI composition to change the root element without losing the association. |
| `className` | `string` | `—` | Local adjustments; base size and weight come from the tokens. |

## Accessibility

- Every control needs a visible label; the placeholder only assists and disappears once the user types.
- Outside Field, htmlFor must match the control id exactly.
- The required asterisk is aria-hidden: convey the requirement with the required attribute or with text as well.
- Do not nest links or buttons inside the label; a click should activate only the control.

## Sources

- Catalog page: https://koten.codehive.com.co/components/label
- Markdown: https://koten.codehive.com.co/md/components/label.md
- Repository: https://github.com/codehive-colombia/koten