k8ordo
  • UI
  • Form
  • State
  • Router
  • Static
  • Server
ダークモードに切り替え
  • Get Started
  • Theming
  • i18n
  • Components
  • Hooks
  • Helpers
  • AI
ナビゲーションを開く
Buttons
  • Button
  • IconButton
Navigation
  • Anchor
  • Tabs
  • Breadcrumb
  • Pagination
Forms
  • TextField
  • Textarea
  • NumberField
  • Select
  • Checkbox
  • CheckboxCard
  • CheckboxGroup
  • Switch
  • PasswordInput
  • Radio
  • RadioCard
  • Autocomplete
  • Slider
  • FileField
  • FormControl
  • Form
Data Display
  • Accordion
  • Avatar
  • Badge
  • Card
  • Code
  • Table
  • Heading
Feedback
  • Alert
  • Skeleton
  • Spinner
  • Toast
  • Progress
Overlays
  • Dialog
  • Drawer
  • Modal
  • Popover
  • DropdownMenu
  • Tooltip
  • ListBox
Layout
  • Stack
  • Grid
  • Separator
  • ScrollLinked
Media
  • Icons
k8ordo

Baselineに入った機能を、制限なく使うReactのライブラリ群。

パッケージ
  • @k8ordo/ui
  • @k8ordo/form
  • @k8ordo/state
  • @k8ordo/router
  • @k8ordo/static
  • @k8ordo/server
UI
  • Get Started
  • Theming
  • i18n
  • Components
  • Hooks
  • Helpers
  • AIチャット
  • Generative UI
  • AIエージェント
  • Storybook
リソース
  • GitHub
  • npm

© 2026 k8o — MIT License

組版 — Noto Sans JP / M PLUS 2

Components

Buttons
  • Button
  • IconButton
Navigation
  • Anchor
  • Tabs
  • Breadcrumb
  • Pagination
Forms
  • TextField
  • Textarea
  • NumberField
  • Select
  • Checkbox
  • CheckboxCard
  • CheckboxGroup
  • Switch
  • PasswordInput
  • Radio
  • RadioCard
  • Autocomplete
  • Slider
  • FileField
  • FormControl
  • Form
Data Display
  • Accordion
  • Avatar
  • Badge
  • Card
  • Code
  • Table
  • Heading
Feedback
  • Alert
  • Skeleton
  • Spinner
  • Toast
  • Progress
Overlays
  • Dialog
  • Drawer
  • Modal
  • Popover
  • DropdownMenu
  • Tooltip
  • ListBox
Layout
  • Stack
  • Grid
  • Separator
  • ScrollLinked
Media
  • Icons

Accordion

折りたたみできるコンテンツパネル

Storybookで確認

インポート

使い方

縦書きプレビューに切り替え

デフォルトで開く

縦書きプレビューに切り替え

複数デフォルトで開く

縦書きプレビューに切り替え

Props

Accordion.Root

children?
Type: ReactNode
Default: -
PropTypeDefault
children?ReactNode-

Accordion.Item

children?
Type: ReactNode
Default: -
defaultOpen?
Type: boolean
Default: false
isOpen?
Type: boolean
Default: -
onChange?

k8ordo UI is a React UI component library.

Install via npm, yarn, or pnpm.

Yes, it follows WAI-ARIA accordion patterns.

This panel is open on initial render.

This panel is closed on initial render.

This panel is open by default.

This panel is also open by default.

This panel is closed by default.

Type:
(isOpen: boolean) => void
Default: -
PropTypeDefault
children?ReactNode-
defaultOpen?booleanfalse
isOpen?boolean-
onChange?(isOpen: boolean) => void-

Accordion.Button

children?
Type: ReactNode
Default: -
PropTypeDefault
children?ReactNode-

Accordion.Panel

children?
Type: ReactNode
Default: -
PropTypeDefault
children?ReactNode-
import { Accordion } from '@k8ordo/ui';
<Accordion.Root>
  <Accordion.Item>
    <h3>
      <Accordion.Button>What is k8ordo UI?</Accordion.Button>
    </h3>
    <Accordion.Panel>
      <p>k8ordo UI is a React UI component library.</p>
    </Accordion.Panel>
  </Accordion.Item>
  <Accordion.Item>
    <h3>
      <Accordion.Button>How do I install it?</Accordion.Button>
    </h3>
    <Accordion.Panel>
      <p>Install via npm, yarn, or pnpm.</p>
    </Accordion.Panel>
  </Accordion.Item>
  <Accordion.Item>
    <h3>
      <Accordion.Button>Is it accessible?</Accordion.Button>
    </h3>
    <Accordion.Panel>
      <p>Yes, it follows WAI-ARIA accordion patterns.</p>
    </Accordion.Panel>
  </Accordion.Item>
</Accordion.Root>
<Accordion.Root>
  <Accordion.Item defaultOpen>
    <h3>
      <Accordion.Button>Open by default</Accordion.Button>
    </h3>
    <Accordion.Panel>
      <p>This panel is open on initial render.</p>
    </Accordion.Panel>
  </Accordion.Item>
  <Accordion.Item>
    <h3>
      <Accordion.Button>Closed by default</Accordion.Button>
    </h3>
    <Accordion.Panel>
      <p>This panel is closed on initial render.</p>
    </Accordion.Panel>
  </Accordion.Item>
</Accordion.Root>
<Accordion.Root>
  <Accordion.Item defaultOpen>
    <h3>
      <Accordion.Button>Section A</Accordion.Button>
    </h3>
    <Accordion.Panel>
      <p>This panel is open by default.</p>
    </Accordion.Panel>
  </Accordion.Item>
  <Accordion.Item defaultOpen>
    <h3>
      <Accordion.Button>Section B</Accordion.Button>
    </h3>
    <Accordion.Panel>
      <p>This panel is also open by default.</p>
    </Accordion.Panel>
  </Accordion.Item>
  <Accordion.Item>
    <h3>
      <Accordion.Button>Section C</Accordion.Button>
    </h3>
    <Accordion.Panel>
      <p>This panel is closed by default.</p>
    </Accordion.Panel>
  </Accordion.Item>
</Accordion.Root>