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

<Meta title="SDK Components/DeviceSelection/SpeakerSelection" />

# SpeakerSelection

The `SpeakerSelection` component renders a `Select FormField` with audio output source options and the selected audio output device provided by the `useAudioOutputs` hook.

By default, the first device will be selected from the device list returned by the `useAudioOutputs` hook, otherwise a single option with _not found_ message will be shown.

The component depends on the `DevicesProvider`. If you are using `MeetingProvider`, `DevicesProvider` is rendered by default.

## Importing

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

## Usage

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

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

## Props

<ArgTypes of={SpeakerSelection} />

### Dependencies

- `MeetingProvider`
- `DevicesProvider`, If you are using `MeetingProvider`, `DevicesProvider` is rendered by default
- `useAudioOutputs`