---
title: "Number Field"
slug: "number-field"
updated: 2026-04-17T07:30:51Z
published: 2026-04-17T07:30:51Z
canonical: "learn.servitly.com/number-field"
---

> ## Documentation Index
> Fetch the complete documentation index at: https://learn.servitly.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Number Field

This field allows providing a numeric value as page input.

![Number Field](https://components-manager.servitly.com/components/NumberField_1/IMAGES/_screenshot?owner=AG_Servitly)

### Template Syntax

Below you can find some examples of how to use the component within a template.

Number field from 0 to 100, with increment step 10 and initial value 90.

```xml

            <number-field name="quality"
            label="Quality"
            min="0"
            max="100"
            step="10"
            value="90"
            [mandatory]="true">
            </number-field>
        
```

## Component Reference

Here is a comprehensive list of all the elements and properties that can be used to configure the component.

#### Number Field `&lt;number-field&gt;`

| *Label* | The field label. **Name**: label **Type**: STRING \| Optional `label="abc"` |
| --- | --- |
| *Label Position* | The position of the label respect the number input field. **Name**: labelPosition **Type**: ENUM \| Optional **Values**: *none*, *left*, *top* **Default Value**: *left* `labelPosition="none"` |
| *Mandatory* | The flag indicating whether the field value is mandatory. **Name**: mandatory **Type**: BOOLEAN \| Optional `[mandatory]="true"` |
| *Max* | The field maximum valid value. **Name**: max **Type**: INTEGER \| Optional `max="123"` |
| *Min* | The field minimum valid value. **Name**: min **Type**: INTEGER \| Optional `min="123"` |
| *Name* | The name used to reference the input field. **Name**: name **Type**: STRING \| Optional `name="abc"` |
| *Property* | The name of the thing property used to save the input value (optional). **Name**: property **Type**: PROPERTY \| Optional `property="propName"` |
| *Step* | The minimum value increment step. **Name**: step **Type**: FLOAT \| Optional `step="1.234"` |
| *Value* | The initial value. **Name**: value **Type**: FLOAT \| Optional `value="1.234"` |
| **Rendering** |
| *Availability* | Configure availability based on active features on Digital Plan on Add-ons **Name**: hasFeature **Type**: FEATURE (multiple) \| Optional `[hasFeature]="['feature_a', 'feature_b']"` |
| *CSS Class* | The name(s) of the CSS class used to customize the widget layout. **Name**: class **Type**: STRING \| Optional `class="my-custom-class"` |
| *Visibility Condition* | The expression that allows you to reduce the visibility of the element. **Name**: *ngIf **Type**: STRING \| Optional `*ngIf="getUser().organizationId != null"` |

## Full Syntax Example

```xml

<number-field    
    name="abc"
    label="abc"
    labelPosition="none"
    min="123"
    max="123"
    step="1.234"
    value="1.234"
    [mandatory]="true"
    property="propName"
    class="my-custom-class"
    *ngIf="getUser().organizationId != null"
    hasFeature="['feature_a', 'feature_b']"></number-field>
```