NumberField — usage examples

NumberField ships as six pre-compiled, per-framework packages from a single .rozie source — install only the one for your framework (no Rozie toolchain, no build-time compile step). Each carries its engine + framework peers as peer dependencies, so you control their versions. The snippets below are the same idiomatic consumption code shown in each package's README; switch the tab to your framework.

Usage

tsx

import { useState } from 'react';
import { NumberField } from '@rozie-ui/number-field-react';

export function Demo() {
  const [qty, setQty] = useState<number | null>(1);
  return (
    <NumberField
      modelValue={qty}
      onModelValueChange={setQty}
      min={0}
      max={10}
      step={1}
      ariaLabel="Quantity"
      onChange={(e) => console.log('value:', e.value)}
    />
  );
}

// Locale-aware currency, with press-and-hold acceleration on the steppers.
export function PriceDemo() {
  const [price, setPrice] = useState<number | null>(9.99);
  return (
    <NumberField
      modelValue={price}
      onModelValueChange={setPrice}
      min={0}
      step={0.01}
      formatOptions={{ style: 'currency', currency: 'USD' }}
      ariaLabel="Price"
    />
  );
}

vue

<script setup lang="ts">
import { ref } from 'vue';
import NumberField from '@rozie-ui/number-field-vue';

const qty = ref<number | null>(1);
function onChange(e: { value: number | null }) {
  console.log('value:', e.value);
}
</script>

<template>
  <NumberField v-model:modelValue="qty" :min="0" :max="10" :step="1" aria-label="Quantity" @change="onChange" />

  <!-- Locale-aware currency -->
  <NumberField v-model:modelValue="qty" :min="0" :step="0.01" :format-options="{ style: 'currency', currency: 'USD' }" aria-label="Price" />
</template>

svelte

<script lang="ts">
  import NumberField from '@rozie-ui/number-field-svelte';

  let qty = $state<number | null>(1);
</script>

<NumberField
  bind:modelValue={qty}
  min={0}
  max={10}
  step={1}
  ariaLabel="Quantity"
  onchange={(e) => console.log('value:', e.value)}
/>

<!-- Locale-aware currency -->
<NumberField bind:modelValue={qty} min={0} step={0.01} formatOptions={{ style: 'currency', currency: 'USD' }} ariaLabel="Price" />

import { Component } from '@angular/core';
import { NumberField } from '@rozie-ui/number-field-angular';

@Component({
  selector: 'app-demo',
  standalone: true,
  imports: [NumberField],
  template: `
    <NumberField [(modelValue)]="qty" [min]="0" [max]="10" [step]="1" ariaLabel="Quantity" (change)="onChange($event)" />

    <!-- Locale-aware currency -->
    <NumberField [(modelValue)]="qty" [min]="0" [step]="0.01" [formatOptions]="currency" ariaLabel="Price" />
  `,
})
export class DemoComponent {
  qty: number | null = 1;
  currency = { style: 'currency', currency: 'USD' };
  onChange(e: { value: number | null }) {
    console.log('value:', e.value);
  }
}

tsx

import { createSignal } from 'solid-js';
import { NumberField } from '@rozie-ui/number-field-solid';

export function Demo() {
  const [qty, setQty] = createSignal<number | null>(1);
  return (
    <NumberField
      modelValue={qty()}
      onModelValueChange={setQty}
      min={0}
      max={10}
      step={1}
      ariaLabel="Quantity"
      onChange={(e) => console.log('value:', e.value)}
    />
  );
}

import '@rozie-ui/number-field-lit';

// <rozie-number-field> is a custom element. Bind `modelValue`/`min`/`max`/`step`
// as properties, and listen for `model-value-change` to receive the new value as
// the two-way model, or `change` for every committed change.
const el = document.querySelector('rozie-number-field');
el.min = 0;
el.max = 10;
el.step = 1;
el.modelValue = 1;
el.addEventListener('model-value-change', (e) => {
  el.modelValue = e.detail;
});
el.addEventListener('change', (e) => {
  console.log('value:', e.detail.value);
});

Imperative handle

Beyond props and events, NumberField exposes imperative methods (declared once in the .rozie source via $expose). Grab a handle through your framework's native ref mechanism and call them directly:

tsx

import { useRef } from 'react';
import { NumberField, type NumberFieldHandle } from '@rozie-ui/number-field-react';

const field = useRef<NumberFieldHandle>(null);
// <NumberField ref={field} ... />
field.current?.focus();
field.current?.increment();
field.current?.decrement();
field.current?.clear();

vue

<script setup>
import { ref } from 'vue';
const field = ref();          // template ref
</script>

<template>
  <NumberField ref="field" v-model:modelValue="qty" />
  <button @click="field.increment()">+</button>
  <button @click="field.clear()">Clear</button>
</template>

svelte

<script>
  let field;                  // component instance via bind:this
</script>

<NumberField bind:this={field} bind:modelValue={qty} />
<button onclick={() => field.increment()}>+</button>
<button onclick={() => field.clear()}>Clear</button>

@Component({ /* ... */ })
export class DemoComponent {
  @ViewChild(NumberField) field!: NumberField;   // or the viewChild() signal
  bump() { this.field.increment(); }
  reset() { this.field.clear(); }
}

tsx

import { NumberField, type NumberFieldHandle } from '@rozie-ui/number-field-solid';

let handle: NumberFieldHandle | undefined;
// The ref callback receives the HANDLE object (not the DOM node).
<NumberField ref={(h) => (handle = h)} modelValue={qty()} />;
handle?.increment();
handle?.clear();

// The custom element IS the handle — exposed methods are public element
// methods. `focus()` here DELIBERATELY overrides the inherited
// HTMLElement.focus (it focuses + selects the input).
const el = document.querySelector('rozie-number-field');
el.focus();
el.increment();
el.decrement();
el.clear();

NumberField — usage examples ​

Usage ​

Imperative handle ​

See also ​

NumberField — usage examples

Usage

Imperative handle

See also