Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

@radix-ui/react-accordion

Package Overview
Dependencies
Maintainers
6
Versions
196
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@radix-ui/react-accordion

  • 1.2.2
  • latest
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
1.6M
decreased by-3.48%
Maintainers
6
Weekly downloads
 
Created

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

FAQs

Package last updated on 13 Dec 2024

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc