An accessible form label built on Radix Label that dims itself when the paired peer control is disabled and never selects text on double-click.
import { Input } from "@/components/ballmac/input"
import { Label } from "@/components/ballmac/label"
export default function LabelDemo() {
return (
<div className="grid w-full max-w-sm gap-2">
<Label htmlFor="display-name">Display name</Label>
<Input id="display-name" placeholder="Alex Morgan" autoComplete="name" />
</div>
)
}Installation
$ pnpm dlx shadcn@latest add @ballmac/labelInstall the dependencies.
$ pnpm add radix-uiCopy the source into your project.
components/ballmac/label.tsx// Ballmac UI: Label. https://ui.ballmac.com/components/label // Based on shadcn/ui's Label (MIT, Copyright (c) 2023 shadcn), restyled. "use client" import * as React from "react" import { Label as LabelPrimitive } from "radix-ui" import { cn } from "@/lib/utils" type LabelProps = React.ComponentProps<typeof LabelPrimitive.Root> function Label({ className, ...props }: LabelProps) { return ( <LabelPrimitive.Root data-slot="label" className={cn( "flex select-none items-center gap-2 text-sm leading-none font-medium text-foreground", "peer-disabled:cursor-not-allowed peer-disabled:opacity-50 group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50", className )} {...props} /> ) } export { Label, type LabelProps }Update the import paths to match your project setup.
Usage
import { Label } from "@/components/ballmac/label"The full example is in the Code tab above.
Accessibility
| Key | Action |
|---|---|
| Click | Focuses or toggles the associated control |
Use with AI
Text label for a form control. Pair with htmlFor/id; put the control before it with className="peer" (Checkbox and Switch already are) to get disabled styling. With the shadcn MCP server set up (guide), ask your agent:
Add the Ballmac UI Label (@ballmac/label) to this project with the shadcn MCP, then use it where it fits.
Use it for
- Naming inputs, textareas, selects, checkboxes and switches
- Clickable text next to a checkbox or switch
Not for
- Headings or section titles (use a heading element)
- Helper or error text under a field (use a p with text-muted-foreground or text-destructive)
Registry JSON: https://ui.ballmac.com/r/label.json
Credits
Based on shadcn/ui Label, adapted by Ballmac. Free to use in personal and commercial projects.
- npm
- radix-ui
- Registry
- shadcn/utils
Pairs well with
Input
A text input in three heights that match Button, plus InputGroup and InputGroupAddon for leading or trailing icons, units and domains.
Textarea
A multi-line text field that can grow with its content between minRows and maxRows, then scroll. Plain resizable mode when autoResize is off.
Checkbox
A Radix checkbox with checked and indeterminate (mixed) states, a check or minus icon, focus ring and invalid styling, for forms and select-all lists.
Switch
A Radix toggle switch in two sizes with a CSS-animated thumb, for settings that take effect immediately. Stops animating under reduced motion.