Skip to content
Home

Number

Info
Demos
Properties
Events

Description

Field.Number is the base component for receiving user input where the target data is of type number.

There is a corresponding Value.Number component.

Demos

Empty

Code Editor
<Field.Number

  onFocus={(value) => console.log('onFocus', value)}

  onBlur={(value) => console.log('onBlur', value)}

  onChange={(value) => console.log('onChange', value)}

/>

Placeholder

Code Editor
<Field.Number

  placeholder="Enter a number"

  onChange={(value) => console.log('onChange', value)}

/>

Label

Code Editor
<Field.Number

  label="Label text"

  onChange={(value) => console.log('onChange', value)}

/>

Label and value

Code Editor
<Field.Number

  value={420000.25}

  label="Label text"

  onChange={(value) => console.log('onChange', value)}

/>

With help

Code Editor
<Field.Number

  value={12345}

  label="Label text"

  help={{

    title: 'Help is available',

    contents:

      'Here is what a team can do for you. . . . It allows you to help others do their best.',

  }}

  onChange={(value) => console.log('onChange', value)}

/>

Horizontal layout

Code Editor
<Field.Number

  value={420000}

  label="Label text"

  layout="horizontal"

  onChange={(value) => console.log('onChange', value)}

/>

Widths

Code Editor
<Field.Number

  label="Default width (property omitted)"

  value={123}

  onChange={(value) => console.log('onChange', value)}

/>

<Field.Number

  label="Small"

  value={123}

  width="small"

  onChange={(value) => console.log('onChange', value)}

/>

<Field.Number

  label="Medium"

  value={123}

  width="medium"

  onChange={(value) => console.log('onChange', value)}

/>

<Field.Number

  label="Large"

  value={123}

  width="large"

  onChange={(value) => console.log('onChange', value)}

/>

<Field.Number

  label="Stretch"

  value={123}

  width="stretch"

  onChange={(value) => console.log('onChange', value)}

/>

Disabled

Code Editor
<Field.Number

  value={135}

  label="Label text"

  onChange={(value) => console.log('onChange', value)}

  disabled

/>

Info

Useful information (?)
Code Editor
<Field.Number

  value={135}

  label="Label text"

  onChange={(value) => console.log('onChange', value)}

  info="Useful information (?)"

/>

Warning

I'm warning you...
Code Editor
<Field.Number

  value={135}

  label="Label text"

  onChange={(value) => console.log('onChange', value)}

  warning={new FormError("I'm warning you...")}

/>

Error

This is what is wrong...
Code Editor
<Field.Number

  value={135}

  label="Label text"

  onChange={(value) => console.log('onChange', value)}

  error={new FormError('This is what is wrong...')}

/>

Validation - Required

Code Editor
<Field.Number

  value={123}

  label="Remove and blur field"

  onChange={(value) => console.log('onChange', value)}

  required

/>

Validation - Minimum

Code Editor
<Field.Number

  value={300}

  label="Enter a number below 250 and blur to trigger error"

  onChange={(value) => console.log('onChange', value)}

  minimum={250}

/>

Validation - Maximum and custom error message

Code Editor
<Field.Number

  value={200}

  label="Enter a number above 250 and blur to trigger error"

  onChange={(value) => console.log('onChange', value)}

  maximum={250}

  errorMessages={{

    maximum: "You can't enter a number THAR large.. Max 250!",

  }}

/>