Label

Variants

Glass is opt-in and needs a backdrop behind it.

import { Label } from "@glinui/ui"
export function Demo() {
  return (

import { Label } from "@glinui/ui"


export function Demo() {
  return (
    <div className="flex flex-wrap items-center gap-3">
      <Label>Default</Label>
      <Label variant="solid">solid</Label>
      <Label variant="soft">soft</Label>
      <Label variant="outline">outline</Label>
      <Label variant="ghost">ghost</Label>
      <Label variant="glass">glass</Label>
    </div>
  )
}

Variants

import { Label } from "@glinui/ui"

export function LabelVariantDemo() {
  return (
    <div className="flex flex-col gap-2">
      <Label variant="default">Default label</Label>
      <Label variant="glass">Glass label</Label>
      <Label variant="outline">Outline label</Label>
      <Label variant="ghost">Ghost label</Label>
    </div>
  )
}

Sizes

import { Label } from "@glinui/ui"

export function LabelSizeDemo() {
  return (
    <div className="flex flex-col gap-2">
      <Label size="sm">Small label</Label>
      <Label size="md">Medium label</Label>
      <Label size="lg">Large label</Label>
    </div>
  )
}

With Checkbox

import { Label, Checkbox } from "@glinui/ui"

export function LabelCheckboxDemo() {
  return (
    <div className="flex items-center gap-2">
      <Checkbox id="terms" />
      <Label htmlFor="terms">I agree to the terms and conditions</Label>
    </div>
  )
}

Required Pattern

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

import { Label, Input } from "@glinui/ui"

export function LabelRequiredDemo() {
  return (
    <div className="flex flex-col gap-1.5">
      <Label htmlFor="username">
        Username
        <span className="ml-1 text-red-500" aria-hidden="true">*</span>
      </Label>
      <Input id="username" aria-required="true" placeholder="johndoe" />
    </div>
  )
}

ARIA Attributes

• `htmlFor` should match form control `id`