React BootstrapのInput Groupを使用したフォームデザインの基本

まず、Input Groupコンポーネントを使用するためには、React Bootstrapをプロジェクトにインストールする必要があります。以下のコマンドを使用して、React Bootstrapをインストールします。

npm install react-bootstrap

インストールが完了したら、以下のようにInput Groupを使用してフォームデザインを行うことができます。

import React from 'react';
import {InputGroup, FormControl, Button} from 'react-bootstrap';
const ExampleForm = () => {
  return (
    <InputGroup className="mb-3">
      <FormControl placeholder="ユーザー名" aria-label="ユーザー名" />
      <Button variant="outline-secondary">検索</Button>
    </InputGroup>
  );
};
export default ExampleForm;

上記のコードでは、InputGroupコンポーネント内にFormControlとButtonを配置しています。FormControlはユーザー名の入力を受け付けるためのフィールドであり、Buttonは検索ボタンです。InputGroupコンポーネントは、これらの要素をグループ化し、スタイリングや配置を管理します。

このコード例では、mb-3というクラスをInputGroupコンポーネントに指定しています。これにより、上下に3単位のマージンが追加されます。また、placeholder属性とaria-label属性を使用して、ユーザー名フィールドのプレースホルダーテキストとアクセシビリティラベルを設定しています。Buttonコンポーネントにはoutline-secondaryというバリエーションを指定していますが、他のスタイルも選択することができます。

このように、React BootstrapのInput Groupを使用することで、簡単にフォームデザインを行うことができます。さまざまなプロパティやスタイリングオプションを使用して、さらに高度なフォームデザインを実現することも可能です。

以上が、React BootstrapのInput Groupを使用したフォームデザインの基本的な方法とコード例です。この記事を参考にしながら、自分のReactプロジェクトでフォームデザインを作成してみてください。