Accordion

Displays content that can be expanded or collapsed from view.

Accordion header

Properties

open

Example

Source Code

Installation

"use client";

import React from "react";
import { Accordion } from "@/subframe/components/Accordion";

function AccordionExample() {
  return (
    <Accordion
      trigger={
        <div className="flex w-full items-center gap-2 pt-2 pr-3 pb-2 pl-3">
          <span className="w-full grow shrink-0 basis-0 text-body font-body text-default-font">
            Accordion header
          </span>
          <Accordion.Chevron />
        </div>
      }
      defaultOpen={false}
    >
      <div className="flex h-full w-full grow shrink-0 basis-0 flex-col items-start gap-2 pt-2 pr-3 pb-2 pl-3">
        <span className="text-body font-body text-default-font">
          Accordion contents
        </span>
      </div>
    </Accordion>
  );
}

export default AccordionExample;

Props

Accordion

Chevron

Content

Trigger

Prop

Type

Default

Additional info

trigger

React.ReactNode

—

children

React.ReactNode

—

open

boolean

false

onOpenChange

(open: boolean) => void

—

Handler called when opened or closed.

defaultOpen

boolean

—

Open state when initially rendered. Use when you don't need to control the open state.

This is a Radix Collapsible Root component. Find its full list of properties by visiting their docs.

Examples

Basics

Use the trigger prop to render anything that should open the accordion on click.

Accordion.Content is a wrapper component for content shown when the accordion is open. Accordion.Chevron is a chevron icon that will automatically rotate.


View code

Controlled

Use open and onOpenChange props to control the open state.


View code

Default open

Use defaultOpen prop to have the accordion open when initially rendered. If you need to control the component, you should use open and onOpenChange props instead.


View code