Knob API

API documentation for Knob component

KnobRoot#

Props#

Defines valid properties in Knob component.

name	type	default	description
ref	Ref<unknown>	null	The reference to the component instance.
pIf	boolean	true	Whether the component should be rendered.
style	CSSProperties \| ((instance?: KnobRootInstance) => CSSProperties)	null	The style to apply to the component.
className	string \| ((instance?: KnobRootInstance) => string)	null	The class name to apply to the component.
as	string \| number \| bigint \| boolean \| ComponentClass<any, any> \| FunctionComponent<any> \| ReactElement<unknown, string \| JSXElementConstructor<any>> \| Iterable<ReactNode, any, any> \| ReactPortal \| Promise<AwaitedReactNode>	null	The component type to render.
asChild	boolean	false	Whether the component should be rendered as a child component.
pt	SafeRecord<KnobRootPassThrough>	null	The pass-through props to pass to the component
ptOptions	PassThroughOptions	null	The pass-through options to pass to the component
unstyled	boolean	null	Whether the component should be rendered without classes.
dt	unknown	null	The design token to use for the component.
styles	StylesOptions<ComponentInstance>	null	The styles to use for the component.
children	ReactNode \| ((instance: KnobRootInstance) => ReactNode)	null	The children to render.
tabindex	number	0	Index of the element in tabbing order.
invalid	boolean	false	When present, it specifies that the component should have invalid state style.
ariaLabelledby	string	null	Establishes relationships between the component and label(s) where its value should be one or more element IDs.
ariaLabel	string	null	Used to define a string that labels the element.
onValueChange	(event: KnobRootChangeEvent) => void	null	Callback fired when the knob's value changes.
defaultValue	number	null	Value of the knob.
value	number	null	The default value of the knob.
size	number	100	Size of the component in pixels.
step	number	1	Step factor to increment/decrement the value.
min	number	0	Mininum boundary value.
max	number	100	Maximum boundary value.
readOnly	boolean	false	When present, it specifies that the component value cannot be edited.
disabled	boolean	false	When present, it specifies that the component should be disabled.
[key: string]	any	null
pt-{optionName}-*	-	null	Pass through attributes for customizing component. For more info, see Pass Through tab.

State#

Defines valid state in Knob component.

name	type	default	description
value	number	null	The value of the knob.

Exposes#

Defines the methods and properties exposed by Knob component.

name	type	default	description
state	useKnobState	null	The state of the useKnob.
rangePath	string	null	The path string for the range arc of the knob.
valuePath	string	null	The path string for the value arc of the knob.
onClick	(event: MouseEvent) => void	null	Callback fired when the knob is clicked.
onMouseDown	(event: MouseEvent) => void	null	Callback fired when mouse down occurs on the knob.
onMouseUp	() => void	null	Callback fired when mouse up occurs.
onTouchStart	() => void	null	Callback fired when touch starts on the knob.
onTouchEnd	() => void	null	Callback fired when touch ends.
onMouseMove	(event: MouseEvent) => void	null	Callback fired when mouse moves while dragging the knob.
onTouchMove	(event: TouchEvent) => void	null	Callback fired when touch moves while dragging the knob.
onKeyDown	(event: KeyboardEvent) => void	null	Callback fired when a key is pressed while the knob is focused.

Events#

KnobRootChangeEvent

Event fired when the knob's value changes.

name	type	description
value	number	The value of the knob.

Interfaces#

PassThroughOptions

Defines passthrough(pt) options of Knob component.

name	type	default	description
root	KnobRootPassThroughType<HTMLAttributes<HTMLDivElement>>	null	Used to pass attributes to the root's DOM element.
svg	KnobRootPassThroughType<HTMLAttributes<SVGSVGElement>>	null	Used to pass attributes to the svg's DOM element.
range	KnobRootPassThroughType<HTMLAttributes<SVGPathElement>>	null	Used to pass attributes to the range's DOM element.
value	KnobRootPassThroughType<HTMLAttributes<SVGPathElement>>	null	Used to pass attributes to the value's DOM element.
text	KnobRootPassThroughType<HTMLAttributes<SVGTextElement>>	null	Used to pass attributes to the text's DOM element.

Types#

Instance

Instance of Knob component.

values
ComponentInstance<KnobRootProps, KnobRootState, KnobRootExposes>

KnobRange#

Props#

Defines valid properties in KnobRange component.

name	type	default	description
ref	Ref<unknown>	null	The reference to the component instance.
pIf	boolean	true	Whether the component should be rendered.
style	CSSProperties \| ((instance?: KnobRangeInstance) => CSSProperties)	null	The style to apply to the component.
className	string \| ((instance?: KnobRangeInstance) => string)	null	The class name to apply to the component.
as	string \| number \| bigint \| boolean \| ComponentClass<any, any> \| FunctionComponent<any> \| ReactElement<unknown, string \| JSXElementConstructor<any>> \| Iterable<ReactNode, any, any> \| ReactPortal \| Promise<AwaitedReactNode>	null	The component type to render.
asChild	boolean	false	Whether the component should be rendered as a child component.
pt	SafeRecord<KnobRangePassThrough>	null	The pass-through props to pass to the component
ptOptions	PassThroughOptions	null	The pass-through options to pass to the component
unstyled	boolean	null	Whether the component should be rendered without classes.
dt	unknown	null	The design token to use for the component.
styles	StylesOptions<ComponentInstance>	null	The styles to use for the component.
children	ReactNode \| ((instance: KnobRangeInstance) => ReactNode)	null	The children to render.
strokeWidth	number	14	Width of the knob stroke.
color	string	$dt('knob.range.background')	Background color of the range.
[key: string]	any	null
pt-{optionName}-*	-	null	Pass through attributes for customizing component. For more info, see Pass Through tab.

Exposes#

Defines the methods and properties exposed by KnobRange component.

name	type	default	description
knob	KnobRootInstance	null	The Knob component instance.

Interfaces#

PassThroughOptions

Defines passthrough(pt) options of KnobRange component.

name	type	default	description
root	KnobRangePassThroughType<HTMLAttributes<SVGPathElement>>	null	Used to pass attributes to the root's DOM element.

Types#

Instance

Instance of KnobRange component.

values
ComponentInstance<KnobRangeProps, KnobRangeState, KnobRangeExposes>

KnobValue#

Props#

Defines valid properties in KnobValue component.

name	type	default	description
ref	Ref<unknown>	null	The reference to the component instance.
pIf	boolean	true	Whether the component should be rendered.
style	CSSProperties \| ((instance?: KnobValueInstance) => CSSProperties)	null	The style to apply to the component.
className	string \| ((instance?: KnobValueInstance) => string)	null	The class name to apply to the component.
as	string \| number \| bigint \| boolean \| ComponentClass<any, any> \| FunctionComponent<any> \| ReactElement<unknown, string \| JSXElementConstructor<any>> \| Iterable<ReactNode, any, any> \| ReactPortal \| Promise<AwaitedReactNode>	null	The component type to render.
asChild	boolean	false	Whether the component should be rendered as a child component.
pt	SafeRecord<KnobValuePassThrough>	null	The pass-through props to pass to the component
ptOptions	PassThroughOptions	null	The pass-through options to pass to the component
unstyled	boolean	null	Whether the component should be rendered without classes.
dt	unknown	null	The design token to use for the component.
styles	StylesOptions<ComponentInstance>	null	The styles to use for the component.
children	ReactNode \| ((instance: KnobValueInstance) => ReactNode)	null	The children to render.
strokeWidth	number	14	Width of the knob stroke.
color	string	$dt('knob.value.background')	Background color of the value.
[key: string]	any	null
pt-{optionName}-*	-	null	Pass through attributes for customizing component. For more info, see Pass Through tab.

Exposes#

Defines the methods and properties exposed by KnobValue component.

name	type	default	description
knob	KnobRootInstance	null	The Knob component instance.

Interfaces#

PassThroughOptions

Defines passthrough(pt) options of KnobValue component.

name	type	default	description
root	KnobValuePassThroughType<HTMLAttributes<SVGPathElement>>	null	Used to pass attributes to the root's DOM element.

Types#

Instance

Instance of KnobValue component.

values
ComponentInstance<KnobValueProps, KnobValueState, KnobValueExposes>

KnobText#

Props#

Defines valid properties in KnobText component.

name	type	default	description
ref	Ref<unknown>	null	The reference to the component instance.
pIf	boolean	true	Whether the component should be rendered.
style	CSSProperties \| ((instance?: KnobTextInstance) => CSSProperties)	null	The style to apply to the component.
className	string \| ((instance?: KnobTextInstance) => string)	null	The class name to apply to the component.
as	string \| number \| bigint \| boolean \| ComponentClass<any, any> \| FunctionComponent<any> \| ReactElement<unknown, string \| JSXElementConstructor<any>> \| Iterable<ReactNode, any, any> \| ReactPortal \| Promise<AwaitedReactNode>	null	The component type to render.
asChild	boolean	false	Whether the component should be rendered as a child component.
pt	SafeRecord<KnobTextPassThrough>	null	The pass-through props to pass to the component
ptOptions	PassThroughOptions	null	The pass-through options to pass to the component
unstyled	boolean	null	Whether the component should be rendered without classes.
dt	unknown	null	The design token to use for the component.
styles	StylesOptions<ComponentInstance>	null	The styles to use for the component.
children	ReactNode \| ((instance: KnobTextInstance) => ReactNode)	null	The children to render.
strokeWidth	number	14	Width of the knob stroke.
color	string	$dt('knob.text.color')	Color of the text.
[key: string]	any	null
pt-{optionName}-*	-	null	Pass through attributes for customizing component. For more info, see Pass Through tab.

Exposes#

Defines the methods and properties exposed by KnobText component.

name	type	default	description
knob	KnobRootInstance	null	The Knob component instance.

Interfaces#

PassThroughOptions

Defines passthrough(pt) options of KnobText component.

name	type	default	description
root	KnobTextPassThroughType<HTMLAttributes<SVGTextElement>>	null	Used to pass attributes to the root's DOM element.

Types#

Instance

Instance of KnobText component.

values
ComponentInstance<KnobTextProps, KnobTextState, KnobTextExposes>

useKnob#

Props#

Defines valid properties in useKnob.

name	type	default	description
defaultValue	number	null	Value of the knob.
value	number	null	The default value of the knob.
size	number	100	Size of the component in pixels.
step	number	1	Step factor to increment/decrement the value.
min	number	0	Mininum boundary value.
max	number	100	Maximum boundary value.
readOnly	boolean	false	When present, it specifies that the component value cannot be edited.
disabled	boolean	false	When present, it specifies that the component should be disabled.
onValueChange	(event: useKnobChangeEvent) => void	null	Callback fired when the knob's value changes.

State#

Defines valid state in useKnob.

name	type	default	description
value	number	null	The value of the knob.

Exposes#

Defines the methods and properties exposed by useKnob.

name	type	default	description
state	useKnobState	null	The state of the useKnob.
rangePath	string	null	The path string for the range arc of the knob.
valuePath	string	null	The path string for the value arc of the knob.
onClick	(event: MouseEvent) => void	null	Callback fired when the knob is clicked.
onMouseDown	(event: MouseEvent) => void	null	Callback fired when mouse down occurs on the knob.
onMouseUp	() => void	null	Callback fired when mouse up occurs.
onTouchStart	() => void	null	Callback fired when touch starts on the knob.
onTouchEnd	() => void	null	Callback fired when touch ends.
onMouseMove	(event: MouseEvent) => void	null	Callback fired when mouse moves while dragging the knob.
onTouchMove	(event: TouchEvent) => void	null	Callback fired when touch moves while dragging the knob.
onKeyDown	(event: KeyboardEvent) => void	null	Callback fired when a key is pressed while the knob is focused.

Events#

useKnobChangeEvent

Event fired when the knob's value changes.

name	type	description
value	number	The value of the knob.

Types#

Instance

Instance of useKnob headless.

values
HeadlessInstance<useKnobProps, useKnobState, useKnobExposes>