# Label Label provides accessible text labels for form controls. Use `htmlFor` to link the label to a form control by its id. ```tsx import { InputText } from '@primereact/ui/inputtext'; import { Label } from '@primereact/ui/label'; export default function Preview() { return (

Username

); } ``` ## Usage ```tsx import { Label } from '@primereact/ui/label'; ``` ```tsx ``` ## Examples ### Basic An accessible label element associated with a form control. ```tsx import { InputText } from '@primereact/ui/inputtext'; import { Label } from '@primereact/ui/label'; export default function BasicDemo() { return (

Username

); } ``` ### Required You can display required indicators in the label content while keeping the input semantics with `required` or `aria-required`. ```tsx import { InputText } from '@primereact/ui/inputtext'; import { Label } from '@primereact/ui/label'; export default function RequiredDemo() { return (

); } ``` ## Accessibility ### Screen Reader `Label` renders a native `label` element. Use `htmlFor` to associate it with a form control id, or wrap the form control inside the label. ### Keyboard Support Component does not include any interactive elements. # Label API API documentation for Label component ## Label ### Props | Name | Type | Default | Description | |:------|:------|:------|:------| | ref | Ref | null | The reference to the component instance. | | pIf | boolean | true | Whether the component should be rendered. | | style | CSSProperties \\| ((instance?: LabelInstance) => CSSProperties) | null | The style to apply to the component. | | className | string \\| ((instance?: LabelInstance) => string) | null | The class name to apply to the component. | | as | string \\| number \\| bigint \\| boolean \\| ComponentClass \\| FunctionComponent \\| ReactElement> \\| Iterable \\| ReactPortal \\| Promise | null | The component type to render. | | asChild | boolean | false | Whether the component should be rendered as a child component. | | instance | LabelInstance | null | The instance to pass to the component. | | pt | SafeRecord | null | The pass-through props to pass to the component. | | ptOptions | PassThroughOptions | null | The pass-through options to pass to the component. | | unstyled | boolean | null | Whether the component should be rendered without classes. | | dt | unknown | null | The design token to use for the component. | | styles | StylesOptions | null | The styles to use for the component. | | render | (instance: LabelInstance) => ReactNode | null | The render function to render the component with instance access. | | children | any | null | The children to render. Accepts `React.ReactNode` for static content or a render function `(instance: I) => React.ReactNode` for instance access. Typed as `any` to avoid JSX type errors when used directly in templates. | | [key: string] | any | null | | | pt-{optionName}-* | - | null | Pass through attributes for customizing component. For more info, see Pass Through tab. | ### State ### Exposes | Name | Type | Default | Description | |:------|:------|:------|:------| | rootProps | useLabelRootProps | null | Pre-built data attribute props for the root element. | ### Interfaces | Label | Description | Data | |:------|:------|:------| | PassThroughOptions | Defines passthrough(pt) options of Label component. | [object Object] | ### Types | Label | Description | Data | |:------|:------|:------| | Instance | Instance of Label component. | [object Object] | ## useLabel ### Props ### State ### Exposes | Name | Type | Default | Description | |:------|:------|:------|:------| | rootProps | useLabelRootProps | null | Pre-built data attribute props for the root element. | ### Interfaces ### Types | Label | Description | Data | |:------|:------|:------| | Instance | Instance of useLabel headless. | [object Object] | # Label Theming Theming documentation for Label component ## Styled ### Label CSS Classes List of class names used in the styled mode. | ClassName | Description | |:------|:------| | p-label | Class name of the root element | ### Design Tokens List of design tokens. ## Unstyled Theming is implemented with the pass through properties in unstyled mode.

Label Theming

Styled#

Label CSS Classes#

Design Tokens#

Unstyled#