Fluid is a layout component to make descendant components span full width of their container.
import { Fluid } from 'primereact/fluid';<Fluid></Fluid>Components with the fluid option like InputText have the ability to span the full width of their component. Enabling the fluid for each component individually may be cumbersome so wrap the content with Fluid to instead for an easier alternative.
Any component that has the fluid property can be nested inside the Fluid component. The fluid property of a child component has higher precedence than the fluid container as shown in the last sample.
import { Fluid } from 'primereact/fluid';
import { InputText } from 'primereact/inputtext';
import { Label } from 'primereact/label';
export default function BasicDemo() {
return (
<div className="card flex flex-col gap-6">
<div>
<Label htmlFor="non-fluid" className="font-bold mb-2 block">
Non-Fluid
</Label>
<InputText id="non-fluid" />
</div>
<div>
<Label htmlFor="fluid" className="font-bold mb-2 block">
Fluid Prop
</Label>
<InputText id="fluid" fluid />
</div>
<Fluid>
<span className="font-bold mb-2 block">Fluid Container</span>
<div className="grid grid-cols-2 gap-4">
<div>
<InputText />
</div>
<div>
<InputText />
</div>
<div className="col-span-full">
<InputText />
</div>
<div>
<InputText fluid={false} placeholder="Non-Fluid" />
</div>
</div>
</Fluid>
</div>
);
}Fluid does not require any roles and attributes.
Component does not include any interactive elements.