An accessible form label with required and optional markers that pairs with any input. Keeps field names consistent across forms, settings and onboarding flows.
"use client";
import * as React from "react";
import { IconMail } from "@tabler/icons-react";
import { Label } from "@/components/ui/label";
import { clsx, type ClassValue } from "clsx";
import { twMerge } from "tailwind-merge";
function cn(...inputs: ClassValue[]) {
return twMerge(clsx(inputs));
}
const Input = React.forwardRef<
HTMLInputElement,
React.InputHTMLAttributes<HTMLInputElement> & { leftIcon?: React.ReactNode }
>(function Input({ leftIcon, className, ...props }, ref) {
return (
<div className="relative flex items-center">
{leftIcon && (
<span className="pointer-events-none absolute left-3 text-[var(--muted-foreground)] [&_svg]:size-4">
{leftIcon}
</span>
)}
<input
ref={ref}
className={cn(
"h-9 w-full rounded-[10px] border border-[var(--border)] bg-[var(--background)] px-3 text-sm text-[var(--foreground)] outline-none placeholder:text-[var(--muted-foreground)] focus-visible:ring-2 focus-visible:ring-[var(--ring)]",
leftIcon && "pl-9",
className,
)}
{...props}
/>
</div>
);
});
const primitivePreviewCardSurfaceFrameClass = cn(
"relative isolate overflow-hidden rounded-2xl",
"border",
);
const primitivePreviewCardSurfaceLightClass = cn(
"border-black/[0.08] bg-[#f4f4f5]",
"[box-shadow:0_1px_2px_rgba(0,0,0,.06),0_8px_24px_-12px_rgba(0,0,0,.08)]",
);
const primitivePreviewCardSurfaceClass = cn(
primitivePreviewCardSurfaceFrameClass,
primitivePreviewCardSurfaceLightClass,
// Full static `dark:bg-[#0a0a0b]` kept for Tailwind content scan - same as
// PRIMITIVE_PREVIEW_CANVAS_DARK_BG / PRIMITIVE_PREVIEW_CANVAS_DARK.
"dark:border-white/[0.06] dark:bg-[#0a0a0b] dark:[box-shadow:0_1px_2px_rgba(0,0,0,.4),0_8px_24px_-12px_rgba(0,0,0,.6)]",
);
const wensityCardSurfaceClass = primitivePreviewCardSurfaceClass;
function PreviewPanel({
children,
className,
}: {
children: React.ReactNode;
className?: string;
}) {
return (
<div
className={cn(
wensityCardSurfaceClass,
"w-full max-w-md p-5",
className,
)}
>
{children}
</div>
);
}
function FieldStack({ children }: { children: React.ReactNode }) {
return <div>{children}</div>;
}
export function LabelPreview() {
return (
<PreviewPanel>
<div className="space-y-5">
<FieldStack>
<Label htmlFor="label-preview-email">Work email</Label>
<Input
id="label-preview-email"
type="email"
placeholder="you@company.com"
leftIcon={<IconMail stroke={1.75} />}
/>
</FieldStack>
<FieldStack>
<Label variant="required" htmlFor="label-preview-required">
Billing email
</Label>
<Input
id="label-preview-required"
type="email"
placeholder="billing@company.com"
leftIcon={<IconMail stroke={1.75} />}
/>
</FieldStack>
<FieldStack>
<Label variant="optional" htmlFor="label-preview-optional">
Company
</Label>
<Input
id="label-preview-optional"
placeholder="Acme Inc."
/>
</FieldStack>
</div>
</PreviewPanel>
);
}
export default function Demo() {
return <LabelPreview />;
}