# Documentation on advanced component properties? **URL:** \ **Category:** How do I?\ **Created:** [June 17, 2024, 1:23pm UTC](https://community.weweb.io/t/documentation-on-advanced-component-properties/9158 "2024-06-17T13:23:35Z")\ **Posts on this page:** 11\ **Page:** 1
**Author:** ![kanepaamauloa](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/kanepaamauloa/32/8944_2.png) [@kanepaamauloa](https://community.weweb.io/u/kanepaamauloa)\ **Post date:** [June 17, 2024, 1:23pm UTC](https://community.weweb.io/t/documentation-on-advanced-component-properties/9158/1 "2024-06-17T13:23:35Z")
![CleanShot 2024-06-17 at 09.20.24@2x](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/2X/9/9d821b08fe5c6b6bdabb3dbe2478f2757b343c3b.png) I’m particularly interested in learning how to use the States and Classes options for a component property. Having documentation on all the properties would be a great resource to have for the entire community, especially those who are just coming into WeWeb, like me 🙂 ---
**Author:** ![Broberto](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/broberto/32/5918_2.png) [@Broberto](https://community.weweb.io/u/Broberto)\ **Post date:** [June 17, 2024, 1:26pm UTC](https://community.weweb.io/t/documentation-on-advanced-component-properties/9158/2 "2024-06-17T13:26:57Z")
That just means that when you use a state or a class, you can bind a value and it will change upon the class/state. Otherways with only Bindable, you can only bind the data. Same goes for responsive, ---
**Author:** ![kanepaamauloa](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/kanepaamauloa/32/8944_2.png) [@kanepaamauloa](https://community.weweb.io/u/kanepaamauloa)\ **Post date:** [October 2, 2024, 6:29pm UTC](https://community.weweb.io/t/documentation-on-advanced-component-properties/9158/3 "2024-10-02T18:29:52Z")
Hi @Broberto, I’m coming back to this as I am trying to set a class dynamically via a component property. It’s still unclear how to use the advanced properties for classes. I was thinking that by turning it on, then I’d be able to select a Class that has already been defined for the property of a Component instance. Here’s how I set it up for the Component property. ![CleanShot 2024-10-02 at 14.25.52@2x](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/2X/7/7dddf7c5e3b981b449a71ae89da0a1dff1f42cb4.png) Here’s what it looks like on the Component instance. ![CleanShot 2024-10-02 at 14.27.31@2x](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/2X/d/dbafb1ed2ccd4d28939c499e1148c8bdcf3e12da.png) As you can see, it’s just plain text. When I click the bind button, none of the defined CSS classes can be found. Are you open to showing me an example? ---
**Author:** ![Broberto](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/broberto/32/5918_2.png) [@Broberto](https://community.weweb.io/u/Broberto)\ **Post date:** [October 2, 2024, 6:45pm UTC](https://community.weweb.io/t/documentation-on-advanced-component-properties/9158/4 "2024-10-02T18:45:47Z")
Hey, it means that when you `Select or create a class` it lets you apply a value to your `Class` property of your component. ---
**Author:** ![kanepaamauloa](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/kanepaamauloa/32/8944_2.png) [@kanepaamauloa](https://community.weweb.io/u/kanepaamauloa)\ **Post date:** [October 2, 2024, 6:58pm UTC](https://community.weweb.io/t/documentation-on-advanced-component-properties/9158/5 "2024-10-02T18:58:14Z")
Thanks for getting back to me. That’s what I thought, but I can’t seem to make it work. I’m not able to use the Property value as the Class. On top of that, I can only set the Property value with plain text. It’s not a “bind” value, as there is not list of Classes to select from. ---
**Author:** ![Broberto](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/broberto/32/5918_2.png) [@Broberto](https://community.weweb.io/u/Broberto)\ **Post date:** [October 2, 2024, 7:28pm UTC](https://community.weweb.io/t/documentation-on-advanced-component-properties/9158/6 "2024-10-02T19:28:30Z")
I think you’re looking in a wrong spot? Just tested it and it works with WeWeb’s class system ![Screenshot 2024-10-02 at 21.27.32](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/2X/b/b2ce263cee0b86414d3fd07a2e6f9f71e5d81b9f.png) ![Screenshot 2024-10-02 at 21.28.04](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/2X/2/2d3bced56c3050e2dfc36e4052842bc882e6207a.png) ---
**Author:** ![kanepaamauloa](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/kanepaamauloa/32/8944_2.png) [@kanepaamauloa](https://community.weweb.io/u/kanepaamauloa)\ **Post date:** [October 3, 2024, 6:42pm UTC](https://community.weweb.io/t/documentation-on-advanced-component-properties/9158/7 "2024-10-03T18:42:01Z")
Thanks again, @Broberto! I noticed you’re using a **Select** type. Do I have to provide the names of the classes as options manually? Also, how do you apply the class in the component? ---
**Author:** ![DanielL](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/daniell/32/13398_2.png) [@DanielL](https://community.weweb.io/u/DanielL)\ **Post date:** [October 4, 2024, 10:06am UTC](https://community.weweb.io/t/documentation-on-advanced-component-properties/9158/8 "2024-10-04T10:06:16Z")
Hi @kanepaamauloa and @Broberto. We will be releasing new documentation on components soon, this will be covered, as well as dropzones and use cases for the thisInstance object. If you have any more suggestions for the upcoming docs, feel free to share! ---
**Author:** ![kanepaamauloa](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/kanepaamauloa/32/8944_2.png) [@kanepaamauloa](https://community.weweb.io/u/kanepaamauloa)\ **Post date:** [October 8, 2024, 2:45am UTC](https://community.weweb.io/t/documentation-on-advanced-component-properties/9158/9 "2024-10-08T02:45:19Z")
Thanks! Any idea when it will be released? In general, I think it’s helpful to show an example of how to use each feature. Especially because the IDE has so many different interfaces, and sometimes many interfaces need to be used to complete one use case, like the one I’m trying to do here, explaining the process procedurally (e.g., step-by-step) would go a long way. I still haven’t figured out how to use the **Classes** property, even with @Broberto’s help, so I’ve left it for now until I have more time to try to work things out. ---
**Author:** ![kanepaamauloa](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/kanepaamauloa/32/8944_2.png) [@kanepaamauloa](https://community.weweb.io/u/kanepaamauloa)\ **Post date:** [October 13, 2024, 4:13pm UTC](https://community.weweb.io/t/documentation-on-advanced-component-properties/9158/10 "2024-10-13T16:13:31Z")
I haven’t heard from @DanielL Would you be open to recording a video of how you use this property? ---
**Author:** ![DanielL](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/daniell/32/13398_2.png) [@DanielL](https://community.weweb.io/u/DanielL)\ **Post date:** [October 31, 2024, 1:17am UTC](https://community.weweb.io/t/documentation-on-advanced-component-properties/9158/11 "2024-10-31T01:17:50Z")
Hello @kanepaamauloa The Classes property allows us to save component properties to classes. The main point is to allow us to quickly create classes from component properties and you can save anything to them, not just CSS properties. For instance, imagine you have a button component with two style properties: color and width with Classes enabled: ![btn1](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/2X/f/ff7a2b9975dae3adc55868abeacea371dbcf621e.png) We can define where we want the property to be used inside the component in Edit mode just like we would with any other property: ![btn2](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/2X/c/cadfcf741cdb38d8c9d100eb84e9bf13e18cae1c.png)t If I exit Edit mode and try to create a class at instance level, I will have the option to save the properties to the class: ![Zrzut ekranu 2024-10-31 014226](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/2X/4/42071c48a3a3454c814d5ad376a3aa842eb3f315.png) I can now add a new Button instance and select the class: ![btn3](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/2X/0/002a81361723a6dcbd17a9c4534f961bc5817288.png) The cool thing about this is that it allows you to save anything to classes, not just CSS properties. For instance, I will wrap my button component inside a flexbox component and add an image element. Then I will add an image property called ‘‘bottom image’’ to the flexbox component with Classes enabled: ![Zrzut ekranu 2024-10-31 014939](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/2X/c/c746bedc3d4063f687575ae09b5c02c760456ea1.png) I will then define where in the flexbox I want the image property to be used, in this case, as a URL in the image element: ![Zrzut ekranu 2024-10-31 015331](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/2X/c/c031e64af0b7f8d718f1ec99892bf809445d7320.png) Now, if I exit Edit mode, I can pass an image url to the Flexbox component: ![Zrzut ekranu 2024-10-31 015519](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/2X/7/7e7b6a6b78c31bfb8cf046f528903f2abe73df25.png) And now I can create a new class that contains the image: ![Zrzut ekranu 2024-10-31 015650](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/2X/9/9328cdb08ba78abad22ea4d8acc2c827bda4ed0b.png) If I add another instance of the flexbox component, it will not have an image by default. I will have to upload it: ![Zrzut ekranu 2024-10-31 015837](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/2X/e/ee1eb81bee3123cfb696d41c17ecb78be36efe55.png) Instead of having to upload the image again or manually pass the properties, I can simply select the class I created with the image: ![Zrzut ekranu 2024-10-31 020027](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/2X/a/aa7b7fa20274b59546e32b9080c2683ac3b1d126.png) This is a super simple example just to illustrate how it works - passing an image like that is probably not the best use case, but the feature is just a way to allow you to create complex classes by saving anything you want (not just styles/CSS!) to them and reusing them from anywhere. ![Zrzut ekranu 2024-10-31 020721](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/2X/8/8022283da35db345dc55f654545eb42eb555ad5a.png) Is it clear?