SpInputNumber

import { useState } from 'react';
import { SpInputNumber } from '@silverpoint/react/ui/input-number';

export function Copies() {
  const [copies, setCopies] = useState<number | null>(3); // null is an empty field
  return <SpInputNumber label="Copies" value={copies} onChange={setCopies} min={1} max={10} />;
}

<script setup lang="ts">
import { ref } from 'vue';
import { SpInputNumber } from '@silverpoint/vue/ui/input-number';

const copies = ref<number | null>(3);
</script>

<template>
  <SpInputNumber v-model="copies" label="Copies" :min="1" :max="10" />
</template>

import { Component, signal } from '@angular/core';
import { SpInputNumber } from '@silverpoint/angular/ui/input-number';

@Component({
  selector: 'app-copies',
  imports: [SpInputNumber],
  template: `<sp-input-number [(value)]="copies" label="Copies" [min]="1" [max]="10" />`,
})
export class Copies {
  protected readonly copies = signal<number | null>(3);
}

sp_input_number(label="Copies", value=State.copies, on_change=State.set_copies, min=1, max=10)