# Fluid Fluid is a layout component to make descendant components span full width of their container. ```tsx import { Fluid } from '@/components/ui/fluid'; import { InputText } from '@/components/ui/inputtext'; import { Label } from '@/components/ui/label'; export default function Preview() { return (

With Fluid

); } ``` ## Usage ```tsx import { Fluid } from '@/components/ui/fluid'; ``` ```tsx ``` ## Examples ### Basic Stretches form components to fill the available container width. ```tsx import { Fluid } from '@/components/ui/fluid'; import { InputText } from '@/components/ui/inputtext'; import { Label } from '@/components/ui/label'; export default function BasicDemo() { return (

With Fluid

); } ``` ### Comparison Components with the _fluid_ option like _InputText_ have the ability to span the full width of their component. Enabling _fluid_ on each component individually may be cumbersome, so wrapping content with _Fluid_ is 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. ```tsx import { Fluid } from '@/components/ui/fluid'; import { InputText } from '@/components/ui/inputtext'; import { Label } from '@/components/ui/label'; export default function ComparisionDemo() { return (

Non-Fluid

Fluid Prop

Fluid Container

); } ``` ## Accessibility ### Screen Reader Fluid does not require any roles and attributes. ### Keyboard Support Component does not include any interactive elements. # Fluid Theming Theming documentation for Fluid component ## Styled ### Fluid CSS Classes List of class names used in the styled mode. | ClassName | Description | |:------|:------| | p-fluid | Class name of the root element | ### Design Tokens List of design tokens. ## Unstyled Theming is implemented with the pass through properties in unstyled mode.

Fluid Theming

Styled#

Fluid CSS Classes#

Design Tokens#

Unstyled#