NumberInput

A field that allows user input of numeric values.

Demo

React
Vue

Orientation

Size

Min

Max

Step

Required

Invalid

Read only

Disabled

Age

Please enter your age

Example

React
Vue

// Import component
import { NumberInput } from '@fintech-sandpit/ui/react';
// Import styles (optional). Please note that you need to import the styles
// for Field and NumberInput components since the NumberInput component
// is using Field component.
import '@fintech-sandpit/ui/style/components/field.css';
import '@fintech-sandpit/ui/style/components/number_input.css';

return (
  <NumberInput
    min={18}
    max={128}
    step={1}
    label="Age"
    placeholder="E.g. 25"
    hint="Please enter your age"
    error="Invalid age"
  />
);

<script setup lang="ts">
// Import component
import { NumberInput } from '@fintech-sandpit/ui/vue';
// Import styles (optional). Please note that you need to import the styles
// for Field and NumberInput components since the NumberInput component
// is using Field component.
import '@fintech-sandpit/ui/style/components/field.css';
import '@fintech-sandpit/ui/style/components/number_input.css';
</script>

<template>
  <NumberInput
    :min="18"
    :max="128"
    :step="1"
    label="Age"
    placeholder="E.g. 25"
    hint="Please enter your age"
    error="Invalid age"
  />
</template>

Props

React
Vue

Name	Type	Default	Description
`value`	`string`	—	Controlled value of the text input
`defaultValue`	`string`	—	Default (uncontrolled) value of the text input
`name`	`string`	—	Name of the input element
`orientation`	`Orientation`	`'vertical'`	Orientation of the text input
`size`	`FieldSize`	`'md'`	Size of the text input
`label`	`string`	—	Label of the text input
`hint`	`string`	—	Helper text of the text input
`error`	`string`	—	Error text of the text input
`required`	`boolean`	`false`	Whether the text input is required
`invalid`	`boolean`	`false`	Whether the text input is invalid
`readOnly`	`boolean`	`false`	Whether the text input is read only
`disabled`	`boolean`	`false`	Whether the text input is disabled
`placeholder`	`string`	—	Placeholder of the text input
`min`	`number`	—	Minimum value of the text input
`max`	`number`	—	Maximum value of the text input
`step`	`number`	—	Step value of the text input

Name	Type	Default	Description
`model-value`	`string`	—	Controlled value of the text input ¹
`default-value`	`string`	—	Default (uncontrolled) value of the text input
`name`	`string`	—	Name of the input element
`orientation`	`Orientation`	`'vertical'`	Orientation of the text input
`size`	`FieldSize`	`'md'`	Size of the text input
`label`	`string`	—	Label of the text input
`hint`	`string`	—	Helper text of the text input
`error`	`string`	—	Error text of the text input
`required`	`boolean`	`false`	Whether the text input is required
`invalid`	`boolean`	`false`	Whether the text input is invalid
`read-only`	`boolean`	`false`	Whether the text input is read only
`disabled`	`boolean`	`false`	Whether the text input is disabled
`placeholder`	`string`	—	Placeholder of the text input
`min`	`number`	—	Minimum value of the input
`max`	`number`	—	Maximum value of the input
`step`	`number`	—	Step value of the input

Can be used with the v-model directive for two-way binding.

Name	Type	Description
`onValueChange`	`(value: string) => void`	Event handler for when the value changes

Name	Type	Description
`update:model-value`	`(value: string) => void`	Event handler for when the value changes

Types

type FieldSize = 'sm' | 'md' | 'lg';

type Orientation = 'horizontal' | 'vertical';