# RadioGroupFilter

**Category:** Features/Filter/Components

## Design

### Overview

`RadioGroupFilter` is based on `RadioGroup` component of `@wix/design-system`.
Use `RadioGroupFilter` for rendering a filter that shows a list of items and allow users to choose a single item from the list.
Render it by providing [ArrayFilter](./?path=/story/features-filter-factories--arrayfilter) to the filter prop and a list of options via the data props.


```tsx
import { RadioGroupFilter } from '@wix/patterns';
```

---

### Examples

### Basic

```tsx
/* eslint-disable import/no-extraneous-dependencies */

import React from 'react';
import { idNameArrayFilter, RadioGroupFilter } from '@wix/patterns';

function Basic() {
  const [filter] = React.useState(() => idNameArrayFilter());

  return (
    <RadioGroupFilter
      filter={filter}
      data={[
        'Beginner',
        'Amateur',
        'Semi-Pro',
        'Professional',
        'World Class',
        'Legendary',
        'Ultimate',
      ].map((name) => ({ id: name, name }))}
    />
  );
}
```

## API

### Extends

[RadioGroup](https://www.docs.wixdesignsystem.com/?path=/story/components-form--radiogroup)

### Props

| Prop | Type | Required | Default | Description |
|------|------|----------|---------|-------------|
| `data` | `V[]` | Yes | - | List of items to select from |
| `renderItem` | `((item: V, index: number) => Partial<PropsWithChildren<RadioProps>>)` | No | - | A function that returns Radio props for rendering each item |
| `filter` | `Filter<V[]>` | Yes | - | A filter state object such as [ArrayFilter](./?path=/story/features-filter-factories--arrayfilter) |
| `fieldType` | `"SHORT_TEXT" \| "LONG_TEXT" \| "NUMBER" \| "BOOLEAN" \| "DATE" \| "DATE_TIME" \| "DATETIME" \| "TIME" \| "URL" \| "EMAIL" \| "IMAGE" \| "MEDIA_GALLERY" \| "AUDIO" \| "DOCUMENT" \| "MULTI_DOCUMENT" \| "RICH_TEXT" \| "RICH_CONTENT" \| "REFERENCE" \| "MULTI_REFERENCE" \| "OBJECT" \| "ARRAY" \| "ADDRESS" \| "COLOR" \| "INTEGER" \| "DECIMAL" \| "CHECKBOX" \| "DROPDOWN" \| "FILES" \| "MULTI_SELECT"` | No | - | The field type string used to resolve a prefix icon for the filter. Cairo maps this to the appropriate icon internally. |
| `layout` | `"button"` | No | - | Padding settings. If this prop it omitted, padding will exist on the sides of the filter.<br> <br> Supported values: <br> - `"button"`: Removes padding from the sides of the filter. |
| `toolbarItemProps` | `{ label?: ReactNode; }` | No | - | Customizes the filter in the toolbar.<br> <br> Supported properties: <br> - `label`: [string] Prefix for the filter element. |
| `toolbarTagProps` | `{ label?: string; }` | No | - | Customizes the filter tag in the toolbar.<br> <br> Supported properties: <br> - `label`: [string] Overrides the default filter name when filtered tag is shown. |
| `initiallyOpen` | `boolean` | No | - | Indicates whether the filter should be visible by default in the filters panel |
| `accordionItemProps` | `(AccordionItemType & { label?: string; })` | No | - | Customizes the filter [accordion](https://www.docs.wixdesignsystem.com/?path=/story/components-lists--accordion).<br> <br> Supported properties: <br> - `label`: [string] Accordion item title. You can also use `AccordionProps['items'][number].title` for more flexibility. <br> - Extends [AccordionProps['items'[number]](https://www.docs.wixdesignsystem.com/?path=/story/components-lists--accordion). |
| `popoverProps` | `PopoverCommonProps` | No | - | @deprecated |
| `onAppliedFilterTagRemove` | `((item: V) => unknown)` | No | - | Callback that's run when a filter is removed by a visitor from the sub-toolbar. @param item |
| `renderToolbarTag` | `((item: V) => Partial<TagListTag>)` | No | - | Customizes how the tag list in the sub-toolbar is rendered. <br><br> Extends [`TagListProps['tags'][number]`](https://www.docs.wixdesignsystem.com/?path=/story/components-lists-table--taglist). |
| `sectionTitle` | `string` | No | - | Title for the section in the accordion. |