Arguments

Components accept typed arguments called props. Fluid Primitives extends Fluid's built-in argument system with additional features.

Defining Props

Use ui:prop instead of Fluid's f:argument:

<ui:prop name="variant" type="string" default="primary" />
<ui:prop name="disabled" type="boolean" optional="{true}" />
<ui:prop name="items" type="array" />

See the ui:prop ViewHelper reference for all options.

Enum Props

Some props use PHP backed enums. Until Fluid supports automatic enum conversion, pass enum cases with f:constant. This should get better once PR #1271 lands.

<ui:tabs.root
    orientation="{f:constant(name: '
        Jramke\FluidPrimitives\Enum\Orientation::Horizontal
    ')}"
/>

Automatic Props

Most components receive these props automatically. Availability depends on what a part actually renders - e.g. class and asChild only make sense on a part that renders its own wrapper element, so a part's own Arguments table (in its component docs page) is the source of truth for which of these it actually accepts.

class

Pass additional CSS classes to any component:

<ui:button class="mt-4 w-full">Submit</ui:button>

Inside your component, use {class} to apply them:

<button class="btn {class}">
    <f:slot />
</button>

See ui:cn ViewHelper for conditional class names.

rootId

Composable components get a unique identifier. This links parts together and enables hydration.

Usually auto-generated, but you can provide one:

<ui:accordion.root rootId="faq-accordion"></ui:accordion.root>

See Controlled Components.

asChild

Merge attributes into child element instead of rendering the default wrapper. See Composition. Not available on root parts that render no wrapper element of their own (e.g. Dialog, Popover, Tooltip's root) - there's nothing to merge the attributes onto.

ids

Override default IDs for component parts. Useful when composing multiple components together. See Composition.

controlled

Mark a component as externally controlled, preventing automatic client-side initialization. See Hydration.

attributes

Forward additional HTML attributes. See ui:attributes ViewHelper.

Client Props

Props needed for client-side behavior use client="{true}":

<ui:prop name="open" type="boolean" optional="{true}" client="{true}" />

These are serialized and passed to JavaScript during hydration.

Inheriting Props

Use ui:useProps to inherit prop definitions from another component:

<!-- Inherit all props from the primitive -->
<ui:useProps name="primitives:accordion.root" />

<!-- Inherit specific props only -->
<ui:useProps name="primitives:accordion.root" props="{0: 'multiple', 1: 'collapsible'}" />

This is how you build wrapper components without redefining every prop.