Knob
Rotary control for parameter adjustment with drag, wheel, and keyboard support. Commonly used in audio applications for volume, pan, effect parameters, and more.
Sizes
Knobs come in three sizes: small (32px), medium (48px), and large (64px).
0.30
0.50
0.70
Controlled
A controlled knob with value managed by parent state. Drag, scroll wheel, or use arrow keys to adjust.
0.50
Current value: 0.50
Bipolar Mode
For parameters like pan that center at zero. The arc fills from center outward.
C
Pan: Center (0%)
Custom Ranges & Formatting
Knobs can have any numeric range with custom value formatting.
-12.0 dB
75%
1.0k
Step Values
Configure step size for fine or coarse adjustments.
0.500
50
50
States
Knobs have different visual states for interaction feedback.
0.50
0.50
0.50
Value Display Options
Control whether the value is displayed below the knob.
0.50
0.50
Interactions
Multiple ways to adjust knob values.
Keyboard
- Arrow Up/Right - Increase by step
- Arrow Down/Left - Decrease by step
- Page Up - Increase by 10 steps
- Page Down - Decrease by 10 steps
- Home - Jump to minimum
- End - Jump to maximum
Mouse
- Drag up/down - Adjust value
- Scroll wheel - Fine adjustment
- Double-click - Reset to default
- Cmd/Ctrl + click - Reset to default