How to Set a Default Open Item in Shadcn UI Accordion

Introduction

Shadcn UI's Accordion component is a versatile and customizable way to display collapsible content. By default, all items in the accordion are collapsed, but sometimes you may want one item to be open initially. This guide shows you how to achieve this using the defaultValue prop.

The Problem

By default, Shadcn UI's Accordion component collapses all items. If you want the first item (or any specific item) to be open when the component is rendered, simply passing a defaultValue prop might not work as expected without proper configuration.

Solutions

1. Setting the defaultValue Prop

To set a default open item, assign a unique value to each AccordionItem and pass the corresponding value to the defaultValue prop in the Accordion root.

Example:

import {
  Accordion,
  AccordionItem,
  AccordionTrigger,
  AccordionContent,
} from '@/components/ui/accordion'

export function AccordionExample() {
  return (
    <Accordion type="single" defaultValue="item-1" className="w-full">
      <AccordionItem value="item-1">
        <AccordionTrigger>Item 1</AccordionTrigger>
        <AccordionContent>This is the content of Item 1.</AccordionContent>
      </AccordionItem>
      <AccordionItem value="item-2">
        <AccordionTrigger>Item 2</AccordionTrigger>
        <AccordionContent>This is the content of Item 2.</AccordionContent>
      </AccordionItem>
    </Accordion>
  )
}

2. Using type="multiple"

If you want multiple items to be open simultaneously, set the type prop to multiple and pass an array of values to defaultValue.

Example:

export function MultiAccordionExample() {
  return (
    <Accordion type="multiple" defaultValue={['item-1', 'item-2']} className="w-full">
      <AccordionItem value="item-1">
        <AccordionTrigger>Item 1</AccordionTrigger>
        <AccordionContent>This is the content of Item 1.</AccordionContent>
      </AccordionItem>
      <AccordionItem value="item-2">
        <AccordionTrigger>Item 2</AccordionTrigger>
        <AccordionContent>This is the content of Item 2.</AccordionContent>
      </AccordionItem>
    </Accordion>
  )
}

3. Adding Collapsible Behavior

To make the accordion collapsible (allowing the user to close all items), set the collapsible prop to true.

Example:

export function CollapsibleAccordionExample() {
  return (
    <Accordion type="single" collapsible defaultValue="item-1" className="w-full">
      <AccordionItem value="item-1">
        <AccordionTrigger>Item 1</AccordionTrigger>
        <AccordionContent>This is the content of Item 1.</AccordionContent>
      </AccordionItem>
      <AccordionItem value="item-2">
        <AccordionTrigger>Item 2</AccordionTrigger>
        <AccordionContent>This is the content of Item 2.</AccordionContent>
      </AccordionItem>
    </Accordion>
  )
}

Best Practices

• Unique Values: Ensure each AccordionItem has a unique value to avoid conflicts.
• Type Selection: Use type="single" for exclusive opening and type="multiple" for multiple open items.
• Collapsibility: Enable the collapsible prop for a better user experience if users should be able to close all items.
• Accessibility: Always test your accordion with screen readers and keyboard navigation to ensure it meets accessibility standards.

FAQs

1. What does the defaultValue prop do? The defaultValue prop specifies the initially open item(s) in the accordion.

2. Can I programmatically open or close items? Yes, you can manage the open state programmatically by switching to a controlled component using the value and onValueChange props.

3. Is it possible to have all items closed by default? Yes, omit the defaultValue prop or set it to an empty string for type="single" or an empty array for type="multiple".

Conclusion

Setting a default open item in Shadcn UI's Accordion component is straightforward with the defaultValue prop. Whether you're working with single or multiple-item accordions, these methods will help you create an intuitive and user-friendly experience.