AccordioniOS

Expandable sections with spring height animation and haptics.

$ npx lumioui add accordion

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

Parts: AccordionItem · AccordionTrigger · AccordionContent

Props21

Accordion
type?	"single" \| "multiple"	Single = only one open at a time.
value?	string[]	Controlled open items.
defaultValue?	string[]	Initial open items (uncontrolled).
onValueChange?	(value: string[]) => void	Called when the open set changes.
collapsible?	boolean	Allow collapsing the last open item in single mode. Default true.
className?	string
AccordionItem
value	string
disabled?	boolean	Disable this item's trigger.
className?	string
AccordionTrigger
icon?	IconName	Optional leading icon name.
accessibilityLabel?	string	Accessible label (defaults to children text).
accessibilityHint?	string	Hint announced after the label.
className?	string
textClassName?	string
iconClassName?	string
children?	React.ReactNode
AccordionContent
description?	string	Optional description shown above the main content.
className?	string
textClassName?	string
descriptionClassName?	string
children?	React.ReactNode

Accordion — Multiplemultiple.tsx

accordion/variants/multiple.tsx open

Expandable sections with spring height animation and haptics.

import { AccordionMultiple } from "@/components/ui/accordion/variants/multiple";

export function Example() {
  return (
    <AccordionMultiple />
  );
}

import * as React from "react";
import { View } from "react-native";
import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "../accordion";
import { Glass } from "../../glass/glass";

/** AccordionMultiple — ready-made controlled multi-open FAQ accordion. */
export function AccordionMultiple() {
  const [open, setOpen] = React.useState<string[]>(["fees"]);
  return (
    <View className="w-full gap-3">
        <Glass interactive curvature="edge" className="w-full rounded-2xl p-5">
          <Accordion
            type="multiple"
            value={open}
            onValueChange={setOpen}
            className="w-full"
          >
            <AccordionItem value="fees">
              <AccordionTrigger icon="info">What are the transfer fees?</AccordionTrigger>
              <AccordionContent description="Pricing">
                Domestic ACH transfers are free. Instant transfers cost 1.5% — sending $4,280.50 adds $64.21.
              </AccordionContent>
            </AccordionItem>
            <AccordionItem value="cards">
              <AccordionTrigger icon="credit-card">How do I add a debit card?</AccordionTrigger>
              <AccordionContent description="Cards & banks">
                Link a US debit card or bank under Settings → Payment methods. Visa, Mastercard, and Amex are supported.
              </AccordionContent>
            </AccordionItem>
            <AccordionItem value="security" disabled>
              <AccordionTrigger icon="lock">How do I close my account?</AccordionTrigger>
              <AccordionContent>Available after your next statement closes on Sep 30.</AccordionContent>
            </AccordionItem>
          </Accordion>
        </Glass>
      </View>
  );
}

Accordion — Singlesingle.tsx

accordion/variants/single.tsx open

Expandable sections with spring height animation and haptics.

import { AccordionSingle } from "@/components/ui/accordion/variants/single";

export function Example() {
  return (
    <AccordionSingle />
  );
}

import * as React from "react";
import { View } from "react-native";
import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "../accordion";
import { Glass } from "../../glass/glass";

/** AccordionSingle — single-open glass accordion over an alpine lake world. */
export function AccordionSingle() {
  return (
    <View className="w-full gap-3">
        <Glass interactive curvature="edge" className="w-full rounded-2xl p-5">
          <Accordion type="single" defaultValue={["x"]} collapsible={false} className="w-full">
            <AccordionItem value="x">
              <AccordionTrigger>Is my balance FDIC insured?</AccordionTrigger>
              <AccordionContent>
                Balances up to $250,000 are FDIC insured through our partner banks.
              </AccordionContent>
            </AccordionItem>
            <AccordionItem value="y">
              <AccordionTrigger>Which currencies can I hold?</AccordionTrigger>
              <AccordionContent>USD and EUR are live today — GBP and JPY arrive this fall.</AccordionContent>
            </AccordionItem>
          </Accordion>
        </Glass>
      </View>
  );
}