Labels

Standalone form labels with an optional required asterisk and hint text. Most Cocoar inputs manage their own label via CoarFormField, but CoarLabel is available when you need to pair a label with a native <input>, a third-party control, or a custom layout.

import { CoarLabel } from '@cocoar/vue-ui';

Basic Label

At its simplest, just pass a text prop.

UsernameEmail addressPhone number

vue

<template>
  <div style="display: flex; flex-direction: column; gap: 8px;">
    <CoarLabel text="Username" />
    <CoarLabel text="Email address" />
    <CoarLabel text="Phone number" />
  </div>
</template>

<script setup lang="ts">
import { CoarLabel } from '@cocoar/vue-ui';
</script>

Required

Set required to append a red asterisk, visually signaling that the field must be filled in.

First name*Email*Password*

vue

<template>
  <div style="display: flex; flex-direction: column; gap: 8px;">
    <CoarLabel text="First name" :required="true" />
    <CoarLabel text="Email" :required="true" />
    <CoarLabel text="Password" :required="true" />
  </div>
</template>

<script setup lang="ts">
import { CoarLabel } from '@cocoar/vue-ui';
</script>

Sizes

Four sizes so labels scale with whatever form density you are designing for.

Small label*Medium label (default)*Large label*

vue

<template>
  <div style="display: flex; flex-direction: column; gap: 8px;">
    <CoarLabel text="Small label" size="s" :required="true" />
    <CoarLabel text="Medium label (default)" size="m" :required="true" />
    <CoarLabel text="Large label" size="l" :required="true" />
  </div>
</template>

<script setup lang="ts">
import { CoarLabel } from '@cocoar/vue-ui';
</script>

Associated with Input

Pass a for value matching the target element's id to create a proper <label>/<input> association. Clicking the label will focus the input, and assistive technology will announce the relationship.

Custom input*

vue

<template>
  <div style="display: flex; flex-direction: column; gap: 4px; max-width: 320px;">
    <CoarLabel for="demo-input" text="Custom input" :required="true" hint="Enter anything" />
    <input
      id="demo-input"
      type="text"
      placeholder="Associated input"
      style="width: 100%; padding: 6px 10px; border: 1px solid var(--coar-border-neutral-secondary); border-radius: 6px; font-size: 14px; box-sizing: border-box;"
    />
  </div>
</template>

<script setup lang="ts">
import { CoarLabel } from '@cocoar/vue-ui';
</script>

Accessibility

INFO

Labels use the native <label> element with the for attribute when provided, ensuring proper association with form controls for assistive technology.

Screen Reader Support

• Label text announces when the associated input receives focus
• Required asterisk is properly announced

API

Props

Prop	Type	Default	Description
text	string	undefined	Label text (alternative to default slot)
for	string	undefined	Associated input's id
required	boolean	false	Show required asterisk
size	'xs' | 's' | 'm' | 'l'	'm'	Label size

Slots

Slot	Description
default	Label content (used when text prop is not set)