Label

<label> with required mark and hint

A label for a control that isn't in a form field — in a toolbar, or a layout of your own. In a form use Field: it renders this label and also wires the id, the description and the error.

Basic

Name*

Emailoptional

<script setup lang="ts">
import { BlessInput, BlessLabel } from "blessing-ui";
</script>

<template>
  <div class="row" style="align-items: flex-start">
    <div class="col">
      <BlessLabel for="d-name" required>Name</BlessLabel>
      <BlessInput id="d-name" placeholder="加藤恵" required />
    </div>
    <div class="col">
      <BlessLabel for="d-mail" hint="optional">Email</BlessLabel>
      <BlessInput id="d-mail" type="email" />
    </div>
  </div>
</template>

• required draws the * and nothing else — the mark is hidden from screen readers. Put required on the control, which is what gets announced and validated.
• hint is read as part of the label, so keep it to a word or two (optional, max 3). A sentence belongs in Field's description, which is read as a description instead.

Usage

import { BlessLabel } from "blessing-ui";

API

Props

Name	Type	Default	Description
for	string	—
required	boolean	—	draws the * only; put `required` on the control too
hint	string	—	a word or two after the label ("optional"); it is part of the label's accessible name
disabled	boolean	—

Slots

Name	Scope	Description
default	—