diff --git a/packages/smarthr-ui/src/components/Browser/Browser.test.tsx b/packages/smarthr-ui/src/components/Browser/Browser.test.tsx
new file mode 100644
index 0000000000..4832d73473
--- /dev/null
+++ b/packages/smarthr-ui/src/components/Browser/Browser.test.tsx
@@ -0,0 +1,99 @@
+import { userEvent } from '@storybook/test'
+import { render, screen } from '@testing-library/react'
+import React from 'react'
+
+import { Browser } from './Browser'
+
+describe('Browser', () => {
+ test('アイテムが空のとき', () => {
+ render()
+ expect(screen.getByText(/該当する項目がありません/)).toBeInTheDocument()
+ })
+
+ test('アイテムが存在するとき、最初の要素がタブストップになる', async () => {
+ const onSelectItem = vi.fn()
+ render(
+ <>
+
+ 次の要素
+ ,
+ )
+ await userEvent.keyboard('[Tab]')
+ expect(screen.getByRole('radio', { name: 'アイテム1' })).toHaveFocus()
+ await userEvent.keyboard('[Tab]')
+ expect(screen.getByRole('link', { name: '次の要素' })).toHaveFocus()
+ })
+
+ test('値を指定すると、ラジオボタンがチェックされ、タブストップになる', async () => {
+ render(
+ <>
+
+ 次の要素
+ ,
+ )
+ expect(screen.getByRole('radio', { name: 'アイテム2' })).toBeChecked()
+ await userEvent.keyboard('[Tab]')
+ expect(screen.getByRole('radio', { name: 'アイテム2' })).toHaveFocus()
+ await userEvent.keyboard('[Tab]')
+ expect(screen.getByRole('link', { name: '次の要素' })).toHaveFocus()
+ })
+
+ test.each([
+ ['ArrowUp', '2-1'],
+ ['ArrowDown', '2-3'],
+ ['ArrowRight', '3-1'],
+ ['ArrowLeft', '1-1'],
+ ])('%sを押すと、%sが選択される', async (key, expected) => {
+ const onSelectItem = vi.fn()
+ render(
+ ,
+ )
+
+ await userEvent.click(screen.getByRole('radio', { name: 'アイテム2-1' }))
+ await userEvent.keyboard(`[${key}]`)
+ expect(onSelectItem).toHaveBeenCalledWith(expected)
+ })
+})
diff --git a/packages/smarthr-ui/src/components/Browser/Browser.tsx b/packages/smarthr-ui/src/components/Browser/Browser.tsx
new file mode 100644
index 0000000000..3f6596696e
--- /dev/null
+++ b/packages/smarthr-ui/src/components/Browser/Browser.tsx
@@ -0,0 +1,132 @@
+import React, { FC, KeyboardEventHandler, useCallback, useMemo } from 'react'
+import { tv } from 'tailwind-variants'
+
+import { DecoratorsType } from '../../types'
+import { Text } from '../Text'
+
+import { BrowserColumn } from './BrowserColumn'
+import { ItemNode, ItemNodeLike, RootNode } from './models'
+import { getElementIdFromNode } from './utils'
+
+const optionsListWrapper = tv({
+ base: 'smarthr-ui-Browser shr-flex shr-flex-row shr-flex-nowrap shr-min-h-[355px]',
+ variants: {
+ columnCount: {
+ 0: 'shr-justify-center shr-items-center',
+ 1: '[&>div]:shr-flex-1',
+ 2: '[&>div:nth-child(1)]:shr-flex-1 [&>div:nth-child(2)]:shr-flex-[2]',
+ 3: '[&>div]:shr-flex-1',
+ },
+ },
+ defaultVariants: {
+ columnCount: 0,
+ },
+})
+
+type Props = {
+ /** 表示する item の配列 */
+ items: ItemNodeLike[]
+ /** 選択中の item の値 */
+ value?: string
+ /** 選択された際に呼び出されるコールバック。第一引数に item の value を取る。 */
+ onSelectItem?: (value: string) => void
+ /** コンポーネント内の文言を変更するための関数を設定 */
+ decorators?: DecoratorsType<'notFoundTitle' | 'notFoundDescription'>
+}
+
+const NOT_FOUND_TITLE = '該当する項目がありません。'
+const NOT_FOUND_DESCRIPTION = '別の条件を試してください。'
+
+export const Browser: FC = (props) => {
+ const { value, decorators, onSelectItem } = props
+
+ const decoratedTexts = useMemo(
+ () => ({
+ notFoundTitle: decorators?.notFoundTitle?.(NOT_FOUND_TITLE) ?? NOT_FOUND_TITLE,
+ notFoundDescription:
+ decorators?.notFoundDescription?.(NOT_FOUND_DESCRIPTION) ?? NOT_FOUND_DESCRIPTION,
+ }),
+ [decorators],
+ )
+
+ const rootNode = useMemo(() => RootNode.from({ children: props.items }), [props.items])
+
+ const selectedNode = useMemo(() => {
+ if (value) {
+ return rootNode.findByValue(value)
+ }
+ return
+ }, [rootNode, value])
+
+ const columns = useMemo(() => rootNode.toViewData(value), [rootNode, value])
+
+ // FIXME: focusメソッドのfocusVisibleが主要ブラウザでサポートされたら使うようにしたい(現状ではマウスクリックでもfocusのoutlineが出てしまう)
+ // https://developer.mozilla.org/ja/docs/Web/API/HTMLElement/focus
+ const handleKeyDown: KeyboardEventHandler = useCallback(
+ (e) => {
+ if (e.key === 'ArrowUp' && selectedNode) {
+ const target = selectedNode.getPrev() ?? selectedNode.parent?.getLastChild()
+ if (target) {
+ e.preventDefault()
+ onSelectItem?.(target.value)
+ document.getElementById(getElementIdFromNode(target))?.focus()
+ }
+ }
+
+ if (e.key === 'ArrowDown' && selectedNode) {
+ const target = selectedNode.getNext() ?? selectedNode.parent?.getFirstChild()
+ if (target) {
+ e.preventDefault()
+ onSelectItem?.(target.value)
+ document.getElementById(getElementIdFromNode(target))?.focus()
+ }
+ }
+
+ if (e.key === 'ArrowLeft') {
+ const target = selectedNode?.parent
+ if (target instanceof ItemNode) {
+ e.preventDefault()
+ onSelectItem?.(target.value)
+ document.getElementById(getElementIdFromNode(target))?.focus()
+ }
+ }
+
+ if (e.key === 'ArrowRight' || e.key === 'Enter' || e.key === ' ') {
+ const target = selectedNode?.getFirstChild()
+ if (target) {
+ e.preventDefault()
+ onSelectItem?.(target.value)
+ document.getElementById(getElementIdFromNode(target))?.focus()
+ }
+ }
+ },
+ [selectedNode, onSelectItem],
+ )
+
+ return (
+ // eslint-disable-next-line smarthr/a11y-delegate-element-has-role-presentation, jsx-a11y/no-noninteractive-element-interactions
+
+ {columns.length > 0 ? (
+ columns.map((items, index) => (
+
+ ))
+ ) : (
+
+ {decoratedTexts.notFoundTitle}
+
+ {decoratedTexts.notFoundDescription}
+
+ )}
+
+ )
+}
diff --git a/packages/smarthr-ui/src/components/Browser/BrowserColumn.tsx b/packages/smarthr-ui/src/components/Browser/BrowserColumn.tsx
new file mode 100644
index 0000000000..dec3d72a35
--- /dev/null
+++ b/packages/smarthr-ui/src/components/Browser/BrowserColumn.tsx
@@ -0,0 +1,51 @@
+import React, { FC } from 'react'
+
+import { BrowserItem } from './BrowserItem'
+import { ItemNode } from './models'
+
+const getColumnId = (column: number) => `column-${column}`
+
+const getTabIndex = (selected: boolean, columnIndex: number, rowIndex: number, value?: string) => {
+ if (selected) {
+ return 0
+ }
+ if (!value && columnIndex === 0 && rowIndex === 0) {
+ return 0
+ }
+ return -1
+}
+
+type Props = {
+ value?: string
+ items: ItemNode[]
+ index: number
+ onSelectItem?: (value: string) => void
+}
+
+export const BrowserColumn: FC = (props) => {
+ const { items, index: columnIndex, value, onSelectItem } = props
+
+ return (
+
+
+ {items.map((item, rowIndex) => {
+ const selected = item.value === value
+ const ariaOwns =
+ selected && item.children.length > 0 ? getColumnId(columnIndex + 1) : undefined
+
+ return (
+ -
+
+
+ )
+ })}
+
+