@radix-ui/react-accordion

What is @radix-ui/react-accordion?

@radix-ui/react-accordion is a React component library that provides accessible and customizable accordion components. It allows developers to create collapsible sections of content, which can be expanded or collapsed by the user. The package is designed with accessibility in mind and follows the WAI-ARIA guidelines.

What are @radix-ui/react-accordion's main functionalities?

Basic Accordion

This code demonstrates a basic accordion with two items. Each item has a trigger that, when clicked, expands or collapses the associated content.

import { Accordion, AccordionItem, AccordionTrigger, AccordionContent } from '@radix-ui/react-accordion';

function BasicAccordion() {
  return (
    <Accordion>
      <AccordionItem value="item-1">
        <AccordionTrigger>Item 1</AccordionTrigger>
        <AccordionContent>Content for item 1</AccordionContent>
      </AccordionItem>
      <AccordionItem value="item-2">
        <AccordionTrigger>Item 2</AccordionTrigger>
        <AccordionContent>Content for item 2</AccordionContent>
      </AccordionItem>
    </Accordion>
  );
}

Multiple Expandable Items

This code demonstrates an accordion where multiple items can be expanded at the same time. The 'type' prop is set to 'multiple' to enable this functionality.

import { Accordion, AccordionItem, AccordionTrigger, AccordionContent } from '@radix-ui/react-accordion';

function MultipleExpandableAccordion() {
  return (
    <Accordion type="multiple">
      <AccordionItem value="item-1">
        <AccordionTrigger>Item 1</AccordionTrigger>
        <AccordionContent>Content for item 1</AccordionContent>
      </AccordionItem>
      <AccordionItem value="item-2">
        <AccordionTrigger>Item 2</AccordionTrigger>
        <AccordionContent>Content for item 2</AccordionContent>
      </AccordionItem>
    </Accordion>
  );
}

Controlled Accordion

This code demonstrates a controlled accordion where the expanded item is managed by the component's state. The 'value' prop is used to control which item is expanded.

import { useState } from 'react';
import { Accordion, AccordionItem, AccordionTrigger, AccordionContent } from '@radix-ui/react-accordion';

function ControlledAccordion() {
  const [value, setValue] = useState('item-1');

  return (
    <Accordion value={value} onValueChange={setValue}>
      <AccordionItem value="item-1">
        <AccordionTrigger>Item 1</AccordionTrigger>
        <AccordionContent>Content for item 1</AccordionContent>
      </AccordionItem>
      <AccordionItem value="item-2">
        <AccordionTrigger>Item 2</AccordionTrigger>
        <AccordionContent>Content for item 2</AccordionContent>
      </AccordionItem>
    </Accordion>
  );
}

Other packages similar to @radix-ui/react-accordion

react-accessible-accordion

react-accessible-accordion is a lightweight and accessible accordion component for React. It provides similar functionality to @radix-ui/react-accordion, focusing on accessibility and ease of use. It allows for both single and multiple item expansion and is highly customizable.

react-collapse

react-collapse is a React component for creating collapsible elements. While it does not provide a full accordion component out of the box, it can be used to build custom accordion-like components. It focuses on providing smooth animations and transitions for collapsing content.

react-bootstrap

react-bootstrap is a popular library that provides Bootstrap components for React, including an Accordion component. It offers a wide range of pre-styled components and utilities, making it easy to create responsive and accessible UIs. The Accordion component in react-bootstrap is similar in functionality to @radix-ui/react-accordion but comes with Bootstrap's styling and theming.

README

react-accordion

Installation

$ yarn add @radix-ui/react-accordion
# or
$ npm install @radix-ui/react-accordion

Usage

View docs here.