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.
'use client';
import { InputText } from 'primereact/inputtext';
import { Label } from 'primereact/label';
export default function BasicDemo() {
return (
<div className="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.
'use client';
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="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.