Label

Imports

Use the same component slug for React, Vue, and style token lookup. Do not import components from package roots.

import { Label } from "@line/abc-def-react/label";

<script setup lang="ts">
import { Label } from "@line/abc-def-vue/label";
</script>

Shadcn references

Compare the corresponding shadcn React and Vue documentation for the same component slug.

Basic usage

import { Label } from "@line/abc-def-react/label";

export function Example() {
  return <Label htmlFor="named-input">Token label</Label>;
}

<script setup lang="ts">
import { Input } from "@line/abc-def-vue/input";
import { Label } from "@line/abc-def-vue/label";
</script>

<template>
  <div class="grid gap-2">
    <Label for="named-input">Token label</Label>
    <Input id="named-input" placeholder="--primary" />
  </div>
</template>

Component tokens

This component does not define a dedicated component token file. It inherits shared semantic tokens and utility classes.

Composition exports

Usage notes

• Prefer `htmlFor` with native inputs.
• Keep label text concise and specific.
• Related component tokens use the `label` token group in `@line/abc-def-styles/css`.