InputGroup

入力欄とアドオンを組み合わせるグループコンポーネント。

インポート

import { InputGroup, InputGroupAddon } from '@caroainc/ui-components'

個別サブパス（バンドルサイズを抑えたい場合）:

import { InputGroup, InputGroupAddon } from '@caroainc/ui-components/input-group'

Composition

InputGroup
├─ InputGroupAddon?
│  └─ InputGroupText? / Icon?
├─ Input / InputGroupInput / InputGroupTextarea
└─ InputGroupAddon?

InputGroupには入力部品を1つ置き、前後のAddonは任意です。テキストやIconはAddon内に置き、Inputと同列へ装飾だけを直接並べないでください。

基本的な使い方

https://

<InputGroup>
  <InputGroupAddon>https://</InputGroupAddon>
  <Input placeholder="example.com" />
</InputGroup>

右側にアドオン

円

<InputGroup>
  <Input placeholder="0" />
  <InputGroupAddon>円</InputGroupAddon>
</InputGroup>

両側にアドオン

USD

<InputGroup>
  <InputGroupAddon>$</InputGroupAddon>
  <Input placeholder="0.00" />
  <InputGroupAddon>USD</InputGroupAddon>
</InputGroup>

アイコン付き

<InputGroup>
  <InputGroupAddon>
    <Icon name="Search" size="sm" />
  </InputGroupAddon>
  <Input placeholder="検索..." />
</InputGroup>

エラー状態

内部のInputにaria-invalidを渡すと、InputGroup全体の枠が赤くなります。

<InputGroup>
  <InputGroupAddon>
    <Icon name="Mail" size="sm" />
  </InputGroupAddon>
  <Input aria-invalid={!!errorMessage} />
</InputGroup>

フォーム例

https://

円

<Field label="ウェブサイト">
  <InputGroup>
    <InputGroupAddon>https://</InputGroupAddon>
    <Input placeholder="example.com" />
  </InputGroup>
</Field>

Props

Prop	Type	Default	Description
`className`	`string`	`-`	追加のCSSクラス

InputGroup

On this page