# Number Field

Numeric entry with increment controls, bounds, units and sizes.

## Installation

Download: /api/catalog/number-field/download

Ignition Perspective 8.3. In a development project, choose Designer > File > Import and select the ZIP. Preserve the view and style-class paths. Review resource conflicts before replacing anything.

Append stylesheet-snippet.css to Perspective Styles > stylesheet.css (enable Advanced Stylesheet). Preserve existing CSS. This supporting file is not imported automatically.

Add an Embedded View (ia.display.view), set props.path to Viewcraft/Components/UI/NumberField/NumberField, and configure props.params using the contract below. Connect your own data in the host view. The package does not include live tags, page configuration or Gateway settings.

## Parameters

Types are inferred from saved defaults; directions come from native propConfig. These are not full schemas or validated ranges.

| Parameter | Type | Direction | Default |

| --- | --- | --- | --- |

| value | number | inout | 5 |

| min | number | input | 0 |

| max | number | input | 100 |

| step | number | input | 1 |

| size | string | input | "md" |

| layout | string | input | "split" |

| label | string | input | "Cantidad" |

| unit | string | input | "" |

| disabled | boolean | input | false |

## Embedded View usage

```json

{
  "type": "ia.display.view",
  "props": {
    "path": "Viewcraft/Components/UI/NumberField/NumberField",
    "params": {
      "value": 5,
      "min": 0,
      "max": 100,
      "step": 1,
      "size": "md",
      "layout": "split",
      "label": "Cantidad",
      "unit": "",
      "disabled": false
    },
    "useDefaultViewWidth": false,
    "useDefaultViewHeight": false
  }
}

```

## Verification

Source and archive hashes are checked. Designer import acceptance has not been completed for this archive; test in your development project before production.

## Files

### com.inductiveautomation.perspective/views/Viewcraft/Components/UI/NumberField/NumberField/view.json

```json

{
  "custom": {},
  "params": {
    "value": 5,
    "min": 0,
    "max": 100,
    "step": 1,
    "size": "md",
    "layout": "split",
    "label": "Cantidad",
    "unit": "",
    "disabled": false
  },
  "propConfig": {
    "params.value": {
      "paramDirection": "inout",
      "persistent": true
    },
    "params.min": {
      "paramDirection": "input",
      "persistent": true
    },
    "params.max": {
      "paramDirection": "input",
      "persistent": true
    },
    "params.step": {
      "paramDirection": "input",
      "persistent": true
    },
    "params.size": {
      "paramDirection": "input",
      "persistent": true
    },
    "params.layout": {
      "paramDirection": "input",
      "persistent": true
    },
    "params.label": {
      "paramDirection": "input",
      "persistent": true
    },
    "params.unit": {
      "paramDirection": "input",
      "persistent": true
    },
    "params.disabled": {
      "paramDirection": "input",
      "persistent": true
    }
  },
  "props": {
    "defaultSize": {
      "width": 280,
      "height": 72
    }
  },
  "root": {
    "type": "ia.container.flex",
    "version": 0,
    "meta": {
      "name": "NumberFieldRoot"
    },
    "props": {
      "direction": "column",
      "justify": "flex-start",
      "alignItems": "stretch",
      "style": {
        "classes": "vc/number-field",
        "gap": "6px"
      }
    },
    "propConfig": {
      "props.style.classes": {
        "binding": {
          "type": "expr",
          "config": {
            "expression": "'vc/number-field' + if(coalesce({view.params.disabled}, false), ' vc/number-field-disabled', '') + if(lower(coalesce({view.params.size}, 'md')) = 'sm', ' vc/number-field-sm', if(lower(coalesce({view.params.size}, 'md')) = 'lg', ' vc/number-field-lg', ' vc/number-field-md'))"
          }
        }
      }
    },
    "children": [
      {
        "type": "ia.display.label",
        "version": 0,
        "meta": {
          "name": "FieldLabel"
        },
        "position": {
          "grow": 0,
          "shrink": 0,
          "basis": "auto"
        },
        "props": {
          "text": "Cantidad",
          "align": "left",
          "style": {
            "classes": "vc/number-field-label"
          }
        },
        "propConfig": {
          "props.text": {
            "binding": {
              "type": "property",
              "config": {
                "path": "view.params.label"
              }
            }
          },
          "meta.visible": {
            "binding": {
              "type": "expr",
              "config": {
                "expression": "len(coalesce({view.params.label}, '')) > 0"
              }
            }
          }
        }
      },
      {
        "type": "ia.container.flex",
        "version": 0,
        "meta": {
          "name": "SplitGroup"
        },
        "position": {
          "grow": 0,
          "shrink": 0,
          "basis": "auto"
        },
        "props": {
          "direction": "row",
          "justify": "space-between",
          "alignItems": "center",
          "style": {
            "classes": "vc/number-field-group vc/number-field-group-pill",
            "gap": "0px"
          }
        },
        "propConfig": {
          "meta.visible": {
            "binding": {
              "type": "expr",
              "config": {
                "expression": "lower(coalesce({view.params.layout}, 'split')) = 'split'"
              }
            }
          }
        },
        "children": [
          {
            "type": "ia.input.button",
            "version": 0,
            "meta": {
              "name": "DecSplit"
            },
            "props": {
              "text": "−",
              "primary": false,
              "secondary": true,
              "enabled": true,
              "align": "center",
              "justify": "center",
              "style": {
                "classes": "vc/number-field-dec",
                "minWidth": "36px",
                "minHeight": "0",
                "height": "100%",
                "padding": "0",
                "margin": "0",
                "borderStyle": "none",
                "backgroundColor": "transparent",
                "boxShadow": "none",
                "cursor": "pointer",
                "alignSelf": "stretch",
                "borderRadius": "0"
              }
            },
            "position": {
              "grow": 0,
              "shrink": 0,
              "basis": "36px"
            },
            "events": {
              "component": {
                "onActionPerformed": {
                  "type": "script",
                  "scope": "G",
                  "config": {
                    "script": "\tif self.view.params.disabled:\n\t\treturn\n\ttry:\n\t\tv = float(self.view.params.value)\n\texcept:\n\t\tv = 0.0\n\ttry:\n\t\tstep = float(self.view.params.step)\n\texcept:\n\t\tstep = 1.0\n\ttry:\n\t\tmn = float(self.view.params.min)\n\texcept:\n\t\tmn = 0.0\n\tnv = v - step\n\tif nv < mn:\n\t\tnv = mn\n\t# keep int look when whole numbers\n\tif abs(nv - int(nv)) < 1e-9:\n\t\tnv = int(nv)\n\tself.view.params.value = nv\n"
                  }
                }
              }
            },
            "propConfig": {
              "props.style.classes": {
                "binding": {
                  "type": "expr",
                  "config": {
                    "expression": "'vc/number-field-dec' + if(coalesce({view.params.disabled}, false) || ({view.params.value} <= {view.params.min}), ' vc/number-field-btn-edge', '')"
                  }
                }
              }
            }
          },
          {
            "type": "ia.display.label",
            "version": 0,
            "meta": {
              "name": "ValueSplit"
            },
            "position": {
              "grow": 1,
              "shrink": 1,
              "basis": "72px"
            },
            "props": {
              "text": "5",
              "align": "center",
              "style": {
                "classes": "vc/number-field-input",
                "padding": "0px",
                "margin": "0px"
              }
            },
            "propConfig": {
              "props.text": {
                "binding": {
                  "type": "expr",
                  "config": {
                    "expression": "toStr({view.params.value}) + if(len(coalesce({view.params.unit}, '')) > 0, ' ' + {view.params.unit}, '')"
                  }
                }
              }
            }
          },
          {
            "type": "ia.input.button",
            "version": 0,
            "meta": {
              "name": "IncSplit"
            },
            "props": {
              "text": "+",
              "primary": false,
              "secondary": true,
              "enabled": true,
              "align": "center",
              "justify": "center",
              "style": {
                "classes": "vc/number-field-inc",
                "minWidth": "36px",
                "minHeight": "0",
                "height": "100%",
                "padding": "0",
                "margin": "0",
                "borderStyle": "none",
                "backgroundColor": "transparent",
                "boxShadow": "none",
                "cursor": "pointer",
                "alignSelf": "stretch",
                "borderRadius": "0"
              }
            },
            "position": {
              "grow": 0,
              "shrink": 0,
              "basis": "36px"
            },
            "events": {
              "component": {
                "onActionPerformed": {
                  "type": "script",
                  "scope": "G",
                  "config": {
                    "script": "\tif self.view.params.disabled:\n\t\treturn\n\ttry:\n\t\tv = float(self.view.params.value)\n\texcept:\n\t\tv = 0.0\n\ttry:\n\t\tstep = float(self.view.params.step)\n\texcept:\n\t\tstep = 1.0\n\ttry:\n\t\tmx = float(self.view.params.max)\n\texcept:\n\t\tmx = 100.0\n\tnv = v + step\n\tif nv > mx:\n\t\tnv = mx\n\tif abs(nv - int(nv)) < 1e-9:\n\t\tnv = int(nv)\n\tself.view.params.value = nv\n"
                  }
                }
              }
            },
            "propConfig": {
              "props.style.classes": {
                "binding": {
                  "type": "expr",
                  "config": {
                    "expression": "'vc/number-field-inc' + if(coalesce({view.params.disabled}, false) || ({view.params.value} >= {view.params.max}), ' vc/number-field-btn-edge', '')"
                  }
                }
              }
            }
          }
        ]
      },
      {
        "type": "ia.container.flex",
        "version": 0,
        "meta": {
          "name": "EndGroup"
        },
        "position": {
          "grow": 0,
          "shrink": 0,
          "basis": "auto"
        },
        "props": {
          "direction": "row",
          "justify": "space-between",
          "alignItems": "center",
          "style": {
            "classes": "vc/number-field-group vc/number-field-group-rounded",
            "gap": "0px"
          }
        },
        "propConfig": {
          "meta.visible": {
            "binding": {
              "type": "expr",
              "config": {
                "expression": "lower(coalesce({view.params.layout}, 'split')) = 'end'"
              }
            }
          }
        },
        "children": [
          {
            "type": "ia.display.label",
            "version": 0,
            "meta": {
              "name": "ValueEnd"
            },
            "position": {
              "grow": 1,
              "shrink": 1,
              "basis": "120px"
            },
            "props": {
              "text": "5",
              "align": "center",
              "style": {
                "classes": "vc/number-field-input vc/number-field-input-end",
                "padding": "0px",
                "margin": "0px"
              }
            },
            "propConfig": {
              "props.text": {
                "binding": {
                  "type": "expr",
                  "config": {
                    "expression": "toStr({view.params.value}) + if(len(coalesce({view.params.unit}, '')) > 0, ' ' + {view.params.unit}, '')"
                  }
                }
              }
            }
          },
          {
            "type": "ia.container.flex",
            "version": 0,
            "meta": {
              "name": "EndBtns"
            },
            "position": {
              "grow": 0,
              "shrink": 0,
              "basis": "72px"
            },
            "props": {
              "direction": "row",
              "alignItems": "stretch",
              "style": {
                "classes": "vc/number-field-end-btns",
                "gap": "0px"
              }
            },
            "children": [
              {
                "type": "ia.input.button",
                "version": 0,
                "meta": {
                  "name": "DecEnd"
                },
                "props": {
                  "text": "−",
                  "primary": false,
                  "secondary": true,
                  "enabled": true,
                  "align": "center",
                  "justify": "center",
                  "style": {
                    "classes": "vc/number-field-dec",
                    "minWidth": "36px",
                    "minHeight": "0",
                    "height": "100%",
                    "padding": "0",
                    "margin": "0",
                    "borderStyle": "none",
                    "backgroundColor": "transparent",
                    "boxShadow": "none",
                    "cursor": "pointer",
                    "alignSelf": "stretch",
                    "borderRadius": "0"
                  }
                },
                "position": {
                  "grow": 0,
                  "shrink": 0,
                  "basis": "36px"
                },
                "events": {
                  "component": {
                    "onActionPerformed": {
                      "type": "script",
                      "scope": "G",
                      "config": {
                        "script": "\tif self.view.params.disabled:\n\t\treturn\n\ttry:\n\t\tv = float(self.view.params.value)\n\texcept:\n\t\tv = 0.0\n\ttry:\n\t\tstep = float(self.view.params.step)\n\texcept:\n\t\tstep = 1.0\n\ttry:\n\t\tmn = float(self.view.params.min)\n\texcept:\n\t\tmn = 0.0\n\tnv = v - step\n\tif nv < mn:\n\t\tnv = mn\n\t# keep int look when whole numbers\n\tif abs(nv - int(nv)) < 1e-9:\n\t\tnv = int(nv)\n\tself.view.params.value = nv\n"
                      }
                    }
                  }
                },
                "propConfig": {
                  "props.style.classes": {
                    "binding": {
                      "type": "expr",
                      "config": {
                        "expression": "'vc/number-field-dec' + if(coalesce({view.params.disabled}, false) || ({view.params.value} <= {view.params.min}), ' vc/number-field-btn-edge', '')"
                      }
                    }
                  }
                }
              },
              {
                "type": "ia.input.button",
                "version": 0,
                "meta": {
                  "name": "IncEnd"
                },
                "props": {
                  "text": "+",
                  "primary": false,
                  "secondary": true,
                  "enabled": true,
                  "align": "center",
                  "justify": "center",
                  "style": {
                    "classes": "vc/number-field-inc",
                    "minWidth": "36px",
                    "minHeight": "0",
                    "height": "100%",
                    "padding": "0",
                    "margin": "0",
                    "borderStyle": "none",
                    "backgroundColor": "transparent",
                    "boxShadow": "none",
                    "cursor": "pointer",
                    "alignSelf": "stretch",
                    "borderRadius": "0"
                  }
                },
                "position": {
                  "grow": 0,
                  "shrink": 0,
                  "basis": "36px"
                },
                "events": {
                  "component": {
                    "onActionPerformed": {
                      "type": "script",
                      "scope": "G",
                      "config": {
                        "script": "\tif self.view.params.disabled:\n\t\treturn\n\ttry:\n\t\tv = float(self.view.params.value)\n\texcept:\n\t\tv = 0.0\n\ttry:\n\t\tstep = float(self.view.params.step)\n\texcept:\n\t\tstep = 1.0\n\ttry:\n\t\tmx = float(self.view.params.max)\n\texcept:\n\t\tmx = 100.0\n\tnv = v + step\n\tif nv > mx:\n\t\tnv = mx\n\tif abs(nv - int(nv)) < 1e-9:\n\t\tnv = int(nv)\n\tself.view.params.value = nv\n"
                      }
                    }
                  }
                },
                "propConfig": {
                  "props.style.classes": {
                    "binding": {
                      "type": "expr",
                      "config": {
                        "expression": "'vc/number-field-inc' + if(coalesce({view.params.disabled}, false) || ({view.params.value} >= {view.params.max}), ' vc/number-field-btn-edge', '')"
                      }
                    }
                  }
                }
              }
            ]
          }
        ]
      },
      {
        "type": "ia.container.flex",
        "version": 0,
        "meta": {
          "name": "SpinnerGroup"
        },
        "position": {
          "grow": 0,
          "shrink": 0,
          "basis": "auto"
        },
        "props": {
          "direction": "row",
          "justify": "space-between",
          "alignItems": "center",
          "style": {
            "classes": "vc/number-field-group vc/number-field-group-rounded",
            "gap": "0px"
          }
        },
        "propConfig": {
          "meta.visible": {
            "binding": {
              "type": "expr",
              "config": {
                "expression": "lower(coalesce({view.params.layout}, 'split')) = 'spinner'"
              }
            }
          }
        },
        "children": [
          {
            "type": "ia.display.label",
            "version": 0,
            "meta": {
              "name": "ValueSpin"
            },
            "position": {
              "grow": 1,
              "shrink": 1,
              "basis": "120px"
            },
            "props": {
              "text": "5",
              "align": "center",
              "style": {
                "classes": "vc/number-field-input vc/number-field-input-end",
                "padding": "0px",
                "margin": "0px"
              }
            },
            "propConfig": {
              "props.text": {
                "binding": {
                  "type": "expr",
                  "config": {
                    "expression": "toStr({view.params.value}) + if(len(coalesce({view.params.unit}, '')) > 0, ' ' + {view.params.unit}, '')"
                  }
                }
              }
            }
          },
          {
            "type": "ia.container.flex",
            "version": 0,
            "meta": {
              "name": "SpinCol"
            },
            "position": {
              "grow": 0,
              "shrink": 0,
              "basis": "36px"
            },
            "props": {
              "direction": "column",
              "alignItems": "stretch",
              "style": {
                "classes": "vc/number-field-spin-col",
                "gap": "0px"
              }
            },
            "children": [
              {
                "type": "ia.input.button",
                "version": 0,
                "meta": {
                  "name": "SpinUp"
                },
                "props": {
                  "text": "▴",
                  "primary": false,
                  "secondary": true,
                  "enabled": true,
                  "align": "center",
                  "justify": "center",
                  "style": {
                    "classes": "vc/number-field-spin-up",
                    "minWidth": "28px",
                    "minHeight": "0",
                    "height": "auto",
                    "padding": "0",
                    "margin": "0",
                    "borderStyle": "none",
                    "backgroundColor": "transparent",
                    "boxShadow": "none",
                    "cursor": "pointer",
                    "alignSelf": "stretch",
                    "borderRadius": "0",
                    "width": "28px",
                    "flex": "1 1 50%"
                  }
                },
                "position": {
                  "grow": 0,
                  "shrink": 0,
                  "basis": "18px"
                },
                "events": {
                  "component": {
                    "onActionPerformed": {
                      "type": "script",
                      "scope": "G",
                      "config": {
                        "script": "\tif self.view.params.disabled:\n\t\treturn\n\ttry:\n\t\tv = float(self.view.params.value)\n\texcept:\n\t\tv = 0.0\n\ttry:\n\t\tstep = float(self.view.params.step)\n\texcept:\n\t\tstep = 1.0\n\ttry:\n\t\tmx = float(self.view.params.max)\n\texcept:\n\t\tmx = 100.0\n\tnv = v + step\n\tif nv > mx:\n\t\tnv = mx\n\tif abs(nv - int(nv)) < 1e-9:\n\t\tnv = int(nv)\n\tself.view.params.value = nv\n"
                      }
                    }
                  }
                },
                "propConfig": {
                  "props.style.classes": {
                    "binding": {
                      "type": "expr",
                      "config": {
                        "expression": "'vc/number-field-spin-up' + if(coalesce({view.params.disabled}, false) || ({view.params.value} >= {view.params.max}), ' vc/number-field-btn-edge', '')"
                      }
                    }
                  }
                }
              },
              {
                "type": "ia.input.button",
                "version": 0,
                "meta": {
                  "name": "SpinDown"
                },
                "props": {
                  "text": "▾",
                  "primary": false,
                  "secondary": true,
                  "enabled": true,
                  "align": "center",
                  "justify": "center",
                  "style": {
                    "classes": "vc/number-field-spin-down",
                    "minWidth": "28px",
                    "minHeight": "0",
                    "height": "auto",
                    "padding": "0",
                    "margin": "0",
                    "borderStyle": "none",
                    "backgroundColor": "transparent",
                    "boxShadow": "none",
                    "cursor": "pointer",
                    "alignSelf": "stretch",
                    "borderRadius": "0",
                    "width": "28px",
                    "flex": "1 1 50%"
                  }
                },
                "position": {
                  "grow": 0,
                  "shrink": 0,
                  "basis": "18px"
                },
                "events": {
                  "component": {
                    "onActionPerformed": {
                      "type": "script",
                      "scope": "G",
                      "config": {
                        "script": "\tif self.view.params.disabled:\n\t\treturn\n\ttry:\n\t\tv = float(self.view.params.value)\n\texcept:\n\t\tv = 0.0\n\ttry:\n\t\tstep = float(self.view.params.step)\n\texcept:\n\t\tstep = 1.0\n\ttry:\n\t\tmn = float(self.view.params.min)\n\texcept:\n\t\tmn = 0.0\n\tnv = v - step\n\tif nv < mn:\n\t\tnv = mn\n\t# keep int look when whole numbers\n\tif abs(nv - int(nv)) < 1e-9:\n\t\tnv = int(nv)\n\tself.view.params.value = nv\n"
                      }
                    }
                  }
                },
                "propConfig": {
                  "props.style.classes": {
                    "binding": {
                      "type": "expr",
                      "config": {
                        "expression": "'vc/number-field-spin-down' + if(coalesce({view.params.disabled}, false) || ({view.params.value} <= {view.params.min}), ' vc/number-field-btn-edge', '')"
                      }
                    }
                  }
                }
              }
            ]
          }
        ]
      }
    ]
  }
}


```

### com.inductiveautomation.perspective/views/Viewcraft/Components/UI/NumberField/NumberField/resource.json

```json

{
  "scope": "G",
  "version": 1,
  "restricted": false,
  "overridable": true,
  "files": [
    "view.json"
  ]
}

```

### com.inductiveautomation.perspective/style-classes/vc/number-field/style.json

```json

{
    "base": {
        "style": {
            "display": "flex",
            "flexDirection": "column",
            "gap": "6px"
        },
        "mediaQueries": []
    },
    "variants": []
}


```

### com.inductiveautomation.perspective/style-classes/vc/number-field/resource.json

```json

{
  "scope": "G",
  "version": 1,
  "restricted": false,
  "overridable": true,
  "files": [
    "style.json"
  ]
}

```

### com.inductiveautomation.perspective/style-classes/vc/number-field-disabled/style.json

```json

{
    "base": {
        "style": {
            "opacity": "0.5"
        },
        "mediaQueries": []
    },
    "variants": []
}


```

### com.inductiveautomation.perspective/style-classes/vc/number-field-disabled/resource.json

```json

{
  "scope": "G",
  "version": 1,
  "restricted": false,
  "overridable": true,
  "files": [
    "style.json"
  ]
}

```

### com.inductiveautomation.perspective/style-classes/vc/number-field-sm/style.json

```json

{
    "base": {
        "style": {},
        "mediaQueries": []
    },
    "variants": []
}


```

### com.inductiveautomation.perspective/style-classes/vc/number-field-sm/resource.json

```json

{
  "scope": "G",
  "version": 1,
  "restricted": false,
  "overridable": true,
  "files": [
    "style.json"
  ]
}

```

### com.inductiveautomation.perspective/style-classes/vc/number-field-lg/style.json

```json

{
    "base": {
        "style": {},
        "mediaQueries": []
    },
    "variants": []
}


```

### com.inductiveautomation.perspective/style-classes/vc/number-field-lg/resource.json

```json

{
  "scope": "G",
  "version": 1,
  "restricted": false,
  "overridable": true,
  "files": [
    "style.json"
  ]
}

```

### com.inductiveautomation.perspective/style-classes/vc/number-field-md/style.json

```json

{
    "base": {
        "style": {},
        "mediaQueries": []
    },
    "variants": []
}


```

### com.inductiveautomation.perspective/style-classes/vc/number-field-md/resource.json

```json

{
  "scope": "G",
  "version": 1,
  "restricted": false,
  "overridable": true,
  "files": [
    "style.json"
  ]
}

```

### com.inductiveautomation.perspective/style-classes/vc/number-field-label/style.json

```json

{
    "base": {
        "style": {
            "color": "#fafafa",
            "fontSize": "13px",
            "fontWeight": "500"
        },
        "mediaQueries": []
    },
    "variants": []
}


```

### com.inductiveautomation.perspective/style-classes/vc/number-field-label/resource.json

```json

{
  "scope": "G",
  "version": 1,
  "restricted": false,
  "overridable": true,
  "files": [
    "style.json"
  ]
}

```

### com.inductiveautomation.perspective/style-classes/vc/number-field-group/style.json

```json

{
    "base": {
        "style": {
            "backgroundColor": "#18181b",
            "borderColor": "#3f3f46",
            "borderStyle": "solid",
            "borderWidth": "1px"
        },
        "mediaQueries": []
    },
    "variants": []
}


```

### com.inductiveautomation.perspective/style-classes/vc/number-field-group/resource.json

```json

{
  "scope": "G",
  "version": 1,
  "restricted": false,
  "overridable": true,
  "files": [
    "style.json"
  ]
}

```

### com.inductiveautomation.perspective/style-classes/vc/number-field-group-pill/style.json

```json

{
    "base": {
        "style": {
            "borderRadius": "999px"
        },
        "mediaQueries": []
    },
    "variants": []
}


```

### com.inductiveautomation.perspective/style-classes/vc/number-field-group-pill/resource.json

```json

{
  "scope": "G",
  "version": 1,
  "restricted": false,
  "overridable": true,
  "files": [
    "style.json"
  ]
}

```

### com.inductiveautomation.perspective/style-classes/vc/number-field-dec/style.json

```json

{
    "base": {
        "style": {
            "color": "#fafafa",
            "minWidth": "36px",
            "cursor": "pointer"
        },
        "mediaQueries": []
    },
    "variants": []
}


```

### com.inductiveautomation.perspective/style-classes/vc/number-field-dec/resource.json

```json

{
  "scope": "G",
  "version": 1,
  "restricted": false,
  "overridable": true,
  "files": [
    "style.json"
  ]
}

```

### com.inductiveautomation.perspective/style-classes/vc/number-field-btn-edge/style.json

```json

{
    "base": {
        "style": {
            "opacity": "0.5"
        },
        "mediaQueries": []
    },
    "variants": []
}


```

### com.inductiveautomation.perspective/style-classes/vc/number-field-btn-edge/resource.json

```json

{
  "scope": "G",
  "version": 1,
  "restricted": false,
  "overridable": true,
  "files": [
    "style.json"
  ]
}

```

### com.inductiveautomation.perspective/style-classes/vc/number-field-input/style.json

```json

{
    "base": {
        "style": {
            "color": "#fafafa",
            "fontVariantNumeric": "tabular-nums",
            "textAlign": "center"
        },
        "mediaQueries": []
    },
    "variants": []
}


```

### com.inductiveautomation.perspective/style-classes/vc/number-field-input/resource.json

```json

{
  "scope": "G",
  "version": 1,
  "restricted": false,
  "overridable": true,
  "files": [
    "style.json"
  ]
}

```

### com.inductiveautomation.perspective/style-classes/vc/number-field-inc/style.json

```json

{
    "base": {
        "style": {
            "color": "#fafafa",
            "minWidth": "36px",
            "cursor": "pointer"
        },
        "mediaQueries": []
    },
    "variants": []
}


```

### com.inductiveautomation.perspective/style-classes/vc/number-field-inc/resource.json

```json

{
  "scope": "G",
  "version": 1,
  "restricted": false,
  "overridable": true,
  "files": [
    "style.json"
  ]
}

```

### com.inductiveautomation.perspective/style-classes/vc/number-field-group-rounded/style.json

```json

{
    "base": {
        "style": {
            "borderRadius": "12px"
        },
        "mediaQueries": []
    },
    "variants": []
}


```

### com.inductiveautomation.perspective/style-classes/vc/number-field-group-rounded/resource.json

```json

{
  "scope": "G",
  "version": 1,
  "restricted": false,
  "overridable": true,
  "files": [
    "style.json"
  ]
}

```

### com.inductiveautomation.perspective/style-classes/vc/number-field-input-end/style.json

```json

{
    "base": {
        "style": {
            "textAlign": "left"
        },
        "mediaQueries": []
    },
    "variants": []
}


```

### com.inductiveautomation.perspective/style-classes/vc/number-field-input-end/resource.json

```json

{
  "scope": "G",
  "version": 1,
  "restricted": false,
  "overridable": true,
  "files": [
    "style.json"
  ]
}

```

### com.inductiveautomation.perspective/style-classes/vc/number-field-end-btns/style.json

```json

{
    "base": {
        "style": {
            "display": "flex",
            "flexDirection": "row"
        },
        "mediaQueries": []
    },
    "variants": []
}


```

### com.inductiveautomation.perspective/style-classes/vc/number-field-end-btns/resource.json

```json

{
  "scope": "G",
  "version": 1,
  "restricted": false,
  "overridable": true,
  "files": [
    "style.json"
  ]
}

```

### com.inductiveautomation.perspective/style-classes/vc/number-field-spin-col/style.json

```json

{
    "base": {
        "style": {
            "display": "flex",
            "flexDirection": "column",
            "minWidth": "36px",
            "borderLeft": "1px solid #3f3f46"
        },
        "mediaQueries": []
    },
    "variants": []
}


```

### com.inductiveautomation.perspective/style-classes/vc/number-field-spin-col/resource.json

```json

{
  "scope": "G",
  "version": 1,
  "restricted": false,
  "overridable": true,
  "files": [
    "style.json"
  ]
}

```

### com.inductiveautomation.perspective/style-classes/vc/number-field-spin-up/style.json

```json

{
    "base": {
        "style": {
            "color": "#fafafa",
            "cursor": "pointer"
        },
        "mediaQueries": []
    },
    "variants": []
}


```

### com.inductiveautomation.perspective/style-classes/vc/number-field-spin-up/resource.json

```json

{
  "scope": "G",
  "version": 1,
  "restricted": false,
  "overridable": true,
  "files": [
    "style.json"
  ]
}

```

### com.inductiveautomation.perspective/style-classes/vc/number-field-spin-down/style.json

```json

{
    "base": {
        "style": {
            "color": "#fafafa",
            "cursor": "pointer"
        },
        "mediaQueries": []
    },
    "variants": []
}


```

### com.inductiveautomation.perspective/style-classes/vc/number-field-spin-down/resource.json

```json

{
  "scope": "G",
  "version": 1,
  "restricted": false,
  "overridable": true,
  "files": [
    "style.json"
  ]
}

```

### stylesheet-snippet.css

```css


[class~="psc-vc/number-field"], .psc-vc\/number-field {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 6px !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}
[class~="psc-vc/number-field-label"], .psc-vc\/number-field-label {
  color: var(--vc-foreground, #fafafa) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  line-height: 1.2 !important;
  text-align: left !important;
  padding: 0 !important;
  margin: 0 !important;
  user-select: none !important;
  cursor: default !important;
}
[class~="psc-vc/number-field-group"], .psc-vc\/number-field-group {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  box-sizing: border-box !important;
  min-width: 0 !important;
  background-color: var(--vc-panel, #18181b) !important;
  border: 1px solid var(--vc-border, #3f3f46) !important;
  color: var(--vc-foreground, #fafafa) !important;
  overflow: hidden !important;
  transition: border-color 160ms ease-out, background-color 160ms ease-out, opacity 160ms ease-out !important;
}
[class~="psc-vc/number-field-group-pill"], .psc-vc\/number-field-group-pill {
  border-radius: 999px !important;
}
[class~="psc-vc/number-field-group-rounded"], .psc-vc\/number-field-group-rounded {
  border-radius: 12px !important;
}
[class~="psc-vc/number-field-sm"] [class~="psc-vc/number-field-group"], .psc-vc\/number-field-sm .psc-vc\/number-field-group {
  height: 32px !important;
  min-height: 32px !important;
}
[class~="psc-vc/number-field-md"] [class~="psc-vc/number-field-group"], .psc-vc\/number-field-md .psc-vc\/number-field-group {
  height: 36px !important;
  min-height: 36px !important;
}
[class~="psc-vc/number-field-lg"] [class~="psc-vc/number-field-group"], .psc-vc\/number-field-lg .psc-vc\/number-field-group {
  height: 44px !important;
  min-height: 44px !important;
}
[class~="psc-vc/number-field-dec"], .psc-vc\/number-field-dec, [class~="psc-vc/number-field-inc"], .psc-vc\/number-field-inc, [class~="psc-vc/number-field-dec"] button, .psc-vc\/number-field-dec button, [class~="psc-vc/number-field-inc"] button, .psc-vc\/number-field-inc button {
  /* ReUI in-pill: stretch to group height — NOT chunky 36×36 squares */
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  align-self: stretch !important;
  flex: 0 0 auto !important;
  width: auto !important;
  min-width: 36px !important;
  max-width: 44px !important;
  height: 100% !important;
  min-height: 0 !important;
  max-height: none !important;
  padding: 0 10px !important;
  margin: 0 !important;
  border: none !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--vc-foreground, #fafafa) !important;
  font-size: 15px !important;
  font-weight: 400 !important;
  line-height: 1 !important;
  text-align: center !important;
  cursor: pointer !important;
  user-select: none !important;
  box-sizing: border-box !important;
  transition: background-color 140ms ease-out, opacity 140ms ease-out !important;
}
[class~="psc-vc/number-field-dec"], .psc-vc\/number-field-dec, [class~="psc-vc/number-field-dec"] button, .psc-vc\/number-field-dec button {
  border-right: 1px solid #3f3f46 !important;
}
[class~="psc-vc/number-field-inc"], .psc-vc\/number-field-inc, [class~="psc-vc/number-field-inc"] button, .psc-vc\/number-field-inc button {
  border-left: 1px solid #3f3f46 !important;
}
[class~="psc-vc/number-field-end-btns"] [class~="psc-vc/number-field-dec"], .psc-vc\/number-field-end-btns .psc-vc\/number-field-dec {
  border-right: 1px solid #3f3f46 !important;
  border-left: 1px solid #3f3f46 !important;
}
[class~="psc-vc/number-field-end-btns"] [class~="psc-vc/number-field-inc"], .psc-vc\/number-field-end-btns .psc-vc\/number-field-inc {
  border-left: none !important;
}
[class~="psc-vc/number-field-lg"] [class~="psc-vc/number-field-dec"], .psc-vc\/number-field-lg .psc-vc\/number-field-dec, [class~="psc-vc/number-field-lg"] [class~="psc-vc/number-field-inc"], .psc-vc\/number-field-lg .psc-vc\/number-field-inc, [class~="psc-vc/number-field-lg"] [class~="psc-vc/number-field-dec"] button, .psc-vc\/number-field-lg .psc-vc\/number-field-dec button, [class~="psc-vc/number-field-lg"] [class~="psc-vc/number-field-inc"] button, .psc-vc\/number-field-lg .psc-vc\/number-field-inc button {
  min-width: 40px !important;
  font-size: 16px !important;
}
[class~="psc-vc/number-field-sm"] [class~="psc-vc/number-field-dec"], .psc-vc\/number-field-sm .psc-vc\/number-field-dec, [class~="psc-vc/number-field-sm"] [class~="psc-vc/number-field-inc"], .psc-vc\/number-field-sm .psc-vc\/number-field-inc, [class~="psc-vc/number-field-sm"] [class~="psc-vc/number-field-dec"] button, .psc-vc\/number-field-sm .psc-vc\/number-field-dec button, [class~="psc-vc/number-field-sm"] [class~="psc-vc/number-field-inc"] button, .psc-vc\/number-field-sm .psc-vc\/number-field-inc button {
  min-width: 32px !important;
  font-size: 14px !important;
  padding: 0 8px !important;
}
[class~="psc-vc/number-field-dec"]:hover, .psc-vc\/number-field-dec:hover, [class~="psc-vc/number-field-inc"]:hover, .psc-vc\/number-field-inc:hover {
  background-color: var(--vc-secondary, #27272a) !important;
}
[class~="psc-vc/number-field-btn-edge"], .psc-vc\/number-field-btn-edge {
  opacity: 0.5 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}
[class~="psc-vc/number-field-input"], .psc-vc\/number-field-input {
  flex: 1 1 auto !important;
  min-width: 48px !important;
  height: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: var(--vc-foreground, #fafafa) !important;
  font-variant-numeric: tabular-nums !important;
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif !important;
  font-weight: 500 !important;
  text-align: center !important;
  padding: 0 8px !important;
  margin: 0 !important;
  border: none !important;
  background: transparent !important;
  box-sizing: border-box !important;
}
[class~="psc-vc/number-field-sm"] [class~="psc-vc/number-field-input"], .psc-vc\/number-field-sm .psc-vc\/number-field-input {
  font-size: 14px !important;
}
[class~="psc-vc/number-field-md"] [class~="psc-vc/number-field-input"], .psc-vc\/number-field-md .psc-vc\/number-field-input {
  font-size: 16px !important;
}
[class~="psc-vc/number-field-lg"] [class~="psc-vc/number-field-input"], .psc-vc\/number-field-lg .psc-vc\/number-field-input {
  font-size: 18px !important;
}
[class~="psc-vc/number-field-input-end"], .psc-vc\/number-field-input-end {
  justify-content: flex-start !important;
  text-align: left !important;
  padding-left: 14px !important;
}
[class~="psc-vc/number-field-end-btns"], .psc-vc\/number-field-end-btns {
  display: flex !important;
  flex-direction: row !important;
  align-items: stretch !important;
  height: 100% !important;
  flex: 0 0 auto !important;
}
[class~="psc-vc/number-field-spin-col"], .psc-vc\/number-field-spin-col {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  justify-content: stretch !important;
  flex: 0 0 auto !important;
  width: 28px !important;
  min-width: 28px !important;
  height: 100% !important;
  min-height: 0 !important;
  border-left: 1px solid #3f3f46 !important;
  box-sizing: border-box !important;
}
[class~="psc-vc/number-field-spin-up"], .psc-vc\/number-field-spin-up, [class~="psc-vc/number-field-spin-down"], .psc-vc\/number-field-spin-down, [class~="psc-vc/number-field-spin-up"] button, .psc-vc\/number-field-spin-up button, [class~="psc-vc/number-field-spin-down"] button, .psc-vc\/number-field-spin-down button {
  flex: 1 1 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  align-self: stretch !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  height: auto !important;
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--vc-foreground, #fafafa) !important;
  font-size: 10px !important;
  font-weight: 400 !important;
  line-height: 1 !important;
  text-align: center !important;
  cursor: pointer !important;
  user-select: none !important;
  box-sizing: border-box !important;
  transition: background-color 140ms ease-out, opacity 140ms ease-out !important;
}
[class~="psc-vc/number-field-spin-up"], .psc-vc\/number-field-spin-up {
  border-bottom: 1px solid #3f3f46 !important;
}
[class~="psc-vc/number-field-spin-up"]:hover, .psc-vc\/number-field-spin-up:hover, [class~="psc-vc/number-field-spin-down"]:hover, .psc-vc\/number-field-spin-down:hover {
  background-color: var(--vc-secondary, #27272a) !important;
}
[class~="psc-vc/number-field-spin-up"], .psc-vc\/number-field-spin-up {
  border-bottom: 1px solid #3f3f46 !important;
}
[class~="psc-vc/number-field-disabled"], .psc-vc\/number-field-disabled {
  opacity: 0.5 !important;
  pointer-events: none !important;
}
@media (prefers-reduced-motion: reduce) {
  [class~="psc-vc/number-field-group"], .psc-vc\/number-field-group, [class~="psc-vc/number-field-dec"], .psc-vc\/number-field-dec, [class~="psc-vc/number-field-inc"], .psc-vc\/number-field-inc, [class~="psc-vc/number-field-spin-up"], .psc-vc\/number-field-spin-up, [class~="psc-vc/number-field-spin-down"], .psc-vc\/number-field-spin-down {
    transition: none !important;
  }
}
[class~="psc-vc/number-field-group"], .psc-vc\/number-field-group {
  background-color: var(--vc-panel, #18181b) !important;
  border-color: var(--vc-border, #3f3f46) !important;
}
[class~="psc-vc/number-field-input"], .psc-vc\/number-field-input {
  font-variant-numeric: tabular-nums !important;
  color: var(--vc-foreground, #fafafa) !important;
}
[class~="psc-vc/number-field-dec"], .psc-vc\/number-field-dec, [class~="psc-vc/number-field-inc"], .psc-vc\/number-field-inc, [class~="psc-vc/number-field-dec"] button, .psc-vc\/number-field-dec button, [class~="psc-vc/number-field-inc"] button, .psc-vc\/number-field-inc button, [class~="psc-vc/number-field-spin-up"], .psc-vc\/number-field-spin-up, [class~="psc-vc/number-field-spin-down"], .psc-vc\/number-field-spin-down, [class~="psc-vc/number-field-spin-up"] button, .psc-vc\/number-field-spin-up button, [class~="psc-vc/number-field-spin-down"] button, .psc-vc\/number-field-spin-down button {
  min-height: 0 !important;
  height: 100% !important;
  align-self: stretch !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
[class~="psc-vc/number-field-spin-up"], .psc-vc\/number-field-spin-up, [class~="psc-vc/number-field-spin-down"], .psc-vc\/number-field-spin-down, [class~="psc-vc/number-field-spin-up"] button, .psc-vc\/number-field-spin-up button, [class~="psc-vc/number-field-spin-down"] button, .psc-vc\/number-field-spin-down button {
  height: auto !important;
  flex: 1 1 50% !important;
}
.psc-vc\/number-field > .component-meta-hidden { display:none!important; }

```