Accordion

DaisyUI

Accordion is used for showing and hiding content but only one item can stay open at a time.

Radio Inputs

Classic accordion using radio inputs. Only one item 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.

Using Details Element

Accordion using native HTML details element. Content is searchable in browser.

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.

With Arrow Icon

Arrow indicator showing open/close state.

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.

With Plus/Minus Icon

Plus/minus indicator for expand/collapse.

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.

With Join

Accordion items joined together with automatic border radius handling.

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.

Code Example

use rsxui::components::{AccordionItem, AccordionModifier};

use rsx_macros::rsx;

let html = rsx! {

    <AccordionItem

        name="my-accordion"

        title="How do I create an account?"

        checked=true

        class="bg-base-100 border border-base-300"

        "Click the Sign Up button..."

    </AccordionItem>

};

// With arrow

let html = rsx! {

    <AccordionItem

        name="my-accordion"

        title="Question"

        modifier={AccordionModifier::Arrow}

        "Answer..."

    </AccordionItem>

};

RsxUI

DaisyUI Components for Rust

Created by Isak Rickyanto@2026