Fluid

Fluid is a layout component to make descendant components span full width of their container.

With Fluid

preview

Usage#

import { Fluid } from '@/components/ui/fluid';

<Fluid></Fluid>

Examples#

Basic#

Stretches form components to fill the available container width.

With Fluid

basic-demo

import { Fluid } from '@/components/ui/fluid';
import { InputText } from '@/components/ui/inputtext';
import { Label } from '@/components/ui/label';

export default function BasicDemo() {
    return (
        <div>
            <Fluid>
                <Label htmlFor="with-fluid" className="font-bold mb-2 block">
                    With Fluid
                </Label>
                <InputText id="with-fluid" placeholder="Type..." />
            </Fluid>
        </div>
    );
}

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.

Non-Fluid

Fluid Prop

Fluid Container

comparision-demo

import { Fluid } from '@/components/ui/fluid';
import { InputText } from '@/components/ui/inputtext';
import { Label } from '@/components/ui/label';

export default function ComparisionDemo() {
    return (
        <div className="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>
    );
}

Accessibility#

Fluid does not require any roles and attributes.

Keyboard Support#

Component does not include any interactive elements.