# ToggleFilter

This component presents a group of options from which one can be selected. Suitable to select a single item from a list where the list is very small. Most often used for filters.

## Installation

```tsx
import { ToggleFilter } from 'uxp/components';
```

## Signature

```tsx
const ToggleFilter: React.FunctionComponent<IToggleFilterProps>
```

## Properties

| Name                    | Type                                                                                        | Mandatory | Default Value | Example Value |
| ----------------------- | ------------------------------------------------------------------------------------------- | --------- | ------------- | ------------- |
| options                 | [IToggleOption\[\]](https://help.iviva.com/uxp/v5/additional-resources/types/itoggleoption) | Yes       | -             | -             |
| value                   | string                                                                                      | Yes       | -             | -             |
| onChange                | (newValue: string) => void                                                                  | Yes       | -             | -             |
| className               | string                                                                                      | No        | -             | -             |
| backgroundColor         | string                                                                                      | No        | -             | -             |
| textColor               | string                                                                                      | No        | -             | -             |
| selectedBackgroundColor | string                                                                                      | No        | -             | -             |
| selectedTextColor       | string                                                                                      | No        | -             | -             |
| disableShadow           | boolean                                                                                     | No        | -             | -             |
| spacingMode             | [SpacingMode](https://help.iviva.com/uxp/v5/additional-resources/types/spacingmode)         | No        | -             | -             |
| renderAsDropdown        | { minWidth: number, renderAsPill?: { minWidth?: number, maxWidth?: number } }               | No        | -             | -             |

## Related Types

* [IToggleFilterProps](https://help.iviva.com/uxp/v5/additional-resources/types/itogglefilterprops)
* [IToggleOption](https://help.iviva.com/uxp/v5/additional-resources/types/itoggleoption)
* [SpacingMode](https://help.iviva.com/uxp/v5/additional-resources/types/spacingmode)