Label

Renders an accessible label associated with controls.

Preview

<script setup lang="ts">
import { Label } from "~/components/ui/label";
import { Input } from "~/components/ui/input";
</script>

<template>
  <div class="space-y-2 w-full">
    <Label for="email">Email</Label>
    <Input type="email" id="email" placeholder="Email" />
  </div>
</template>

Installation

Copy and paste this into your project

// ~/components/ui/label.tsx

import { cn } from "~/lib/utils";
import { defineComponent } from "vue";

export const labelClasses =
  "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70";

const Label = defineComponent({
  setup(_, { slots, attrs }) {
    return () => (
      <label class={cn(labelClasses, attrs.class ?? "")}>
        {slots.default?.()}
      </label>
    );
  },
});

export { Label };

Usage

import { Label } from "~/components/ui/label";

<Label for="email">Email</Label>