NumberField

View Source

Number stepper input used to collect numeric information from users.

Copy

Edit

render(() => {
  const [value, setValue] = React.useState(0)
  return (
    <Input.InputBox>
      <NumberField value={value} onChange={(value) => setValue(value)} />
    </Input.InputBox>
  )
})

render(() => {
  const [value, setValue] = React.useState(0)
  return (
    <Input.InputBox>
      <NumberField value={value} onChange={(value) => setValue(value)} />
    </Input.InputBox>
  )
})

Copy

Edit

render(() => {
  const [month, setMonth] = React.useState(4)
  const [day, setDay] = React.useState(24)
  const [year, setYear] = React.useState(2022)
  return (
    <StackView axis="horizontal" alignment="center">
      <NumberField
        as={Input.Inline}
        moveFocusOnMax
        fontSize={1}
        pad={2}
        min={1}
        max={12}
        value={month}
        onChange={(month) => setMonth(month)}
      />
      <Text fontSize={1} marginHorizontal={0.5}>
        /
      </Text>
      <NumberField
        as={Input.Inline}
        moveFocusOnMax
        fontSize={1}
        pad={2}
        min={1}
        max={31}
        value={day}
        onChange={(day) => setDay(day)}
      />
      <Text fontSize={1} marginHorizontal={0.5}>
        /
      </Text>
      <NumberField
        as={Input.Inline}
        fontSize={1}
        pad={4}
        min={0}
        value={year}
        onChange={(year) => setYear(year)}
      />
    </StackView>
  )
})

render(() => {
  const [month, setMonth] = React.useState(4)
  const [day, setDay] = React.useState(24)
  const [year, setYear] = React.useState(2022)
  return (
    <StackView axis="horizontal" alignment="center">
      <NumberField
        as={Input.Inline}
        moveFocusOnMax
        fontSize={1}
        pad={2}
        min={1}
        max={12}
        value={month}
        onChange={(month) => setMonth(month)}
      />
      <Text fontSize={1} marginHorizontal={0.5}>
        /
      </Text>
      <NumberField
        as={Input.Inline}
        moveFocusOnMax
        fontSize={1}
        pad={2}
        min={1}
        max={31}
        value={day}
        onChange={(day) => setDay(day)}
      />
      <Text fontSize={1} marginHorizontal={0.5}>
        /
      </Text>
      <NumberField
        as={Input.Inline}
        fontSize={1}
        pad={4}
        min={0}
        value={year}
        onChange={(year) => setYear(year)}
      />
    </StackView>
  )
})

Props

maxnumber

Maximum number that can be entered.

minnumber

Minimum number that can be entered.

onChange(value: string) => null

Called when the input’s onInput is called with a valid value or when the arrow keys are used to increment/decrement the value. Please note traditional onInput/onChange events are not supported since this component takes control of them.

padnumber

The amount of 0s to pad the value with.

placeholderstring

String to display when value is empty.

stepnumber

The amount to step up/down from the value when using the arrow keys defaults to 1

valuenumber

The value of the input.

Props

PreviousInput.InputLabel NextRadio