IftaLabel visually integrates a label with its form element.
import { Label } from 'primereact/label';<Label.Ifta>
<InputText />
<Label></Label>
</Label.Ifta>IftaLabel is used to create infield top aligned labels.
import { InputText } from 'primereact/inputtext';
import { Label } from 'primereact/label';
export default function BasicDemo() {
return (
<div className="card flex flex-wrap justify-center ">
<Label.Ifta>
<InputText id="username" />
<Label htmlFor="username">InputText</Label>
</Label.Ifta>
</div>
);
}When the form element is invalid, the label is also highlighted.
import { InputText } from 'primereact/inputtext';
import { Label } from 'primereact/label';
import * as React from 'react';
export default function InvalidDemo() {
const [value, setValue] = React.useState('');
return (
<div className="card flex flex-wrap justify-center ">
<Label.Ifta>
<InputText id="invalid" value={value} onInput={(e: React.FormEvent<HTMLInputElement>) => setValue(e.currentTarget.value)} invalid={!value} />
<Label htmlFor="invalid">Username</Label>
</Label.Ifta>
</div>
);
}IftaLabel does not require any roles and attributes.
Component does not include any interactive elements.