Alternatives

Card — Cards are highly flexible component to display a subject with its related information.
Tile — Tiles are used to display context information to help user complete a task or act as an entry point for more detail. They can also be used to display a list of loosely connected options to help the user gather information quickly at a glance.
ArrayField — The ArrayField is a form input for capturing multiple instances of multiple fields, saving valuable screen space.
Accordion — Accordions are used to group similar content and hide or show it depending on user needs or preferences. Accordions give users more granular control over the interface and help digest content in stages, rather than all at once.

Primitives

This package exposes a number of primitives that can be used to compose collapsable content.

Collapsable

This is the root primitive of a Collapsable.

The open/closed state is controlled by the consumer.

Basic usage

const [isOpen, setIsOpen] = useState(false)
<Collapsable isOpen={isOpen} setIsOpen={setIsOpen}>{/* Collapsable primitives */}</Collapsable>

Collapsable.Header

This primitive houses the heading and the trigger.

Basic usage

<Collapsable.Header>{/* customer header content */}</Collapsable.Header>

NOTE: The trigger is always renderred to the right and is connected to the open/closed state and toggle function autmatically.

Collapsable.Content

This primitive houses the content that can be toggled.

Basic usage

You can put any type of content in here except large forms.

<Collapsable.Content>{/* custom content */}</Collapsable.Content>

Receipes

Text content

Edit in Playroom

const [isOpen, setIsOpen] = useState(false);
return (
  <Collapsable isOpen={isOpen} setIsOpen={setIsOpen}>
    <Collapsable.Header>
      <Heading level="6">Heading</Heading>
    </Collapsable.Header>
    <Collapsable.Content>
      <Text>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Magnam, optio
        corporis. Dolore sit saepe molestiae? Ullam illo asperiores quasi
        voluptatibus provident possimus nostrum ducimus dolore sint, saepe
        temporibus, nisi qui?
      </Text>
    </Collapsable.Content>
  </Collapsable>
);

Filters

Edit in Playroom

const [isOpen, setIsOpen] = useState(false);
const [selected, setSelected] = useState(['bulbasaur']);
return (
  <Collapsable isOpen={isOpen} setIsOpen={setIsOpen}>
    <Collapsable.Header>
      <Flex alignItems="center">
        <Box flex="1">
          <Flex gap="small">
            <Heading level="6">Pokemons selected</Heading>
            {selected.length > 0 && (
              <NotificationBadge tone="informative" value={selected.length} />
            )}
          </Flex>
        </Box>
        {isOpen && (
          <Button
            size="small"
            label="Clear"
            variant="text"
            colorSchema="tertiary"
          />
        )}
      </Flex>
    </Collapsable.Header>
    <Collapsable.Content>
      <CheckboxGroup
        legend="Pokemons selected"
        value={selected}
        onChange={setSelected}
      >
        <Stack gap="medium">
          <Checkbox value="bulbasaur">Bulbasaur</Checkbox>
          <Checkbox value="charmander">Charmander</Checkbox>
          <Checkbox value="squirtle">Squirtle</Checkbox>
        </Stack>
      </CheckboxGroup>
    </Collapsable.Content>
  </Collapsable>
);