FilterCard

A sectioned card component for grouping filter controls and configuration options.

Anatomy

Import and assemble the component:

1import { FilterCard } from '@raystack/apsara'
2

3<FilterCard>
4  <FilterCard.Section>
5    <FilterCard.Item label="Label">
6      Action content
7    </FilterCard.Item>
8  </FilterCard.Section>
9  <FilterCard.Section title="Section Title">
10    Content
11  </FilterCard.Section>
12  <FilterCard.Footer>
13    Footer content
14  </FilterCard.Footer>
15</FilterCard>

API Reference

FilterCard

The outer container for the filter card.

Prop

Type

FilterCard.Section

A section within the filter card with an optional title.

Prop

Type

FilterCard.Item

A label-action row within a section.

Prop

Type

FilterCard.Footer

A compact footer section, right-aligned by default.

Prop

Type

Examples

With Sections

Multiple sections separated by a divider:

1<FilterCard>
2  <FilterCard.Section>
3    <FilterCard.Item label="Ordering">
4      <Select defaultValue="auto">
5        <Select.Trigger
6          size="small"
7          variant="outline"
8          style={{ width: "100%" }}
9        >
10          <Select.Value />
11        </Select.Trigger>
12        <Select.Content>
13          <Select.Item value="auto">Auto</Select.Item>
14          <Select.Item value="name">Name</Select.Item>
15          <Select.Item value="date">Date</Select.Item>

Without Title

Sections can be rendered without a title:

1<FilterCard>
2  <FilterCard.Section>
3    <Text size={1}>Section without a title</Text>
4  </FilterCard.Section>
5</FilterCard>