Shadcn Field for React

Installation

bunx --bun shadcn@latest add https://kit.dev/r/base/field.json

npx shadcn@latest add https://kit.dev/r/base/field.json

pnpm dlx shadcn@latest add https://kit.dev/r/base/field.json

yarn shadcn@latest add https://kit.dev/r/base/field.json

bun add tailwind-variants

npm install tailwind-variants

pnpm add tailwind-variants

yarn add tailwind-variants

"use client";

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/base/components/separator";

const Label = (props: React.ComponentProps<"label">) => {
  const { className, ...rest } = props;

  return (
    <label
      className={cn(
        "cn-label flex select-none items-center group-data-[disabled=true]:pointer-events-none peer-disabled:cursor-not-allowed",
        className
      )}
      data-slot="label"

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

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