Components

Label

Caption form controls with an accessible, styled label.

Import

import { Label } from "@dr-max/ui/label"

The entry carries its own precompiled CSS (including the styles of the Text part it composes) — no extra style imports needed.

Usage

Point for at the id of the control the label describes:

Email address

<script setup lang="ts">
import { Label } from "@dr-max/ui/label"
</script>

<template>
  <Label for="email">Email address</Label>
  <input id="email" type="email" />
</template>

Variants

Label builds on Text and accepts the same typography variants — it defaults to label-regular-md:

Extra smallSmallMediumLargeMedium emphasis

<template>
  <Label variant="label-regular-xs">Extra small</Label>
  <Label variant="label-regular-sm">Small</Label>
  <Label variant="label-regular-md">Medium</Label>
  <Label variant="label-regular-lg">Large</Label>
  <Label variant="label-medium-md">Medium emphasis</Label>
</template>

Rendered element

The label renders a <label> element by default — use as when the text is not associated with a form control:

Opening hours

<template>
  <Label as="span">Opening hours</Label>
</template>

Playground

Email address

slot

variant

for

<script setup lang="ts">
import { Label } from '@dr-max/ui/label'
</script>

<template>
  <Label variant="label-regular-md" for="email">Email address</Label>
</template>