Label

Renders an accessible label associated with form controls.

Installation

import { Label } from "@gradeui/ui"

Usage

Examples

With Input

Project Name

With Checkbox

Accept terms and conditions

Required Field

Serial Number *

With Helper Text

API Key

Your API key can be found in settings.

Disabled State

Disabled Field

Props

Prop	Type	Default	Description
htmlFor	string	-	The id of the element the label is associated with.
className	string	-	Additional CSS classes.

Accessibility

Built on Radix UI Label for proper accessibility
Clicking the label focuses the associated control
Screen readers announce the label with the control
Always use htmlFor to associate with form controls

Sidecar

The Markdown sidecar Studio (and the Grade MCP server, when it ships) reads to understand this component — frontmatter, when- to-use guidance, and canonical examples. Authored once at packages/ui/components/ui/label.md and shipped inside the published @gradeui/ui tarball.

---
name: Label
import: "@gradeui/ui"
props:
  - htmlFor?: string — binds to the input's id
  - All native label HTML attrs
when_to_use: Every Input / Textarea / Checkbox / Switch / RadioGroup. Always use htmlFor so clicking the label focuses the control.
composes_with: [Input, Textarea, Checkbox, Switch, RadioGroup, Select]
aliases: [label, form label, field label, caption]
---

```jsx
<Label htmlFor="name">Full name</Label>
<Input id="name" />
```

Textarea

Select