Interactive List

1.3.6

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;

Instale o componente via terminal.

npm install @nimbus-ds/interactive-list

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

InteractiveList

NameTypeDefaultDescription

children

bottomDivider

boolean

'true'

Defines whether the List has a bottom border.

InteractiveList.Structure

NameTypeDefaultDescription

title*

string

Title of the list item element. Also used to generate the ID for the interactive element.

showTitle

boolean

Determines if the title is visible or not.

description

string

Description of the list item element.

children

React.ReactNode

Custom content for the list item element.

InteractiveList.ButtonItem

NameTypeDefaultDescription

iconButton*

object

Button props inherited from Nimbus components

title*

string

Title of the list item element. Also used to generate the ID for the interactive element.

showTitle

boolean

Determines if the title is visible or not.

description

string

Description of the list item element.

children

React.ReactNode

Custom content for the list item element.

InteractiveList.CheckboxItem

NameTypeDefaultDescription

checkbox*

Checkbox props inherited from Nimbus components.

title*

string

Title of the list item element. Also used to generate the ID for the interactive element.

showTitle

boolean

Determines if the title is visible or not.

description

string

Description of the list item element.

children

React.ReactNode

Custom content for the list item element.

InteractiveList.RadioItem

NameTypeDefaultDescription

radio*

Radio props inherited from Nimbus components.

title*

string

Title of the list item element. Also used to generate the ID for the interactive element.

showTitle

boolean

Determines if the title is visible or not.

description

string

Description of the list item element.

children

React.ReactNode

Custom content for the list item element.

InteractiveList.ToggleItem

NameTypeDefaultDescription

toggle*

Toggle props inherited from Nimbus components.

title*

string

Title of the list item element. Also used to generate the ID for the interactive element.

showTitle

boolean

Determines if the title is visible or not.

description

string

Description of the list item element.

children

React.ReactNode

Custom content for the list item element.

InteractiveList.StructureSkeleton

NameTypeDefaultDescription

title*

string

Title of the list item element. Also used to generate the ID for the interactive element.

showTitle

boolean

Determines if the title is visible or not.

description

string

Description of the list item element.

children

React.ReactNode

Custom content for the list item element.

InteractiveList.ButtonItemSkeleton

NameTypeDefaultDescription

title*

string

Title of the list item element. Also used to generate the ID for the interactive element.

showTitle

boolean

Determines if the title is visible or not.

description

string

Description of the list item element.

children

React.ReactNode

Custom content for the list item element.

InteractiveList.CheckboxItemSkeleton

NameTypeDefaultDescription

title*

string

Title of the list item element. Also used to generate the ID for the interactive element.

showTitle

boolean

Determines if the title is visible or not.

description

string

Description of the list item element.

children

React.ReactNode

Custom content for the list item element.

InteractiveList.RadioItemSkeleton

NameTypeDefaultDescription

title*

string

Title of the list item element. Also used to generate the ID for the interactive element.

showTitle

boolean

Determines if the title is visible or not.

description

string

Description of the list item element.

children

React.ReactNode

Custom content for the list item element.

InteractiveList.ToggleItemSkeleton

NameTypeDefaultDescription

toggle*

Toggle props inherited from Nimbus components.

title*

string

Title of the list item element. Also used to generate the ID for the interactive element.

showTitle

boolean

Determines if the title is visible or not.

description

string

Description of the list item element.

children

React.ReactNode

Custom content for the list item element.