Field

Imports

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

import { Field, FieldLabel, FieldDescription, FieldError, FieldGroup, FieldSet } from "@line/abc-def-react/field";

<script setup lang="ts">
import { Field, FieldLabel, FieldDescription, FieldError, FieldGroup, FieldSet } from "@line/abc-def-vue/field";
</script>

Shadcn references

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

Basic usage

import {
  Field,
  FieldDescription,
  FieldGroup,
  FieldLabel,
} from "@line/abc-def-react/field";
import { Input } from "@line/abc-def-react/input";

export function Example() {
  return (
    <FieldGroup>
      <Field>
        <FieldLabel htmlFor="token-name">Token name</FieldLabel>
        <Input id="token-name" defaultValue="--primary" />
        <FieldDescription>Semantic token override.</FieldDescription>
      </Field>
    </FieldGroup>
  );
}

<script setup lang="ts">
import {
  Field,
  FieldDescription,
  FieldGroup,
  FieldLabel,
} from "@line/abc-def-vue/field";
import { Input } from "@line/abc-def-vue/input";
</script>

<template>
  <FieldGroup>
    <Field>
      <FieldLabel html-for="token-name">Token name</FieldLabel>
      <Input id="token-name" default-value="--primary" />
      <FieldDescription>Semantic token override.</FieldDescription>
    </Field>
  </FieldGroup>
</template>

Component tokens

Composition exports

Usage notes

• Use field primitives to keep form spacing consistent.
• Show errors close to the invalid control.
• Related component tokens use the `field` token group in `@line/abc-def-styles/css`.