NumberInput

A field that allows user input of numeric values.

Demo

React

OrientationHorizontalVertical

SizeExtra SmallSmallMediumLargeExtra Large

Required

Invalid

Read only

Disabled

Age

Please enter your age

Vue

OrientationHorizontalVertical

SizeExtra SmallSmallMediumLargeExtra Large

Required

Invalid

Read only

Disabled

Age

Please enter your age

Usage

React

import { NumberInput } from '@fintech-sandpit/ui/react';

return (
  <NumberInput
    label="Name"
    placeholder="E.g. 25"
    hint="Please enter your age"
    error="Invalid age"
  />
);

Vue

<script setup lang="ts">
import { NumberInput } from '@fintech-sandpit/ui/vue';
</script>

<template>
  <NumberInput
    label="Age"
    placeholder="E.g. 25"
    hint="Please enter your age"
    error="Invalid age"
  />
</template>

Props

React

Name	Type	Required	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	Size		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

Vue

Name	Type	Required	Default	Description
model-value	string		—	Controlled value of the text input 1
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	Size		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

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

Events

React

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

Vue

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

Types

type Orientation = 'horizontal' | 'vertical';
type Size = 'xs' | 'sm' | 'md' | 'lg' | 'xl';