Number Field

Overview

The number input component is used for entering numeric values and includes support for visualising and selecting unit types.

Units are something common to BPMs platforms and often help the user rationalise the types of units being captured. This could be various SI units or more arbitary types depending on the type of value being captured.

Interactive demo

The demo below allows you to preview the component. You can play with its props, variations, configuration options and dive into its events and even see them trigger in the event log tab.

MedKit Number Field

Label (optional)

Props Help

For each property in a component you can see:

• value-type
  that it supports
• The default
  value
• If the prop is
  required

Error

string

Array<string>

Errors to display for the input.

Value 

Error Hidden

boolean

false

Only display the red border but not the error text.

Toggle Prop

Help Text

string

Array<string>

The help text to display for the input.

Value 

Label

string

Required

The label to be shown above the input.

 

Label Hidden

boolean

false

Only display the label for screen readers.

Toggle Prop

Max

[string number],

The maximum value allowed.

 

Min

[string number],

The minimum value allowed.

 

Placeholder

string

The placeholder for the primary input.

 

Required

boolean

false

If the field is required

Toggle Prop

Unit

string

The value of the unit associated with the model value.

 

Unit Options

Array<SelectionOption>

export interface SelectionOption {
  value: string | number;
  label: string;
}

[]

The list of options that the user can select from.

Unit Placeholder

string

-

The placeholder for the unselected unit value.

 

Prepend

string

The value of the unit associated with the model value.

 

Prepend Options

Array<SelectionOption>

export interface SelectionOption {
  value: string | number;
  label: string;
}

[]

The list of options that the user can select from.

Prepend Placeholder

string

-

The placeholder for the unselected prepend value.

 

Decimals

number

0

The number of decimal places to display.

 

Disable Wheel Scroll

boolean

false

Disable default wheel scroll handler for number input.

Toggle Prop

Disable Arrow Keys

boolean

false

Disable default arrow key handler for number input.

Toggle Prop

No Unit

How many chickens (optional)

Unit With Only a Single Option

Date of consult in (optional) , in weeks

weeks

With Multiple Units

Date of consult in (optional) , enter Date of consult in and select unit

-daysweeksmonths

Weight (optional) , in weight

-KilogramsPounds

This is the help text

Weight (optional) , in kilograms

-KilogramsPounds

With Min and Max Values

Give me a number between 2 & 12 

SandwichesToastiesBurritosBurgersWontons

Prepend With Only a Single Option

Home test kit result 

= (is equal to)

micrograms/g

With Multiple Prepend

Home test kit result 

Prepend (optional)

-= (is equal to)< (less than)> (greater than)

micrograms/g

Error test kit result 

Prepend (optional)

-= (is equal to)< (less than)> (greater than)

micrograms/g

Please enter a number that is either 20 or 2000 with the corresponding symbol

Figma Library

You can find the component in our MedKit Figma library.