Label

Renders an accessible label associated with controls.

Your name

tsx

1
2<Label htmlFor="name">Your name</Label>
<Input id="name" placeholder="Sofia Davis" />

Label — <label> HTML natif stylé. Prop for (ou htmlFor) obligatoire pour lier au champ (Input, Checkbox, RadioGroup…).

Le clic sur le label focus/toggle le champ associé — comportement natif HTML.

Installation

Terminal

$ bext ui add label

Usage

tsx

1
2
3
4
5
6import { Label, Input } from "@bext-stack/ui/primitives"

<div className="grid gap-2">
  <Label htmlFor="username">Username</Label>
  <Input id="username" />
</div>

Anatomy

<Label for="input-id">Label text</Label>

API Reference

Label

Prop	Type	Default	Description
for	string	—	id du champ associé. Peut aussi être écrit htmlFor.
className	string	—	text-sm font-medium leading-none par défaut.

Accessibility

Cliquer sur un Label lié focus l'Input, coche/décoche le Checkbox, etc. — comportement HTML natif.

Ne jamais mettre un placeholder à la place d'un label — les AT ne l'annoncent pas correctement.

Try it live Open in play

Edit this example live in the bext playground — it compiles and runs entirely in your browser.

src/app/page.tsx 1 file · react · runs in your browser

// A label associates descriptive text with a form control via
// htmlFor, so clicking the label focuses the matching input.
const label = { display: "block", fontSize: 14, fontWeight: 600, color: "#0a0a0a", marginBottom: 6 };
const field = {
  width: "100%", height: 38, padding: "0 12px", borderRadius: 8, fontSize: 14,
  border: "1px solid #e2e8f0", background: "#fff", color: "#0a0a0a",
  fontFamily: "inherit", boxSizing: "border-box",
};

export default function Page() {
  return (
    <main style={{ maxWidth: 640, margin: "0 auto", padding: "48px 20px", fontFamily: "Inter, system-ui, sans-serif" }}>
      <h1 style={{ letterSpacing: "-0.02em", marginBottom: 4 }}>Label</h1>
      <p style={{ color: "#64748b", marginTop: 0 }}>An accessible caption bound to a control.</p>
      <div style={{ marginTop: 22, maxWidth: 320 }}>
        <label htmlFor="email" style={label}>Email address</label>

The React idiom — same UI, for comparison.

← Kbd Menubar →

On This Page