Input

Imports

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

import { Input } from "@line/abc-def-react/input";

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

Shadcn references

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

Basic usage

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

export function Example() {
  return (
    <div className="grid gap-2">
      <Label htmlFor="email">Email</Label>
      <Input id="email" type="email" placeholder="name@example.com" />
    </div>
  );
}

<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="email">Email</Label>
    <Input id="email" type="email" placeholder="name@example.com" />
  </div>
</template>

Component tokens

Composition exports

Usage notes

• Always pair with a label for forms.
• Use native input types when they improve validation or mobile keyboards.
• Related component tokens use the `input` token group in `@line/abc-def-styles/css`.