- GitHub: [BonnierNews/dn-design-system/../web/src/components/list-item](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/list-item)
- Storybook: [ListItem > ToggleListItem](https://designsystem.dn.se/?path=/docs/basic-listitem-togglelistitem--docs)
- Storybook (Latest): [ListItem > ToggleListItem](https://designsystem-latest.dn.se/?path=/docs/basic-listitem-togglelistitem--docs)

----

# Toggle List Item

## Parameters

|parameter | type | required | options | default | description |
|:--- | :--- | :--- | :--- | :--- | :--- |
|listItemType | String | yes | accordion, checkbox, radio, toggle, image, standard | standard | Note that some parameters are **not** available for certain list item types |
|title | String | yes | | | |
|titleHref | String | no | | | If titleHref is set the list item title will be rendered as an a-tag |
|subtitle | String | no | | | |
|toggleText | String | yes | | | |
|toggleSelectedText | String | yes | | | |
|selected | bool | no | true, false | false | |
|disabled | bool | no | true, false | false | |
|border | bool | no | true, false | false | |
|attributes | Object | no | | | Ex. { target: "_blank", "data-test": "lorem ipsum" } |
|elementAttributes | Object | no | | | Sets attributes on actual toggle element and not list item. Same structure as attributes above |
|linkAttributes | Object | no | | | Set attributes on the title link. Ex. { target: "_blank", "data-test": "lorem ipsum" } |
|classNames | String | no | | | Ex. "my-special-class" |
|forcePx | bool | no | true, false | false | Fixed pixel value is used for typography to prevent scaling based on html font-size

## Minimum requirement example

### Nunjucks

These are copy paste friendly examples to quickliy get started using a component.

```html
{% from '@bonniernews/dn-design-system-web/components/list-item/list-item.njk' import ListItem %}

{{ ListItem({
  listItemType: 'toggle',
  title: 'My toggle list item',
  titleHref: 'dn.se',
  toggleText: 'Följ',
  toggleSelectedText: 'Följer'
})}}
```

### SCSS
```scss
@use "@bonniernews/dn-design-system-web/components/list-item/list-item";
```

### Javascript

```javascript
import dsListItem from '@bonniernews/dn-design-system-web/components/list-item/list-item.js'
const listElements = Array.from(document.getElementsByClassName("ds-list-item"));
dsListItem(listElements);
```

*The javascript is only needed for list items of type toggle or accordion*