Responsive
Atoms
FormLabel
Default
Molecules
ContactDetails
Default
Organisms
HeaderMinimal
Default
ServicesGroupFinderBlock
With Results No Results

SideFilters / Desktop View

Desktop view with multiple filter groups expanded

Layout
Properties
JSON format (e.g., [{"LinkText":"Home","LinkUrl":"/"}])
Component Code
@await Html.PartialAsync("~/Components/Organisms/SideFilters/SideFilters.cshtml", new SideFiltersProps
{
"FilterGroups": [
{
"Label": "About breast cancer",
"Options": [
{
"Id": null,
"Alias": null,
"Name": null,
"Value": "benign",
"Label": "Benign breast conditions",
"Checked": false,
"Disabled": false,
"Required": false,
"AriaLabel": null,
"DataVal": false,
"DataValRequired": null,
"DataUmb": null,
"Title": null,
"TogglePassword": false
},
{
"Id": null,
"Alias": null,
"Name": null,
"Value": "awareness",
"Label": "Breast awareness",
"Checked": false,
"Disabled": false,
"Required": false,
"AriaLabel": null,
"DataVal": false,
"DataValRequired": null,
"DataUmb": null,
"Title": null,
"TogglePassword": false
},
{
"Id": null,
"Alias": null,
"Name": null,
"Value": "diagnosis",
"Label": "Breast cancer diagnosis",
"Checked": false,
"Disabled": false,
"Required": false,
"AriaLabel": null,
"DataVal": false,
"DataValRequired": null,
"DataUmb": null,
"Title": null,
"TogglePassword": false
},
{
"Id": null,
"Alias": null,
"Name": null,
"Value": "secondary",
"Label": "Secondary breast cancer",
"Checked": false,
"Disabled": false,
"Required": false,
"AriaLabel": null,
"DataVal": false,
"DataValRequired": null,
"DataUmb": null,
"Title": null,
"TogglePassword": false
},
{
"Id": null,
"Alias": null,
"Name": null,
"Value": "treatment",
"Label": "Treatment and side effects",
"Checked": false,
"Disabled": false,
"Required": false,
"AriaLabel": null,
"DataVal": false,
"DataValRequired": null,
"DataUmb": null,
"Title": null,
"TogglePassword": false
},
{
"Id": null,
"Alias": null,
"Name": null,
"Value": "worried",
"Label": "Worried about breast cancer",
"Checked": false,
"Disabled": false,
"Required": false,
"AriaLabel": null,
"DataVal": false,
"DataValRequired": null,
"DataUmb": null,
"Title": null,
"TogglePassword": false
},
{
"Id": null,
"Alias": null,
"Name": null,
"Value": "younger",
"Label": "Younger women with breast cancer",
"Checked": false,
"Disabled": false,
"Required": false,
"AriaLabel": null,
"DataVal": false,
"DataValRequired": null,
"DataUmb": null,
"Title": null,
"TogglePassword": false
}
]
},
{
"Label": "More support for you",
"Options": [
{
"Id": null,
"Alias": null,
"Name": null,
"Value": "about-bcn",
"Label": "About Breast Cancer Now",
"Checked": false,
"Disabled": false,
"Required": false,
"AriaLabel": null,
"DataVal": false,
"DataValRequired": null,
"DataUmb": null,
"Title": null,
"TogglePassword": false
},
{
"Id": null,
"Alias": null,
"Name": null,
"Value": "health",
"Label": "Health and wellbeing",
"Checked": false,
"Disabled": false,
"Required": false,
"AriaLabel": null,
"DataVal": false,
"DataValRequired": null,
"DataUmb": null,
"Title": null,
"TogglePassword": false
},
{
"Id": null,
"Alias": null,
"Name": null,
"Value": "vita",
"Label": "Vita magazine",
"Checked": false,
"Disabled": false,
"Required": false,
"AriaLabel": null,
"DataVal": false,
"DataValRequired": null,
"DataUmb": null,
"Title": null,
"TogglePassword": false
}
]
},
{
"Label": "Information in other languages",
"Options": [
{
"Id": null,
"Alias": null,
"Name": null,
"Value": "arabic",
"Label": "Arabic",
"Checked": false,
"Disabled": false,
"Required": false,
"AriaLabel": null,
"DataVal": false,
"DataValRequired": null,
"DataUmb": null,
"Title": null,
"TogglePassword": false
},
{
"Id": null,
"Alias": null,
"Name": null,
"Value": "bengali",
"Label": "Bengali",
"Checked": false,
"Disabled": false,
"Required": false,
"AriaLabel": null,
"DataVal": false,
"DataValRequired": null,
"DataUmb": null,
"Title": null,
"TogglePassword": false
},
{
"Id": null,
"Alias": null,
"Name": null,
"Value": "french",
"Label": "French",
"Checked": false,
"Disabled": false,
"Required": false,
"AriaLabel": null,
"DataVal": false,
"DataValRequired": null,
"DataUmb": null,
"Title": null,
"TogglePassword": false
},
{
"Id": null,
"Alias": null,
"Name": null,
"Value": "gujarati",
"Label": "Gujarati",
"Checked": false,
"Disabled": false,
"Required": false,
"AriaLabel": null,
"DataVal": false,
"DataValRequired": null,
"DataUmb": null,
"Title": null,
"TogglePassword": false
},
{
"Id": null,
"Alias": null,
"Name": null,
"Value": "hindi",
"Label": "Hindi",
"Checked": false,
"Disabled": false,
"Required": false,
"AriaLabel": null,
"DataVal": false,
"DataValRequired": null,
"DataUmb": null,
"Title": null,
"TogglePassword": false
},
{
"Id": null,
"Alias": null,
"Name": null,
"Value": "polish",
"Label": "Polish",
"Checked": false,
"Disabled": false,
"Required": false,
"AriaLabel": null,
"DataVal": false,
"DataValRequired": null,
"DataUmb": null,
"Title": null,
"TogglePassword": false
},
{
"Id": null,
"Alias": null,
"Name": null,
"Value": "portuguese",
"Label": "Portuguese",
"Checked": false,
"Disabled": false,
"Required": false,
"AriaLabel": null,
"DataVal": false,
"DataValRequired": null,
"DataUmb": null,
"Title": null,
"TogglePassword": false
},
{
"Id": null,
"Alias": null,
"Name": null,
"Value": "punjabi",
"Label": "Punjabi",
"Checked": false,
"Disabled": false,
"Required": false,
"AriaLabel": null,
"DataVal": false,
"DataValRequired": null,
"DataUmb": null,
"Title": null,
"TogglePassword": false
},
{
"Id": null,
"Alias": null,
"Name": null,
"Value": "romanian",
"Label": "Romanian",
"Checked": false,
"Disabled": false,
"Required": false,
"AriaLabel": null,
"DataVal": false,
"DataValRequired": null,
"DataUmb": null,
"Title": null,
"TogglePassword": false
},
{
"Id": null,
"Alias": null,
"Name": null,
"Value": "chinese",
"Label": "Simplified Chinese",
"Checked": false,
"Disabled": false,
"Required": false,
"AriaLabel": null,
"DataVal": false,
"DataValRequired": null,
"DataUmb": null,
"Title": null,
"TogglePassword": false
},
{
"Id": null,
"Alias": null,
"Name": null,
"Value": "spanish",
"Label": "Spanish",
"Checked": false,
"Disabled": false,
"Required": false,
"AriaLabel": null,
"DataVal": false,
"DataValRequired": null,
"DataUmb": null,
"Title": null,
"TogglePassword": false
},
{
"Id": null,
"Alias": null,
"Name": null,
"Value": "urdu",
"Label": "Urdu",
"Checked": false,
"Disabled": false,
"Required": false,
"AriaLabel": null,
"DataVal": false,
"DataValRequired": null,
"DataUmb": null,
"Title": null,
"TogglePassword": false
},
{
"Id": null,
"Alias": null,
"Name": null,
"Value": "welsh",
"Label": "Welsh",
"Checked": false,
"Disabled": false,
"Required": false,
"AriaLabel": null,
"DataVal": false,
"DataValRequired": null,
"DataUmb": null,
"Title": null,
"TogglePassword": false
},
{
"Id": null,
"Alias": null,
"Name": null,
"Value": "ukrainian",
"Label": "Ukrainian",
"Checked": false,
"Disabled": false,
"Required": false,
"AriaLabel": null,
"DataVal": false,
"DataValRequired": null,
"DataUmb": null,
"Title": null,
"TogglePassword": false
},
{
"Id": null,
"Alias": null,
"Name": null,
"Value": "somali",
"Label": "Somali",
"Checked": false,
"Disabled": false,
"Required": false,
"AriaLabel": null,
"DataVal": false,
"DataValRequired": null,
"DataUmb": null,
"Title": null,
"TogglePassword": false
}
]
}
],
"ClearFiltersText": "Clear filters",
"SelectFiltersText": "Select filters",
"SelectedCount": 0,
"IsExpanded": false,
"ShowClearFilters": true,
"EnableAjax": true,
"PageIdSelector": "",
"ListingSelector": "",
"PaginationSelector": "",
"TotalResultsSelector": "",
"NoResultsSelector": "",
"TotalizerSelector": ""
})
♿ Accessibility