Label

An accessible label linked to form controls for better clarity and usability.

Usage

import { Label } from "@lemonsqueezy/wedges";
<Label htmlFor="username">Username</Label>

API Reference

Extends the Radix Label primitive and includes all of its props.

Label

PropValueDefault
asChild
boolean
false
description
ReactNode
/
disabled
boolean
false
htmlFor
string
/
required
boolean
false
tooltip
ReactNode
/

Label.Helper

Renders supplementary information, typically displayed below the label. In addition to all the props defined as HTMLAttributes<HTMLSpanElement> props, it also accepts the following:

PropValueDefault
disabled
boolean
false
error
boolean
false

Accessibility

The Label component supports all accessibility features of the Radix Label primitive.

Examples

The following example demonstrates using the Label component alongside a Label.Helper component with the error prop.

There are errors in your form.
Edit this page