<!-- This file is auto-generated by the docs:generate-viewhelper-docs command. Do not edit directly -->

# ui:prop

**Reference:** [View Source](https://github.com/jramke/fluid-primitives/tree/main/Classes/ViewHelpers/PropViewHelper.php)

Defines a template argument (prop) for a component.

You must use this ViewHelper instead of the standard `f:argument` ViewHelper to define props for a component. It mirrors the API of `f:argument` but adds some additional features like exposing the prop to the client hydration data or the context.

<div class="relative w-full rounded-lg border px-4 py-3 text-sm grid has-[&gt;svg]:grid-cols-[calc(var(--spacing)*4)_1fr] grid-cols-[0_1fr] has-[&gt;svg]:gap-x-3 gap-y-0.5 items-start [&amp;&gt;svg]:size-4 [&amp;&gt;svg]:translate-y-0.5 [&amp;&gt;svg]:text-current bg-card text-card-foreground not-prose" role="alert" id="alert:«fW0FQmFuu3»" data-scope="alert" data-part="root" >

<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="size-5"> <circle cx="12" cy="12" r="10"></circle> <path d="M12 16v-4"></path> <path d="M12 8h.01"></path> </svg>

<div class="col-start-2 min-h-4 font-medium tracking-tight" id="alert:«fW0FQmFuu3»:title" data-scope="alert" data-part="title" >

<h3>All props from a root component are automatically exposed to the context.</h3>

</div>

</div>

## Example
```html
<ui:prop name="variant" type="string" optional="{true}" default="primary" />
<ui:prop name="size" type="string" optional="{true}" default="medium" client="{true}" />
```

## Arguments

| Name | Type | Description | Required | Default |
|------|------|-------------|----------|--------|
| `name` | string | name of the template argument | Yes | - |
| `type` | string | type of the template argument | Yes | - |
| `description` | string | description of the template argument | No | - |
| `optional` | boolean | true if the defined argument should be optional | No | false |
| `default` | mixed | default value for optional argument | No | - |
| `client` | boolean | Whether the property should be exposed to the client hydration data. See [Hydration](/docs/core-concepts/hydration.md) for more information. | No | false |
| `context` | boolean | Whether the property should be exposed to the components context. See [Context](/docs/core-concepts/context.md) for more information. | No | false |
| `requiredAtRuntime` | boolean | Whether the property is required at runtime. This means that the component will throw an error if the property is not defined when rendering. This is used internally by the primitives so props spreading works. | No | false |
