FloatLabel visually integrates a label with its form element.
import { Label } from 'primereact/label';<Label.Float>
<InputText />
<Label></Label>
</Label.Float>FloatLabel is used by wrapping the input and its Label.
import { InputText } from 'primereact/inputtext';
import { Label } from 'primereact/label';
import * as React from 'react';
export default function BasicDemo() {
const [value, setValue] = React.useState('');
return (
<div className="card flex flex-wrap justify-center ">
<Label.Float>
<InputText value={value} onInput={(e: React.FormEvent<HTMLInputElement>) => setValue(e.currentTarget.value)} id="username" />
<Label htmlFor="username">InputText</Label>
</Label.Float>
</div>
);
}The variant property defines the position of the label. Default value is over, whereas in and on are the alternatives.
import { InputText } from 'primereact/inputtext';
import { Label } from 'primereact/label';
import * as React from 'react';
export default function VariantsDemo() {
const [value1, setValue1] = React.useState('');
const [value2, setValue2] = React.useState('');
return (
<div className="card flex flex-wrap justify-center items-end gap-4">
<Label.Float variant="in">
<InputText id="in_label" value={value1} onInput={(e: React.FormEvent<HTMLInputElement>) => setValue1(e.currentTarget.value)} autoComplete="off" />
<Label htmlFor="in_label">In Label</Label>
</Label.Float>
<Label.Float variant="on">
<InputText id="on_label" value={value2} onInput={(e: React.FormEvent<HTMLInputElement>) => setValue2(e.currentTarget.value)} autoComplete="off" />
<Label htmlFor="on_label">On Label</Label>
</Label.Float>
</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 [value1, setValue1] = React.useState('');
const [value2, setValue2] = React.useState('');
const [value3, setValue3] = React.useState('');
return (
<div className="card flex flex-wrap justify-center items-end gap-4">
<Label.Float>
<InputText id="value1" value={value1} onInput={(e: React.FormEvent<HTMLInputElement>) => setValue1(e.currentTarget.value)} invalid={!value1} />
<Label htmlFor="value1">Username</Label>
</Label.Float>
<Label.Float variant="in">
<InputText id="value2" value={value2} onInput={(e: React.FormEvent<HTMLInputElement>) => setValue2(e.currentTarget.value)} autoComplete="off" invalid={!value2} />
<Label htmlFor="value2">Username</Label>
</Label.Float>
<Label.Float variant="on">
<InputText id="value3" value={value3} onInput={(e: React.FormEvent<HTMLInputElement>) => setValue3(e.currentTarget.value)} autoComplete="off" invalid={!value3} />
<Label htmlFor="value3">Username</Label>
</Label.Float>
</div>
);
}FloatLabel does not require any roles and attributes.
Component does not include any interactive elements.