Label

A semantic HTML label component that associates text with a form control. Supports an optional required indicator (asterisk) and the for attribute for accessibility.

Basic

Demo

Full Name

Email Address *

<script setup>
import { PxLabel } from 'praxis-vue-ui'
</script>

<template>
  <!-- Basic label -->
  <PxLabel label="Full Name" for="name-input" />
  <input id="name-input" />

  <!-- Required indicator -->
  <PxLabel label="Email Address" for="email-input" :required="true" />
  <input id="email-input" />
</template>

Props

Props

Prop	Type	Default	Description
labelrequired	string	—	The text content displayed inside the label element.
for	string	undefined	The id of the associated form control (sets the HTML for attribute).
required	boolean	false	When true, shows a red asterisk (*) after the label text as a required-field indicator.

Accessibility

• Uses a native <label> element with a proper for/id association.
• The asterisk (*) has aria-hidden="true" so screen readers don't read it as literal punctuation. Required state should still be communicated via aria-required on the input.
• Clicking the label focuses the associated input automatically (native browser behavior).

Migration from PxRequiredLabel

PxRequiredLabel is now deprecated. Replace it with PxLabel:

- import { PxRequiredLabel } from 'praxis-vue-ui'
+ import { PxLabel } from 'praxis-vue-ui'

- <PxRequiredLabel label="Name" :required="true" />
+ <PxLabel label="Name" for="name-input" :required="true" />