Free
Pro

Knob

A rotary dial for selecting a numeric value along a 270° arc. Drag the pointer or use arrow keys. Integrates with Angular Forms via [(ngModel)] / formControlName.

Pronew

Knob — part of Base UI Pro

Unlock it plus 90 pro blocks, widgets & layouts — $99 one-time. Lifetime updates, 14-day money-back guarantee.

Unlock Pro

Basic usage

Bind with [(ngModel)]. Use color for the accent and showValue to display the number in the center.

65

Primary · 65

40

Success · 40

80

Danger · 80

HTML

Min, max, step & size

Control the range with min, max, and step. Use size for dial diameter (sm / default / lg).

22.0

sm · 22°C

22.0

default · 22°C

22.0

lg · 22°C

HTML

Disabled

Set [disabled]="true" to prevent interaction.

50

HTML

Installation

Run the following command to add this component to your project:

bash

npx base-ui-cli add knob

API Reference

For AI agents

Copy a prompt with the registry name, CLI install, and import — or add the Base UI MCP server.

bash

npx -y base-ui-mcp

Base UI provides standalone components. Import the exact elements you want to use into your component.

typescript (Example)

// Install: npx base-ui-cli add knob
// Paths are relative to aliases.components (default: src/app/components)
import { KnobComponent } from './knob/knob.component';

@Component({
  selector: 'app-your-component',
  imports: [
    KnobComponent
  ],
  template: `...`
})
export class YourComponent {}

API for knob — generated from JSDoc in the library source.

API reference for knob
APIMemberTypeDefaultDescription
base-knobclassstring''Extra host classes merged via `cn()`.
base-knobminnumber0Minimum value.
base-knobmaxnumber100Maximum value.
base-knobstepnumber1Step increment for drag and keyboard.
base-knobcolorSliderColor'primary'Semantic track / value color.
base-knobsizeKnobSize'default'Dial diameter size.
base-knobshowValuebooleanfalseShows the current value in the center of the dial.
base-knobdisabledbooleanfalseWhether the control is disabled (consumer-facing input).
base-knobariaLabelunknown'Knob'Accessible name for the slider.
base-knob(valueChange)number — Emitted whenever the value changes.