import { ArgsTable, Canvas, Meta, Story } from '@storybook/addon-docs/blocks'

import { BASIC } from '../_utils/taxonomy'
import { SelectField } from './index'

<Meta title={`${BASIC}/Text Inputs/SelectField`} />

# **SelectField**

export const phonePrefixOptions = [
  { value: '+33', label: 'Fr +33', 'aria-label': 'France' },
  { value: '+34', label: 'Sp +34' },
]

<Canvas>
  <Story name="Default">
    <SelectField
      id="selectFieldId"
      name="selectFieldName"
      className="additionalClass"
      options={phonePrefixOptions}
      aria-label="selectLabel"
      defaultValue={phonePrefixOptions[0].value}
      disabled={false}
      required={false}
      focus
      autoFocus={false}
    />
  </Story>
</Canvas>

## Specifications

## Usage

```jsx
import { SelectField } from '@blablacar/ui-library/build/selectField'

<SelectField />
```

<ArgsTable of={SelectField} />