Collapsible card

A card whose head folds it: an optional part of a form, or one item of a list edited in place. A control beside the head (Remove) never folds it.

Language

Appearance

Advanced settings

import { SlidersHorizontalIcon } from '@phosphor-icons/react';
import { CollapsibleCard, TextField } from '@arbol-ai/ui';

<CollapsibleCard
  className="max-w-xl"
  description="Line, retries and call limits"
  icon={<SlidersHorizontalIcon />}
  title="Advanced settings"
>
  <TextField defaultValue="2" label="Retries" />
  <TextField defaultValue="60" label="Minutes between retries" />
</CollapsibleCard>

One item open at a time

The parent controls which card is open; each card’s summary says what it holds.

Home

import { MapPinIcon, PhoneIcon, TrashIcon } from '@phosphor-icons/react';
import { useState } from 'react';
import { CollapsibleCard, IconButton, TextField } from '@arbol-ai/ui';

const ADDRESSES = [
  { id: 'home', title: 'Home', summary: 'Calle 72 #10-34, Bogotá', icon: <MapPinIcon /> },
  { id: 'mobile', title: 'Second phone', summary: '+57 310 555 0199', icon: <PhoneIcon /> },
];

const ContactPoints = () => {
  const [open, setOpen] = useState<string | null>('home');
  return (
    <div className="max-w-xl space-y-2">
      {ADDRESSES.map((point) => (
        <CollapsibleCard
          action={<IconButton icon={<TrashIcon />} label={`Remove ${point.title}`} size="sm" />}
          description={point.summary}
          icon={point.icon}
          isExpanded={open === point.id}
          key={point.id}
          onExpandedChange={(isExpanded) => {
            setOpen(isExpanded ? point.id : null);
          }}
          title={point.title}
        >
          <TextField defaultValue={point.summary} label={point.title} />
        </CollapsibleCard>
      ))}
    </div>
  );
};

<ContactPoints />

Source

The examples above are src/blocks/collapsible-card/collapsible-card.examples.tsx, which the library’s tests render too.