diff --git a/apps/web/package.json b/apps/web/package.json
index c21f774..1035dcb 100644
--- a/apps/web/package.json
+++ b/apps/web/package.json
@@ -44,6 +44,7 @@
     "@pandacss/dev": "0.36.1",
     "@radix-ui/colors": "3.0.0",
     "@storybook/addon-a11y": "8.0.5",
+    "@storybook/addon-actions": "8.1.3",
     "@storybook/addon-essentials": "8.0.5",
     "@storybook/addon-interactions": "8.0.5",
     "@storybook/addon-links": "8.0.5",
diff --git a/apps/web/src/components/Checkbox/Checkbox.stories.tsx b/apps/web/src/components/Checkbox/Checkbox.stories.tsx
new file mode 100644
index 0000000..f5ef8c2
--- /dev/null
+++ b/apps/web/src/components/Checkbox/Checkbox.stories.tsx
@@ -0,0 +1,114 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { expect, fn, userEvent, within } from '@storybook/test';
+import { Checkbox } from './Checkbox';
+import { css } from 'styled-system/css';
+
+type Story = StoryObj<typeof Checkbox>;
+
+const meta: Meta<typeof Checkbox> = {
+  component: Checkbox,
+  tags: ['autodocs'],
+  args: {
+    id: 'example',
+    'aria-labelledby': 'example-label',
+    onChange: fn(),
+    checked: undefined,
+  },
+  decorators: [
+    // a11yテストでラベルが存在しないエラーを防ぐために<label>を追加する。ストーリー内では見えない方が都合がいいので、スクリーンリーダーにしか見えないようにする。
+    (Story) => (
+      <>
+        <Story />
+        <label id="example-label" htmlFor="example" className={css({ srOnly: true })}>
+          Example
+        </label>
+      </>
+    ),
+  ],
+  argTypes: {
+    id: {
+      description: 'チェックボックスのID',
+      control: {
+        type: 'text',
+      },
+    },
+    'aria-labelledby': {
+      description:
+        'ユーザーに向けた実際のラベルのID。独自の見た目を持つチェックボックスの実装に`<label>`を用いているため、スクリーンリーダーが読み上げるべきものを区別するために必要',
+      control: {
+        type: 'text',
+      },
+    },
+    checked: {
+      description: 'チェックボックスの値',
+      control: {
+        type: 'boolean',
+      },
+    },
+    disabled: {
+      description: 'チェックボックスを無効にする',
+      control: {
+        type: 'boolean',
+      },
+    },
+    defaultChecked: {
+      description: 'チェックボックスの初期値',
+      control: {
+        type: 'boolean',
+      },
+    },
+  },
+};
+
+export default meta;
+
+export const Default: Story = {
+  args: {
+    checked: true,
+  },
+  play: async ({ args, canvasElement }) => {
+    const canvas = within(canvasElement);
+    const checkbox = canvas.getByRole('checkbox');
+
+    checkbox.click();
+
+    checkbox.focus();
+    await userEvent.keyboard('[Space][Space][Space]', { delay: 100 });
+
+    // onChangeが1回呼び出されたことを確認
+    expect(args.onChange).toHaveBeenCalledTimes(4);
+  },
+};
+
+export const Unchecked: Story = {
+  args: {
+    checked: false,
+  },
+  play: Default.play,
+};
+
+export const Disabled: Story = {
+  args: {
+    disabled: true,
+  },
+  play: async ({ args, canvasElement }) => {
+    const canvas = within(canvasElement);
+    const checkbox = canvas.getByRole('checkbox');
+
+    checkbox.click();
+
+    checkbox.focus();
+    await userEvent.keyboard('[Space][Space][Space]', { delay: 100 });
+
+    // onChangeが1回呼び出されたことを確認
+    expect(args.onChange).toHaveBeenCalledTimes(0);
+  },
+};
+
+export const CheckedDisabled: Story = {
+  args: {
+    checked: true,
+    disabled: true,
+  },
+  play: Disabled.play,
+};
diff --git a/apps/web/src/components/Checkbox/Checkbox.tsx b/apps/web/src/components/Checkbox/Checkbox.tsx
new file mode 100644
index 0000000..226b6ed
--- /dev/null
+++ b/apps/web/src/components/Checkbox/Checkbox.tsx
@@ -0,0 +1,82 @@
+import { Check } from 'lucide-react';
+import { ComponentPropsWithoutRef, forwardRef, ReactNode } from 'react';
+import { css, cx } from 'styled-system/css';
+
+export type CheckboxProps = Omit<ComponentPropsWithoutRef<'input'>, 'type'> & {
+  id: string; // <label>で擬似的なチェックボックスを作るために必要
+  'aria-labelledby': string; // 実際にラベルテキストを含む<label>のidを必ず指定する
+};
+
+export const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(({ id, className, ...props }, ref): ReactNode => {
+  return (
+    <>
+      <label
+        htmlFor={id}
+        // a11yテストで、labelが複数存在するエラーを防ぐためにaria-hiddenを指定する。実際のlabelのidをaria-labelledbyで指定する
+        // @see https://dequeuniversity.com/rules/axe/4.9/form-field-multiple-labels
+        aria-hidden="true"
+        className={cx(
+          css({
+            display: 'flex',
+            justifyContent: 'center',
+            alignItems: 'center',
+            w: '8',
+            h: '8',
+            rounded: 'sm',
+            border: '1px solid',
+            borderColor: 'keyplate.6',
+            bg: 'keyplate.2',
+            cursor: 'pointer',
+            '&:has(+ input:focus-visible)': {
+              ringColor: 'cyan.9',
+              ringWidth: '2',
+              outlineStyle: 'solid',
+              ringOffset: '2px',
+            },
+            '&:has(+ input:checked)': {
+              bg: 'primary.3',
+              borderColor: 'primary.9',
+              color: 'primary.11',
+            },
+            '&:has(+ input:disabled)': {
+              bg: 'keyplate.4',
+              color: 'keyplate.11',
+              cursor: 'not-allowed',
+            },
+            '&:has(+ input:checked:disabled)': {
+              bg: 'keyplate.4',
+              color: 'keyplate.11',
+              borderColor: 'keyplate.9',
+            },
+            _hover: {
+              bg: 'keyplate.3',
+            },
+          }),
+          className,
+        )}
+      >
+        <Check
+          className={css({
+            'label:has(+ input:not(:checked)) &': {
+              display: 'none',
+            },
+          })}
+        />
+      </label>
+      <input
+        id={id}
+        type="checkbox"
+        ref={ref}
+        className={css({
+          appearance: 'none',
+          pos: 'absolute',
+          top: '0',
+          left: '0',
+          pointerEvents: 'none',
+        })}
+        {...props}
+      />
+    </>
+  );
+});
+Checkbox.displayName = 'Checkbox';
diff --git a/apps/web/src/features/navigation/components/PrefectureCheckbox/PrefectureCheckbox.stories.tsx b/apps/web/src/features/navigation/components/PrefectureCheckbox/PrefectureCheckbox.stories.tsx
new file mode 100644
index 0000000..3a14d1d
--- /dev/null
+++ b/apps/web/src/features/navigation/components/PrefectureCheckbox/PrefectureCheckbox.stories.tsx
@@ -0,0 +1,158 @@
+import { action } from '@storybook/addon-actions';
+import type { Meta, StoryObj } from '@storybook/react';
+import { expect, fn, userEvent, within } from '@storybook/test';
+import { PrefectureCheckbox } from './PrefectureCheckbox';
+import { css } from 'styled-system/css';
+
+type Story = StoryObj<typeof PrefectureCheckbox>;
+
+const meta: Meta<typeof PrefectureCheckbox> = {
+  component: PrefectureCheckbox,
+  tags: ['autodocs'],
+  args: {
+    prefCode: '1',
+    prefLocale: '北海道',
+    onChange: fn(),
+  },
+  decorators: [
+    // a11yテストでラベルが存在しないエラーを防ぐために見えない<label>を追加
+    (Story) => (
+      <>
+        <Story />
+        <label htmlFor="example" className={css({ srOnly: true })}>
+          Example
+        </label>
+      </>
+    ),
+  ],
+  parameters: {
+    nextjs: {
+      appDirectory: true,
+      navigation: {
+        push: fn(async (...args: unknown[]) => action('nextRouter.push')(...args)),
+        pathname: '/all',
+        query: {
+          prefCodes: '11,24',
+        },
+      },
+    },
+  },
+  argTypes: {
+    prefCode: {
+      description: 'チェックボックスの都道府県コード',
+      control: {
+        type: 'text',
+      },
+    },
+    prefLocale: {
+      description: '都道府県名',
+      control: {
+        type: 'text',
+      },
+    },
+    disabled: {
+      description: 'チェックボックスを無効にする',
+      control: {
+        type: 'boolean',
+      },
+    },
+    defaultChecked: {
+      description: 'チェックボックスの初期値',
+      control: {
+        type: 'boolean',
+      },
+    },
+  },
+};
+
+export default meta;
+
+export const Default: Story = {
+  parameters: {
+    nextjs: {
+      navigation: {
+        query: {
+          prefCodes: '8,12,13,14',
+        },
+      },
+    },
+  },
+  play: async ({ args, parameters, canvasElement }) => {
+    const canvas = within(canvasElement);
+    const checkbox = canvas.getByRole('checkbox');
+    const label = canvas.getByText(args.prefLocale);
+
+    // チェックボックスがチェックされていないことを確認
+    expect(checkbox).not.toBeChecked();
+
+    // ラベルが表示されていることを確認
+    expect(label).toBeVisible();
+
+    checkbox.focus();
+    await userEvent.keyboard('[Space]', { delay: 100 });
+
+    // onChangeが1回呼び出されたことを確認
+    expect(args.onChange).toHaveBeenCalledTimes(1);
+    // searchParamsのprefCodesに与えた都道府県コードが追加されたことを確認
+    expect(parameters.nextjs.navigation.push).toHaveBeenCalledTimes(1);
+    expect(parameters.nextjs.navigation.push).toHaveBeenCalledWith('/all?prefCodes=1,8,12,13,14');
+  },
+};
+
+export const Checked: Story = {
+  parameters: {
+    nextjs: {
+      navigation: {
+        query: {
+          prefCodes: '1,8,12,13,14',
+        },
+      },
+    },
+  },
+  play: async ({ args, parameters, canvasElement }) => {
+    const canvas = within(canvasElement);
+    const checkbox = canvas.getByRole('checkbox');
+    const label = canvas.getByText(args.prefLocale);
+
+    // チェックボックスがチェックされていることを確認
+    expect(checkbox).toBeChecked();
+
+    // ラベルが表示されていることを確認
+    expect(label).toBeVisible();
+
+    checkbox.focus();
+    await userEvent.keyboard('[Space]', { delay: 100 });
+
+    // onChangeが1回呼び出されたことを確認
+    expect(args.onChange).toHaveBeenCalledTimes(1);
+    // searchParamsのprefCodesに与えた都道府県コードが削除されたことを確認
+    expect(parameters.nextjs.navigation.push).toHaveBeenCalledTimes(1);
+    expect(parameters.nextjs.navigation.push).toHaveBeenCalledWith('/all?prefCodes=8,12,13,14');
+  },
+};
+
+export const Disabled: Story = {
+  parameters: Default.parameters,
+  args: {
+    disabled: true,
+  },
+  play: async ({ args, parameters, canvasElement }) => {
+    const canvas = within(canvasElement);
+    const checkbox = canvas.getByRole('checkbox');
+
+    checkbox.focus();
+    await userEvent.keyboard('[Space]', { delay: 100 });
+
+    // onChangeが呼び出されなかったことを確認
+    expect(args.onChange).toHaveBeenCalledTimes(0);
+    expect(parameters.nextjs.navigation.push).toHaveBeenCalledTimes(0);
+  },
+};
+
+export const DisabledChecked: Story = {
+  parameters: Checked.parameters,
+  args: {
+    disabled: true,
+  },
+  play: Disabled.play,
+};
diff --git a/apps/web/src/features/navigation/components/PrefectureCheckbox/PrefectureCheckbox.tsx b/apps/web/src/features/navigation/components/PrefectureCheckbox/PrefectureCheckbox.tsx
new file mode 100644
index 0000000..07cb869
--- /dev/null
+++ b/apps/web/src/features/navigation/components/PrefectureCheckbox/PrefectureCheckbox.tsx
@@ -0,0 +1,164 @@
+'use client';
+
+import { usePathname, useSearchParams, useRouter } from 'next/navigation';
+import { useCallback, useMemo } from 'react';
+import type { ReactNode, ChangeEvent } from 'react';
+import { Checkbox } from '@/components/Checkbox/Checkbox';
+import type { CheckboxProps } from '@/components/Checkbox/Checkbox';
+import { prefCodesSchema } from '@/models/prefCode';
+import type { PrefCode } from '@/models/prefCode';
+import { css, cx } from 'styled-system/css';
+
+/**
+ * 指定された都道府県コードが選択されているかどうかをsearchParamsから判定して返すカスタムフックです。
+ *
+ * @param prefCode 都道府県コード
+ * @returns 選択されている場合は true、そうでない場合は false
+ */
+const useIsPrefectureSelected = (prefCode: PrefCode): boolean => {
+  const searchParams = useSearchParams();
+  const isSelected = useMemo(
+    () =>
+      (
+        prefCodesSchema.parse(
+          searchParams
+            .getAll('prefCodes')
+            .map((str) => str.split(','))
+            .flat(),
+        ) as PrefCode[]
+      ).includes(prefCode),
+    [searchParams, prefCode],
+  );
+  return isSelected;
+};
+
+/**
+ * 都道府県コードの検索パラメータを更新するためのカスタムフックです。
+ *
+ * @returns {Object} addPrefCodeとremovePrefCodeの関数を含むオブジェクト
+ * @property {Function} addPrefCode - 都道府県コードを追加するための関数
+ * @property {Function} removePrefCode - 都道府県コードを削除するための関数
+ */
+const useUpdatePrefCodesSearchParams = () => {
+  const router = useRouter();
+  const pathname = usePathname();
+  const searchParams = useSearchParams();
+
+  const addPrefCode = useCallback(
+    (prefCode: PrefCode) => {
+      const params = new URLSearchParams(searchParams.toString());
+      const currentPrefCodes = prefCodesSchema.parse(
+        params
+          .getAll('prefCodes')
+          .map((str) => str.split(','))
+          .flat(),
+      ) as PrefCode[];
+      const newPrefCodes = Array.from(new Set([...currentPrefCodes, prefCode])).sort((a, b) => Number(a) - Number(b));
+      params.set('prefCodes', newPrefCodes.join(','));
+      router.push(`${pathname}?${params.toString().replace(/%2C/g, ',')}`);
+    },
+    [router, pathname, searchParams],
+  );
+
+  const removePrefCode = useCallback(
+    (prefCode: PrefCode) => {
+      const params = new URLSearchParams(searchParams.toString());
+      const currentPrefCodes = prefCodesSchema.parse(
+        params
+          .getAll('prefCodes')
+          .map((str) => str.split(','))
+          .flat(),
+      ) as PrefCode[];
+      const newPrefCodes = currentPrefCodes.filter((code) => code !== prefCode).sort((a, b) => Number(a) - Number(b));
+      params.set('prefCodes', newPrefCodes.join(','));
+      router.push(`${pathname}?${params.toString().replace(/%2C/g, ',')}`);
+    },
+    [router, pathname, searchParams],
+  );
+
+  return { addPrefCode, removePrefCode };
+};
+
+export type PrefectureCheckboxProps = Omit<CheckboxProps, 'id' | 'aria-labelledby' | 'checked'> & {
+  prefCode: PrefCode;
+  prefLocale: string;
+};
+
+/**
+ * 都道府県のチェックボックスコンポーネント。
+ * 値が変更されると、それに合わせてsearchParamsを更新します。
+ *
+ * @param prefCode 都道府県コード
+ * @param prefLocale 都道府県の名称
+ * @param onChange チェックボックスの変更イベントハンドラ
+ * @param className クラス名
+ * @param props 追加のプロパティ
+ * @returns チェックボックスコンポーネント
+ */
+export const PrefectureCheckbox = ({
+  prefCode,
+  prefLocale,
+  onChange,
+  className,
+  ...props
+}: PrefectureCheckboxProps): ReactNode => {
+  const { addPrefCode, removePrefCode } = useUpdatePrefCodesSearchParams();
+  const checked = useIsPrefectureSelected(prefCode);
+  const handleChange = useCallback(
+    (e: ChangeEvent<HTMLInputElement>) => {
+      if (e.target.checked) {
+        addPrefCode(prefCode);
+      } else {
+        removePrefCode(prefCode);
+      }
+      onChange?.(e);
+    },
+    [addPrefCode, removePrefCode, prefCode, onChange],
+  );
+
+  const checkboxId = `prefecture-${prefCode}`;
+  const actualLabelId = `prefecture-${prefCode}-label`;
+  return (
+    <label
+      id={actualLabelId}
+      htmlFor={checkboxId}
+      className={cx(
+        css({
+          display: 'flex',
+          flexDir: 'row',
+          justifyContent: 'start',
+          alignItems: 'center',
+          p: '1',
+          gap: '2.5',
+          rounded: 'lg',
+          '&:has(input:checked)': {
+            bg: 'primary.2',
+            color: 'primary.11',
+          },
+          '&:has(input:disabled)': {
+            color: 'keyplate.11',
+            cursor: 'not-allowed',
+          },
+          '&:has(input:checked:disabled)': {
+            bg: 'keyplate.2',
+            color: 'keyplate.11',
+          },
+          _hover: {
+            bg: 'keyplate.3',
+            '&:has(input:checked)': {
+              bg: 'primary.3',
+            },
+            '&:has(input:checked:disabled)': {
+              bg: 'keyplate.2',
+              color: 'keyplate.11',
+            },
+          },
+        }),
+        className,
+      )}
+    >
+      <Checkbox id={checkboxId} aria-labelledby={actualLabelId} checked={checked} onChange={handleChange} {...props} />
+      {prefLocale}
+    </label>
+  );
+};
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 4a24a3d..f108046 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -123,6 +123,9 @@ importers:
       '@storybook/addon-a11y':
         specifier: 8.0.5
         version: 8.0.5
+      '@storybook/addon-actions':
+        specifier: 8.1.3
+        version: 8.1.3
       '@storybook/addon-essentials':
         specifier: 8.0.5
         version: 8.0.5(@types/react@18.2.52)(react-dom@18.2.0)(react@18.2.0)
@@ -3963,6 +3966,17 @@ packages:
       uuid: 9.0.1
     dev: true
 
+  /@storybook/addon-actions@8.1.3:
+    resolution: {integrity: sha512-XG6clFT/lPOHEm/tHdWO3E5G28HIock2272BZNr15+DqVTRYyGRhuFQKxPb+CdRWCpT1VQnWS+L9S1+95wDlJw==}
+    dependencies:
+      '@storybook/core-events': 8.1.3
+      '@storybook/global': 5.0.0
+      '@types/uuid': 9.0.8
+      dequal: 2.0.3
+      polished: 4.3.1
+      uuid: 9.0.1
+    dev: true
+
   /@storybook/addon-backgrounds@8.0.5:
     resolution: {integrity: sha512-XKSnJm6bGVkG9hv6VSK+djz7ZbxEHwVpsSEUKtOEt/ScLFxU0mlsH8dd5aMy9/MAYuB93Y+bJ2SR5kyOjmi1zQ==}
     dependencies:
@@ -4426,6 +4440,13 @@ packages:
       ts-dedent: 2.2.0
     dev: true
 
+  /@storybook/core-events@8.1.3:
+    resolution: {integrity: sha512-eOs4HRrsEZz2FZFlMGwPuH9CGYBK8fkUS7mcHNPv8CqoHV8d3ErvDax8zA/KGRj3S6kWJ4PzI9IGuiDVvwuxhA==}
+    dependencies:
+      '@storybook/csf': 0.1.7
+      ts-dedent: 2.2.0
+    dev: true
+
   /@storybook/core-server@8.0.5(react-dom@18.2.0)(react@18.2.0):
     resolution: {integrity: sha512-aQGHRQZF4jbMqBT0sGptql+S3hiNksi4n6pPJPxGf6TE8TyRA1x7USjmvXHwv59vpmMm9HaRpGWzWCo4SqwNqw==}
     dependencies:
@@ -4547,6 +4568,12 @@ packages:
       type-fest: 2.19.0
     dev: true
 
+  /@storybook/csf@0.1.7:
+    resolution: {integrity: sha512-53JeLZBibjQxi0Ep+/AJTfxlofJlxy1jXcSKENlnKxHjWEYyHQCumMP5yTFjf7vhNnMjEpV3zx6t23ssFiGRyw==}
+    dependencies:
+      type-fest: 2.19.0
+    dev: true
+
   /@storybook/docs-mdx@3.0.0:
     resolution: {integrity: sha512-NmiGXl2HU33zpwTv1XORe9XG9H+dRUC1Jl11u92L4xr062pZtrShLmD4VKIsOQujxhhOrbxpwhNOt+6TdhyIdQ==}
     dev: true