Skip to main content

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>
);
};