Label

Renders an accessible label associated with controls.

Installation

npx shadcn-vue@latest add https://vuedocs.canceydejean.dev/r/label.json

Usage

Use labels with form controls via for matching the control id.

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

<template>
  <div class="grid gap-2">
    <Label for="email">Email</Label>
    <Input id="email" type="email" placeholder="you@example.com" />
  </div>
</template>

Disabled styling is driven by group-data-[disabled=true] on an ancestor, or peer-disabled when the control is a peer sibling.