Select

Select a country

import React from 'react';
import { Select } from 'chic-ui';

<Select
  width="200px"
  data={['India', 'Japan', 'Germany', 'Russia']}
  placeholder="Select a country"
/>;

Disabled

Use the disabled prop to disable any select component.

Select a country

import React from 'react';
import { Select } from 'chic-ui';

<Select
  disabled
  width="200px"
  data={['India', 'Japan', 'Germany', 'Russia']}
  placeholder="Select a country"
/>;

Error

Use the error prop to display select with error.

Select a country

import React, { useState } from 'react';
import { Select } from 'chic-ui';

<Select
  error
  width="200px"
  data={['India', 'Japan', 'Germany', 'Russia']}
  placeholder="Select a country"
/>;

Simple Multi Select

Select multiple values using multiSelect prop.

Select a country

import React from 'react';
import { Select } from 'chic-ui';

<Select
  multiSelect
  width="300px"
  data={['India', 'Japan', 'Germany', 'Russia']}
  placeholder="Select a country"
/>;

Complex Object

Select a sport

import React from 'react';
import { Select } from 'chic-ui';

<Select
  width="200px"
  data={[
    { id: 1, game: 'Hockey' },
    { id: 2, game: 'Football' },
    { id: 3, game: 'Tennis' },
  ]}
  dataKey="id"
  dataName="game"
  placeholder="Select a sport"
/>;

Complex Object Multi Select

Select a sport

import React from 'react';
import { Select } from 'chic-ui';

<Select
  multiSelect
  width="300px"
  data={[
    { id: 1, game: 'Hockey' },
    { id: 2, game: 'Football' },
    { id: 3, game: 'Tennis' },
  ]}
  dataKey="id"
  dataName="game"
  placeholder="Select a sport"
/>;

API

import { Select } from 'chic-ui';

Name	Type	Default	Description
width	string	'100%'	Width of Select
size	'small' | 'default' | 'large'	'default'	Size of Select
data	T[]		Data for Select
datakey	string		Key for complex objects
disabled	boolean	false	Disable Select
multiSelect	boolean	false	Selects multiple values
dataName	string		Name for complex objects
error	boolean	false	Error Select
placeholder	string		Adds placeholder
onChange	(value: T | T[]) => void		Handles value changes
className	string		Provide external classnames to the component
style	React.CSSProperties		Override default styling of the component