フォームと選択@neumorphism-ui/input-group

Input Group

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

@neumorphism-ui/input-group

Registry JSON

プレビュー

検索

ウェブサイト

https://

メッセージ

インストール

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

CLI が npm 依存関係、base token、utils、コンポーネントソースを順番に処理します。

この Registry を初めて使う場合は、先に namespace の設定を完了してください。

使い方

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

Import

import {
  InputGroup,
  InputGroupAddon,
  InputGroupButton,
  InputGroupInput,
  InputGroupText,
} from "@/components/ui/input-group"
import { Label } from "@/components/ui/label"

Example

<div className="grid gap-2">
  <Label htmlFor="workspace">ワークスペース</Label>
  <InputGroup>
    <InputGroupAddon aria-hidden="true"><svg aria-hidden="true" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><circle cx="11" cy="11" r="7" /><path d="m20 20-4-4" /></svg></InputGroupAddon>
    <InputGroupInput id="workspace" defaultValue="soft-interface" />
    <InputGroupButton type="button">検索</InputGroupButton>
  </InputGroup>
</div>

API リファレンス

コンポーネント	プロパティ	型	デフォルト	説明
`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 です。

プレビュー

インストール

使い方

Import

Example

API リファレンス

アクセシビリティ