Input Group

Imports

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

import { InputGroup, InputGroupInput, InputGroupAddon, InputGroupButton, InputGroupText } from "@line/abc-def-react/input-group";

<script setup lang="ts">
import { InputGroup, InputGroupInput, InputGroupAddon, InputGroupButton, InputGroupText } from "@line/abc-def-vue/input-group";
</script>

Shadcn references

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

Basic usage

import {
  InputGroup,
  InputGroupAddon,
  InputGroupInput,
  InputGroupText,
} from "@line/abc-def-react/input-group";

export function Example() {
  return (
    <InputGroup>
      <InputGroupAddon><InputGroupText>--</InputGroupText></InputGroupAddon>
      <InputGroupInput placeholder="token-name" />
    </InputGroup>
  );
}

<script setup lang="ts">
import {
  InputGroup,
  InputGroupAddon,
  InputGroupInput,
  InputGroupText,
} from "@line/abc-def-vue/input-group";
</script>

<template>
  <InputGroup>
    <InputGroupAddon>
      <InputGroupText>--</InputGroupText>
    </InputGroupAddon>
    <InputGroupInput placeholder="token-name" />
  </InputGroup>
</template>

Component tokens

Composition exports

Usage notes

• Keep addons brief.
• Use buttons only for actions tightly coupled to the input.
• Related component tokens use the `input-group` token group in `@line/abc-def-styles/css`.