Number field
Number fields allow users to enter a numeric value, with optional increment and decrement buttons.
| Property | Values | Default value | Required |
|---|---|---|---|
| label | text | - | |
| size | s / m / l / xl | m | |
| label position | top / side | top | |
| hide label | yes / no | no | |
| state | default / hover / focus + hover / focus + not hover | default | |
| is disabled | yes / no | no | |
| is error | yes / no | no | |
| is required | yes / no | no | |
| necessity indicator | text / icon | icon | |
| hide stepper | yes / no If true, hides in-field increment and decrement buttons (stepper). | no |
{
"slug": "number-field",
"$schema": "https://opensource.adobe.com/spectrum-design-data/schemas/component.json",
"$id": "https://opensource.adobe.com/spectrum-design-data/schemas/components/number-field.json",
"title": "Number field",
"description": "Number fields allow users to enter a numeric value, with optional increment and decrement buttons.",
"meta": {
"category": "inputs",
"documentationUrl": "https://spectrum.adobe.com/page/number-field/"
},
"type": "object",
"properties": {
"label": {
"type": "string"
},
"size": {
"type": "string",
"enum": [
"s",
"m",
"l",
"xl"
],
"default": "m"
},
"labelPosition": {
"type": "string",
"default": "top",
"enum": [
"top",
"side"
]
},
"hideLabel": {
"type": "boolean",
"default": false
},
"state": {
"type": "string",
"enum": [
"default",
"hover",
"focus + hover",
"focus + not hover"
],
"default": "default"
},
"isDisabled": {
"type": "boolean",
"default": false
},
"isError": {
"type": "boolean",
"default": false
},
"isRequired": {
"type": "boolean",
"default": false
},
"necessityIndicator": {
"type": "string",
"enum": [
"text",
"icon"
],
"default": "icon"
},
"hideStepper": {
"type": "boolean",
"default": false,
"description": "If true, hides in-field increment and decrement buttons (stepper)."
}
}
}