Select

The Select component is used to render a field with list which users can use to select a single value or multiple values.

Usage#

The select component uses options prop to render the list of options for the select component. The options prop is an array of object in which each object should have a label and value properties, where label is used as the display string and the value is the corresponding value for that string

Example#

Code#

<Select
  options={[
    { label: "India", value: "IND" },
    { label: "America", value: "USA" },
    { label: "England", value: "UK" },
    { label: "China", value: "CHI" },
    { label: "Spain", value: "SP" },
  ]}
  placeholder="Select a country"
/>

Size#

The size of the select component can be varied by using the height and width prop bothe accepts number values and this determines the size of the component the default values are 32 and 300 respectively.

Code#

<Select width={250} height={34} options={optionsList} placeholder="Select a country" />
<Select width={280} height={38} options={optionsList} placeholder="Select a country" />
<Select width={300} height={46} options={optionsList} placeholder="Select a country" />

Multiple Select#

The select component can be used for adding multiple values by using multiple boolean prop true

Code#

<Select
  options={[
    { label: "India", value: "IND" },
    { label: "America", value: "USA" },
    { label: "England", value: "UK" },
  ]}
  placeholder="Select a country"
  multiple
/>

Customizable Tags#

The tags for each selection in select component is also customizable. The collapseTags boolean prop is used for collapsing the selected item tags and the tagColor prop is used to render the tag color, check badge component to get to know about the available tag colors

Code#

<Select
  options={[
    { label: "India", value: "IND" },
    { label: "America", value: "USA" },
    { label: "England", value: "UK" },
    { label: "China", value: "CHI" },
    { label: "Spain", value: "SP" },
  ]}
  placeholder="Select a country"
  options={optionsList}
  multiple
  collapseTags
  tagColor="default"
/>

Disabled#

The input field can be disabled by using a boolean prop called disabled

Code#

<Select disabled placeholder="Select a country" />

Validation#

The validation of select component is done by two props isValid and validationText. The isValid prop is a boolean which denotes the validation for the field and validationText acts as a validation message.

The validationText prop is not mandatory for indicating validation. It can be used for providing context.

Please select a country

Code#

<Select
  options={[
    { label: "India", value: "IND" },
    { label: "America", value: "USA" },
    { label: "England", value: "UK" },
    { label: "China", value: "CHI" },
    { label: "Spain", value: "SP" },
  ]}
  isInvalid
  placeholder="Select a country"
  validationText="Please select a country"
/>

Clearable#

The selected item be it multiple values or single value can be clearable if clearable prop.

Code#

<Select options={optionsList} clearable placeholder="Select a country" />

API#

Prop	Type	Possible values	Default Value
options	`object`	`{label:'String',value:'any'}`	`{}`
placeholder	`string`	Any string value	`""`
height	`number`	Any number accepted values	400
width	`number`	Any number accepted values	400
multiple	`boolean`	`true` and `false`	`false`
collapseTags	`boolean`	`true` and `false`	`false`
tagColor	`string`	`"green"`, `"red"`, `"blue"`, `"yellow"`, `"purple"` and `"default"`	`default`
disabled	`boolean`	`true` and `false`	`false`
isInvalid	`boolean`	`true` and `false`	`false`
validationText	`string`	Any string value	`""`
value	`any`	Any	-
onChange	`()=>void`	-	-

Built by Akshay 🤙