# ui:ref
**Reference:** [View Source](https://github.com/jramke/fluid-primitives/tree/main/Classes/ViewHelpers/RefViewHelper.php)
Generates a reference to a part of a component.
This is used to mark parts of a component for JavaScript interaction or styling. It generates the element `id` (using a deterministic formula based on component name, root ID and part name) along with `data-scope` and `data-part` attributes.
## Example
```html
Click me
```
This will generate:
```html
Click me
```
For multi-instance parts (e.g. accordion items, tab panels) pass a `value:` discriminator:
```html
...
```
You can also pass additional data attributes:
```html
Click me
```
This will generate:
```html
Click me
```
A component's slot content (the markup a consumer writes between its opening/closing tags) is always evaluated against the *calling* rendering context, not the component's own internal one - so a bare `ui:ref` written directly inside such slot content doesn't, by default, know which component (or rootId) it belongs to, and throws. Pass `context` to attach it explicitly to a named ancestor component instead (resolved the same way `ui:template`'s own `context` argument is - it threads correctly through slot-content nesting, unlike the ambient `component`/`context` variables this ViewHelper otherwise reads):
```html
Loading…
```
Use `ui:template` instead when the content's real data doesn't exist yet at server-render time and needs cloning client-side per instance (e.g. async search results) - `context` here is for hand-authored elements that render immediately, once, and never get cloned.
## Arguments
| Name | Type | Description | Required | Default |
|------|------|-------------|----------|--------|
| `name` | string | Name of the ref | Yes | - |
| `asArray` | boolean | If true, the ref will be rendered as an array instead of a string of data-attributes | No | false |
| `data` | array | Additional data attributes to include in the ref. Associative array with key-value pairs. Each key is prefixed with "data-". | No | [] |
| `value` | string\|BackedEnum\|UnitEnum\|null\|array | Optional discriminator for multi-instance parts (e.g. accordion items, tab triggers). | No | - |
| `context` | string | camelCase base name of an ancestor component to attach this ref to explicitly (e.g. "fileUpload"), for hand-authored elements living in another component's slot content rather than a component's own template body. When omitted, uses whichever component is already ambiently active (the normal case for a component's own template). | No | '' |