---
tags: components
title: Drawer for filtering
description: "Filter drawer variant optimized for search and filter interfaces with form elements."
---

%details.drawer-wrapper
  %summary.drawer-trigger
    .btn.btn-primary Open Drawer      
  .drawer
    .drawer-header
      .drawer-title Filter by
      %form.form-search.direct-input.inverted
        %input.form-control{type:'Search', placeholder:"Search for filters"}
        %button.btn.btn-clear{type:'reset'}
    .drawer-content
      %section.section
        .section-header
          %h5.section-title Category
        %form.form-grid.narrow
          .form-check.sm.inverted
            %input#check_drawer1{type:'checkbox'}
            %label{for:'check_drawer1'} Select all/none
          .form-check.sm.inverted
            %input#check_drawer2{type:'checkbox'}
            %label{for:'check_drawer2'}
              %span.icon.icon-critical.mr-icon-spacing
              Checkbox label
          .form-check.sm.inverted
            %input#check_drawer3{type:'checkbox'}
            %label{for:'check_drawer3'}
              %span.icon.icon-high.mr-icon-spacing
              Checkbox label
          .form-check.sm.inverted
            %input#check_drawer4{type:'checkbox'}
            %label{for:'check_drawer4'}
              %span.icon.icon-low.mr-icon-spacing
              Checkbox label
          .form-check.sm.inverted
            %input#check_drawer5{type:'checkbox'}
            %label{for:'check_drawer5'}
              %span.icon.icon-user-story.mr-icon-spacing
              Checkbox label
      %details.section-collapsable
        %summary.section-header
          %h5.section-title Section collapsable
        %form.form-grid.narrow
          .form-check.sm.inverted
            %input#check_drawer6{type:'checkbox'}
            %label{for:'check_drawer6'} Select all/none
          .form-check.sm.inverted
            %input#check_drawer7{type:'checkbox'}
            %label{for:'check_drawer7'}
              .user-item.sm
                %img{src:"/assets/images/placeholders/profile_supergirl.png"}
                User item sm
          .form-check.sm.inverted
            %input#check_drawer8{type:'checkbox'}
            %label{for:'check_drawer8'}
              .user-item.sm
                %img{src:"/assets/images/placeholders/profile_supergirl.png"}
                User item sm
      %details.section-collapsable
        %summary.section-header
          %h5.section-title Section collapsable
        %form.form-grid.narrow
          .form-check.sm.inverted
            %input#check_drawer9{type:'checkbox'}
            %label{for:'check_drawer9'} Select all/none
          .form-check.sm.inverted
            %input#check_drawer10{type:'checkbox'}
            %label{for:'check_drawer10'} Checkbox label with a lot of Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt.
      %section.section
        %p A whole lot of Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. 
    .drawer-footer
      .btn.btn-primary Apply filters
      .btn.btn-secondary.close-btn cancel