72はじめる
HextaUI

Input group

アイコン、テキスト、ボタン、キーボードのヒントを付けられる入力欄です。1つのボーダーとフォーカスリングを共有します。

"use client"

import * as React from "react"
import { IconArrowUp, IconLock, IconSearch } from "@tabler/icons-react"

import {
  InputGroup,
  InputGroupAddon,
  InputGroupButton,
  InputGroupClear,
  InputGroupCount,
  InputGroupInput,
  InputGroupPasswordToggle,
  InputGroupTextarea,
} from "@/components/ui/input-group"

export function InputGroupDemo() {
  const [message, setMessage] = React.useState("")

  return (
    <div className="flex w-full max-w-sm flex-col gap-4">
      <InputGroup>
        <InputGroupInput
          type="search"
          defaultValue="Accordion"
          placeholder="Search components"
          aria-label="Search components"
        />
        <InputGroupAddon>
          <IconSearch />
        </InputGroupAddon>
        <InputGroupAddon align="inline-end">
          <InputGroupClear />
        </InputGroupAddon>
      </InputGroup>
      <InputGroup>
        <InputGroupInput
          type="password"
          defaultValue="hunter2-but-longer"
          autoComplete="current-password"
          aria-label="Password"
        />
        <InputGroupAddon>
          <IconLock />
        </InputGroupAddon>
        <InputGroupAddon align="inline-end">
          <InputGroupPasswordToggle />
        </InputGroupAddon>
      </InputGroup>
      <InputGroup>
        <InputGroupTextarea
          value={message}
          onChange={(event) => setMessage(event.target.value)}
          maxLength={140}
          placeholder="Leave a note for the team"
          aria-label="Note"
        />
        <InputGroupAddon align="block-end">
          <InputGroupCount />
          <InputGroupButton
            variant="default"
            size="icon-xs"
            aria-label="Post note"
            disabled={!message.trim()}
            className="ms-auto"
          >
            <IconArrowUp />
          </InputGroupButton>
        </InputGroupAddon>
      </InputGroup>
    </div>
  )
}

インストール

pnpm dlx shadcn@latest add https://hextaui.com/r/input-group.json

コンポーネント、HextaUIのテーマトークン、依存するHextaUIコンポーネントを追加します。

使い方

import {
  InputGroup,
  InputGroupAddon,
  InputGroupButton,
  InputGroupClear,
  InputGroupCount,
  InputGroupInput,
  InputGroupPasswordToggle,
  InputGroupText,
  InputGroupTextarea,
} from "@/components/ui/input-group"
<InputGroup>
  <InputGroupInput placeholder="Search…" aria-label="Search" />
  <InputGroupAddon>
    <IconSearch />
  </InputGroupAddon>
  <InputGroupAddon align="inline-end">
    <InputGroupClear />
  </InputGroupAddon>
</InputGroup>

<InputGroupInput /> または <InputGroupTextarea /> を先に置き、その後にアドオンを置きます。アドオンは align で自分の位置を決めるため、フィールドがタブ順とスクリーンリーダーの両方で先頭になります。

グループは自分のフィールドを追跡するため、スマートなパーツには配線が不要です。<InputGroupClear />、<InputGroupPasswordToggle />、<InputGroupCount /> は、制御されているかどうかにかかわらず、フィールドから value、type、maxLength を読み取ります。

コンポジション

InputGroup
├── InputGroupAddon
│   ├── InputGroupText
│   ├── InputGroupButton
│   ├── InputGroupClear
│   ├── InputGroupCount
│   └── InputGroupPasswordToggle
└── InputGroupInput / InputGroupTextarea

例

アイコン

アイコンは、両側の枠線の内側に配置されます。アイコンをクリックすると入力欄にフォーカスするため、グループ全体が 1 つのフィールドのように感じられます。

import { IconCheck, IconMail, IconSearch } from "@tabler/icons-react"

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

export function InputGroupIcon() {
  return (
    <div className="flex w-full max-w-sm flex-col gap-4">
      <InputGroup>
        <InputGroupInput placeholder="Search…" aria-label="Search" />
        <InputGroupAddon>
          <IconSearch />
        </InputGroupAddon>
      </InputGroup>
      <InputGroup>
        <InputGroupInput
          type="email"
          defaultValue="[email protected]"
          aria-label="Email"
        />
        <InputGroupAddon>
          <IconMail />
        </InputGroupAddon>
        <InputGroupAddon align="inline-end">
          <IconCheck className="text-success" aria-label="Verified" />
        </InputGroupAddon>
      </InputGroup>
    </div>
  )
}

クリア

<InputGroupClear /> は、値があるとフェードインします。ブラウザの編集履歴を通じてクリアするため、Cmd+Z でテキストが戻り、onChange も発火します。Escape でもクリアされます。2 回目の Escape は、周囲のダイアログやポップオーバーに残されます。

"use client"

import * as React from "react"
import { IconSearch } from "@tabler/icons-react"

import {
  InputGroup,
  InputGroupAddon,
  InputGroupClear,
  InputGroupInput,
} from "@/components/ui/input-group"

const fruits = ["Apple", "Apricot", "Banana", "Blackberry", "Cherry", "Fig"]

export function InputGroupClearDemo() {
  const [query, setQuery] = React.useState("ap")
  const matches = fruits.filter((fruit) =>
    fruit.toLowerCase().includes(query.trim().toLowerCase())
  )

  return (
    <div className="flex w-full max-w-sm flex-col gap-3">
      <InputGroup>
        <InputGroupInput
          type="search"
          value={query}
          onChange={(event) => setQuery(event.target.value)}
          placeholder="Filter fruit"
          aria-label="Filter fruit"
        />
        <InputGroupAddon>
          <IconSearch />
        </InputGroupAddon>
        <InputGroupAddon align="inline-end">
          <InputGroupClear />
        </InputGroupAddon>
      </InputGroup>
      <p className="text-sm text-muted-foreground">
        {matches.length > 0 ? matches.join(", ") : "No fruit matches."}
      </p>
    </div>
  )
}

文字数

<InputGroupCount /> は、フィールドの maxLength に対する文字数を数えます。変化した桁だけが回転します。上限に近づくと数字が濃くなり、上限に達すると赤くなり、上限を超えて入力したキーはカウンターを揺らします。スクリーンリーダーには、フィールドが上限に近づいたときと到達したときにメッセージが読み上げられ、すべてのキー入力で読み上げられることはありません。

import { IconAt } from "@tabler/icons-react"

import {
  InputGroup,
  InputGroupAddon,
  InputGroupCount,
  InputGroupInput,
} from "@/components/ui/input-group"

export function InputGroupCountDemo() {
  return (
    <InputGroup className="max-w-sm">
      <InputGroupInput
        defaultValue="hextaui"
        maxLength={15}
        autoComplete="username"
        aria-label="Username"
      />
      <InputGroupAddon>
        <IconAt />
      </InputGroupAddon>
      <InputGroupAddon align="inline-end">
        <InputGroupCount />
      </InputGroupAddon>
    </InputGroup>
  )
}

テキスト

単位、通貨、URL の一部には <InputGroupText /> を使います。入力欄のパディングはアドオンの隣で小さくなるため、テキストは 1 つの値として読めます。

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

export function InputGroupTextDemo() {
  return (
    <div className="flex w-full max-w-sm flex-col gap-4">
      <InputGroup>
        <InputGroupInput
          placeholder="0.00"
          inputMode="decimal"
          aria-label="Price"
        />
        <InputGroupAddon>
          <InputGroupText>$</InputGroupText>
        </InputGroupAddon>
        <InputGroupAddon align="inline-end">
          <InputGroupText>USD</InputGroupText>
        </InputGroupAddon>
      </InputGroup>
      <InputGroup>
        <InputGroupInput placeholder="hextaui" aria-label="Domain" />
        <InputGroupAddon>
          <InputGroupText>https://</InputGroupText>
        </InputGroupAddon>
        <InputGroupAddon align="inline-end">
          <InputGroupText>.com</InputGroupText>
        </InputGroupAddon>
      </InputGroup>
    </div>
  )
}

Button

<InputGroupButton /> は、フィールドの内側に収まるサイズの ghost ボタンです。角丸はグループと同心で、独自のフォーカスリングを持ちます。

"use client"

import * as React from "react"
import { IconCheck, IconCopy, IconX } from "@tabler/icons-react"

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

export function InputGroupButtonDemo() {
  const [copied, setCopied] = React.useState(false)
  const [query, setQuery] = React.useState("button group")

  return (
    <div className="flex w-full max-w-sm flex-col gap-4">
      <InputGroup>
        <InputGroupInput
          readOnly
          defaultValue="https://hextaui.com/docs/input-group"
          aria-label="Share link"
        />
        <InputGroupAddon align="inline-end">
          <InputGroupButton
            size="icon-xs"
            aria-label={copied ? "Copied" : "Copy link"}
            onClick={async () => {
              await navigator.clipboard
                ?.writeText("https://hextaui.com/docs/input-group")
                .catch(() => {})
              setCopied(true)
              setTimeout(() => setCopied(false), 1500)
            }}
          >
            {copied ? <IconCheck /> : <IconCopy />}
          </InputGroupButton>
        </InputGroupAddon>
      </InputGroup>
      <InputGroup>
        <InputGroupInput
          value={query}
          onChange={(event) => setQuery(event.target.value)}
          placeholder="Search components…"
          aria-label="Search components"
        />
        <InputGroupAddon align="inline-end">
          {query ? (
            <InputGroupButton
              size="icon-xs"
              aria-label="Clear search"
              onClick={() => setQuery("")}
            >
              <IconX />
            </InputGroupButton>
          ) : null}
          <InputGroupButton variant="secondary">Search</InputGroupButton>
        </InputGroupAddon>
      </InputGroup>
    </div>
  )
}

キーボードのヒント

アドオン内のプレーンな <kbd> は、キーキャップとしてスタイルされます。視覚的なヒントにすぎないため、ショートカットのバインドは自分で行ってください。

import { IconSearch } from "@tabler/icons-react"

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

export function InputGroupKbd() {
  return (
    <div className="flex w-full max-w-sm flex-col gap-4">
      <InputGroup>
        <InputGroupInput placeholder="Search docs…" aria-label="Search docs" />
        <InputGroupAddon>
          <IconSearch />
        </InputGroupAddon>
        <InputGroupAddon align="inline-end">
          <kbd>⌘</kbd>
          <kbd>K</kbd>
        </InputGroupAddon>
      </InputGroup>
      <InputGroup>
        <InputGroupInput
          placeholder="Jump to file…"
          aria-label="Jump to file"
        />
        <InputGroupAddon align="inline-end">
          <kbd>/</kbd>
        </InputGroupAddon>
      </InputGroup>
    </div>
  )
}

Textarea

<InputGroupTextarea /> は、コンテンツに合わせて 16rem まで大きくなり、その後はスクロールします。高さは、跳ねずに行ごとにイージングします。block-end のアドオンはその下のツールバーになり、端にあるボタンには、置かれた角と同じインセットが付きます。

"use client"

import * as React from "react"
import { IconArrowUp, IconPaperclip } from "@tabler/icons-react"

import {
  InputGroup,
  InputGroupAddon,
  InputGroupButton,
  InputGroupCount,
  InputGroupTextarea,
} from "@/components/ui/input-group"

export function InputGroupTextareaDemo() {
  const [value, setValue] = React.useState("")

  return (
    <InputGroup className="max-w-sm">
      <InputGroupTextarea
        value={value}
        onChange={(event) => setValue(event.target.value)}
        maxLength={280}
        placeholder="Write a reply…"
        aria-label="Reply"
      />
      <InputGroupAddon align="block-end">
        <InputGroupButton size="icon-xs" aria-label="Attach a file">
          <IconPaperclip />
        </InputGroupButton>
        <InputGroupCount className="ms-auto" />
        <InputGroupButton
          variant="default"
          size="icon-xs"
          aria-label="Send"
          disabled={!value.trim()}
        >
          <IconArrowUp />
        </InputGroupButton>
      </InputGroupAddon>
    </InputGroup>
  )
}

ヘッダー

block-start のアドオンは、フィールドの上に配置されます。間に細い線を描画するには separator を追加します。

import { IconCopy, IconFileCode } from "@tabler/icons-react"

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

export function InputGroupBlockStart() {
  return (
    <InputGroup className="max-w-sm">
      <InputGroupTextarea
        defaultValue={'console.log("Hello from HextaUI")'}
        aria-label="script.js"
      />
      <InputGroupAddon align="block-start" separator>
        <InputGroupText>
          <IconFileCode />
          script.js
        </InputGroupText>
        <InputGroupButton size="icon-xs" aria-label="Copy" className="ms-auto">
          <IconCopy />
        </InputGroupButton>
      </InputGroupAddon>
    </InputGroup>
  )
}

パスワード

<InputGroupPasswordToggle /> は、type="password" のフィールドをテキストに切り替え、元に戻します。キャレットと選択範囲はそのまま保たれ、マウスでクリックしてもフォーカスはフィールドに残り、フォームの送信時にパスワードは再び隠されます。revealed で制御できます。

import { IconLock } from "@tabler/icons-react"

import {
  InputGroup,
  InputGroupAddon,
  InputGroupInput,
  InputGroupPasswordToggle,
} from "@/components/ui/input-group"

export function InputGroupPassword() {
  return (
    <InputGroup className="max-w-sm">
      <InputGroupInput
        type="password"
        defaultValue="correct horse battery staple"
        autoComplete="current-password"
        aria-label="Password"
      />
      <InputGroupAddon>
        <IconLock />
      </InputGroupAddon>
      <InputGroupAddon align="inline-end">
        <InputGroupPasswordToggle />
      </InputGroupAddon>
    </InputGroup>
  )
}

サイズ

グループの size は高さを設定し、<Input /> のサイズに合わせて入力欄に引き継がれます。ボタンはどのサイズでも同心の角を保ちます。

import { IconSearch } from "@tabler/icons-react"

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

export function InputGroupSizes() {
  return (
    <div className="flex w-full max-w-sm flex-col gap-4">
      {(["sm", "default", "lg"] as const).map((size) => (
        <InputGroup key={size} size={size}>
          <InputGroupInput
            placeholder={`Size ${size}`}
            aria-label={`Size ${size}`}
          />
          <InputGroupAddon>
            <IconSearch />
          </InputGroupAddon>
          <InputGroupAddon align="inline-end">
            <InputGroupButton>Go</InputGroupButton>
          </InputGroupAddon>
        </InputGroup>
      ))}
    </div>
  )
}

無効な値

入力欄に aria-invalid を設定すると、フォーカスリングを含めてグループ全体が赤くなります。メッセージは aria-describedby で関連付けます。

import { IconAt, IconAlertCircle } from "@tabler/icons-react"

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

export function InputGroupInvalid() {
  return (
    <div className="flex w-full max-w-sm flex-col gap-2">
      <InputGroup>
        <InputGroupInput
          defaultValue="preet@"
          aria-label="Email"
          aria-invalid
          aria-describedby="email-error"
        />
        <InputGroupAddon>
          <IconAt />
        </InputGroupAddon>
        <InputGroupAddon align="inline-end">
          <IconAlertCircle className="text-destructive" aria-hidden />
        </InputGroupAddon>
      </InputGroup>
      <p id="email-error" className="text-sm text-destructive">
        Enter a complete email address.
      </p>
    </div>
  )
}

無効

入力欄が無効な場合、グループ全体が暗くなり、その上で not-allowed カーソルが表示されます。アドオンのボタンはそのままでは使えてしまうため、あわせて無効にしてください。

import { IconLink } from "@tabler/icons-react"

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

export function InputGroupDisabled() {
  return (
    <InputGroup className="max-w-sm">
      <InputGroupInput
        disabled
        defaultValue="https://hextaui.com"
        aria-label="Link"
      />
      <InputGroupAddon>
        <IconLink />
      </InputGroupAddon>
      <InputGroupAddon align="inline-end">
        <InputGroupButton disabled>Copy</InputGroupButton>
      </InputGroupAddon>
    </InputGroup>
  )
}

読み込み中

インラインのアドオンは、内容が変わると新しい幅にイージングするため、スピナーが結果の件数に変わっても、フィールドが跳ねることはありません。スピナーはモーションが許可されている場合にのみ回転し、role="status" がテキストを通知します。

"use client"

import * as React from "react"
import { IconLoader2, IconSearch } from "@tabler/icons-react"

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

const packages = ["react", "react-dom", "react-hook-form", "redux", "remix"]

export function InputGroupLoading() {
  const [query, setQuery] = React.useState("re")
  const [pending, setPending] = React.useState(false)
  const timer = React.useRef<ReturnType<typeof setTimeout>>(undefined)
  const results = packages.filter((name) => name.includes(query.trim()))

  React.useEffect(() => () => clearTimeout(timer.current), [])

  return (
    <InputGroup className="max-w-sm">
      <InputGroupInput
        value={query}
        onChange={(event) => {
          setQuery(event.target.value)
          setPending(true)
          clearTimeout(timer.current)
          timer.current = setTimeout(() => setPending(false), 600)
        }}
        aria-label="Search packages"
        aria-busy={pending}
      />
      <InputGroupAddon>
        <IconSearch />
      </InputGroupAddon>
      <InputGroupAddon align="inline-end">
        <InputGroupText role="status">
          {pending ? (
            <>
              <IconLoader2 className="motion-safe:animate-spin" aria-hidden />
              Searching
            </>
          ) : results.length === 1 ? (
            "1 package"
          ) : (
            `${results.length} packages`
          )}
        </InputGroupText>
      </InputGroupAddon>
    </InputGroup>
  )
}

Dropdown

<InputGroupButton /> をドロップダウンのトリガーとしてレンダリングすると、入力の範囲を絞り込めます。

import { IconChevronDown } from "@tabler/icons-react"

import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuGroup,
  DropdownMenuItem,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"
import {
  InputGroup,
  InputGroupAddon,
  InputGroupButton,
  InputGroupInput,
} from "@/components/ui/input-group"

export function InputGroupDropdown() {
  return (
    <InputGroup className="max-w-sm">
      <InputGroupInput placeholder="Enter a search term" aria-label="Search" />
      <InputGroupAddon align="inline-end">
        <DropdownMenu>
          <DropdownMenuTrigger render={<InputGroupButton />}>
            Everywhere
            <IconChevronDown data-icon="inline-end" />
          </DropdownMenuTrigger>
          <DropdownMenuContent align="end">
            <DropdownMenuGroup>
              <DropdownMenuItem>Everywhere</DropdownMenuItem>
              <DropdownMenuItem>This project</DropdownMenuItem>
              <DropdownMenuItem>Documentation</DropdownMenuItem>
            </DropdownMenuGroup>
          </DropdownMenuContent>
        </DropdownMenu>
      </InputGroupAddon>
    </InputGroup>
  )
}

長いコンテンツ

長い値はグループを広げず、入力欄の中でスクロールします。長いアドオンのテキストは、最大幅を指定した省略用の span で囲みます。

import { IconWorld } from "@tabler/icons-react"

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

export function InputGroupLongContent() {
  return (
    <div className="flex w-72 flex-col gap-4">
      <InputGroup>
        <InputGroupInput
          defaultValue="averyveryverylongunbrokenvaluethatkeepsgoingandgoing"
          aria-label="Value"
        />
        <InputGroupAddon>
          <IconWorld />
        </InputGroupAddon>
        <InputGroupAddon align="inline-end">
          <InputGroupText>.example.com</InputGroupText>
        </InputGroupAddon>
      </InputGroup>
      <InputGroup>
        <InputGroupInput placeholder="name" aria-label="Subdomain" />
        <InputGroupAddon>
          <InputGroupText className="max-w-28">
            <span className="truncate">
              https://workspace-with-a-long-name.
            </span>
          </InputGroupText>
        </InputGroupAddon>
      </InputGroup>
    </div>
  )
}

右から左

アドオン、パディング、角丸は論理的な側を使うため、inline-start は右側になります。

import { IconArrowUp, IconSearch } from "@tabler/icons-react"

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

export function InputGroupRtl() {
  return (
    <div dir="rtl" className="flex w-full max-w-sm flex-col gap-4">
      <InputGroup>
        <InputGroupInput placeholder="ابحث…" aria-label="بحث" />
        <InputGroupAddon>
          <IconSearch />
        </InputGroupAddon>
        <InputGroupAddon align="inline-end">
          <kbd>⌘K</kbd>
        </InputGroupAddon>
      </InputGroup>
      <InputGroup>
        <InputGroupInput placeholder="0.00" aria-label="السعر" />
        <InputGroupAddon>
          <InputGroupText>ر.س</InputGroupText>
        </InputGroupAddon>
        <InputGroupAddon align="inline-end">
          <InputGroupButton variant="default" size="icon-xs" aria-label="إرسال">
            <IconArrowUp />
          </InputGroupButton>
        </InputGroupAddon>
      </InputGroup>
    </div>
  )
}

キーボード

キーアクション
Tabフィールドから各アドオンのボタンへ、ソースの順に移動します。
ShiftTabボタンとフィールドを逆順に移動します。
EscapeInputGroupClear がある場合は、フィールドをクリアします。すでに空の場合、Escape はそのまま通過します。

アクセシビリティ

  • すべてのフィールドには名前が必要です。表示されるラベル、Field、または aria-label を使ってください。アイコンとアドオンのテキストは、フィールドの名前には含まれません。
  • アイコンのみのボタンには aria-label を付けてください。
  • 通貨やドメインのように、アドオンのテキストに意味がある場合は、ラベルに含めるか、aria-describedby で参照してください。
  • Escape が同じ動作をするため、<InputGroupClear /> はタブ順からスキップされます。パスワードの切り替えボタンはタブで移動でき、同じ名前を保ち、aria-pressed が状態を伝えます。
  • 送信時にフィールドが無効と判定されると、グループは 1 回揺れます。モーションの低減が有効な場合は、赤い枠線が唯一の手がかりです。
  • タッチスクリーンでは、フォーカス時にスマートフォンがズームしないよう、フィールドのテキストは 16px 以上になります。

APIリファレンス

<InputGroupInput /> と <InputGroupTextarea /> は、レンダリングする要素の props を受け付けます。それ以外のパーツは、その要素の属性を受け付けます。

InputGroup

プロパティ型デフォルト
size入力欄に引き継がれる、グループの高さ。
"sm" | "default" | "lg""default"
属性説明
data-slot="input-group"CSS でグループを指定します。role="group" をレンダリングします。
data-size現在のサイズ。
data-filledフィールドに値がある間、付与されます。
data-shake送信に失敗した後、グループが揺れている間、付与されます。
data-disabledアドオンだけが無効な場合にグループを暗くしたいときは、自分で設定します。
--input-group-radiusグループの角丸の半径。ボタンとキーキャップはこれから角丸を算出します。
--input-group-height現在のサイズに対応するグループの高さ。

InputGroupInput

プロパティ型デフォルト
sizeグループから継承されます。
"sm" | "default" | "lg"–
aria-invalid
boolean–
disabled
booleanfalse
readOnly
booleanfalse
属性説明
data-slot="input-group-control"フィールドをマークします。グループは、フォーカス、不正、無効、読み取り専用の状態をここから読み取ります。
data-invalid周囲の Field が値を不正とマークしたときに付与されます。
data-disabledフィールドが無効なときに付与されます。
data-focusedフィールドにフォーカスがある間、付与されます。
data-filledフィールドに値があるときに付与されます。
data-dirty値が初期値と異なるときに付与されます。
data-touchedフィールドがフォーカスされて離れた後に付与されます。

InputGroupTextarea

プロパティ型デフォルト
autoResizeコンテンツに合わせて 16rem まで大きくなり、高さの間をイージングします。
booleantrue
shake送信時に無効と判定された場合、グループを揺らします。
booleantrue
rows
number–
aria-invalid
boolean–
disabled
booleanfalse
属性説明
data-slot="input-group-control"フィールドをマークします。グループは、フォーカス、不正、無効、読み取り専用の状態をここから読み取ります。
data-invalid周囲の Field が値を不正とマークしたときに付与されます。
data-disabledフィールドが無効なときに付与されます。
data-focusedフィールドにフォーカスがある間、付与されます。
data-filledフィールドに値があるときに付与されます。
data-dirty値が初期値と異なるときに付与されます。
data-touchedフィールドがフォーカスされて離れた後に付与されます。

InputGroupAddon

プロパティ型デフォルト
align
"inline-start" | "inline-end" | "block-start" | "block-end""inline-start"
separatorブロックのアドオンとフィールドの間に細い線を描画します。
booleanfalse
属性説明
data-slot="input-group-addon"CSS でアドオンを指定します。
data-align現在の配置。
data-separatorseparator が設定されているときに付与されます。
--input-group-addon-insetグループの端と、内側のボタンやキーキャップとの間の空間。

InputGroupButton

プロパティ型デフォルト
variant
"default" | "outline" | "secondary" | "ghost" | "destructive" | "link""ghost"
size
"xs" | "sm" | "icon-xs" | "icon-sm""xs"
type
string"button"
feedback読み込みと成功のフローを含め、Button のすべての props が使えます。
booleanfalse
属性説明
data-slot="input-group-button"CSS でアドオンのボタンを指定します。
data-size現在のサイズ。

InputGroupClear

プロパティ型デフォルト
onClearフィールドがクリアされた後に呼ばれます。
() => void–
aria-label
string"Clear"
children
ReactNode<IconX />
属性説明
data-slot="input-group-clear"CSS でクリアボタンを指定します。
data-visibleフィールドに値があり、編集可能な間、付与されます。

InputGroupPasswordToggle

プロパティ型デフォルト
revealed制御された state。自動で管理させるには、未設定のままにします。
boolean–
onRevealedChange
(revealed: boolean) => void–
aria-label
string"Show password"
属性説明
data-slot="input-group-password-toggle"CSS で切り替えボタンを指定します。
data-revealedパスワードが表示されている間、付与されます。

InputGroupCount

プロパティ型デフォルト
thresholdカウントが目立ち始める時点での残り文字数。
number10% of maxLength, at most 20
announcement文字数がしきい値を超えたとき、または上限に達したときの、スクリーンリーダー向けのメッセージ。
(remaining: number) => string–
属性説明
data-slot="input-group-count"CSSでカウントを指定します。
data-state="near" | "limit"しきい値内、および残り文字数がなくなったときに付与されます。
data-bump上限でキーが押されたときに、短時間付与されます。

InputGroupText

属性説明
data-slot="input-group-text"CSS でアドオンのテキストを指定します。

関連

使用しているブロック

Input group の上に構築されるブロック。