Label — Frontfriend

Interactive preview

Rendered from the shared Frontfriend stories with React Base, the same preview Studio shows. Styling comes from your Design System; the code below is native to Reka UI.

Installation

Complete project setup first. Your configuration must select vue/reka and include your Design System ID.

pnpm exec frontfriend download label -f vue --primitive reka

Review dependencies reported by the downloader and keep your source changes in version control.

Usage

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

const args = {
  "variant": "main",
  "disabled": false,
} satisfies Partial<
  InstanceType<typeof Label> extends { $props: infer Props } ? Props : {}
> &
  Record<string, unknown> & { variant?: "main" | "secondary" };
</script>

<template>
  <Label v-bind="args">Label</Label>
</template>

Examples

Default

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

const args = {

} satisfies Partial<
  InstanceType<typeof Label> extends { $props: infer Props } ? Props : {}
> &
  Record<string, unknown>;
</script>

<template>
  <Label v-bind="args">Label</Label>
</template>

With Input

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

const args = {

} satisfies Partial<
  InstanceType<typeof Label> extends { $props: infer Props } ? Props : {}
> &
  Record<string, unknown>;
</script>

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

Required

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

const args = {

} satisfies Partial<
  InstanceType<typeof Label> extends { $props: infer Props } ? Props : {}
> &
  Record<string, unknown>;
</script>

<template>
  <Label for="required-name">Name <span aria-hidden="true">*</span></Label>
</template>

API reference

Frontfriend-owned props. Native HTML and inherited primitive props remain documented by Reka UI.

Prop	Type	Default
`class`	`HTMLAttributes["class"]`	`—`
`disabled`	`boolean`	`—`
`variant`	`LabelVariants["variant"]`	`—`

Configuration determines the actual classes and available styling hooks. See Theming & component configuration before introducing a repeated local override.