@ea-lab/reactive-json-docs/public/rjbuild/docs/core/element/form/NumberField.yaml

Complete documentation for Reactive-JSON - Components, examples and LLM-parsable guides

renderView:
  - type: Markdown
    content: |
      # NumberField

      The `NumberField` component renders a numeric input field using React Bootstrap. It provides a number-specific input with browser validation and automatic data binding to the global data context.

      ## Properties

  - type: DefinitionList
    content:
      - term:
          code: dataLocation
          after: "(string, optional)"
        details: "Path to bind the field value in the data context."
      - term:
          code: defaultFieldValue
          after: "(number, optional)"
        details: "Default value when no data is present."
      - term:
          code: label
          after: "(string, optional)"
        details: "Field label text (supports template evaluation)."
      - term:
          code: placeholder
          after: "(string, optional)"
        details: "Placeholder text (supports template evaluation)."
      - term:
          code: attributes
          after: "(object, optional)"
        details: "Attributes applied to the Form.Group container."
      - term:
          code: inputAttributes
          after: "(object, optional)"
        details: "Attributes applied directly to the input element."
      - term:
          code: actions
          after: "(array, optional)"
        details: "Actions to execute based on field state."

  - type: Markdown
    content: |
      ## Data Management

      The component stores the input value as a string in the data context. The browser's number input provides built-in validation, but the value should be converted to a number when needed for calculations.

      ## HTML5 Number Input Features

      The component leverages HTML5 number input features:
      - Automatic numeric keyboard on mobile devices
      - Built-in validation for numeric values
      - Support for min/max constraints
      - Support for step increments
      - Spinner controls for value adjustment

  - type: RjBuildDescriber
    title: "Basic NumberField Usage"
    description: "Simple numeric input with validation"
    toDescribe:
      renderView:
        - type: NumberField
          dataLocation: ~.age
          label: "Age:"
          placeholder: "Enter your age"
        - type: div
          content:
            - "Current value: "
            - type: strong
              content: ~.age
      data:
        age: ""

  - type: RjBuildDescriber
    title: "Number Input with Constraints"
    description: "NumberField with min, max, and step validation"
    toDescribe:
      renderView:
        - type: NumberField
          dataLocation: ~.quantity
          label: "Quantity (1-100):"
          placeholder: "Enter quantity"
          inputAttributes:
            min: 1
            max: 100
            step: 1
        - type: NumberField
          dataLocation: ~.price
          label: "Price ($0.00-$999.99):"
          placeholder: "0.00"
          inputAttributes:
            min: 0
            max: 999.99
            step: 0.01
        - type: div
          attributes:
            style:
              marginTop: "20px"
              padding: "10px"
              backgroundColor: "#f8f9fa"
              borderRadius: "5px"
          content:
            - type: strong
              content: "Current Values:"
            - type: div
              content:
                - "Quantity: "
                - ~.quantity
            - type: div
              content:
                - "Price: $"
                - ~.price
      data:
        quantity: ""
        price: ""

  - type: Markdown
    content: |
      ## Limitations

      - Values are stored as strings
      - No built-in number formatting (thousands separators, currency)
      - No built-in error message display for validation failures
      - Browser validation behavior varies across different browsers
      - No support for complex number patterns or custom validation rules
      - No automatic locale-specific number formatting

templates: {}
data: {}