Control Label
control-labelFoundationsFitting a label may sound like over-engineering, but consistent captions matter in a dense effect panel. This shared boundary preserves generous tracking when there is room, automatically narrows longer labels at the same font height, then reduces size within readable bounds. Ellipsis retains maximum compression so more words remain visible. The surrounding layout owns the width and base font size. Knobs use automatic fitting by default; the narrow option starts condensed even when space is plentiful. This display-only component adds no hover timer or tooltip.
Install
Copies the source into your project. Anything it depends on comes with it.
$ pnpm dlx shadcn@latest add @pluginui/core-control-labelPulls in
First time? Add the registry to your components.json once:
{
"registries": {
"@pluginui": "https://pluginui.com/r/{name}.json"
}
}Usage
Connect the documented props to your application or host.
import { ControlLabel, ControlTextBoundary } from "@/components/ui/control-label"
<ControlLabel width={96} label="Stereo feedback" value="4:1" compressible>
<MyCustomControl />
</ControlLabel>
<ControlTextBoundary compressible style={{ width: 96, fontSize: 12, letterSpacing: ".12em" }}>
Envelope sensitivity
</ControlTextBoundary>Props
| Prop | Type | Default | Description |
|---|---|---|---|
| compressible | boolean | false | ControlLabel captions and ControlTextBoundary plain text: automatically tighten tracking, then narrow the same font (down to 78% width), then reduce size (down to 85%). If the full text still cannot fit, retain maximum compression and ellipsize. Short labels stay regular when they fit. |
| narrow | boolean | false | Start the inherited font at 86% width even for short labels. With compressible enabled, longer text can narrow further. Does not load or substitute a font. Also supported by ControlTextBoundary. |
| style | CSSProperties | — | For standalone ControlTextBoundary, set the width, base font size, letter spacing and alignment. The parent may supply the width instead. Knobs expose captionWidth, labelCompressible (default true) and labelNarrow. |
| label | ReactNode | — | Caption above (or beside) the control. |
| value | ReactNode | — | Formatted readout below the control. |
| children | ReactNode | — | The control itself. |
| orientation | "vertical" | "horizontal" | "vertical" | Caption above the control, or to its left. |
| width | number | string | — | Width applied to the wrapper to keep a row of knobs on a tidy grid. |
| labelId | string | — | Wired to the control's aria-labelledby. |
Interaction
- Drag with pointer capture, so the gesture keeps tracking past the edge of the control.
- Shift while dragging for a fine pass; release it mid-gesture and coarse tracking resumes.
- Double-click resets to
defaultValue. - Arrow keys step normally, Shift+arrow steps finely, PageUp/PageDown jump by ten, Home/End go to the extremes.
- Proper
sliderandswitchroles with livearia-valuetext, so a screen reader announces the formatted value rather than the raw number. - The scroll wheel adjusts the value while the pointer is over the control; stepped ranges move at least one declared step per notch by default.