---
name: Select
menu: Atoms
route: /atoms/Select
---

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

# Select

This component renders an HTML `<div>` and passes along all props.
The items array must have the 'key' and 'text' properties to work.

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

## Base

<Playground>
	 <Select
    label={'Selecciona unción'}
    multiple={false}
	 	items={[
			{
				value: 1,
				text: 'Van Henry',
			},
			{
				value: 2,
				text: 'Oliver Hansen',
			},
			{
				value: 3,
				text: 'April Tucker',
			},
			{
				value: 4,
				text: 'Ralph Hubbard',
			},
		]}
	 />
</Playground>

## Full width

<Playground>
	 <Select
	 	multiple={false}
	 	items={[
			{
				value: 1,
				text: 'Van Henry',
			},
			{
				value: 2,
				text: 'Oliver Hansen',
			},
			{
				value: 3,
				text: 'April Tucker',
			},
			{
				value: 4,
				text: 'Ralph Hubbard',
			},
		]}
		fullWidth
	 />
</Playground>

## Fixed width

<Playground>
	 <Select
	 	multiple={false}
	 	items={[
			{
				value: 1,
				text: 'Van Henry',
			},
			{
				value: 2,
				text: 'Oliver Hansen',
			},
			{
				value: 3,
				text: 'April Tucker',
			},
			{
				value: 4,
				text: 'Ralph Hubbard',
			},
		]}
		width="50%"
	 />
</Playground>

## onChange example (console log)

<Playground>
	 <Select
	 	multiple={false}
	 	items={[
			{
				value: 1,
				text: 'Van Henry',
			},
			{
				value: 2,
				text: 'Oliver Hansen',
			},
			{
				value: 3,
				text: 'April Tucker',
			},
			{
				value: 4,
				text: 'Ralph Hubbard',
			},
		]}
		onChange={(items, fullItems) => console.log(items, fullItems)}
	 />
</Playground>