Number
Render a number input. Extends Base.
Interactive Demo
Example
5
const config = {
components: {
Example: {
fields: {
myNumber: {
type: "number",
},
},
render: ({ myNumber }) => {
return <div>{myNumber}</div>;
},
},
},
};Params
| Param | Example | Type | Status |
|---|---|---|---|
type | type: "number" | ”number” | Required |
max | max: 10 | number | - |
min | min: 0 | number | - |
placeholder | placeholder: "Lorem ipsum..." | String | - |
Required params
type
The type of the field. Must be "number" for Number fields.
const config = {
components: {
Example: {
fields: {
myNumber: {
type: "number",
},
},
// ...
},
},
};Optional params
max
The maximum numeric value allowed.
const config = {
components: {
Example: {
fields: {
myNumber: {
type: "number",
max: 10,
},
},
// ...
},
},
};Interactive Demo
Example
5
min
The minimum numeric value allowed.
const config = {
components: {
Example: {
fields: {
myNumber: {
type: "number",
min: 0,
},
},
// ...
},
},
};Interactive Demo
Example
5
Placeholder
The placeholder text to display when the field is empty.
const config = {
components: {
Example: {
fields: {
myNumber: {
type: "number",
placeholder: "Lorem ipsum...",
},
},
// ...
},
},
};Interactive Demo
Example
step
The stepping interval when interacting with the field.
const config = {
components: {
Example: {
fields: {
myNumber: {
type: "number",
step: 0.1,
},
},
// ...
},
},
};Interactive Demo
Example
5