Accordion
Efficiently organize and present content in a compact, interactive interface.
Installation
API Reference
This is an illustration of Accordion component.
size
variant
type
isCollapsible
isDisabled
<Accordionsize="md"variant="filled"type="single"isCollapsible={true}isDisabled={false}className="m-5 w-[90%] border border-outline-200"><AccordionItem value="a"><AccordionHeader><AccordionTrigger>{({ isExpanded }) => {return (<><AccordionTitleText>How do I place an order?</AccordionTitleText>{isExpanded ? (<AccordionIcon as={ChevronUpIcon} className="ml-3" />) : (<AccordionIcon as={ChevronDownIcon} className="ml-3" />)}</>)}}</AccordionTrigger></AccordionHeader><AccordionContent><AccordionContentText>To place an order, simply select the products you want, proceed tocheckout, provide shipping and payment information, and finalize yourpurchase.</AccordionContentText></AccordionContent></AccordionItem><Divider /><AccordionItem value="b"><AccordionHeader><AccordionTrigger>{({ isExpanded }) => {return (<><AccordionTitleText>What payment methods do you accept?</AccordionTitleText>{isExpanded ? (<AccordionIcon as={ChevronUpIcon} className="ml-3" />) : (<AccordionIcon as={ChevronDownIcon} className="ml-3" />)}</>)}}</AccordionTrigger></AccordionHeader><AccordionContent><AccordionContentText>We accept all major credit cards, including Visa, Mastercard, andAmerican Express. We also support payments through PayPal.</AccordionContentText></AccordionContent></AccordionItem></Accordion>
Installation
CLI
Manual
Run the following command:
npx gluestack-ui add accordion
API Reference
To use this component in your project, include the following import statement in your file.
import {Accordion,AccordionItem,AccordionHeader,AccordionTrigger,AccordionTitleText,AccordionContent,AccordionContentText,AccordionIcon,} from "@/components/ui/accordion"
export default () => (<Accordion><AccordionItem><AccordionHeader><AccordionTrigger><AccordionTitleText /><AccordionIcon /></AccordionTrigger></AccordionHeader><AccordionContent><AccordionContentText /></AccordionContent></AccordionItem></Accordion>)
Component Props
This section provides a comprehensive reference list for the component props, detailing descriptions, properties, types, and default behavior for easy project integration.
Accordion
It inherits all the properties of React Native's View component.
Prop | Type | Default | Description |
---|---|---|---|
type | "single" | "multiple" | "single" | Determines whether one or multiple items can be opened at the same time. |
isCollapsible | boolean | true | When type is "single" or "multiple", allows closing content when clicking trigger for an open item. |
defaultValue | string[] | [] | The value of the item to expand when initially rendered when type is "single" or "multiple". |
value | string[] | [] | The controlled value of the item to expand when type is "single" or "multiple". |
onValueChange | function | - | Event handler called when the expanded state of an item changes and type is "single" or "multiple". |
isDisabled | boolean | false | When true, prevents the user from interacting with the accordion and all its items. |
AccordionItem
Contains all the parts of a collapsible section.
Prop | Type | Default | Description |
---|---|---|---|
value | string | - | The controlled value of the item to expand when type is "single" or "multiple". Must be used in conjunction with onValueChange.This is a mandatory prop. |
isDisabled | boolean | false | When true, prevents the user from interacting with the accordion and all its items. |
AccordionHeader
Wraps an Accordion.Trigger. It inherits all the properties of @expo/html-elements's H3 on web and It inherits all the properties of react native's View on native. Use the as prop to update it to the appropriate heading level for your page.
AccordionTrigger
Toggles the collapsed state of its associated item. It inherits all the properties of react native's Pressable. It should be nested inside of an Accordion.Header.
AccordionTitleText
It inherits all the properties of React Native's Text component.
AccordionIcon
Contains all Icon related layout style props and actions.It inherits all the properties of React Native's View component.
AccordionContent
Contains all the collapsible content for an item. It inherits all the properties of React Native View component.
AccordionContentText
It inherits all the properties of React Native's Text component.
Accessibility
Adheres to the Accordion WAI-ARIA design pattern.
We have outlined the various features that ensure the Accordion component is accessible to all users, including those with disabilities. These features help ensure that your application is inclusive and meets accessibility standards.
- Header is h3 tag on web.
- aria-expanded is "true" when the Accordion Content is visible, otherwise false.
- role is set to "region" for the currently expanded accordion panel.
- aria-controls points to the id of the Accordion Content.
- aria-labelledby references the accordion header button that expands and collapses the region.
Keyboard Interactions
- Space - When focus is on an Accordion.Trigger of a collapsed section, expands the section.
- Enter - When focus is on an Accordion.Trigger of a collapsed section, expands the section.
- Tab - Moves focus to the next focusable element.
- Shift + Tab - Moves focus to the previous focusable element.
Screen Reader
- VoiceOver: When the Accordion Item is focused, the screen reader will announce the Accordion's title text and the state of the Accordion trigger (expanded or collapsed).
Examples
The Examples section provides visual representations of the different variants of the component, allowing you to quickly and easily determine which one best fits your needs. Simply copy the code and integrate it into your project.
Customized Component
The following example demonstrates how easily you can customize the Accordion component to suit your needs.
function App() {return (<AccordionclassName="w-[90%] m-5 border border-outline-300"type="multiple"><AccordionItem value="a" className="border-b border-outline-300"><AccordionHeader className="bg-background-0"><AccordionTrigger>{({ isExpanded }) => {return (<><AccordionTitleText>What does the "type" prop of the Accordion component do?</AccordionTitleText>{isExpanded ? (<AccordionIcon as={ChevronUpIcon} />) : (<AccordionIcon as={ChevronDownIcon} />)}</>)}}</AccordionTrigger></AccordionHeader><AccordionContent className="mt-0 pt-2 bg-background-50"><AccordionContentText>The type prop determines whether one or multiple items can be openedat the same time. The default value is "single" which means only oneitem can be opened at a time.</AccordionContentText></AccordionContent></AccordionItem><AccordionItem value="b" className="border-b border-outline-300"><AccordionHeadersx={{backgroundColor: "$backgroundLight0",_dark: {backgroundColor: "$backgroundDark950",},}}><AccordionTrigger>{({ isExpanded }) => {return (<><AccordionTitleText>Can I disable the whole accordion?</AccordionTitleText>{isExpanded ? (<AccordionIcon as={ChevronUpIcon} />) : (<AccordionIcon as={ChevronDownIcon} />)}</>)}}</AccordionTrigger></AccordionHeader><AccordionContent className="mt-0 pt-2 bg-background-50"><AccordionContentText>Yes, you can disable the whole accordion by setting the isDisabledprop to true on the Accordion component.</AccordionContentText></AccordionContent></AccordionItem><AccordionItem value="c"><AccordionHeader className="bg-background-0"><AccordionTrigger>{({ isExpanded }) => {return (<><AccordionTitleText>What is a controlled accordion? How can I make itcontrolled?</AccordionTitleText>{isExpanded ? (<AccordionIcon as={ChevronUpIcon} />) : (<AccordionIcon as={ChevronDownIcon} />)}</>)}}</AccordionTrigger></AccordionHeader><AccordionContent className="mt-0 pt-2 bg-background-50"><AccordionContentText>Controlled components refer to the components where the state andbehaviors are controlled by the Parent component. You can make theaccordion a controlled component by passing the value prop to theAccordion component and setting the onValueChange prop to update thevalue prop. Refer to the controlled accordion example in the docs.</AccordionContentText></AccordionContent></AccordionItem></Accordion>)}
Rounded corners
The borderRadius prop can be used to create rounded corners for both the Accordion and AccordionItem components.
function App() {return (<Accordion className="m-5 w-[80%] max-w-[640px] bg-transparent"><AccordionItem value="item-1" className="rounded-lg"><AccordionHeader><AccordionTrigger className="focus:web:rounded-lg">{({ isExpanded }) => {return (<>{isExpanded ? (<AccordionIcon as={MinusIcon} className="mr-3" />) : (<AccordionIcon as={PlusIcon} className="mr-3" />)}<AccordionTitleText>How do I place an order?</AccordionTitleText></>)}}</AccordionTrigger></AccordionHeader><AccordionContent className="ml-9"><AccordionContentText>To place an order, simply select the products you want, proceed tocheckout, provide shipping and payment information, and finalizeyour purchase.</AccordionContentText></AccordionContent></AccordionItem><AccordionItem value="item-2" className="mt-5 rounded-lg"><AccordionHeader><AccordionTrigger className="focus:web:rounded-lg">{({ isExpanded }) => {return (<>{isExpanded ? (<AccordionIcon as={MinusIcon} className="mr-3" />) : (<AccordionIcon as={PlusIcon} className="mr-3" />)}<AccordionTitleText>What payment methods do you accept?</AccordionTitleText></>)}}</AccordionTrigger></AccordionHeader><AccordionContent className="ml-9"><AccordionContentText>We accept all major credit cards, including Visa, Mastercard, andAmerican Express. We also support payments through PayPal.</AccordionContentText></AccordionContent></AccordionItem></Accordion>)}
Disabled item
You can disable an item by setting the isDisabled prop to true. This will prevent the user from interacting with the item and its content. You can also disable the whole accordion by setting the isDisabled prop to true on the Accordion component.
function App() {return (<Accordion variant="unfilled" className="m-5 w-[90%]"><AccordionItemvalue="item-1"isDisabled={true}className="border-b border-outline-300"><AccordionHeader><AccordionTrigger>{({ isExpanded }) => {return (<><AccordionTitleText>Disabled Item</AccordionTitleText>{isExpanded ? (<AccordionIcon as={MinusIcon} />) : (<AccordionIcon as={PlusIcon} />)}</>)}}</AccordionTrigger></AccordionHeader><AccordionContent><AccordionContentText>This is a Disabled Item.</AccordionContentText></AccordionContent></AccordionItem><AccordionItem value="item-2"><AccordionHeader><AccordionTrigger>{({ isExpanded }) => {return (<><AccordionTitleText>Is this accordion accessible?</AccordionTitleText>{isExpanded ? (<AccordionIcon as={MinusIcon} />) : (<AccordionIcon as={PlusIcon} />)}</>)}}</AccordionTrigger></AccordionHeader><AccordionContent><AccordionContentText>Yes, the accordion is accessible. It adheres to the WAI-ARIA designpattern. You can read more about it in the accessibility section ofthe docs.</AccordionContentText></AccordionContent></AccordionItem></Accordion>)}
Default value
Use the defaultValue prop to define the open item by default.
function App() {return (<Accordionvariant="unfilled"type="single"defaultValue="item-3"className="w-[90%] m-5"><AccordionItem value="item-1" className="rounded-lg"><AccordionHeader><AccordionTrigger>{({ isExpanded }) =>