ListGroup

Result

Loading...

Live Editor

function Example() { const options = [ { label: 'General', id: '1', }, { label: 'Sharing Rules', id: '2', }, { label: 'Alliance Partners', id: '3', }, { label: 'Alerts', id: '4', }, { label: 'Client History', id: '5', }, { label: 'Branding', id: '6', }, { label: 'Monte Carlo', id: '7', }, ]; const [activeId, setActiveId] = React.useState(''); const [activeLabel, setActiveLabel] = React.useState(''); function handleItemClick(e, { itemId }) { const activeItem = options.find((option) => option.id === itemId); setActiveId(activeItem.id); setActiveLabel(activeItem.label); } return ( <ListGroup id="list-group-demo" activeLabel={activeLabel} onItemClick={handleItemClick}> {options.map((option) => ( <ListGroup.Item key={option.id} id={option.id} active={activeId === option.id} action> {option.label} </ListGroup.Item> ))} </ListGroup> ); }

function Example() {
  const options = [
    {
      label: 'General',
      id: '1',
    },
    {
      label: 'Sharing Rules',
      id: '2',
    },
    {
      label: 'Alliance Partners',
      id: '3',
    },
    {
      label: 'Alerts',
      id: '4',
    },
    {
      label: 'Client History',
      id: '5',
    },
    {
      label: 'Branding',
      id: '6',
    },
    {
      label: 'Monte Carlo',
      id: '7',
    },
  ];

  const [activeId, setActiveId] = React.useState('');
  const [activeLabel, setActiveLabel] = React.useState('');

  function handleItemClick(e, { itemId }) {
    const activeItem = options.find((option) => option.id === itemId);

    setActiveId(activeItem.id);
    setActiveLabel(activeItem.label);
  }

  return (
    <ListGroup id="list-group-demo" activeLabel={activeLabel} onItemClick={handleItemClick}>
      {options.map((option) => (
        <ListGroup.Item key={option.id} id={option.id} active={activeId === option.id} action>
          {option.label}
        </ListGroup.Item>
      ))}
    </ListGroup>
  );
}

With the ListGroupItemContent component

Kyber provides a ListGroupItemContent component to help you build a list group item with render props for each section of the item.

Result

Loading...

Live Editor

<ListGroup> <ListGroup.Item> <ListGroupItemContent renderPrefix={() => <Radio />} renderTitle={() => 'List Item Title'} renderHelper={() => 'Helper text'} renderDescription={() => 'Description goes here underneath all of the items above and respects indentation for inputs.' } renderFooterAction={() => <Button size="sm">Button Title</Button>} /> </ListGroup.Item> <ListGroup.Item> <ListGroupItemContent renderPrefix={() => <Checkbox />} renderTitle={() => 'List Item Title'} renderBadge={(badgeProps) => <Badge {...badgeProps}>1</Badge>} renderHelper={() => '⌘C'} renderDescription={() => 'Description goes here underneath all of the items above and respects indentation for inputs.' } renderFooterAction={() => ( <div className="d-flex"> <Button variant="link" className="me-2 p-0"> Save </Button> <Button variant="link" className="me-auto p-0"> Cancel </Button> <Button variant="link" className="text-danger p-0"> Delete </Button> </div> )} /> </ListGroup.Item> <ListGroup.Item> <ListGroupItemContent renderPrefix={() => <Switch />} renderTitle={() => 'List Item Title'} renderTitleAction={() => ( <Button variant="link" className="p-0"> Edit </Button> )} renderDescription={() => 'Description goes here underneath all of the items above and respects indentation for inputs.' } renderFooterAction={() => <Button size="sm">Button Title</Button>} /> </ListGroup.Item> <ListGroup.Item> <ListGroupItemContent renderPrefix={() => <span className="icon-star-01 me-2" />} renderTitle={() => 'List Item Title'} renderHelper={() => <span className="icon-help-circle" />} renderDescription={() => 'Description goes here underneath all of the items above and respects indentation for inputs.' } renderFooterAction={() => <Button size="sm">Button Title</Button>} /> </ListGroup.Item> </ListGroup>

<ListGroup>
  <ListGroup.Item>
    <ListGroupItemContent
      renderPrefix={() => <Radio />}
      renderTitle={() => 'List Item Title'}
      renderHelper={() => 'Helper text'}
      renderDescription={() =>
        'Description goes here underneath all of the items above and respects indentation for inputs.'
      }
      renderFooterAction={() => <Button size="sm">Button Title</Button>}
    />
  </ListGroup.Item>
  <ListGroup.Item>
    <ListGroupItemContent
      renderPrefix={() => <Checkbox />}
      renderTitle={() => 'List Item Title'}
      renderBadge={(badgeProps) => <Badge {...badgeProps}>1</Badge>}
      renderHelper={() => '⌘C'}
      renderDescription={() =>
        'Description goes here underneath all of the items above and respects indentation for inputs.'
      }
      renderFooterAction={() => (
        <div className="d-flex">
          <Button variant="link" className="me-2 p-0">
            Save
          </Button>
          <Button variant="link" className="me-auto p-0">
            Cancel
          </Button>
          <Button variant="link" className="text-danger p-0">
            Delete
          </Button>
        </div>
      )}
    />
  </ListGroup.Item>
  <ListGroup.Item>
    <ListGroupItemContent
      renderPrefix={() => <Switch />}
      renderTitle={() => 'List Item Title'}
      renderTitleAction={() => (
        <Button variant="link" className="p-0">
          Edit
        </Button>
      )}
      renderDescription={() =>
        'Description goes here underneath all of the items above and respects indentation for inputs.'
      }
      renderFooterAction={() => <Button size="sm">Button Title</Button>}
    />
  </ListGroup.Item>
  <ListGroup.Item>
    <ListGroupItemContent
      renderPrefix={() => <span className="icon-star-01 me-2" />}
      renderTitle={() => 'List Item Title'}
      renderHelper={() => <span className="icon-help-circle" />}
      renderDescription={() =>
        'Description goes here underneath all of the items above and respects indentation for inputs.'
      }
      renderFooterAction={() => <Button size="sm">Button Title</Button>}
    />
  </ListGroup.Item>
</ListGroup>

As a checklist

Result

Loading...

Live Editor

<ListGroup collapse={false}> <ListGroup.Item active action> <ListGroupItemContent renderTitle={() => 'Item 1'} renderTitleAction={() => <span className="icon-check" />} /> </ListGroup.Item> <ListGroup.Item active action> <ListGroupItemContent renderTitle={() => 'Item 2'} renderTitleAction={() => <span className="icon-check" />} /> </ListGroup.Item> <ListGroup.Item action> <ListGroupItemContent renderTitle={() => 'Item 3'} /> </ListGroup.Item> <ListGroup.Item active action> <ListGroupItemContent renderTitle={() => 'Item 4'} renderTitleAction={() => <span className="icon-check" />} /> </ListGroup.Item> </ListGroup>

<ListGroup collapse={false}>
  <ListGroup.Item active action>
    <ListGroupItemContent
      renderTitle={() => 'Item 1'}
      renderTitleAction={() => <span className="icon-check" />}
    />
  </ListGroup.Item>
  <ListGroup.Item active action>
    <ListGroupItemContent
      renderTitle={() => 'Item 2'}
      renderTitleAction={() => <span className="icon-check" />}
    />
  </ListGroup.Item>
  <ListGroup.Item action>
    <ListGroupItemContent renderTitle={() => 'Item 3'} />
  </ListGroup.Item>
  <ListGroup.Item active action>
    <ListGroupItemContent
      renderTitle={() => 'Item 4'}
      renderTitleAction={() => <span className="icon-check" />}
    />
  </ListGroup.Item>
</ListGroup>

Analytics

The ListGroup component is trackable through Kyber Analytics. This is the default analytics config.

export default {
	value: 'ListGroup',
	actions: {
		onItemClick: { type: 'LISTGROUP_ITEMCLICK', payload: 'Click' },
	},
};

Props

ListGroup

ListGroupItem

ListGroupItemContent