Skip to Content
FrontendBundlesComponentsUI PrimitivesLabel

Label

An accessible <label> element built on Radix UI’s Label primitive. Clicking the label focuses the associated input.

Import

import { Label } from "@phpcreation/frontend-components-react-nextjs-bundle/components/Label";

Props

All Radix UI Label props, including standard HTML <label> attributes:

PropTypeDescription
htmlForstringAssociates label with an input by its id
asChildbooleanRender as child element

Usage

import { Label } from "@phpcreation/frontend-components-react-nextjs-bundle/components/Label";
import { Input } from "@phpcreation/frontend-components-react-nextjs-bundle/components/Input";
 
<div className="flex flex-col gap-1">
  <Label htmlFor="email">Email Address</Label>
  <Input id="email" type="email" />
</div>

Notes

  • Used internally by Input, Textarea, BooleanToggle, ColorPicker, and TimePicker
  • For most cases, use Input or Textarea directly (they include a label prop)
Last updated on
TextareaSelect