> For the complete documentation index, see [llms.txt](https://docs.cwicly.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.cwicly.com/cwicly/components/properties-add/number-property.md).

# 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)
