shadcn.io is not affiliated with official shadcn/ui
This is your public display name.
Installation
bunx --bun shadcn@latest add https://kit.dev/r/radix/field.jsonnpx shadcn@latest add https://kit.dev/r/radix/field.jsonpnpm dlx shadcn@latest add https://kit.dev/r/radix/field.jsonyarn shadcn@latest add https://kit.dev/r/radix/field.jsonThis component depends on Separator. Install it first if you haven't already.
Install the following dependencies:
bun add radix-ui tailwind-variantsnpm install radix-ui tailwind-variantspnpm add radix-ui tailwind-variantsyarn add radix-ui tailwind-variantsCopy and paste the following code into your project.
"use client";
import { Label as LabelPrimitive } from "radix-ui";
import type React from "react";
import { useMemo } from "react";
import { tv, type VariantProps } from "tailwind-variants";
import { cn } from "@/lib/utils";
import { Separator } from "@/registry/radix/components/separator";
const Label = (props: React.ComponentProps<typeof LabelPrimitive.Root>) => {
const { className, ...rest } = props;
return (
<LabelPrimitive.Root
className={cn(
"cn-label flex select-none items-center group-data-[disabled=true]:pointer-events-none peer-disabled:cursor-not-allowed",
className
)}Update the import paths to match your project setup.
Usage
import {
Field,
FieldDescription,
FieldLabel,
} from "@/components/ui/field";
import { Input } from "@/components/ui/input";const FieldDemo = () => (
<Field className="max-w-xs">
<FieldLabel>Name</FieldLabel>
<Input placeholder="Evil Rabbit" type="text" />
<FieldDescription>This is your public display name.</FieldDescription>
</Field>
);Accessibility
| Key | Description |
|---|---|
Space | Activate the focused control. |
Enter | Activate the focused control. |
ArrowUp | Move up. |
ArrowDown | Move down. |
ArrowLeft | Move left. |
ArrowRight | Move right. |
Home | Go to the start. |
End | Go to the end. |
Demos
Input
An input with the description above the control.
Textarea
A textarea with a label.
Select
A select with a label.
Slider
A slider with a label.
Fieldset
Two fields grouped under a legend.
Checkbox
A checkbox with its label.
Radio
Radio options inside a labeled field.
Switch
Horizontal switch field.
Choice Card
Choice cards: wrap Field in FieldLabel for selectable groups.
Group
Two fields divided by a separator.
Rtl
A right-to-left field. See the RTL configuration guide for document direction.
Responsive
A field whose orientation follows the container.
API Reference
Field
PropType
AttributeType
FieldSet
PropType
AttributeType
FieldLegend
PropType
AttributeType
FieldGroup
PropType
AttributeType
FieldContent
PropType
AttributeType
FieldLabel
PropType
AttributeType
FieldTitle
PropType
AttributeType
FieldDescription
PropType
AttributeType
FieldSeparator
PropType
AttributeType
data-content?stringFieldError
PropType
AttributeType