---
name: 'Field: Number'
route: /components/common/forms/form-field-number
menu: Forms
edit: false
---

import { Playground, Props } from 'docz'
import { State, Toggle } from 'react-powerplug'
import FormFieldNumber from './form-field-number'

# FormFieldNumber
**SUBCATEGORY:** Forms

<hr />

## Number field
### Description
For a numerical-only value. Includes built-in browser validation.

**Default**
<Playground>
  <State initial={{ value: '' }}>
  {({ state, setState }) => (
    <FormFieldNumber
      {...state}
      labelText="Label"
      id="123"
      onChange={e => setState({ value: e.target.value })}
    />
  )}
</State>
</Playground>

**Optional**
<Playground>
  <State initial={{ value: '' }}>
    {({ state, setState }) => (
    <FormFieldNumber
      {...state}
      labelText="Label"
      labelTag="Tag"
      id="123"
      onChange={e => setState({ value: e.target.value })}
   />
  )}
  </State>
</Playground>

**Placeholder**
<Playground>
  <State initial={{ value: '' }}>
    {({ state, setState }) => (
    <FormFieldNumber
      {...state}
      labelText="Label"
      id="123"
      onChange={e => setState({ value: e.target.value })}
      placeholder="1000000"
   />
  )}
  </State>
</Playground>

**Helper**
<Playground>
  <State initial={{ value: '' }}>
    {({ state, setState }) => (
    <FormFieldNumber
      {...state}
      helperText="Helper text"
      labelText="Label"
      id="123"
      onChange={e => setState({ value: e.target.value })}
   />
  )}
  </State>
</Playground>

**Validation**
<Playground>
  <State initial={{ value: '' }}>
    {({ state, setState }) => (
    <FormFieldNumber
      {...state}
      error="Notice"
      labelText="Label"
      onChange={e => setState({ value: e.target.value })}
   />
  )}
  </State>
</Playground>

**Disabled**
<Playground>
    <FormFieldNumber
      labelText="Label"
      id="123"
      value="1234"
      disabled />
</Playground>

<hr />

## Number field (adjacent)
### Description
For a numerical-only value. Includes built-in browser validation.

**Avoid including `error`, `labelTag` and `helperText` props when using adjacent layout. Instead, use the standard layout.**

**Default**
<Playground>
  <State initial={{ value: '' }}>
  {({ state, setState }) => (
    <FormFieldNumber
      adjacent
      {...state}
      labelText="Label"
      id="123"
      onChange={e => setState({ value: e.target.value })}
    />
  )}
</State>
</Playground>

<hr />

## Number field (slim)
### Description
For a numerical-only value. Includes built-in browser validation. Use where inputs are nested or constrained by layout.

**Default**
<Playground>
  <State initial={{ value: '' }}>
  {({ state, setState }) => (
    <FormFieldNumber
      {...state}
      labelText="Label"
      id="123"
      slim
      onChange={e => setState({ value: e.target.value })}

    />
  )}
</State>
</Playground>

**Optional**
<Playground>
  <State initial={{ value: '' }}>
    {({ state, setState }) => (
    <FormFieldNumber
      {...state}
      slim
      labelText="Label"
      labelTag="Tag"
      id="123"
      onChange={e => setState({ value: e.target.value })}
   />
  )}
  </State>
</Playground>

**Placeholder**
<Playground>
  <State initial={{ value: '' }}>
    {({ state, setState }) => (
    <FormFieldNumber
      {...state}
      slim
      labelText="Label"
      id="123"
      onChange={e => setState({ value: e.target.value })}
      placeholder="1000000"
   />
  )}
  </State>
</Playground>

**Helper**
<Playground>
  <State initial={{ value: '' }}>
    {({ state, setState }) => (
    <FormFieldNumber
      {...state}
      slim
      helperText="Helper text"
      labelText="Label"
      id="123"
      onChange={e => setState({ value: e.target.value })}
   />
  )}
  </State>
</Playground>

**Validation**
<Playground>
  <State initial={{ value: '' }}>
    {({ state, setState }) => (
    <FormFieldNumber
      {...state}
      error="Notice"
      slim
      labelText="Label"
      onChange={e => setState({ value: e.target.value })}
   />
  )}
  </State>
</Playground>

**Disabled**
<Playground>
    <FormFieldNumber
      slim
      labelText="Label"
      id="123"
      value="1234"
      disabled />
</Playground>

<hr />

## Number field (slim, adjacent)
### Description
For a numerical-only value. Includes built-in browser validation. Use where inputs are nested or constrained by layout.

**Avoid including `error`, `labelTag` and `helperText` props when using adjacent layout. Instead, use the standard layout.**

**Default**
<Playground>
  <State initial={{ value: '' }}>
  {({ state, setState }) => (
    <FormFieldNumber
      adjacent
      {...state}
      labelText="Label"
      id="123"
      slim
      onChange={e => setState({ value: e.target.value })}

    />
  )}
</State>
</Playground>

## Properties
<Props of={FormFieldNumber} />