import { useState } from 'react';
import { NSelect } from '@nayan-ui/react';

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;

Attributes

Name	Type	Default	Details
items	SelectOption[]	Required	Array of select options with label and value.
onValueChange	(value: string) => void	Required	Callback when selection changes (returns the value string).
label	string	Optional	Label above the select.
selectLabel	string	Optional	Label shown inside the dropdown list.
placeholder	string	Optional	Placeholder text for the select trigger.
defaultValue	SelectOption	Optional	Default selected option.
isDisabled	boolean	false	Whether the select is disabled.
containerClassName	string	' '	You can customise container by passing tailwind classes.
labelClassName	string	' '	You can customise label by passing tailwind classes.
triggerClassName	string	' '	You can customise trigger by passing tailwind classes.

Select

Demo

Demo Coming Soon

Usage

Attributes

Tags