---
name: CurrencySelect
menu: Inputs
---

import { PropsTable, Playground } from 'docz';
import { Formik, Field } from 'formik';

import { CurrencySelect } from './index';
import { CurrencySelectPrimitive } from './CurrencySelect';
import { FormItem } from '../../FormItem';

# CurrencySelect

<PropsTable of={CurrencySelect} />

## Basic usage

<Playground style={{ minHeight: '400px' }}>
  {() => {
    const values = ['ETH', 'DAI'];

    return (
      <CurrencySelectPrimitive
        placeholder="Raise in"
        disabledOptionText="Not available on test network"
        value={values}
        onChange={(values) => { console.log(values); }}
      />
    );

}}

</Playground>

## As form field

<PropsTable of={CurrencySelect} />

<Playground style={{ minHeight: '400px' }}>
  {() => {
    const currencies = ['ETH', 'DAI'];

    return (
      <Formik initialValues={{ myCurrency: currencies }} render={(formValues) => (
        <form>
          <pre>{JSON.stringify(formValues.values, null, 2)}</pre>
          <FormItem name="myCurrency">
            <FormItem.Input component={CurrencySelect} placeholder="Raise in" />
          </FormItem>
        </form>
      )} />
    );

}}

</Playground>
