Filter Card

Design System - Filter Card component

The Filter Card component is a layout container designed to offer users an intuitive and accessible way to narrow down data or results based on specified parameters.

Component React

// Sample code

<FilterCard
  addClose
  equalWidthButtons
  layoutType="vertical"
  onClose={function noRefCheck(){}}
  onPrimaryPressed={function noRefCheck(){}}
  onSecondaryPressed={function noRefCheck(){}}
  primaryActionLabel="ApplyFilters"
  secondaryActionLabel="Clear Filters"
  title="Filter"
>
  <LabelFieldPair vertical>
    <TextBlock body="Name" />
    <TextInput type="text" />
  </LabelFieldPair>
  <LabelFieldPair vertical>
    <TextBlock body="Value" />
    <TextInput type="text" />
  </LabelFieldPair>
  <LabelFieldPair vertical>
    <TextBlock body="Gender" />
    <RadioButtons
      alignVertical
      name="gender"
      onSelect={function noRefCheck(){}}
      options={[
        {
          code: 'M',
          name: 'Male'
        },
        {
          code: 'F',
          name: 'Female'
        },
        {
          code: 'O',
          name: 'Others'
        }
      ]}
      optionsKey="name"
      style={{
        width: '100%'
      }}
    />
  </LabelFieldPair>
</FilterCard>

Component Flutter

Component Design

Anatomy

Variants

---

	Horizontal Ideal for wider layouts or desktop/tablet views where filters are applied inline at the top of a table or section. Promotes quick scanning and efficient space usage.
	Vertical This layout presents filters in a stacked format, enabling a more comfortable interaction on narrow viewports or where field variety is high.

Properties

Header Icon A visual cue precedes the heading for easy recognition and visual alignment with DIGIT’s iconography standards..
Close Button Offers the ability to optionally include a close/dismiss icon for the card, especially useful when it’s implemented as an overlay or drawer.

Property Configuration Table

Each design component offers a range of configurable options. These options are intentionally platform-agnostic, allowing implementations to adapt and tailor them to align with the specific requirements of the chosen framework.

React

Property	Value	Default
wrapperClassName	text	-
headerContentClassName	text	-
caption	yes/no	no
captionClassName	yes/no	no
header	number	-
headerClasName	yes/no	no
subHeader	yes/no	no
subHeaderClasName	yes/no	no
body	yes/no	no
bodyClasName	number	no
style	yes/no	-no

Flutter

Usage Guide

---

	Match layout to context Use the horizontal variant for desktop/table views and vertical for mobile or sidebar layouts. Avoid forcing a vertical layout into a constrained width or a horizontal one in mobile viewports.

Change log

---

Date	Number	Notes
Dec 15, 2024	v-0.0.2	This component is added to the website. This component is now individually versioned.

Design Checklist

---

	All interactive states - Includes all interactive states that are applicable (hover, down, focus, keyboard focus, disabled).
	Accessible use of colours - Colour is not used as the only visual means of conveying information (WCAG 2.1 1.4.1)
	Accessible contrast for text - Text has a contrast ratio of at least 4.5:1 for small text and at least 3:1 for large text (WCAG 2.0 1.4.3).
	Accessible contrast for UI components - Visual information required to identify components and states (except inactive components) has a contrast ratio of at least 3:1 (WCAG 2.1 1.4.11).
	Keyboard interactions - Includes all interactive states that are applicable (hover, down, focus, keyboard focus, disabled).
	Screen reader accessible - All content, including headings, labels, and descriptions, is meaningful, concise, contextual and accessible by screen readers.
	Responsive for all breakpoints - Responsiveness for 3 breakpoints - Mobile, Tablet and Desktop
	Usage guidelines - Includes a list of dos and don'ts that highlight best practices and common mistakes.
	Content guidelines - Content standards and usage guidelines for writing and formatting in-product content for the component.
	Defined variants and properties - Includes relevant variants and properties (style, size, orientation, optional iconography, decorative elements, selection states, error states, etc.)
	Defined behaviours - Guidelines for keyboard navigation and focus, layout management (including wrapping, truncation, and overflow), animations, and user interactions.
	Design Kit - Access to the design file for the component in Figma, multiple options, states, colour themes, and platform scales.