StepperField

Deprecated

View Source

Use NumberStepper from the @planningcenter/tapestry package instead.

Number input used to collect numeric information from users with increment/decrement buttons.

render(() => {
  const [value, setValue] = React.useState(1)
  return (
    <StepperField
      min={0}
      max={10}
      value={value}
      onChange={(value) => setValue(value)}
    />
  )
})

render(() => {
  const [value, setValue] = React.useState(1)
  return (
    <StepperField
      min={0}
      max={10}
      value={value}
      onChange={(value) => setValue(value)}
    />
  )
})

Props

Themeable

Accepts StackView props.

Use the stepperField key in ThemeProvider to customize the default properties of this component.

maxnumber

Maximum number that can be selected.

minnumber

Minimum number that can be selected.

onChange(newValue: number) => void

Called when incrementing/decrementing the value.

stepnumber

Specifies the size of each movement when incrementing/decrementing the value. Defaults to 1.

valuenumber

The current value of the stepper.

Props

PreviousSelect.Value NextTextArea