Input Number
Input Number component is a form element that allows users to select a number
Playground
Experiment with all the properties of the InputNumber component in real time.
Properties
label
Defines the input label.
helperText
Adds supportive text below the input.
errorMessage
Custom error message to display when invalid.
min
Sets the minimum allowed value.
max
Sets the maximum allowed value.
step
Configures the increment value.
color
Controls the color of the switch when active.
typeNumber
Applies a numeric formatting style.
size
Adjusts the input’s overall size.
radius
Adjusts the corner roundness.
invalid
Shows the input in an error state.
disabled
Makes the input non-interactive.
required
Marks the input as mandatory.
Controlled ComponentonChangeValue
Control the selected value using value and onChangeValue.
API Reference
Props
Prop | Default | Type |
|---|---|---|
variant | "outlined" | "outlined" | "soft" |
size | "medium" | "tiny" | "small" | "medium" | "large" |
radius | "tiny" | "none" | "tiny" | "small" | "medium" | "large" | "full" |
invalid | false | boolean |
disabled | false | boolean |
typeNumber | "default" | "default" | "currency-USD" | "currency-EUR" | "currency-GBP" | "percentage" | "decimal" |
min | undefined | number |
max | undefined | number |
step | 1 | number |
label | undefined | string |
errorMessage | "" | string |
helperText | "" | string |
required | false | boolean |
defaultValue | undefined | number |
onChangeValue | undefined | (value: number) => void |
value | undefined | number |
joinposition | undefined | "first" | "last" | "middle" |