@usevyre/react @usevyre/vue

Label

A semantic <label> element with built-in required indicator and disabled visual state. Always pair with a form control via htmlFor.

Variants

Email addressPasswordDisabled field

import { Label } from "@usevyre/react";

<Label htmlFor="email">Email address</Label>
<Label htmlFor="password" required>Password</Label>
<Label htmlFor="notes" disabled>Disabled field</Label>

<script setup>
import { Label } from "@usevyre/vue";
</script>
<template>
  <Label for="email">Email address</Label>
  <Label for="password" required>Password</Label>
  <Label for="notes" disabled>Disabled field</Label>
</template>

With input

Pair Label with an Input using matching htmlFor / id attributes.

import { Label, Input } from "@usevyre/react";

<div style={{ display: "flex", flexDirection: "column", gap: 6 }}>
  <Label htmlFor="email" required>Email</Label>
  <Input id="email" type="email" placeholder="you@example.com" />
</div>

<script setup>
import { Label, Input } from "@usevyre/vue";
</script>
<template>
  <div style="display:flex;flex-direction:column;gap:6px">
    <Label for="email" required>Email</Label>
    <Input id="email" type="email" placeholder="you@example.com" />
  </div>
</template>

Props

Prop	Type	Default	Description
`htmlFor`	`string`	`—`	React: links label to input by id. Vue: use the native `for` attribute.
`required`	`boolean`	`false`	Shows a red asterisk (*) after the label text.
`disabled`	`boolean`	`false`	Reduces opacity to indicate the associated field is disabled.
`class`	`string`	`—`	Additional CSS class.

AI Context

Prop	Values	Default
`required`	`true`\|`false`	`false`

← Input Modal →