Accordion Multiple Open

import { css } from 'remix/ui'
import {
  Accordion,
  AccordionContent,
  AccordionItem,
  AccordionTrigger,
} from 'remix/ui/accordion'
import { theme } from 'remix/ui/theme'

export default function Example() {
  return () => (
    <Accordion defaultValue={['api', 'alerts']} type="multiple">
      <AccordionItem value="api">
        <AccordionTrigger>API status checks</AccordionTrigger>
        <AccordionContent>
          <p mix={bodyTextCss}>
            Multiple mode works well for operational checklists and dashboards
            where several sections often need to stay open together.
          </p>
        </AccordionContent>
      </AccordionItem>

      <AccordionItem disabled value="access">
        <AccordionTrigger>Access control sync</AccordionTrigger>
        <AccordionContent>
          <p mix={bodyTextCss}>
            This section is intentionally disabled to show how one unavailable
            item should read inside an otherwise active list.
          </p>
        </AccordionContent>
      </AccordionItem>

      <AccordionItem value="alerts">
        <AccordionTrigger>Alert routing</AccordionTrigger>
        <AccordionContent>
          <p mix={bodyTextCss}>
            Disabled items should feel clearly unavailable without changing the
            overall visual model of the disclosure list.
          </p>
        </AccordionContent>
      </AccordionItem>
    </Accordion>
  )
}

const bodyTextCss = css({
  margin: 0,
  fontSize: theme.fontSize.sm,
  lineHeight: theme.lineHeight.relaxed,
  color: theme.colors.text.secondary,
})