Select

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

Rendered live, with the same build of the library you install.

Usage

Source

Select.tsx

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

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

const Select = () => {
  const [selected, setSelected] = useState<{ value: string; label: string } | null>(options[0]);

  // Client-only: react-select reads a null emotion cache during SSR and takes the page to a 500.
  const [mounted, setMounted] = useState(false);
  useEffect(() => setMounted(true), []);

  return (
    <div>
      {mounted ? (
        <NSelect label="Business Type" placeholder="Select plan" options={options} value={selected} onChange={val => setSelected(val)} />
      ) : (
        <div className="h-[68px] animate-pulse rounded-lg border border-default bg-surface" aria-hidden />
      )}
    </div>
  );
};

export default Select;

Attributes

21 props

Name	Type	Default	Details
isMulti	boolean	false	You can pass isMulti option to switch between single / multi select.
label	string	Optional	Label for the select field.
placeholder	string	Optional	Placeholder text for the select.
isLoading	boolean	false	Whether the select is in loading state.
isCreatable	boolean	false	Whether new options can be created.
isClearable	boolean	false	Whether the selection can be cleared.
isSearchable	boolean	true	Whether the select is searchable.
disabled	boolean	false	Whether the select is disabled.
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.
value	OptionType \| OptionType[] \| null	Required	Selected value(s).
options	OptionType[]	Required	Array of available options.
onCreateOption	(inputValue: string) => void	Optional	Callback when new option is created.
onChange	(value: OptionType \| OptionType[] \| null) => void	Optional	Callback when selection changes.
onChangeOptions	(value: OptionType \| OptionType[] \| null) => void	Optional	Alternative change callback.
getOptionLabel	(option: OptionType) => string	Optional	Function to get option label.
getOptionValue	(option: OptionType) => string	Optional	Function to get option value.
inputId	string	Optional	ID for the input element.
name	string	Optional	Name attribute for the select.
menuPortalTarget	HTMLElement	Optional	Target element for menu portal.

Select

Demo

Usage

Attributes

Tags