@sikt/sds-filter-list v0.4.1

@sikt/sds-filter-list

Consume

npm i -s @sikt/sds-filter-list

React

import {
  FilterList,
  FilterListCategory,
  FilterListItem,
  FilterListSection,
} from "@sikt/sds-filter-list";

@import url("@sikt/sds-filter-list");

Stylesheets & custom markup

The FilterList component is a container of elements to present a list of filter-options.

<FilterList/> is the header section.

<FilterListItem /> renders an option of type checkbox or radio

<FilterListCategory /> is a container of typeFilterListItem.

<FilterListSection> is a container of typeFilterListItem.

<FilterList>
  <FilterListItem />
  <FilterListItem />

  <FilterListCategory>
    <FilterListItem />
    <FilterListItem />
  </FilterListCategory>

  <FilterListSection>
    <FilterListItem />
    <FilterListItem />
  </FilterListSection>

  <FilterListCategory>
    <FilterListSection>
      <FilterListItem />
      <FilterListItem />
    </FilterListSection>

    <FilterListSection>
      <FilterListItem />
      <FilterListItem />
    </FilterListSection>
  </FilterListCategory>
</FilterList>