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!",
  }}
/>