tezosx-ui

v1.0.0

Label

A simple label component for form fields. Provides consistent styling and accessibility.

Installation

Install the label component using the shadcn CLI:

npx shadcn@latest add https://tezosx-ui.vercel.app/registry/tezosx/label.json

Basic Usage

With Input

The most common use case - labeling form inputs.

<Label htmlFor="email">Email Address</Label>
<Input id="email" type="email" />

Wrapping Input

You can also wrap the input element directly.

<Label>
  Username
  <Input type="text" />
</Label>

Disabled State

Label automatically styles for disabled inputs using the peer selector.

<Label htmlFor="disabled">Disabled Field</Label>
<Input id="disabled" disabled className="peer" />

Form Examples

Props

PropTypeDescription
htmlForstringAssociates the label with an input by ID
classNamestringAdditional CSS classes

Plus all standard HTML label attributes

Accessibility

  • Always use htmlFor to associate labels with inputs
  • Label text should be clear and descriptive
  • The peer-disabled selector automatically styles labels for disabled inputs
  • Consider adding required indicators or helper text for required fields