# Number Property

The Number Property allows you to configure a number property such as font size, padding, width etc.&#x20;

You can input a Name, decide whether it should be Responsive or not, set a Default value, and a Minimum, a Maximum or Step.&#x20;

You can also toggle "With Unit" on or off if you want to specify a unit.

* Open the Components Properties modal by clicking the "+" icon.
* Select the Number Property you wish to configure.

<figure><img src="/files/ITjtgD17YAyBFgeERzdd" alt=""><figcaption></figcaption></figure>

## Connect&#x20;

We need to open the Component in the Navigator in order to see the individual blocks.

* Select the Component to which you want to connect the Number Property.
* In the Tool Bar or Block Inspector, select "Modify" to view individual component blocks.

{% hint style="info" %}
You need to select "Modify" in the Toolbar or Block Inspector for the blocks that make up a particular component to be visible.
{% endhint %}

The Number Property needs to be connected for it to be applied to the canvas.&#x20;

<figure><img src="/files/TIT1EnhvzEj2FIUF9Vy2" alt=""><figcaption></figcaption></figure>

* In the navigator, select the required component block.

{% hint style="info" %}
The block selected must accept a Number property.
{% endhint %}

For example, we want to add a text size property.

* With the appropriate block selected, click the Component icon under Size in the Block Inspector.

<figure><img src="/files/Sq2AZXnCoBzBjCEcFIy6" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
The customisable variables that can be used for the Number Property will have a Component icon attached.
{% endhint %}

* In the Block Inspector, click the Number property (in this example Text Size) to open the Component Properties modal.
* Select the Numbers property to be customised, in this example "Text Size".

<figure><img src="/files/xfhfu5O5SPJbj4zN9IEP" alt=""><figcaption></figcaption></figure>

When you are in "Customise",  the Number property will be visible in the Block Inspector.&#x20;

<figure><img src="/files/pUYJVInUbXekGstqkzlR" alt=""><figcaption></figcaption></figure>

You can now adjust the Number property from the Block Inspector as shown in the example below.

This will adjust the Number property on the Canvas.

<figure><img src="/files/FAKzwQrMx6A6iphjFGXQ" alt=""><figcaption></figcaption></figure>

## Name

In the right hand panel of the Component Properties modal, input label Name.

<figure><img src="/files/FilCuluWbtZZ8mJKpcLV" alt=""><figcaption></figcaption></figure>

The required Name Label will now be visible in the Block Inspector.

<figure><img src="/files/gbtobi3jEvTgdy0mQkwa" alt=""><figcaption></figcaption></figure>

## Default

Allows you to set a suitable default number to your component.

* Open the Components Properties.
* Select required Number property.
* Open Settings tab.
* Input suitable default number in Default field.

## With Unit Toggle

Some Number properties require a unit (such as Text Size) and others do not require a unit (such as Slides).

* Toggle On/Off With Unit as required.&#x20;

![](/files/k4cPd7RTQMqRLDAfEr2i)

For example, "With Unit" is toggled on for Text Size .

* Input a suitable default Number as required.

<figure><img src="/files/VeM4N8eQz73qugXLKtfa" alt=""><figcaption></figcaption></figure>

The Default Number property (in this case Text Size) is now applied to the Canvas.

<figure><img src="/files/KsSDY8aQvtNGzD2U70mO" alt=""><figcaption></figcaption></figure>

## Minimum

The Minimum property allows you to set a minimum value to your Number property.

* In the Components Properties modal, select the required Number property.
* Set Minimum value as required.

![](/files/p0DVxNjFfSEbhYwaUjZY)

The Number component value cannot go below the set Minimum value.

<figure><img src="/files/n2Mzp1g47mNBHkvlDu9T" alt=""><figcaption></figcaption></figure>

## Maximum

The Maximum property allows you to set a Maximum value to your Number property.

* In the Components Properties modal, select the required Number property.
* Set Maximum value as required.

![](/files/Iy46RCI5ceKm2Bvv6mzr)

The Number property value cannot go above the set maximum value.

<figure><img src="/files/9dYVXLMTnmxbDFfwyM8D" alt=""><figcaption></figcaption></figure>

## Step

You can set a Step parameter to determine the size of the intervals.

* With the required Number property selected, set Step size value as required.

![](/files/2yACwplJUO6cddd5Zulo)

## Responsive

Toggle on or off Responsive as required depending on whether or not you want the number to be responsive or not.

* Select required number property.
* Toggle on Responsive as required.
* Select required screen size.

![](/files/Uu9WTEVTecZ0eboLTNuH)


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.cwicly.com/cwicly/components/properties-add/number-property.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
