Primitive / Atomstable

Label

Form label primitive with shared glass-aware variants.

@glinui/uiComponent: label

Installation$

Install from the package for shared ownership or from the registry for copy-paste control.

Package Manager$

pnpm add @glinui/ui @glinui/tokens

Registry$

pnpm dlx @glinui/cli@latest add label

Usage$

Label renders a semantic <label> element. Associate it with a form control via the htmlFor prop, which maps directly to the HTML for attribute. All glass-aware variant surfaces are shared with the other atom primitives.

Basic$

Email address

TSX

1import { Label, Input } from "@glinui/ui"
2
3export function LabelBasicDemo() {
4return (
5  <div className="flex flex-col gap-1.5">
6    <Label htmlFor="email">Email address</Label>
7    <Input id="email" type="email" placeholder="you@example.com" />
8  </div>
9)
10}

Examples$

Variants$

Default labelGlass labelOutline labelGhost label

TSX

1import { Label } from "@glinui/ui"
2
3export function LabelVariantDemo() {
4return (
5  <div className="flex flex-col gap-2">
6    <Label variant="default">Default label</Label>
7    <Label variant="glass">Glass label</Label>
8    <Label variant="outline">Outline label</Label>
9    <Label variant="ghost">Ghost label</Label>
10  </div>
11)
12}

Sizes$

Small labelMedium labelLarge label

TSX

1import { Label } from "@glinui/ui"
2
3export function LabelSizeDemo() {
4return (
5  <div className="flex flex-col gap-2">
6    <Label size="sm">Small label</Label>
7    <Label size="md">Medium label</Label>
8    <Label size="lg">Large label</Label>
9  </div>
10)
11}

With Checkbox$

I agree to the terms and conditions

TSX

1import { Label, Checkbox } from "@glinui/ui"
2
3export function LabelCheckboxDemo() {
4return (
5  <div className="flex items-center gap-2">
6    <Checkbox id="terms" />
7    <Label htmlFor="terms">I agree to the terms and conditions</Label>
8  </div>
9)
10}

Required Pattern$

Use an asterisk span inside Label to signal required fields. Pair with aria-required on the control.

Username

TSX

1import { Label, Input } from "@glinui/ui"
2
3export function LabelRequiredDemo() {
4return (
5  <div className="flex flex-col gap-1.5">
6    <Label htmlFor="username">
7      Username
8      <span className="ml-1 text-red-500" aria-hidden="true">*</span>
9    </Label>
10    <Input id="username" aria-required="true" placeholder="johndoe" />
11  </div>
12)
13}

Accessibility$

Always provide htmlFor to associate the label with its form control — clicking the label should move focus to the input.
Do not use Label as decorative text; prefer Text or plain <span> elements for non-form contexts.
When marking required fields, include both the visual asterisk and an aria-required="true" attribute on the control.

Reduced Motion$

Label is a static element with no animation. It is unaffected by prefers-reduced-motion.

API Reference$

Prop	Type	Required	Default	Description
`size`	`"sm" \| "md" \| "lg"`	No	`"md"`	Variant option from labelVariants.
`variant`	`"default" \| "glass" \| "outline" \| "ghost"`	No	`"default"`	Variant option from labelVariants.

Source$

TSX

1import { Label } from "@glinui/ui"

packages/ui/src/components/label.tsx

Generated API Snapshot

Beta

Auto-extracted from TypeScript source in packages/ui/src/components/label.tsx. This section is in beta and may lag behind hand-curated docs. Regenerate with pnpm --filter @glinui/docs api:generate.

Generated: 2026-02-19T17:59:28.468Z · Full index: /docs/api-metadata

Primary Props Type

LabelProps

`LabelProps`

Prop	Type	Required	Default	Description
`size`	`"sm" \| "md" \| "lg"`	No	`"md"`	Variant option from labelVariants.
`variant`	`"default" \| "glass" \| "outline" \| "ghost"`	No	`"default"`	Variant option from labelVariants.