skip to main content
skip to navigation sidebar
skip to context sidebar
A pack of extensions for grommet 2
Edit this page
created:7/7/2021
updated:7/7/2021
loc
199
comments
4%
failed
26
coverage
27%

NumberInput

grommet-controls
3.0.2

Component

browse
docs
issues
import { NumberInput } from 'grommet-controls';

Main

browse
docs
issues
() => {
  const [number, setNumber] = React.useState('12000.34');
  return (
    <Box direction="row">
      <Box basis="medium" gap="small">
        <NumberInput
          value={number}
          thousandsSeparatorSymbol=","
          onChange={({ target: { value } }) => setNumber(value)}
        />
      </Box>
    </Box>
  );
}

Commits

Date
Author
Commit Message
8/31/2020

atanasster

avatar of atanasster
update stories titles and navigation
8/30/2020

atanasster

avatar of atanasster
update eslint and add component-controls
8/27/2019

atanasster

avatar of atanasster
initial commit 2.x alpha
3 commits

External dependencies

package
imports
peer
grommet-icons/icons/Add
^2.15.0
Add
*
grommet-icons/icons/Subtract
^2.15.0
Subtract
*
react
^17.0.1
ReactComponent
*

Internal dependencies

file
imports
"../MaskedInput"
MaskedInput
"./NumberInputProps"
INumberInputProps

Component JSX

<Add
/>
grommet-icons/icons/Add
^2.15.0
<Subtract
/>
grommet-icons/icons/Subtract
^2.15.0
<MaskedInput
updatepatterninputModeonKeyDownonKeyUpdisabledonChangepipemaskwidgets
/>
MaskedInput
from"../MaskedInput"

Stories

A 11 Y Increment

browse
docs
issues
() => (
  <IntegerInput
    a11yIncrement="Add to entry"
    step={10}
    a11yDecrement="Remove from entry"
    thousandsSeparatorSymbol=","
  />
)

Min

browse
docs
issues
() => <IntegerInput min={5} />

Max

browse
docs
issues
() => <IntegerInput max={5} />

Step

browse
docs
issues
() => <IntegerInput step={10} />

Disabled

browse
docs
issues
() => <IntegerInput disabled={true} />

Add Icon

browse
docs
issues
() => (
  <IntegerInput addIcon={<AddCircle />} subtractIcon={<SubtractCircle />} />
)

Prefix

browse
docs
issues
() => <IntegerInput prefix="$" />

Suffix

browse
docs
issues
() => <IntegerInput suffix=" USD" />

Thousands Separator Symbol

browse
docs
issues
() => (
  <FloatInput
    thousandsSeparatorSymbol=" "
    decimalSymbol=","
    updateToString={true}
  />
)

Decimal Symbol

browse
docs
issues
() => (
  <FloatInput
    thousandsSeparatorSymbol=""
    decimalSymbol=","
    updateToString={true}
  />
)

Decimals

browse
docs
issues
() => <FloatInput decimals={4} />

Integers

browse
docs
issues
() => <IntegerInput integers={4} />
Previous
input/MaskedInput
Next
input/PasswordInput