Add numbers as a component property

It would be cool to set a numerical property type for elements within components.

List based components (i.e. tabs, table of contents, etc.) are the primary use case I can think of, but there are probably others. Having the ability to increase/decrease the number of items within a component instance (using a number counter type input or something), would be a great alternative to building the components with random/maximum number of nested elements, and then hiding layers—or nesting a series of numerical variants, or some other alternative.

2 Likes

Agreed. I think a similar idea is here

2 Likes

I recently built out a few input components with a few varieties of labels (i.e. internal label, top label, horizontal label), when adding them to the designs I realised that I could not change the with for the labels in the instances of the component, which caused my forms to be completely misaligned depending on the length of the label text.

I think it would be really helpful if we had a number property that we could add to a component set that we could then assign to something like the width of height of a component instance.

This way I could set the label width for each instance in my component to, for example, 300 and then duplicate that instance and update the other variables like label text, input field value, etc. while having my input fields aligned.

I think this would be a super helpful feature to localize control of certain size characteristics within a component variable.

1 Like

Thanks for the feedback!

We’ll pass this onto our team for consideration.

Thanks dvaliao, I really appreciate it. Let me know if you have any more questions or if maybe the team wants to collaborate on exploring this idea and defining it some more, would be really keen to collaborate.

1 Like

I’d love this feature as well. In my own use case, I’d love to have a property for corner radius which would let me select between several rounded corner options driven by global variables. I’m not seeing a way to create a property for my component that lets me do this. Instead I’d have to create additional variants for every possible combination.