Accordion

Components

Accordion

Code

Accordion is a vertically stacked set of interactive headings that reveal or hide associated sections of content.

import { Accordion,AccordionItem,AccordionTrigger,AccordionContent } from '@sproutsocial/racine'

<Accordion defaultValue={["item-1"]}>
  <AccordionItem value="item-1">
    <AccordionTrigger title="What is Seeds?" />
    <AccordionContent>
      Seeds is Sprout Social's design system that provides reusable components and design tokens for building consistent user interfaces.
    </AccordionContent>
  </AccordionItem>
  <AccordionItem value="item-2">
    <AccordionTrigger title="How do I get started?" />
    <AccordionContent>
      Install Seeds React components from npm and import the components you need into your application.
    </AccordionContent>
  </AccordionItem>
  <AccordionItem value="item-3">
    <AccordionTrigger title="Where can I find documentation?" />
    <AccordionContent>
      You can find comprehensive documentation and examples on the Seeds reference site.
    </AccordionContent>
  </AccordionItem>
</Accordion>

Properties

Name	Type	Default
`children`	`React.ReactNode`
`collapsible`	`boolean`
`defaultValue`	`\| string` `\| string[]`	`["item-0"]`
`triggerIcon`	`React.ReactNode`	`<Icon className="triggerIcon" name="chevron-down-outline" />`
`triggerPosition`	`\| "left"` `\| "right"`	`"right"`
`type`	`\| "single"` `\| "multiple"`	`"multiple"`
`styled`	`boolean`	`true`

Overview

The Accordion component is built on top of Radix UI Accordion and provides a vertically stacked set of interactive headings that each reveal an associated section of content. Accordions are useful for reducing vertical space and organizing content into logical sections that users can expand on demand.

The component consists of four parts:

Accordion: The root container that manages state and behavior
AccordionItem: Individual accordion items that wrap triggers and content
AccordionTrigger: The interactive heading that toggles the accordion
AccordionContent: The expandable content section

Recipes

Basic accordion

Create a simple accordion with multiple items. By default, multiple items can be open at once.

import { Accordion,AccordionItem,AccordionTrigger,AccordionContent } from '@sproutsocial/racine'

<Accordion defaultValue={["item-1"]}>
  <AccordionItem value="item-1">
    <AccordionTrigger title="First Section" />
    <AccordionContent>
      This is the content of the first section. It contains important information.
    </AccordionContent>
  </AccordionItem>
  <AccordionItem value="item-2">
    <AccordionTrigger title="Second Section" />
    <AccordionContent>
      This is the content of the second section. You can have as many sections as you need.
    </AccordionContent>
  </AccordionItem>
  <AccordionItem value="item-3">
    <AccordionTrigger title="Third Section" />
    <AccordionContent>
      This is the content of the third section with more details.
    </AccordionContent>
  </AccordionItem>
</Accordion>

Single selection mode

Use type="single" to allow only one item to be open at a time. Opening a new item automatically closes the previously open one.

import { Accordion,AccordionItem,AccordionTrigger,AccordionContent } from '@sproutsocial/racine'

<Accordion type="single" defaultValue="item-1">
  <AccordionItem value="item-1">
    <AccordionTrigger title="Account Settings" />
    <AccordionContent>
      Manage your account preferences, profile information, and security settings.
    </AccordionContent>
  </AccordionItem>
  <AccordionItem value="item-2">
    <AccordionTrigger title="Notifications" />
    <AccordionContent>
      Configure how and when you receive notifications from the application.
    </AccordionContent>
  </AccordionItem>
  <AccordionItem value="item-3">
    <AccordionTrigger title="Privacy" />
    <AccordionContent>
      Control your privacy settings and data sharing preferences.
    </AccordionContent>
  </AccordionItem>
</Accordion>

Collapsible in single mode

When using type="single", add collapsible={true} to allow all items to be closed.

import { Accordion,AccordionItem,AccordionTrigger,AccordionContent } from '@sproutsocial/racine'

<Accordion type="single" collapsible={true} defaultValue="item-1">
  <AccordionItem value="item-1">
    <AccordionTrigger title="Terms of Service" />
    <AccordionContent>
      Please read these terms carefully before using our service.
    </AccordionContent>
  </AccordionItem>
  <AccordionItem value="item-2">
    <AccordionTrigger title="Privacy Policy" />
    <AccordionContent>
      Learn how we collect, use, and protect your personal information.
    </AccordionContent>
  </AccordionItem>
</Accordion>

Trigger icon position

Control the position of the expand/collapse icon using the triggerPosition prop (default is "right").

import { Accordion,AccordionItem,AccordionTrigger,AccordionContent } from '@sproutsocial/racine'

<Accordion defaultValue={["item-1"]} triggerPosition="left">
  <AccordionItem value="item-1">
    <AccordionTrigger title="Left Icon Position" />
    <AccordionContent>
      The chevron icon appears on the left side of the trigger.
    </AccordionContent>
  </AccordionItem>
  <AccordionItem value="item-2">
    <AccordionTrigger title="Another Section" />
    <AccordionContent>
      This also has the icon on the left.
    </AccordionContent>
  </AccordionItem>
</Accordion>

Custom trigger icon

Customize the expand/collapse icon by providing a custom icon through the triggerIcon prop.

import { Accordion,AccordionItem,AccordionTrigger,AccordionContent } from '@sproutsocial/racine'

<Accordion defaultValue={["item-1"]} triggerIcon={<Icon name="plus-outline" />}>
  <AccordionItem value="item-1">
    <AccordionTrigger title="Custom Icon Example" />
    <AccordionContent>
      This accordion uses a plus icon instead of the default chevron.
    </AccordionContent>
  </AccordionItem>
  <AccordionItem value="item-2">
    <AccordionTrigger title="Another Item" />
    <AccordionContent>
      All items in this accordion share the same custom icon.
    </AccordionContent>
  </AccordionItem>
</Accordion>

Trigger with left slot

Add custom content to the left of the trigger title using the leftSlot prop.

import { Accordion,AccordionItem,AccordionTrigger,AccordionContent,Icon,Box } from '@sproutsocial/racine'

<Accordion defaultValue={["item-1"]}>
  <AccordionItem value="item-1">
    <AccordionTrigger
      title="Profile Information"
      leftSlot={
        <Box mr={300}>
          <Icon name="user-outline" />
        </Box>
      }
    />
    <AccordionContent>
      View and edit your profile details and personal information.
    </AccordionContent>
  </AccordionItem>
  <AccordionItem value="item-2">
    <AccordionTrigger
      title="Security Settings"
      leftSlot={
        <Box mr={300}>
          <Icon name="lock-outline" />
        </Box>
      }
    />
    <AccordionContent>
      Manage your password, two-factor authentication, and security preferences.
    </AccordionContent>
  </AccordionItem>
</Accordion>

Trigger with right slot

Add custom content to the right of the trigger title using the rightSlot prop.

import { Accordion,AccordionItem,AccordionTrigger,AccordionContent,Badge } from '@sproutsocial/racine'

<Accordion defaultValue={["item-1"]}>
  <AccordionItem value="item-1">
    <AccordionTrigger
      title="New Features"
      rightSlot={<Badge  ml={300} appearance="accent">3</Badge>}
    />
    <AccordionContent>
      Check out the latest features and improvements we've added.
    </AccordionContent>
  </AccordionItem>
  <AccordionItem value="item-2">
    <AccordionTrigger
      title="Messages"
      rightSlot={<Badge ml={300} appearance="accent">12</Badge>}
    />
    <AccordionContent>
      You have unread messages in your inbox.
    </AccordionContent>
  </AccordionItem>
</Accordion>

Add quick action buttons to accordion triggers using the relatedActions prop (maximum 2 actions).

import { Accordion,AccordionItem,AccordionTrigger,AccordionContent } from '@sproutsocial/racine'

<Accordion defaultValue={["item-1"]}>
  <AccordionItem value="item-1">
    <AccordionTrigger
      title="Project Alpha"
      relatedActions={[
        {
          iconName: "pencil-outline",
          onClick: () => alert("Edit clicked"),
          "aria-label": "Edit project"
        },
        {
          iconName: "trash-outline",
          onClick: () => alert("Delete clicked"),
          "aria-label": "Delete project"
        }
      ]}
    />
    <AccordionContent>
      Details about Project Alpha, including tasks, deadlines, and team members.
    </AccordionContent>
  </AccordionItem>
  <AccordionItem value="item-2">
    <AccordionTrigger
      title="Project Beta"
      relatedActions={[
        {
          iconName: "pencil-outline",
          onClick: () => alert("Edit clicked"),
          "aria-label": "Edit project"
        }
      ]}
    />
    <AccordionContent>
      Details about Project Beta and its current status.
    </AccordionContent>
  </AccordionItem>
</Accordion>

Add an overflow menu to accordion triggers for additional actions using the overflowMenu prop.

import { Accordion,AccordionItem,AccordionTrigger,AccordionContent } from '@sproutsocial/racine'

<Accordion defaultValue={["item-1"]}>
  <AccordionItem value="item-1">
    <AccordionTrigger
      title="Document 1"
      overflowMenu={{
        "aria-label": "Document actions",
        items: [
          {
            id: "share",
            children: "Share",
            iconName: "share-outline",
            onClick: () => alert("Share clicked")
          },
          {
            id: "duplicate",
            children: "Duplicate",
            iconName: "copy-outline",
            onClick: () => alert("Duplicate clicked")
          },
          {
            id: "archive",
            children: "Archive",
            iconName: "archive-outline",
            onClick: () => alert("Archive clicked")
          }
        ]
      }}
    />
    <AccordionContent>
      This document contains important information about the project.
    </AccordionContent>
  </AccordionItem>
  <AccordionItem value="item-2">
    <AccordionTrigger
      title="Document 2"
      overflowMenu={{
        "aria-label": "Document actions",
        items: [
          {
            id: "share",
            children: "Share",
            iconName: "share-outline",
            onClick: () => alert("Share clicked")
          },
          {
            id: "download",
            children: "Download",
            iconName: "download-outline",
            onClick: () => alert("Download clicked")
          }
        ]
      }}
    />
    <AccordionContent>
      Additional documentation for reference.
    </AccordionContent>
  </AccordionItem>
</Accordion>

Rich content in accordion

Use any components within AccordionContent to create rich, interactive content.

import { Accordion,AccordionItem,AccordionTrigger,AccordionContent,Box,Text,Button } from '@sproutsocial/racine'

<Accordion defaultValue={["item-1"]}>
  <AccordionItem value="item-1">
    <AccordionTrigger title="User Profile" />
    <AccordionContent>
      <Box p={400}>
        <Text as="p" fontWeight="semibold" mb={300}>
          John Doe
        </Text>
        <Text as="p" color="text.subtext" mb={400}>
          john.doe@example.com
        </Text>
        <Button appearance="primary">Edit Profile</Button>
      </Box>
    </AccordionContent>
  </AccordionItem>
  <AccordionItem value="item-2">
    <AccordionTrigger title="Activity Log" />
    <AccordionContent>
      <Box p={400}>
        <Text as="p" mb={200}>Last login: 2 hours ago</Text>
        <Text as="p" mb={200}>Profile updated: 3 days ago</Text>
        <Text as="p">Password changed: 2 weeks ago</Text>
      </Box>
    </AccordionContent>
  </AccordionItem>
</Accordion>

Styled accordion content

Use system props on AccordionContent to apply custom styling.

import { Accordion,AccordionItem,AccordionTrigger,AccordionContent,Text } from '@sproutsocial/racine'

<Accordion defaultValue={["item-1"]}>
  <AccordionItem value="item-1">
    <AccordionTrigger title="Styled Content" />
    <AccordionContent p={400} backgroundColor="container.background.base" borderRadius={300}>
      <Text>This content has custom padding, background color, and border radius.</Text>
    </AccordionContent>
  </AccordionItem>
  <AccordionItem value="item-2">
    <AccordionTrigger title="Another Styled Section" />
    <AccordionContent p={500} backgroundColor="container.background.tint">
      <Text>Each section can have its own styling applied.</Text>
    </AccordionContent>
  </AccordionItem>
</Accordion>

Unstyled accordion

Set styled={false} to remove default styling and provide your own custom styles.

import { Accordion,AccordionItem,AccordionTrigger,AccordionContent } from '@sproutsocial/racine'

<Accordion defaultValue={["item-1"]} styled={false}>
  <AccordionItem value="item-1">
    <AccordionTrigger title="Unstyled Accordion" />
    <AccordionContent>
      This accordion has minimal default styling, allowing you to apply your own custom styles.
    </AccordionContent>
  </AccordionItem>
  <AccordionItem value="item-2">
    <AccordionTrigger title="Custom Styling" />
    <AccordionContent>
      You have full control over the appearance.
    </AccordionContent>
  </AccordionItem>
</Accordion>

Subcomponents

AccordionItem

The AccordionItem component wraps each accordion section. It requires a unique value prop that is used to control which items are expanded.

AccordionTrigger

The AccordionTrigger component renders the interactive heading for each accordion item. It supports custom icons, slots for additional content, related actions, and overflow menus.

Key Props:

title: The main heading text (required)
leftSlot: Custom content to the left of the title
rightSlot: Custom content to the right of the title
relatedActions: Array of quick action buttons (max 2)
overflowMenu: Configuration for an overflow menu with multiple actions

AccordionContent

The AccordionContent component wraps the expandable content section. It accepts system props for styling and automatically handles expand/collapse animations.

Common Patterns

FAQ Section

Accordions are perfect for FAQ sections where users can expand questions to see answers.

import { Accordion,AccordionItem,AccordionTrigger,AccordionContent,Text } from '@sproutsocial/racine'

<Accordion type="single" collapsible={true}>
  <AccordionItem value="item-1">
    <AccordionTrigger title="What payment methods do you accept?" />
    <AccordionContent p={400}>
      <Text>
        We accept all major credit cards (Visa, MasterCard, American Express), PayPal, and bank transfers for annual subscriptions.
      </Text>
    </AccordionContent>
  </AccordionItem>
  <AccordionItem value="item-2">
    <AccordionTrigger title="Can I cancel my subscription at any time?" />
    <AccordionContent p={400}>
      <Text>
        Yes, you can cancel your subscription at any time from your account settings. Your access will continue until the end of your current billing period.
      </Text>
    </AccordionContent>
  </AccordionItem>
  <AccordionItem value="item-3">
    <AccordionTrigger title="Is there a free trial available?" />
    <AccordionContent p={400}>
      <Text>
        Yes, we offer a 14-day free trial with full access to all features. No credit card required to start your trial.
      </Text>
    </AccordionContent>
  </AccordionItem>
  <AccordionItem value="item-4">
    <AccordionTrigger title="How do I upgrade my plan?" />
    <AccordionContent p={400}>
      <Text>
        You can upgrade your plan at any time from your account settings. The price difference will be prorated for the remainder of your billing period.
      </Text>
    </AccordionContent>
  </AccordionItem>
</Accordion>

Settings Panel

Use accordions to organize complex settings into manageable sections.

import { Accordion,AccordionItem,AccordionTrigger,AccordionContent,Box,Text,Switch,FormField } from '@sproutsocial/racine'

<Accordion defaultValue={["item-1"]}>
  <AccordionItem value="item-1">
    <AccordionTrigger
      title="General Settings"
      leftSlot={<Box mr={300}><Icon name="cog-outline" /></Box>}
    />
    <AccordionContent p={400}>
      <FormField label="Language" mb={300}>
        {(props) => <Select defaultValue="en" {...props}>
            <option value="en">English</option>
            <option value="es">Spanish</option>
            <option value="fr">French</option>
          </Select>
        }
      </FormField>
      <FormField label="Timezone">
        {(props) => <Select defaultValue="utc" {...props}>
            <option value="utc">UTC</option>
            <option value="est">Eastern Time</option>
            <option value="pst">Pacific Time</option>
          </Select>
        }
      </FormField>
    </AccordionContent>
  </AccordionItem>
  <AccordionItem value="item-2">
    <AccordionTrigger
      title="Notification Preferences"
      leftSlot={<Box mr={300}><Icon name="bell-outline" /></Box>}
    />
    <AccordionContent p={400}>
      <Box display="flex" justifyContent="space-between" alignItems="center" mb={300}>
        <Text>Email notifications</Text>
        <Switch checked={true} onClick={() => {}} />
      </Box>
      <Box display="flex" justifyContent="space-between" alignItems="center" mb={300}>
        <Text>Push notifications</Text>
        <Switch checked={true} onClick={() => {}} />
      </Box>
      <Box display="flex" justifyContent="space-between" alignItems="center">
        <Text>SMS notifications</Text>
        <Switch checked={false} onClick={() => {}} />
      </Box>
    </AccordionContent>
  </AccordionItem>
</Accordion>

File Browser

Create a file browser or navigation interface with accordions.

import { Accordion,AccordionItem,AccordionTrigger,AccordionContent,Box,Text,Icon } from '@sproutsocial/racine'

<Accordion defaultValue={["item-1"]} triggerPosition="left">
  <AccordionItem value="item-1">
    <AccordionTrigger
      title="Documents"
      leftSlot={<Box mr={300}><Icon name="folder-outline" /></Box>}
      rightSlot={<Text fontSize={200} color="text.subtext">12 items</Text>}
    />
    <AccordionContent pl={600} p={300}>
      <Box display="flex" alignItems="center" mb={200}>
        <Icon name="document-outline" size="small" />
        <Text ml={200}>Report.pdf</Text>
      </Box>
      <Box display="flex" alignItems="center" mb={200}>
        <Icon name="document-outline" size="small" />
        <Text ml={200}>Presentation.pptx</Text>
      </Box>
      <Box display="flex" alignItems="center">
        <Icon name="document-outline" size="small" />
        <Text ml={200}>Spreadsheet.xlsx</Text>
      </Box>
    </AccordionContent>
  </AccordionItem>
  <AccordionItem value="item-2">
    <AccordionTrigger
      title="Images"
      leftSlot={<Box mr={300}><Icon name="folder-outline" /></Box>}
      rightSlot={<Text fontSize={200} color="text.subtext">8 items</Text>}
    />
    <AccordionContent pl={600} p={300}>
      <Box display="flex" alignItems="center" mb={200}>
        <Icon name="image-outline" size="small" />
        <Text ml={200}>photo1.jpg</Text>
      </Box>
      <Box display="flex" alignItems="center">
        <Icon name="image-outline" size="small" />
        <Text ml={200}>photo2.png</Text>
      </Box>
    </AccordionContent>
  </AccordionItem>
</Accordion>

Accessibility

The Accordion component follows WAI-ARIA Accordion Pattern
Accordion headers are implemented as buttons with proper ARIA attributes
Each trigger has appropriate aria-expanded and aria-controls attributes
Keyboard navigation is fully supported:
- Tab: Moves focus to the next focusable element
- Space or Enter: Toggles the focused accordion item
- Focus management is handled automatically
Related action buttons and overflow menus must have descriptive aria-label attributes
Ensure accordion content is logical and meaningful when expanded

Best Practices

Use descriptive, concise titles for accordion triggers
Avoid nesting accordions deeply - consider alternative navigation patterns for complex hierarchies
Don't hide critical information that users need immediately - use accordions for secondary or optional content
In single mode, use collapsible={true} if it makes sense for all items to be closed
Limit related actions to 2 or fewer to maintain a clean interface
Use overflow menus for additional actions beyond the 2-action limit
Consider using icons in left slots to help users quickly identify section types
Provide loading states or skeleton screens if content takes time to load
Use accordions to progressively disclose information and reduce cognitive load
Test with keyboard navigation to ensure all functionality is accessible
For settings panels, group related settings together in logical sections

Properties

Overview

Recipes

Basic accordion

Single selection mode

Collapsible in single mode

Trigger icon position

Custom trigger icon

Trigger with left slot

Trigger with right slot

Accordion with related actions

Accordion with overflow menu

Rich content in accordion

Styled accordion content

Unstyled accordion

Subcomponents

AccordionItem

AccordionTrigger

AccordionContent

Common Patterns

FAQ Section

Settings Panel

File Browser

Accessibility

Best Practices