Input Group

入力にアイコン、単位、操作ボタンを付け、一つの面にまとめる場合に使います。

プレビュー

検索・URL・メッセージ

アイコンとボタン付きの検索、URL の接頭辞、送信ボタン付きの複数行入力を比較します。

検索

ウェブサイト

https://

メッセージ

インストール

この Registry を初めて使う場合は、先に基本設定と共通スタイルの導入を完了してください。

npx shadcn@latest add @neumorphism-ui/input-group

共有 base を一度導入した後、CLI でコンポーネントと依存関係を追加します。

検索・URL・メッセージ

npx shadcn@latest add @neumorphism-ui/input-group @neumorphism-ui/label

Registry JSON

使い方

InputGroupInput または InputGroupTextarea に補助要素やボタンを組み合わせます。入力自体にラベルを付け、送信用ではないボタンは type button にします。

"use client";

import { useId } from "react";
import { InputGroup, InputGroupAddon, InputGroupInput } from "@/components/ui/input-group";
import { Label } from "@/components/ui/label";

export default function Example() {
  const id = useId();
  return (
    <div className="grid gap-2">
      <Label htmlFor={id}>Amount in US dollars</Label>
      <InputGroup>
        <InputGroupAddon aria-hidden="true">$</InputGroupAddon>
        <InputGroupInput id={id} name="amount" inputMode="decimal" placeholder="0.00" />
      </InputGroup>
    </div>
  );
}

API リファレンス

InputGroupInput または InputGroupTextarea に、前後の addon、補足テキスト、button を組み合わせます。root の focus-within 状態により、group 全体に一貫した focus 表現を適用します。

コンポーネント	プロパティ	型	デフォルト	説明
`InputGroup`	`children`必須	`React.ReactNode`	`—`	control、addon、text、button を順番に配置します。
`InputGroup`	`aria-label / aria-labelledby`	`string`	`—`	必要に応じて role=group 全体にアクセシブルな名前を指定します。
`InputGroupInput`	`native input props`	`React.ComponentProps<"input">`	`—`	id、name、type、value、onChange などの native 属性です。
`InputGroupTextarea`	`native textarea props`	`React.ComponentProps<"textarea">`	`—`	複数行 control の native 属性です。
`InputGroupButton`	`type`	`"button" \| "submit" \| "reset"`	`"button"`	group action に使用する button type です。

プレビュー

検索・URL・メッセージ

インストール

使い方

API リファレンス

アクセシビリティ