IftaLabel

IftaLabel visually integrates a label with its form element.

Username

basic-demo

Usage#

import { IftaLabel } from '@primereact/ui/iftalabel';

<IftaLabel>
    {/* input element like InputText, InputNumber, Select, Textarea, input etc. */}
    {/* label element like Label, label etc. */}
</IftaLabel>

Examples#

Invalid#

When the form element is invalid, the label is also highlighted.

Username

invalid-demo

'use client';
import { IftaLabel } from '@primereact/ui/iftalabel';
import { InputText } from '@primereact/ui/inputtext';
import { Label } from '@primereact/ui/label';
import * as React from 'react';

export default function InvalidDemo() {
    const [value, setValue] = React.useState('');

    return (
        <div className="flex flex-wrap justify-center">
            <IftaLabel>
                <InputText
                    id="invalid"
                    value={value}
                    onInput={(e: React.FormEvent<HTMLInputElement>) => setValue(e.currentTarget.value)}
                    invalid={!value}
                />
                <Label htmlFor="invalid">Username</Label>
            </IftaLabel>
        </div>
    );
}

Accessibility#

IftaLabel does not require any roles and attributes.

Keyboard Support#