Numeric Input

Blueprint Numeric Input component controlled and binded to Formik Field component. Holds the same original component properties with extra following properties.

interface NumericInputProps extends Omit<FieldConfig, 'children' | 'component'>, Omit<BPNumericInputProps, 'value'>

Reference

Props

name

name: string

Required

A field's name in Formik state, to access nested objects or arrays, name can also accept the lodash-like dot like social.facebook.

fastField

fastField: boolean

Switches to use <FastField /> Formik component instead of the regular Field component, FastField is an optimized for performance to be used on large forms (~30+ fields) or when a field has very expensive reandering requirements. Read more about FastField on Formik documentation.

---

Example

The following example demonstrates how to use binded Numeric Input component with Formik.

import React from 'react';
import { Formik, Form, FormikHelpers } from 'formik';
import { FormGroup, NumericInput } from '../packages/core/src';

interface Values {
  number: number;
}

export const NumericInputPage = () => {
  return (
    <Formik
      initialValues={{
        number: 10000,
      }}
      onSubmit={(
        values: Values,
        { setSubmitting }: FormikHelpers<Values>
      ) => {}}
    >
      <Form>
        <FormGroup name={'number'} label={'Number'}>
          <NumericInput name={'number'} />
        </FormGroup>

        <button type="submit">Submit</button>
      </Form>
    </Formik>
  );
};