A Select or ComboBox component is a UI element that allows users to choose one or more options from a dropdown list. It typically displays a default value or prompt, and when clicked, it expands to show a list of available choices. Users can either select an option from the list or, in the case of a ComboBox, input custom values. This component is ideal for conserving space in forms and making it easy for users to make selections quickly.

# Demo

Select Demo

Choose Business type

Startup

Combo Box Demo

Choose Business type

Startup

Note: this component is created on top of react-select library, for more customizations you can directly use it.

# Attributes

Name	Type	Default	Details
className	string	' '	You can customise by passing tailwind classes.
labelClassName	string	' '	You can customise by passing tailwind classes.
selectClassName	string	' '	You can customise by passing tailwind classes.
isMulti	boolean	false	You can pass isMulti option to switch between single / multi select.
isLoading	boolean	false	You can pass isLoading option to show loading indicator.
isCreatable	boolean	false	You can pass isCreatable option to add create options feature.
isClearable	boolean	false	You can pass isClearable option to show clear option for select.
isSearchable	boolean	false	You can pass isSearchable option to enable searching feature.
isDisabled	boolean	false	You can pass isDisabled option to disable select.
placeholder	string	Required	You can pass placeholder for select.
label	string	' '	You can pass label to show label for select.
options	ReactSelectOption[]	Required	You can pass options for the select.
value	ReactSelectOption[]	Required	You can pass default selected items.
onChangeOptions	(values: ReactSelectOption[]) => void;	Required	You can get callback when select changed.
onCreateOptions	(value: string) => void;	Required	You can get callback when new select item created.

# Usage

import { useState } from 'react';
import { NSelect } from 'nayan';

const items = [
  { value: 'startup', label: 'Startup' },
  { value: 'business', label: 'Business' },
  { value: 'enterprise', label: 'Enterprise' }
];

const Select = () => {
  const [selected, setSelected] = useState(items[0]);
  return (
    <NSelect
      isMulti={true}
      isCreatable={true}
      placeholder="Select something..."
      isClearable={true}
      isSearchable={true}
      isDisabled={false}
      value={selected}
      options={items}
      onCreateOptions={value => console.log(value)}
      onChangeOptions={values => setSelected(values)}
    />
  );
};

export default Select;