Label

Displays an accessible label associated with controls.

Accept terms and conditions

Installation

npx shadcn@latest add https://scrollxui.dev/registry/label.json

import { Label } from "@/components/ui/label"

<Label htmlFor="email" direction="right" >Your email address</Label>
<br />
<Label htmlFor="email" disableAnimation>Your email address</Label>

Displays an accessible label associated with controls.

Property	Type	Default	Description
`direction`	"left" \| "right" \| "top" \| "bottom"	`"left"`	Animation direction when label appears.
`disableAnimation`	boolean	`false`	If true, disables the motion animation.
`className`	string	`—`	Custom CSS classes applied to the label.
`children`	ReactNode	`—`	Content rendered inside the label.
`htmlFor`	string	`—`	ID of the associated form element (from LabelPrimitive).
`disabled`	boolean	`false`	Marks the label as disabled and adjusts styling.