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 is a styled native HTML <label>. The for prop (or htmlFor) is required to link it to the field (Input, Checkbox, RadioGroup…).

Clicking the label focuses or toggles the associated field (native HTML behavior).

Installation

Terminal

$ bext ui add label

Copy and paste the following into src/components/ui/label.tsx.

label.tsx

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

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 of the associated field. Can also be written htmlFor.
className	string	—	text-sm font-medium leading-none by default.

Accessibility

Clicking a linked Label focuses the Input, checks or unchecks the Checkbox, and so on (native HTML behavior).

Never use a placeholder in place of a label: assistive technologies do not announce it correctly.

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