125k

Input Group

PreviousNext

アドオン、ボタン、ヘルパー コンテンツを入力に追加します。

BaseRadixReact Aria
12件の結果
import { Search } from "lucide-react"

import {

インストール

pnpm dlx shadcn@latest add input-group

使用法

import {
  InputGroup,
  InputGroupAddon,
  InputGroupButton,
  InputGroupInput,
  InputGroupText,
  InputGroupTextarea,
} from "@/components/ui/input-group"
<InputGroup>
  <InputGroupInput placeholder="Search..." />
  <InputGroupAddon>
    <SearchIcon />
  </InputGroupAddon>
</InputGroup>

構成

次の構成を使用して InputGroup を構築します。

InputGroup
├── InputGroupInput or InputGroupTextarea
├── InputGroupAddon
├── InputGroupButton
└── InputGroupText

整列

InputGroupAddon の align プロパティを使用して、入力を基準にしてアドオンを配置します。

インラインスタート

align="inline-start" を使用して、アドオンを入力の先頭に配置します。これがデフォルトです。

アイコンは先頭に配置されます。

import { SearchIcon } from "lucide-react"

import {

インラインエンド

align="inline-end" を使用してアドオンを入力の最後に配置します。

アイコンは末尾に配置されます。

import { EyeOffIcon } from "lucide-react"

import {

ブロックスタート

align="block-start" を使用してアドオンを入力の上に配置します。

氏名

ヘッダーは入力欄の上に配置されます。

script.js

ヘッダーはテキストエリアの上に配置されます。

import { CopyIcon, FileCodeIcon } from "lucide-react"

import {

ブロックエンド

align="block-end" を使用してアドオンを入力の下に配置します。

USD

フッターは入力欄の下に配置されます。

0/280

フッターはテキストエリアの下に配置されます。

import {
  Field,
  FieldDescription,

アイコン

import {
  CheckIcon,
  CreditCardIcon,

テキスト

$
USD
https://
.com
@company.com
残り120文字
import {
  InputGroup,
  InputGroupAddon,

ボタン

https://
"use client"

import * as React from "react"

Kbd

⌘K
import { SearchIcon } from "lucide-react"

import {

ドロップダウン

import { ChevronDownIcon, MoreHorizontal } from "lucide-react"

import {

スピナー

保存中...
しばらくお待ちください...
import { LoaderIcon } from "lucide-react"

import {

テキストエリア

1行目, 1列目
script.js
import {
  IconBrandJavascript,
  IconCopy,

カスタム入力

自動フォーカス状態処理のために、カスタム入力に data-slot="input-group-control" 属性を追加します。

以下は、サードパーティ ライブラリからのカスタムのサイズ変更可能なテキストエリアの例です。

"use client"

import TextareaAutosize from "react-textarea-autosize"

RTL

shadcn/ui で RTL サポートを有効にするには、RTL 構成ガイド を参照してください。

١٢ نتيجة
جاري الحفظ...
٠/٢٨٠

تذييل موضع أسفل منطقة النص.

"use client"

import * as React from "react"

API リファレンス

入力グループ

入力とアドオンをラップするメインコンポーネント。

プロパティタイプデフォルト
classNamestring
<InputGroup>
  <InputGroupInput />
  <InputGroupAddon />
</InputGroup>

InputGroupAddon

アイコン、テキスト、ボタン、またはその他のコンテンツを入力と一緒に表示します。

プロパティタイプデフォルト
align"inline-start" | "inline-end" | "block-start" | "block-end""inline-start"
classNamestring
<InputGroupAddon align="inline-end">
  <SearchIcon />
</InputGroupAddon>

<InputGroupInput /> の場合は、inline-start または inline-end の位置合わせを使用します。 <InputGroupTextarea /> の場合は、block-start または block-end 配置を使用します。

InputGroupAddon コンポーネントには、複数の InputGroupButton コンポーネントとアイコンを含めることができます。

<InputGroupAddon>
  <InputGroupButton>Button</InputGroupButton>
  <InputGroupButton>Button</InputGroupButton>
</InputGroupAddon>

入力グループボタン

入力グループ内のボタンを表示します。

プロパティタイプデフォルト
size"xs" | "icon-xs" | "sm" | "icon-sm""xs"
variant"default" | "destructive" | "outline" | "secondary" | "ghost" | "link""ghost"
classNamestring
<InputGroupButton>Button</InputGroupButton>
<InputGroupButton size="icon-xs" aria-label="Copy">
  <CopyIcon />
</InputGroupButton>

InputGroupInput

入力グループを構築するときの <Input /> の置き換え。このコンポーネントには入力グループ スタイルが事前に適用されており、フォーカス状態の処理に統合された data-slot="input-group-control" を使用します。

プロパティタイプデフォルト
classNamestring

他のすべてのプロパティは、基礎となる <Input /> コンポーネントに渡されます。

<InputGroup>
  <InputGroupInput placeholder="Enter text..." />
  <InputGroupAddon>
    <SearchIcon />
  </InputGroupAddon>
</InputGroup>

InputGroupTextarea

入力グループを構築するときの <Textarea /> の置き換え。このコンポーネントにはテキストエリア グループ スタイルが事前に適用されており、フォーカス状態の処理に統一された data-slot="input-group-control" を使用します。

プロパティタイプデフォルト
classNamestring

他のすべてのプロパティは、基礎となる <Textarea /> コンポーネントに渡されます。

<InputGroup>
  <InputGroupTextarea placeholder="Enter message..." />
  <InputGroupAddon align="block-end">
    <InputGroupButton>Send</InputGroupButton>
  </InputGroupAddon>
</InputGroup>

変更ログ

2025-10-06 InputGroup

min-w-0 クラスを InputGroup コンポーネントに追加します。 差分 を参照してください。