Accordion

An accordion is a UI component that consists of a vertical stack of headers that can be expanded or collapsed to reveal or hide associated content sections.

Basic

Source Code

import {
  Accordion,
  AccordionControl,
  AccordionItem,
  AccordionPanel,
} from '@ocean-network-express/magenta-ui/react';
import React from 'react';

import { CONTAINERS } from '../../utils/Accordion/containers';

export function Basic() {
  return (

Default open

  • You can set the default open item by passing the defaultOpenId prop to the Accordion component.

  • By default, multiple prop is set to false. So, set defaultOpenId as a string:

A flat rack container has no top and only two sides. This makes room for heavy loads to be set the rack from above or from the side. Most flat rack containers are either 20 or 40 feet long.

Source Code

import {
  Accordion,
  AccordionControl,
  AccordionItem,
  AccordionPanel,
} from '@ocean-network-express/magenta-ui/react';
import React from 'react';

import { CONTAINERS } from '../../utils/Accordion/containers';

export function DefaultOpenSingle() {
  return (
  • When multiple prop is set to true, set defaultOpenId as an array of strings:
Dry storage containers are the most common containers used in the shipping industry. They come in lengths of 20, 40 and 45 feet, and they are designed to transport dry goods.
A flat rack container has no top and only two sides. This makes room for heavy loads to be set the rack from above or from the side. Most flat rack containers are either 20 or 40 feet long.

Source Code

import {
  Accordion,
  AccordionControl,
  AccordionItem,
  AccordionPanel,
} from '@ocean-network-express/magenta-ui/react';
import React from 'react';

import { CONTAINERS } from '../../utils/Accordion/containers';

export function DefaultOpenMultiple() {
  return (

Controlled openId state

  • You can control Accordion state with openId and onChange props.

  • By default, multiple prop is set to false. So, set openId as string:

Dry storage containers are the most common containers used in the shipping industry. They come in lengths of 20, 40 and 45 feet, and they are designed to transport dry goods.

Source Code

import {
  Accordion,
  AccordionControl,
  AccordionItem,
  AccordionPanel,
} from '@ocean-network-express/magenta-ui/react';
import React from 'react';

import { CONTAINERS } from '../../utils/Accordion/containers';

export function ControlledSingle() {
  const [openId, setOpenId] = React.useState<string | undefined>('Dry');
  • When multiple prop is set to true, set openId as an array of strings:
Dry storage containers are the most common containers used in the shipping industry. They come in lengths of 20, 40 and 45 feet, and they are designed to transport dry goods.
A flat rack container has no top and only two sides. This makes room for heavy loads to be set the rack from above or from the side. Most flat rack containers are either 20 or 40 feet long.

Source Code

import {
  Accordion,
  AccordionControl,
  AccordionItem,
  AccordionPanel,
} from '@ocean-network-express/magenta-ui/react';
import React from 'react';

import { CONTAINERS } from '../../utils/Accordion/containers';

export function ControlledMultiple() {
  const [openId, setOpenId] = React.useState<string[]>(['Dry', 'Flat']);

Sizes

  • Accordion supports 4 sizes sm, md, lg and responsive and can be changed by passing the size prop.

  • Default size is lg.

Source Code

import {
  Accordion,
  AccordionControl,
  AccordionItem,
  AccordionPanel,
} from '@ocean-network-express/magenta-ui/react';
import React from 'react';

import { CONTAINERS } from '../../utils/Accordion/containers';

export function Sizes() {
  return (
  • With size responsive, the component will be responsive to the viewport.

Screen prefix

Screen width

Component size

xs → xl0px → 1279pxsm
xl → 3xl1280px → 1919pxmd
3xl → ∞1920px → ∞lg

Source Code

import {
  Accordion,
  AccordionControl,
  AccordionItem,
  AccordionPanel,
} from '@ocean-network-express/magenta-ui/react';
import React from 'react';

import { CONTAINERS } from '../../utils/Accordion/containers';

export function ResponsiveSize() {
  return (

Arrow position

  • Arrow position can be changed by passing the arrowPosition prop on the Accordion component.
  • Default arrow position is right.

Source Code

import {
  Accordion,
  AccordionControl,
  AccordionItem,
  AccordionPanel,
} from '@ocean-network-express/magenta-ui/react';
import React from 'react';

import { CONTAINERS } from '../../utils/Accordion/containers';

export function ArrowPosition() {
  return (

Custom AccordionControl label

Source Code

import {
  Accordion,
  AccordionControl,
  AccordionItem,
  AccordionPanel,
} from '@ocean-network-express/magenta-ui/react';
import React from 'react';

import { CONTAINERS } from '../../utils/Accordion/containers';

export function CustomLabel() {
  return (

Custom arrow icon

  • Use the arrowIcon prop on the AccordionControl component to change the indicator icon. The component handles the turning transition automatically.

Source Code

import { CaretDownFill } from '@ocean-network-express/magenta-ui/icons';
import {
  Accordion,
  AccordionControl,
  AccordionItem,
  AccordionPanel,
} from '@ocean-network-express/magenta-ui/react';
import React from 'react';

export function CustomArrowIcon() {
  return (
    <div className="flex flex-col gap-4 min-w-[350px]">

Disabled

  • Disabled state can be enabled by setting disabled prop to true on AccordionItem component.

Source Code

import {
  Accordion,
  AccordionControl,
  AccordionItem,
  AccordionPanel,
} from '@ocean-network-express/magenta-ui/react';
import React from 'react';

import { CONTAINERS } from '../../utils/Accordion/containers';

export function Disabled() {
  const items = CONTAINERS.map((item, index) => ({

Stacked

  • Accordion can be stacked by setting the stacked prop to true.
  • By default, Accordion will be separated.

Default Separated

Stacked

Source Code

import {
  Accordion,
  AccordionControl,
  AccordionItem,
  AccordionPanel,
  Text,
} from '@ocean-network-express/magenta-ui/react';
import React from 'react';

import { CONTAINERS } from '../../utils/Accordion/containers';

export function Stacked() {

Nested accordions

Source Code

import {
  Accordion,
  AccordionControl,
  AccordionItem,
  AccordionPanel,
  Button,
  Text,
} from '@ocean-network-express/magenta-ui/react';
import React from 'react';

import { CONTAINERS } from '../../utils/Accordion/containers';

TypeScript

  • AccordionProps type exported from @ocean-network-express/magenta-ui/react is a generic, it accepts boolean type that describes multiple state:

Source Code


import { type AccordionProps } from '@ocean-network-express/magenta-ui/react';

type MultipleAccordionProps = AccordionProps<true>;
type DefaultAccordionProps = AccordionProps<false>;

Accessibility

Accordion follows WAI-ARIA recommendations:

Keyboard interactions

Key

Description

ArrowDown

Moves focus to next item

ArrowUp

Moves focus to previous item

Home

Moves focus to first item

End

Moves focus to last item

Space/Enter

Toggles focused item opened state

Was this page helpful?