import { Meta, ArgTypes } from '@storybook/blocks';
import AudioInputControl from '../AudioInputControl';

<Meta title="SDK Components/MeetingControls/AudioInputControl" />

# AudioInputControl

The `AudioInputControl` component renders a `ControlBarButton` with pop over menu options to select through multiple audio input options.
These audio input options are provided by the `useAudioInputs` hook.

When you click the button, the local audio input toggles between muted/unmuted state.

You can use it in the [ControlBar component](/docs/ui-components-controlbar--page) to build the meeting controls bar.

## Importing

```javascript
import { AudioInputControl } from 'amazon-chime-sdk-component-library-react';
```

## Usage

```jsx
import React from 'react';
import {
  MeetingProvider,
  AudioInputControl
} from 'amazon-chime-sdk-component-library-react';

const App = () => {
  return (
    <MeetingProvider>
      <AudioInputControl />
    </MeetingProvider>
  );
};
```

## Props

<ArgTypes of={AudioInputControl} />

### Dependencies

- `MeetingProvider`
- `useToggleLocalMute`
- `useAudioInputs`