NumberField

import { useState } from 'react';
import { Box, Flex, NumberField } from 'gestalt';

export default function Example() {
  const [currentValue, setCurrentValue] = useState();

  return (
    <Flex
      alignItems="center"
      justifyContent="center"
      height="100%"
      width="100%"
    >
      <Box width={400}>
        <NumberField
          disabled
          id="variant-disabled"
          label="Disabled"
          onChange={({ value }) => {
            setCurrentValue(value);
          }}
          placeholder="This input is disabled"
          value={currentValue}
        />
      </Box>
    </Flex>
  );
}

To enter the code editing mode, press Enter. To exit the edit mode, press Escape

You are editing the code. To exit the edit mode, press Escape

import { useState } from 'react';
import { Box, Flex, NumberField } from 'gestalt';

export default function Example() {
  const [currentValue, setCurrentValue] = useState();

  return (
    <Flex
      alignItems="center"
      justifyContent="center"
      height="100%"
      width="100%"
    >
      <Box width={400}>
        <NumberField
          id="variant-helperText"
          helperText="Round up to the nearest whole number"
          label="Average value"
          onChange={({ value }) => {
            setCurrentValue(value);
          }}
          value={currentValue}
        />
      </Box>
    </Flex>
  );
}

To enter the code editing mode, press Enter. To exit the edit mode, press Escape

You are editing the code. To exit the edit mode, press Escape

import { useState } from 'react';
import { Box, Flex, NumberField } from 'gestalt';

export default function Example() {
  const [currentValue, setCurrentValue] = useState();

  return (
    <Flex
      alignItems="center"
      justifyContent="center"
      height="100%"
      width="100%"
    >
      <Box width={400}>
        <NumberField
          id="variant-errorMessage"
          errorMessage={
            currentValue === null || currentValue === undefined
              ? 'You must enter a number'
              : null
          }
          label="With an error message"
          onChange={({ value }) => {
            setCurrentValue(value);
          }}
          value={currentValue}
        />
      </Box>
    </Flex>
  );
}

To enter the code editing mode, press Enter. To exit the edit mode, press Escape

You are editing the code. To exit the edit mode, press Escape

import { useState } from 'react';
import { Flex, NumberField } from 'gestalt';

export default function Example() {
  const [value1, setValue1] = useState();
  const [value2, setValue2] = useState();

  return (
    <Flex
      alignItems="center"
      direction="column"
      gap={4}
      justifyContent="center"
      height="100%"
      width="100%"
    >
      <Flex.Item minWidth="80%">
        <NumberField
          helperText="Use the arrow buttons to increase/decrease the input value"
          id="minMaxStepExampleNumberField1"
          label="Stepping in intervals of 5"
          max={25}
          min={5}
          onChange={({ value }) => {
            setValue1(value);
          }}
          step={5}
          value={value1}
        />
      </Flex.Item>

      <Flex.Item minWidth="80%">
        <NumberField
          helperText="Use the arrow buttons to increase/decrease the input value"
          id="minMaxStepExampleNumberField2"
          label="Stepping in intervals of 0.1"
          max={2}
          min={-2}
          onChange={({ value }) => {
            setValue2(value);
          }}
          step={0.1}
          value={value2}
        />
      </Flex.Item>
    </Flex>
  );
}

To enter the code editing mode, press Enter. To exit the edit mode, press Escape

You are editing the code. To exit the edit mode, press Escape

import { useState } from 'react';
import { Box, Flex, NumberField } from 'gestalt';

export default function Example() {
  const [currentValue, setCurrentValue] = useState();

  return (
    <Flex
      alignItems="center"
      justifyContent="center"
      height="100%"
      width="100%"
    >
      <Box width={300}>
        <NumberField
          enterKeyHint="next"
          id="enterKeyHint"
          label="Age"
          onChange={({ value }) => {
            setCurrentValue(value);
          }}
          value={currentValue}
        />
      </Box>
    </Flex>
  );
}

To enter the code editing mode, press Enter. To exit the edit mode, press Escape

You are editing the code. To exit the edit mode, press Escape

import { useEffect, useRef, useState } from 'react';
import { Box, Flex, NumberField } from 'gestalt';

export default function Example() {
  const [currentValue, setCurrentValue] = useState();
  const [errorMessage, setErrorMessage] = useState(undefined);
  const ref = useRef();

  useEffect(() => {
    if (ref.current && ref.current.checkValidity() === false) {
      setErrorMessage("That episode doesn't exist (yet)!");
    } else {
      setErrorMessage(undefined);
    }
  }, [currentValue]);

  return (
    <Flex
      alignItems="center"
      justifyContent="center"
      height="100%"
      width="100%"
    >
      <Box width={400}>
        <NumberField
          errorMessage={errorMessage}
          id="refExampleNumberField"
          label="Enter a Star Wars episode number"
          max={9}
          min={1}
          onChange={({ value }) => {
            setCurrentValue(value);
          }}
          placeholder="Enter a number from 1–9"
          ref={ref}
          step={2}
          value={currentValue}
        />
      </Box>
    </Flex>
  );
}

To enter the code editing mode, press Enter. To exit the edit mode, press Escape

You are editing the code. To exit the edit mode, press Escape