---
title: List
category: General
---

```jsx live
render(() => {
  const [open, setOpen] = React.useState(false)
  return (
    <Card padding={2}>
      <Toolbar
        title={<Heading level={3}>Title</Heading>}
        helpContent="Toolbars need help too"
        actions={
          <Button
            title={open ? 'Done' : 'Add'}
            onClick={() => setOpen(!open)}
          />
        }
        marginBottom={1}
      />
      <Collapse open={open} lazy>
        <Combobox.Popover autoFocus>
          <Combobox.Item>Item 1</Combobox.Item>
          <Combobox.Item>Item 2</Combobox.Item>
          <Combobox.Item>Item 3</Combobox.Item>
        </Combobox.Popover>
      </Collapse>
      <Card
        as={List}
        marginTop={1}
        onItemRemoveRequest={(index) => alert('Delete item at index ' + index)}
      >
        <List.Item>One</List.Item>
        <List.Item>Two</List.Item>
        <List.Item>Three</List.Item>
      </Card>
    </Card>
  )
})
```