Syntho

Control Label

control-labelFoundations

Every control in the kit labels itself through this, which is why a panel of mixed controls lands on one visual rhythm. Use it directly when you build a control of your own and want it to sit correctly next to the built-in ones.

Ratio
slot
4:1
Mode
slot
Peak

Install

Copies the source into your project. Anything it depends on comes with it.

$ npx shadcn add @syntho-ui/control-label

Pulls in

control-theme

First time? Add the registry to your components.json once:

components.json
{
  "registries": {
    "@syntho-ui": "https://engine.syntho.app/r/{name}.json"
  }
}

Usage

Controlled or uncontrolled, whichever suits the surrounding state.

example.tsx
import { ControlLabel } from "@/components/ui/control-label"

<ControlLabel label="Ratio" value="4:1">
  <MyCustomControl />
</ControlLabel>

Props

PropTypeDefaultDescription
labelReactNode—Caption above (or beside) the control.
valueReactNode—Formatted readout below the control.
childrenReactNode—The control itself.
orientation"vertical" | "horizontal""vertical"Caption above the control, or to its left.
widthnumber | string—Width applied to the wrapper — keeps a row of knobs on a tidy grid.
labelIdstring—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 slider and switch roles with live aria-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.
All controlsStart building