diff --git a/docs/essentials/element_attributes.md b/docs/essentials/element_attributes.md
index 5ffd4c28..ce61070f 100644
--- a/docs/essentials/element_attributes.md
+++ b/docs/essentials/element_attributes.md
@@ -232,6 +232,18 @@ You can also use built-in shader attributes in combination with eachother f.e;
 <Element w="200" h="200" x="20" y="100" rounded="20" border="{w: 20, color:'blue'}"/>
 ```
 
+### Adding a Referance
+
+You can add a reference to an Element or Component by using the `ref` attribute.
+
+```xml
+<Element w="200" h="200" x="20" y="100" ref="myElement" />
+
+<MyComponent ref="MyComponent">
+```
+
+With a `ref` setup you can use it the `$select` method inside the same Component where the Element is referenced in its template. For more information follow view [Utility Methods](../components/utility_methods.md#select) or for similar but more advanced built-in features view [Directives](../built-in/directives.md)
+
 ### Using shader attribute
 > [!WARNING]
 > This attribute does not work in combination with the built-in element shader attributes. This has to do with the complexity of shaders that makes mixing and matching quite heavy on performance.