Component
Label
A field's 14px regular ink label on a 24px line.
npx -y github:anwarlemu/inkbox-brand-cli#release add labelUsage
Name every field with a Label tied to it by htmlFor, 4px above the field. For a label with a hint or an action beside it (Forgot password?), use Field.
Avoid
- Bold or caps labels
- A label in the action purple
Exports: Label. This component is a client component.
Dependencies: radix-ui.
Example
import { Input } from "@/components/ui/input";import { Label } from "@/components/ui/label";export function Preview() { return ( <div className="grid w-full max-w-86 gap-1"> <Label htmlFor="vault-key">Vault key</Label> <Input id="vault-key" type="password" placeholder="Enter a vault key" /> </div> );}Source
"use client";import * as React from "react";import { Label as LabelPrimitive } from "radix-ui";import { cn } from "@/lib/utils";// A field's label (Email address, Password, Vault key): 14px regular ink on a 24px line, 4px above its field. A// disabled field's label fades with it.function Label({ className, ...props }: React.ComponentProps<typeof LabelPrimitive.Root>) { return ( <LabelPrimitive.Root data-slot="label" className={cn("flex items-center gap-2 font-sans text-body leading-body font-normal text-fg select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50", className)} {...props} /> );}export { Label };Reference: Figma 427:2715: Login (Email address, Password), Vault (Vault key).