The Number field is a Collection field used when the input is meant to be a numeric value.
The Number field is one of those magic fields that does way more than most people think. Yes, it's true: you can only put Numbers inside (integers, decimals...). But the magic isn't so much the field itself; it's how we can use these Numbers to accomplish a ton of work inside our projects.
What do we normally use Numbers for in a collection? Things like ratings, or rankings, or prices, or populations, quantities, season Numbers, episode Numbers, magic Numbers. We get the point.
Of course, we can bind any type of text inside a project to this field. But another really powerful way to use Numbers is in sorting.
If we've rated items on a scale from 1 to 5 and we want to show the highest-rated items first? We can sort that way.
But what about this? Filters? What if we only want to show items in a Collection List that have a rating of 4 or higher? If we're using integers, we can simply add a filter where we specify that the Number — our rating — is greater than 3. That means anything that's 4 or 5 on that rating will show up on our list. What about going back in and changing it to less than 4? Now only the items rated 3 and below are showing up. Or, maybe we only want to show the best-rated items. We could specify that we want the Number to equal 5. Now only items rated 5 show up.
So. Numbers can do a lot. Similar to a Plain Text field, we can enter Numbers and decimals. But we can also use these Numbers to sort. And create filters and sorting rules that let us organize and display selected content in our projects.
The Number field is a Collection field used when the input is meant to be a numeric value. You can display numbers and decimals in your Collection lists or on Collection pages. You can also use the number field to filter or sort a collection list or set conditional visibility on elements in Collection lists and pages.
A number field can be added to a new or existing Collection. In Collection settings, click on New Field and then choose the Number field.
Before saving the number field, you can specify a label for this field. You can also add a Help text that will appear below the label to guide Collaborators. Other options you can set for a number field are:
And as with any field, you can specify if the field is required or not.
The number field will only accept numeric values. And if any restrictions were set when creating the field, you and Collaborators won’t be able to enter numbers that don’t meet those criteria. Just select a Collection item in the CMS and add a number into the field.
The number field can be connected to any text element to dynamically populate Collection lists and pages with numeric data from Collection items.
You can also access the Inner Text Settings by selecting the text element and either clicking on the settings icon next to the element label on the canvas or by going to the Settings panel (D).
You can remove the connection by unchecking the “Get text from” checkbox under Inner Text Settings.
You can use numbers to sort collection items in a number of ways. One example would be to sort rated items by showing highest rated items first.
If you only want to show items in a Collection list that have for example a rating of 4 or higher, you can use filters. To filter your collection list using a number field:
The filter rules that you can use with the number field and values are:
You can use conditional visibility with text connected to a number field or with other elements. Here is an example:
Let’s say you want to display ratings using stars. Conditional visibility allows you to show a different image for each rating value. So, you'll add 5 images, each showing the different rating values. In this examples, we're using stars. For example, to show the image of 5 stars for a rating of 5:
Repeat for each Rating value like so:
Something went wrong while submitting the form. Please contact support@webflow.com
Got a lesson suggestion? Let us know
Need more help? Want to report a bug? Contact support
Have feedback on the feature? Submit feature feedback