【第2弾】Ant Design コンポーネントカタログ〜画像と用途で選べるフォーム・入力編〜

Posted at 2026-04-09

はじめに

前回の記事では、ボタンやカード、レイアウトなど「表示系」のコンポーネントを紹介しました。

今回は 第2弾：フォーム・入力編 として、テキスト入力やセレクトボックス、日付選択など「ユーザーからデータを受け取る」ためのコンポーネントをまとめます。

この記事の対象者

Ant Design で入力フォームを作りたい方
「この入力UIを作りたいけど、どのコンポーネント？」と迷う方
前回の記事を読んで「入力系も知りたい」と思った方

動作環境

antd: 6.3.5
react: 19.2.4
typescript: 6.0.2
Vite: 7.3.1

ブラウザで動かせるサンプル（StackBlitz）

サンプルコードも用意しているので、手元で動かしながら確認していただくことも可能です。

逆引き早見表

やりたいこと	コンポーネント
テキストを入力させたい	Input
数値を入力させたい	InputNumber
選択肢から選ばせたい	Select
複数の項目をON/OFFしたい	Checkbox
1つだけ選ばせたい	Radio
ON/OFFを切り替えたい	Switch
日付を選ばせたい	DatePicker
範囲を指定させたい	Slider
星で評価させたい	Rate
フォームとしてまとめたい	Form

1. テキスト入力（Input）

ユーザーにテキストを入力してもらうときに使用します。最も基本的な入力コンポーネントです。

i. 基本のバリエーション

コンポーネント / Prop	用途
`<Input>`	1行テキスト
`<Input.Password>`	パスワード（目のアイコンで表示切替）
`<Input.TextArea>`	複数行テキスト
`<Input.Search>`	検索ボックス

▼ プレビュー

ここをクリックしてコードを表示

TypeScript

import { Input, Flex } from 'antd';

const { Password, TextArea, Search } = Input;

<Flex vertical gap="middle" style={{ width: 360 }}>
  <Input placeholder="基本のテキスト入力" />
  <Password placeholder="パスワード入力" />
  <TextArea rows={3} placeholder="複数行テキスト" />
  <Search placeholder="検索..." enterButton />
</Flex>

ii. 装飾・状態

Prop	用途
`prefix` / `suffix`	入力欄の内側にアイコンやテキスト（単位など）を配置
`allowClear`	クリアボタン（×）を表示
`status="error"`	エラー状態（赤枠）
`disabled`	無効化
`maxLength` + `showCount`	文字数カウントを表示

▼ プレビュー

ここをクリックしてコードを表示

TypeScript

import { Input, Flex } from 'antd';
import { UserOutlined } from '@ant-design/icons';

<Flex vertical gap="middle" style={{ width: 360 }}>
  <Input prefix={<UserOutlined />} placeholder="ユーザー名" />
  <Input prefix="https://" suffix=".com" placeholder="mysite" />
  <Input allowClear placeholder="クリア可能" />
  <Input status="error" placeholder="エラー状態" />
  <Input disabled placeholder="無効化" />
  <Input.TextArea 
    maxLength={100} 
    showCount 
    placeholder="文字数カウント付き" 
    style={{ marginBottom: 24 }} 
  />
</Flex>

2. 数値入力（InputNumber）

数量・金額・年齢など、数値だけを入力させたいときに使用します。上下ボタンで増減もできます。

Prop	用途
`min` / `max`	最小値 / 最大値
`step`	増減の刻み幅
`prefix` / `suffix`	入力欄の内側に記号（¥など）や単位（kgなど）を配置
`formatter` / `parser`	表示フォーマットの変更（3桁カンマ区切りなど）
`disabled`	無効化

▼ プレビュー

ここをクリックしてコードを表示

TypeScript

import { InputNumber, Flex } from 'antd';

<Flex vertical gap="middle" style={{ width: 360 }}>
  <InputNumber min={1} max={100} defaultValue={10} style={{ width: '100%' }} />
  <InputNumber<number>
    prefix="¥"
    defaultValue={1000}
    formatter={(value) => `${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',')}
    parser={(value) => value?.replace(/,/g, '') as unknown as number}
    style={{ width: '100%' }}
  />
  <InputNumber
    min={0}
    max={10}
    step={0.1}
    defaultValue={3.5}
    suffix="kg"
    style={{ width: '100%' }}
  />
  <InputNumber disabled defaultValue={99} style={{ width: '100%' }} />
</Flex>

3. セレクトボックス（Select）

あらかじめ用意された選択肢から選ばせたいときに使用します。

Prop	用途
`options`	選択肢の配列
`placeholder`	未選択時の表示
`mode="multiple"`	複数選択
`mode="tags"`	自由入力＋選択
`allowClear`	選択を解除できる
`showSearch`	選択肢を検索できる
`disabled`	無効化

▼ プレビュー

ここをクリックしてコードを表示

TypeScript

import { Select, Flex } from 'antd';

const options = [
  { value: 'react', label: 'React' },
  { value: 'vue', label: 'Vue' },
  { value: 'angular', label: 'Angular' },
  { value: 'svelte', label: 'Svelte' },
];

<Flex vertical gap="middle" style={{ width: 360 }}>
  <Select placeholder="選択してください" options={options} style={{ width: '100%' }} />
  <Select
    mode="multiple"
    placeholder="複数選択できます"
    options={options}
    style={{ width: '100%' }}
  />
  {/* mode="tags" は選択肢にない値も自由入力で追加できます */}
  <Select
    mode="tags"
    placeholder="自由入力＋選択できます"
    options={options}
    style={{ width: '100%' }}
  />
  <Select
    showSearch
    allowClear
    placeholder="検索できます"
    options={options}
    style={{ width: '100%' }}
  />
  <Select
    disabled
    defaultValue="react"
    options={options}
    style={{ width: '100%' }}
  />
</Flex>

4. チェックボックス（Checkbox）

複数の項目を ON/OFF させたいときに使用します。

コンポーネント / Prop	用途
`<Checkbox>`	単体のON/OFF
`defaultChecked`	初期状態をONにする
`disabled`	無効化
`<Checkbox.Group>`	複数の選択肢をまとめて管理

▼ プレビュー

ここをクリックしてコードを表示

TypeScript

import { Checkbox, Flex } from 'antd';

<Flex vertical gap="middle">
  {/* 単体 */}
  <Checkbox>利用規約に同意する</Checkbox>
  <Checkbox defaultChecked>デフォルトON</Checkbox>
  <Checkbox disabled>無効化</Checkbox>

  {/* グループ */}
  <Checkbox.Group
    options={['React', 'Vue', 'Angular', 'Svelte']}
    defaultValue={['React']}
  />
</Flex>

5. ラジオボタン（Radio）

複数の選択肢から 1つだけ 選ばせたいときに使用します。

コンポーネント / Prop	用途
`<Radio.Group>`	選択肢をまとめて管理
`<Radio.Button>`	ボタン型のラジオ
`defaultValue`	初期選択する値を指定
`optionType="button"`	ボタン型で表示
`buttonStyle="outline"`	ボタン型の枠線スタイル（デフォルト）
`buttonStyle="solid"`	ボタン型の塗りつぶしスタイル

▼ プレビュー

ここをクリックしてコードを表示

TypeScript

import { Radio, Flex } from 'antd';

<Flex vertical gap="middle">
  {/* 通常のラジオ */}
  <Radio.Group defaultValue="react">
    <Radio value="react">React</Radio>
    <Radio value="vue">Vue</Radio>
    <Radio value="angular">Angular</Radio>
  </Radio.Group>

  {/* ボタン型（outline：デフォルト） */}
  <Radio.Group defaultValue="monthly" optionType="button" buttonStyle="outline">
    <Radio.Button value="daily">日次</Radio.Button>
    <Radio.Button value="weekly">週次</Radio.Button>
    <Radio.Button value="monthly">月次</Radio.Button>
  </Radio.Group>

  {/* ボタン型（solid：塗りつぶし） */}
  <Radio.Group defaultValue="monthly" optionType="button" buttonStyle="solid">
    <Radio.Button value="daily">日次</Radio.Button>
    <Radio.Button value="weekly">週次</Radio.Button>
    <Radio.Button value="monthly">月次</Radio.Button>
  </Radio.Group>
</Flex>

6. スイッチ（Switch）

二択の切り替え（ON / OFF）に使用します。設定画面など、「操作した瞬間に状態を反映させたい」 場面などに適しています。

Prop	用途
`defaultChecked`	初期状態をONにする
`checkedChildren` / `unCheckedChildren`	ON/OFF時のラベル
`size`	サイズの指定（`default` または `small`）
`loading`	ローディング状態。非同期処理中に再操作を防ぐ際などに使用
`disabled`	無効化

▼ プレビュー

ここをクリックしてコードを表示

TypeScript

import { Switch, Flex } from 'antd';
import { CheckOutlined, CloseOutlined } from '@ant-design/icons';

<Flex gap="middle" align="center" wrap="wrap">
  <Switch defaultChecked />
  <Switch checkedChildren="ON" unCheckedChildren="OFF" defaultChecked />
  <Switch
    checkedChildren={<CheckOutlined />}
    unCheckedChildren={<CloseOutlined />}
    defaultChecked
  />
  <Switch size="small" defaultChecked />
  <Switch loading defaultChecked />
  <Switch disabled />
</Flex>

7. 日付選択（DatePicker）

日付や期間をカレンダーUIから選ばせたいときに使用します。

コンポーネント / Prop	用途
`<DatePicker>`	日付を1つ選択
`<DatePicker.RangePicker>`	開始日〜終了日
`picker="month"`	月の選択
`picker="year"`	年の選択
`showTime`	時刻も選択可能にする
`disabled`	無効化

▼ プレビュー

入力後画面	DatePicker

picker="month"	picker="year"

showTime	DatePicker.RangePicker

ここをクリックしてコードを表示

TypeScript

import { DatePicker, Flex } from 'antd';

const { RangePicker } = DatePicker;

<Flex vertical gap="middle" style={{ width: 360 }}>
  <DatePicker placeholder="日付を選択" style={{ width: '100%' }} />
  <DatePicker picker="month" placeholder="月を選択" style={{ width: '100%' }} />
  <DatePicker picker="year" placeholder="年を選択" style={{ width: '100%' }} />
  <DatePicker showTime placeholder="日時を選択" style={{ width: '100%' }} />
  <RangePicker style={{ width: '100%' }} />
  <DatePicker disabled style={{ width: '100%' }} />
</Flex>

8. スライダー（Slider）

音量や価格帯など、範囲のある値を直感的に入力させたいときに使用します。

Prop	用途
`min` / `max`	最小値 / 最大値
`defaultValue`	初期の値
`range`	範囲選択（2つのつまみ）
`step`	刻み幅
`marks`	目盛りラベル
`disabled`	無効化

▼ プレビュー

ここをクリックしてコードを表示

TypeScript

import { Slider, Flex } from 'antd';

<Flex vertical gap="middle" style={{ width: 360 }}>
  <Slider defaultValue={30} />
  <Slider min={10} max={50} step={5} defaultValue={30} />
  <Slider range defaultValue={[20, 60]} />
  <Slider
    marks={{ 0: '0°C', 25: '25°C', 50: '50°C', 75: '75°C', 100: '100°C' }}
    defaultValue={37}
  />
  <Slider disabled defaultValue={50} />
</Flex>

9. 評価（Rate）

満足度やレビューなど、星（★）で段階評価させたいときに使用します。

Prop	用途
`defaultValue`	初期の値
`allowHalf`	半分の星（★半分）を許可
`count`	星の数を変更
`character`	星以外の文字やアイコンに変更
`disabled`	無効化（表示専用）

▼ プレビュー

ここをクリックしてコードを表示

TypeScript

import { Rate, Flex } from 'antd';
import { HeartOutlined } from '@ant-design/icons';

<Flex vertical gap="middle">
  <Rate defaultValue={3} />
  <Rate allowHalf defaultValue={2.5} />
  <Rate count={10} defaultValue={7} />
  <Rate character={<HeartOutlined />} allowHalf style={{ color: '#eb2f96' }} />
  <Rate disabled defaultValue={4} />
</Flex>

10. フォーム（Form）

上記の入力コンポーネントを まとめて管理し、バリデーションや送信処理を行いたいときに使用します。

i. 基本構造

Form > Form.Item > 各入力コンポーネントの構造で組みます。

Prop (Form)	用途
`layout`	レイアウト（ `horizontal`, `vertical`, `inline` ）
`onFinish`	バリデーション通過後の送信処理
`initialValues`	初期値

Prop (Form.Item)	用途
`label`	ラベル
`name`	フィールド名（値のキー）
`rules`	バリデーションルール

▼ プレビュー

ここをクリックしてコードを表示

TypeScript

import { Form, Input, Select, InputNumber, Switch, Button, DatePicker, Checkbox, Rate, message } from 'antd';

const App: React.FC = () => {
  const [form] = Form.useForm();

  const onFinish = (values: any) => {
    console.log('フォームの値:', values);
    message.success('送信しました！');
  };

  return (
    <Form
      form={form}
      layout="vertical"
      onFinish={onFinish}
      initialValues={{ age: 25, notify: true }}
      style={{ maxWidth: 480 }}
    >
      <Form.Item
        label="ユーザー名"
        name="username"
        rules={[{ required: true, message: 'ユーザー名を入力してください' }]}
      >
        <Input placeholder="ユーザー名" />
      </Form.Item>

      <Form.Item
        label="メールアドレス"
        name="email"
        rules={[
          { required: true, message: 'メールアドレスを入力してください' },
          { type: 'email', message: '正しいメールアドレスを入力してください' },
        ]}
      >
        <Input placeholder="example@mail.com" />
      </Form.Item>

      <Form.Item label="年齢" name="age">
        <InputNumber min={0} max={150} style={{ width: '100%' }} />
      </Form.Item>

      <Form.Item label="職種" name="role">
        <Select
          placeholder="選択してください"
          options={[
            { value: 'frontend', label: 'フロントエンド' },
            { value: 'backend', label: 'バックエンド' },
            { value: 'designer', label: 'デザイナー' },
          ]}
        />
      </Form.Item>

      <Form.Item label="入社日" name="joinDate">
        <DatePicker style={{ width: '100%' }} />
      </Form.Item>

      <Form.Item label="満足度" name="rating">
        <Rate />
      </Form.Item>

      <Form.Item label="通知を受け取る" name="notify" valuePropName="checked">
        <Switch />
      </Form.Item>

      <Form.Item
        name="agreement"
        valuePropName="checked"
        rules={[
          {
            validator: (_, value) =>
  value ? Promise.resolve() : Promise.reject(new Error('利用規約への同意が必要です')),
          },
        ]}
      >
        <Checkbox>利用規約に同意する</Checkbox>
      </Form.Item>

      <Form.Item>
        <Button type="primary" htmlType="submit" block>
          送信
        </Button>
      </Form.Item>
    </Form>
  );
};

ii. レイアウトの違い

layout プロパティで、ラベルと入力欄の配置を変えられます。

layout	配置
`vertical`（デフォルト）	ラベルが上、入力欄が下
`horizontal`	ラベルが左、入力欄が右
`inline`	すべてが横一列

▼ プレビュー

ここをクリックしてコードを表示

TypeScript

import { Form, Input, Button } from 'antd';

{/* Horizontal レイアウトの例 */}
<Form layout="horizontal" labelCol={{ span: 4 }} wrapperCol={{ span: 20 }}>
  <Form.Item label="名前" name="name">
    <Input placeholder="名前" />
  </Form.Item>
  <Form.Item label="メール" name="email">
    <Input placeholder="メール" />
  </Form.Item>
  <Form.Item wrapperCol={{ offset: 4 }}>
    <Button type="primary" htmlType="submit">検索</Button>
  </Form.Item>
</Form>

{/* Inline レイアウトの例 */}
<Form layout="inline">
  <Form.Item label="名前" name="name">
    <Input placeholder="名前" />
  </Form.Item>
  <Form.Item label="メール" name="email">
    <Input placeholder="メール" />
  </Form.Item>
  <Form.Item>
    <Button type="primary" htmlType="submit">検索</Button>
  </Form.Item>
</Form>

おわりに

本記事では、Ant Design のフォーム・入力系コンポーネントを紹介しました。

Form コンポーネントは特に強力で、バリデーションや値の管理を宣言的に記述できるのが大きな魅力です。

Ant Design には今回紹介した以外にも、Upload（ファイルアップロード）、Transfer（リスト間移動）、Cascader（階層選択）など、さまざまな入力系コンポーネントが用意されています。さらに詳しく知りたい方は、ぜひ公式ドキュメントもチェックしてみてください。

前回に引き続き、いいねやコメントをいただけると励みになります！

参考資料

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up

【第2弾】Ant Design コンポーネントカタログ 〜画像と用途で選べるフォーム・入力編〜

はじめに

この記事の対象者

動作環境

ブラウザで動かせるサンプル（StackBlitz）

逆引き早見表

1. テキスト入力（Input）

i. 基本のバリエーション

ii. 装飾・状態

2. 数値入力（InputNumber）

3. セレクトボックス（Select）

4. チェックボックス（Checkbox）

5. ラジオボタン（Radio）

6. スイッチ（Switch）

7. 日付選択（DatePicker）

8. スライダー（Slider）

9. 評価（Rate）

10. フォーム（Form）

i. 基本構造

ii. レイアウトの違い

おわりに

参考資料

【第2弾】Ant Design コンポーネントカタログ〜画像と用途で選べるフォーム・入力編〜