Accordion

Stable

A collapsible content component with expandable sections based on DaisyUI. Supports individual accordions, grouped radio behavior, and join layouts.

API Reference

c-accordion

Attribute	Description	Type	Default
`title`	Text title for the accordion header (required)	string	`""`
`variant`	Visual style variant for collapse indicators	string	`"arrow"`
`group`	Groups accordions for radio button behavior (only one open at a time)	string	`""`
`color`	Background color theme	string	`""`
`bordered`	Adds border styling	boolean	`False`
`join_item`	Makes accordion part of a join layout	boolean	`False`
`checked`	Sets initial checked/open state	boolean	`False`

c-accordion.group (join container)

Attribute	Description	Type	Default
`color`	Background color for the join group	string	`"100"`

variant

arrow plus

color

100 200 300 primary secondary accent neutral info success warning error

Without group: each accordion works independently (checkbox behavior) — multiple can be open simultaneously.

With group: only one accordion in the group can be open (radio behavior).

Join layout: use c-accordion.group + join_item for a seamless connected appearance.

CSS-only: the accordion uses a hidden checkbox (or radio for grouped) to toggle state. The title is wrapped in a <label> which is keyboard-reachable and activatable with Enter or Space.

Screen readers: the collapse state is not automatically announced. For content that requires explicit disclosure semantics, consider a custom solution with aria-expanded.

Examples

Usage


<c-accordion title="Question?" bordered>
  Answer content here.
</c-accordion>

Basic Accordion

What is Kaiko Systems?

Kaiko Systems is a maritime technology company providing innovative solutions for vessel management, analytics, and operational efficiency.

How does the platform work?

Our platform integrates with your existing systems to provide real-time monitoring, predictive analytics, and automated reporting capabilities.

<c-accordion title="What is Kaiko Systems?" bordered>
  Kaiko Systems is a maritime technology company...
</c-accordion>

Variants

Default

Default Style

This is the default accordion style with no special indicators.

Arrow

Arrow Style

This accordion uses arrow indicators to show expand/collapse state.

Plus

Plus Style

This accordion uses plus/minus indicators for the expand/collapse state.

<c-accordion title="Default Style" bordered>Content...</c-accordion>
<c-accordion title="Arrow Style" variant="arrow" bordered>Content...</c-accordion>
<c-accordion title="Plus Style" variant="plus" bordered>Content...</c-accordion>

Colors

Base 100 (Default)

This is the default accordion with base-100 background.

Base 200

This accordion uses base-200 background color.

Primary

This accordion uses primary color theme.

Secondary

This accordion uses secondary color theme.

<c-accordion title="Primary" color="primary" variant="arrow" bordered>Content...</c-accordion>

Radio Group Behavior

When accordions share the same group name, only one can be open at a time.

How do I create an account?

Click the "Sign Up" button in the top right corner and follow the registration process.

I forgot my password. What should I do?

Click on "Forgot Password" on the login page and follow the instructions sent to your email.

How do I update my profile information?

Go to "My Account" settings and select "Edit Profile" to make changes.

<c-accordion title="Question 1" group="faq" variant="arrow" bordered checked>
  Answer 1...
</c-accordion>
<c-accordion title="Question 2" group="faq" variant="arrow" bordered>
  Answer 2...
</c-accordion>

Join Layout

Use the group component to create a seamless joined layout with radio button behavior.

How do I create an account?

Click the "Sign Up" button in the top right corner and follow the registration process.

I forgot my password. What should I do?

Click on "Forgot Password" on the login page and follow the instructions sent to your email.

How do I update my profile information?

Go to "My Account" settings and select "Edit Profile" to make changes.

<c-accordion.group color="100">
  <c-accordion title="Question 1" group="faq" variant="arrow" join_item checked>
    Answer 1...
  </c-accordion>
  <c-accordion title="Question 2" group="faq" variant="arrow" join_item>
    Answer 2...
  </c-accordion>
</c-accordion.group>

Individual Accordions (Checkbox Behavior)

Without a group attribute, each accordion works independently — multiple can be open.

Independent Accordion 1

This accordion works independently. You can open multiple accordions at once.

Independent Accordion 2

This is another independent accordion. It doesn't affect the others.

Independent Accordion 3

This accordion starts open and stays independent of the others.

<!-- No group attribute = independent accordions -->
<c-accordion title="Independent 1" variant="arrow" bordered>Content 1</c-accordion>
<c-accordion title="Independent 2" variant="plus" bordered>Content 2</c-accordion>
<c-accordion title="Independent 3" bordered checked>Content 3</c-accordion>

Rich Content

Rich Content Example

This accordion shows rich content within the collapsible area.

Vessels Monitored

1,247

↗︎ 12% increase

<c-accordion title="Rich Content" variant="arrow" bordered>
  <p>Rich content with HTML elements</p>
  <div class="stats shadow">
    <div class="stat">
      <div class="stat-title">Metric Name</div>
      <div class="stat-value">1,247</div>
    </div>
  </div>
</c-accordion>