Number Field

A component for incrementing and decrementing a value.

Installation

Step

Use the step prop to increment or decrement the value by a specific amount, in this case 100.

API Reference

NumberField.

Root

The root component of the number field. Manages the value state and ramp behavior.

PropTypeDefault
value? $bindable
number -
rampBy?
number -
min?
number -
max?
number -
rampSettings?
object { startDelay: 400, rampUpTime: 0, minFrequency: 35, maxFrequency: 35 }
children?
Snippet -
NumberField.

Group

A container component that groups the input and buttons together with proper styling.

PropTypeDefault
ref? $bindable
HTMLDivElement null
class?
string -
children?
Snippet -
NumberField.

Input

The input element that displays and allows editing of the value.

PropTypeDefault
ref? $bindable
HTMLInputElement null
class?
string -
NumberField.

Increment

A button that increments the value. Supports ramp behavior when held down.

PropTypeDefault
ref? $bindable
HTMLElement null
variant?
enum ghost
size?
enum icon
class?
string -
children?
Snippet -
disabled?
boolean false
onpointerdown?
function -
onpointerup?
function -
onclick?
function -
NumberField.

Decrement

A button that decrements the value. Supports ramp behavior when held down.

PropTypeDefault
ref? $bindable
HTMLElement null
variant?
enum ghost
size?
enum icon
class?
string -
children?
Snippet -
disabled?
boolean false
onpointerdown?
function -
onpointerup?
function -
onclick?
function -