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

<Meta title="MDX|Button" component={ValuePicker} />

# ValuePicker

A component that looks like a button but transforms into a select when clicked.

### Example usage

This component is currently used when adding [FieldOverrides](https://grafana.com/docs/grafana/latest/panels/field-options/) in the panel edit mode.

```tsx
<ValuePicker
  label="Choose an option"
  options={[
    {
      value: 'option1',
      label: 'Option 1',
    },
    {
      value: 'option2',
      label: 'Option 2',
    },
    {
      value: 'option3',
      label: 'Option 3',
    },
  ]}
  onChange={(value) => doThings}
  variant="primary"
  size="md"
/>
```

<ArgTypes of={ValuePicker} />
