Label

Installation

Usage

import { Label } from "@glass-ui-kit/glass"

export default function App() {
  return <Label htmlFor="email">Email address</Label>
}

import { Label } from "@glass-ui-kit/glass"

export default function App() {
  return <Label htmlFor="email">Email address</Label>
}

Examples

Checkbox Pairing

Labels are especially useful for making checkbox rows easier to scan and click without losing native behavior.

Field Pairing

Inside Field, Label can inherit the control id automatically. Use htmlFor when you need to target a control outside the current field.

Styling

Label accepts standard label attributes and class composition. Use className as an escape hatch for one-off visual tweaks. When htmlFor is omitted inside Field, it binds to the registered field control automatically.

/* Native binding */
<Label htmlFor="name">Name</Label>

/* Inside Field (htmlFor optional) */
<Field className="space-y-1.5">
  <Label>Email</Label>
  <Input type="email" />
</Field>

/* Escape hatch */
<Label className="text-sm font-medium">Custom label</Label>

/* Native binding */
<Label htmlFor="name">Name</Label>

/* Inside Field (htmlFor optional) */
<Field className="space-y-1.5">
  <Label>Email</Label>
  <Input type="email" />
</Field>

/* Escape hatch */
<Label className="text-sm font-medium">Custom label</Label>

API Reference

Label also accepts the standard native <label> props. Inside Field, htmlFor becomes optional because the control id can be inferred automatically.