Interactive List

Interactive List allows users to build lists with multiple options that have some kind of interaction. It can be, and is not limited to, checkboxes, radios, toggles and buttons. This component is built on top of the DataList component that allows the creation of scrollable lists with multiple entries of different kinds of data.

import React from "react";
import { InteractiveList } from "@nimbus-ds/patterns";
import { Box, Tag } from "@nimbus-ds/components";

const Example: React.FC = () => (
  <InteractiveList>
    <InteractiveList.CheckboxItem
      title="First element"
      description="Description of the first element"
      checkbox={{
        name: "checkbox-element",
      }}
    >
      <Box display="flex" gap="1" mt="2">
        <Tag>Text</Tag>
        <Tag>Text</Tag>
        <Tag>Text</Tag>
      </Box>
    </InteractiveList.CheckboxItem>
    <InteractiveList.CheckboxItem
      title="Second element"
      description="Description of the second element"
      checkbox={{
        name: "checkbox-element",
      }}
    >
      <Box display="flex" gap="1" mt="2">
        <Tag>Text</Tag>
        <Tag>Text</Tag>
        <Tag>Text</Tag>
      </Box>
    </InteractiveList.CheckboxItem>
    <InteractiveList.CheckboxItem
      title="Third element"
      description="Description of the third element"
      checkbox={{
        name: "checkbox-element",
      }}
    >
      <Box display="flex" gap="1" mt="2">
        <Tag>Text</Tag>
        <Tag>Text</Tag>
        <Tag>Text</Tag>
      </Box>
    </InteractiveList.CheckboxItem>
  </InteractiveList>
);

export default Example;

Ver no Figma

Implementação

Instale o componente via terminal.

npm install @nimbus-ds/interactive-list

Props

Additional props are passed to the <InteractiveList> element. See div docs for a list of props accepted by the <InteractiveList> element.