# Filter

**File Name:** Filter.tsx

**Imports:**
- Select from Material-UI: [Select Doc](https://material-ui.com/components/selects/#select)
- FormControl from '@material-ui/core/FormControl': [FormControl API](https://material-ui.com/api/form-control/#formcontrol-api)
- InputLabel from '@material-ui/core/InputLabel': [InputLabel API](https://material-ui.com/api/input-label/#inputlabel-api)
- Select from '@material-ui/core/Select': [Select API](https://material-ui.com/api/select/#select-api)
- MenuItem from '@material-ui/core/MenuItem': [MenuItem API](https://material-ui.com/api/menu-item/#menuitem-api)

**Example:** Filter Bar on the Nav Bar

**Description:** 
- Pages: 
    - Daily Roster page
    - Select Time Slot page
    - Manage Schedules page
    - Manage Skills page
    - Manage Positions page
    - Manage Users page

- Allows the user to filter results. 

- It appears on the Nav Bar next to the Search Bar. 

**I/O:** 
- The Filter filters items based on the selected criteria. 
- Ex. on the Manage Schedules page users may filter schedules based on status. 

<img src="../../images/components/Filter.png" width="800"/>