Get Started
Input
Feedback
Display
Installation
i18n
import { Checkbox } from "@/registry/ui/checkbox"
import { Label } from "@/components/ui/label"
For form fields, use the Field component which includes built-in label, description, and error handling.
Installation#
pnpm dlx shadcn@latest add https://ui.tyap.me/r/styles/base/label.jsonnpx shadcn@latest add https://ui.tyap.me/r/styles/base/label.jsonyarn dlx shadcn@latest add https://ui.tyap.me/r/styles/base/label.jsonbunx --bun shadcn@latest add https://ui.tyap.me/r/styles/base/label.json
Install the following dependencies:
pnpm add @base-ui/reactnpm install @base-ui/reactyarn add @base-ui/reactbun add @base-ui/react
Copy and paste the following code into your project.
"use client"
import * as React from "react"
import { cn } from "@/lib/utils"
function Label({ className, ...props }: React.ComponentProps<"label">) {
return (
<label
data-slot="label"
className={cn(
"flex items-center select-none group-data-[disabled=true]:pointer-events-none peer-disabled:cursor-not-allowed",
className
)}
{...props}
/>
)
}
export { Label }
Update the import paths to match your project setup.
Usage#
import { Label } from "@/components/ui/label"<Label htmlFor="email">Your email address</Label>Label in Field#
For form fields, use the Field component which
includes built-in FieldLabel, FieldDescription, and FieldError components.
<Field>
<FieldLabel htmlFor="email">Your email address</FieldLabel>
<Input id="email" />
</Field>import { Button } from "@/components/ui/button"
import { Checkbox } from "@/registry/ui/checkbox"
import {RTL#
To enable RTL support in shadcn/ui, see the RTL configuration guide.
"use client"
import * as React from "react"API Reference#
See the Base UI Label documentation for more information.