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)}
        hasControls={true}
      />
    </Input.InputBox>
  )
})

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