120k
New

Label

PreviousNext

Renders an accessible label associated with controls.

Installation

pnpm dlx shadcn@latest add @force-ui-vue/label

Usage

<script setup lang="ts">
import { Label } from "@/components/ui/label"
</script>
 
<template>
  <Label for="email">Your email address</Label>
</template>

Label in Field

For form fields, use the Field component which includes built-in FieldLabel, FieldDescription, and FieldError components.

<script setup lang="ts">
import { Field, FieldLabel } from "@/components/ui/field"
import { Input } from "@/components/ui/input"
</script>
 
<template>
  <Field>
    <FieldLabel for="email">Your email address</FieldLabel>
    <Input id="email" />
  </Field>
</template>

RTL

To enable RTL support in Force UI, see the RTL configuration guide.

API Reference

See the Radix UI Label documentation for more information.