---
name: SelectPop
menu: Components
route: /components/SelectPop
---

import SelectPop from './SelectPop';
import { Playground, Props } from 'docz';


# SelectPop

This component renders an HTML ` SelectPop>` and passes along all props.

## API
<Props of= {SelectPop} />

## SelectPop


<Playground>
    <SelectPop
      color={'blue'}
      searcher={x => console.log("x ", x) }
      input={ x => console.log("x ", x)}
      onInvite={()=> console.log('Invitar')}
      onSendEmail={()=> console.log('Send')}
      onSelect={(item) => console.log('SELECCIONO UN ELEMENTO', item)}
      arr={[
      {name:'Jorge Masdsde', active: true, email:"jorge@sads.com", src:"https://loremflickr.com/320/240/cat" },
      {name:'Carlos Masdsde', active: false, email:"carlos@sads.com", src:"" },
      {name:'Jorge Masdsde', active: true, email:"jorge@sads.com", src:"https://loremflickr.com/320/240/cat" },
      {name:'Carlos Masdsde', active: false, email:"carlos@sads.com", src:"" },
      {name:'Jorge Masdsde', active: true, email:"jorge@sads.com", src:"https://loremflickr.com/320/240/cat" },
      {name:'Carlos Masdsde', active: false, email:"carlos@sads.com", src:"" },
      {name:'Sandra Masdsde', active: true, email:"sandra@sads.com", src:"https://loremflickr.com/320/240/cat" },
      {name:'José Masdsde', active: false, email:"jose@sads.com", src:"https://loremflickr.com/320/240/dog"}]}
      action={'Invitar'}
    />
</Playground>

## Select pop con titulo y no es múltiple

<Playground>
    <SelectPop
      color={'red'}
      label={'Asignar reunion'}
      searcher={x => console.log("x ", x) }
      input={ x => console.log("x ", x)}
      onInvite={()=> console.log('Invitar')}
      onSendEmail={()=> console.log('Send')}
      onSelect={(item) => console.log('SELECCIONO UN ELEMENTO', item)}
      arr={[
      {name:'Jorge Masdsde', active: true, email:"jorge@sads.com", src:"https://loremflickr.com/320/240/cat" },
      {name:'Carlos Masdsde', active: false, email:"carlos@sads.com", src:"" },
      {name:'Sandra Masdsde', active: false, email:"sandra@sads.com", src:"https://loremflickr.com/320/240/cat" },
      {name:'José Masdsde', active: false, email:"jose@sads.com", src:"https://loremflickr.com/320/240/dog"}]}
      action={'Asignar'}
      isMultiple={true}
    />
</Playground>