Fluxo UIFluxo UIv0.4.1

Knob

A circular indicator that displays a numeric value as an arc, with optional drag editing and full keyboard support.

Basic Usage

Default Knob

Read-only display and an interactive editor.

Drag the middle knob, or use arrow keys when focused. Current value: 72
import { Knob } from 'fluxo-ui';

const [value, setValue] = useState(72);

<Knob value={value} label="CPU" unit="%" />
<Knob value={value} interactive onChange={setValue} label="Volume" />

Variants

Variants

Solid, gradient, striped, dashed, and pie variants.

<Knob value={72} variant="solid" label="Solid" />
<Knob value={72} variant="gradient" gradient={{ from: '#3b82f6', to: '#a855f7' }} label="Gradient" />
<Knob value={72} variant="striped" label="Striped" color="success" />
<Knob value={72} variant="dashed" label="Dashed" color="warning" />
<Knob value={72} variant="pie" label="Pie" color="danger" />

Sizes

Sizes

Five preset sizes from xs through xl.

<Knob value={64} size="xs" label="XS" />
<Knob value={64} size="sm" label="SM" />
<Knob value={64} size="md" label="MD" />
<Knob value={64} size="lg" label="LG" />
<Knob value={64} size="xl" label="XL" />

Partial Arcs

Partial Arcs

Use arcStart and arcEnd to render gauges or half-circles.

<Knob value={72} arcStart={135} arcEnd={405} label="Speed" unit="km/h" color="primary" />
<Knob value={32} arcStart={180} arcEnd={360} label="Battery" unit="%" color="success" />

Interactive

Interactive Editing

Drag the knob, use arrow keys, PageUp/PageDown for ×10 steps, or Home/End for min/max.

Volume: 60 · Bass: 45 · Treble: 72
const [volume, setVolume] = useState(60);
<Knob
  value={volume}
  interactive
  step={5}
  onChange={setVolume}
  label="Volume"
  unit="%"
  color="primary"
/>

Import

import { Knob } from 'fluxo-ui';
import type { KnobProps, KnobSize, KnobVariant } from 'fluxo-ui';

Props

valuereq
number

Current numeric value

min
number"0"

Minimum value

max
number"100"

Maximum value

size
'xs' | 'sm' | 'md' | 'lg' | 'xl' | number"'md'"

Preset size or arbitrary pixel diameter

strokeWidth
number

Arc thickness in px (default scales with size)

variant
'solid' | 'gradient' | 'striped' | 'dashed' | 'pie'"'solid'"

Visual treatment of the filled arc

color
'primary' | 'success' | 'warning' | 'danger' | 'info' | string"'primary'"

Preset color or any CSS color

gradient
{ from: string; to: string }

Gradient stops, used when variant is 'gradient'

trackColor
string"var(--eui-border-subtle)"

Color of the unfilled portion of the arc

arcStart
number"0"

Start angle in degrees (0 = top)

arcEnd
number"360"

End angle in degrees. Use values like 135-405 for a 3/4 gauge

roundedCaps
boolean"true"

Round vs flat stroke caps

showValue
boolean"true"

Show the numeric value in the center

valueFormatter
(v: number) => string

Custom formatter for the displayed value

unit
string

Unit suffix shown next to the value (e.g. '%', '°C')

label
string

Text rendered above the value

subLabel
string

Text rendered below the value

renderCenter
() => ReactNode

Override the default center content

interactive
boolean"false"

Enable pointer drag and keyboard editing

step
number"1"

Increment step (interactive mode)

onChange
(v: number) => void

Called in interactive mode on drag and arrow keys

disabled
boolean"false"

Disable interaction and dim the knob

id
string

HTML id attribute

className
string

Additional CSS classes

ariaLabel
string

Accessible label for screen readers

Features

5 Variants

Solid, gradient, striped, dashed, and pie treatments — fully theme aware.

Partial Arcs

Build gauges, half-circles or 3/4 rings by configuring arcStart and arcEnd.

Interactive

Pointer drag plus full keyboard support: arrows, PageUp/Down, Home/End.

ARIA Compliant

Slider role with valuenow/min/max/text in interactive mode; img + roledescription read-only.