Select

A powerful dropdown component for selecting single or multiple options from a list. Perfect for forms, filters, and data selection with search functionality, async loading, and customizable styling options.

Import

import { Select } from "@sparrowengg/twigs-react";

Usage

const SelectExample = () => {
  const [selectedValue, setSelectedValue] = useState(null);

  return (
    <Select
      placeholder="Choose an option..."
      options={options}
      value={selectedValue}
      onChange={setSelectedValue}
      size="md"
      variant="default"
    />
  );
};

Examples

Comprehensive Features

The select component supports a wide range of features including multi-select, async loading, grouped options, custom styling, and form integration.

Props

Prop	Type	Default
`options?`	`OptionType[]`	-
`value?`	`OptionType \| OptionType[] \| null`	-
`onChange?`	`(value: OptionType \| OptionType[] \| null) => void`	-
`placeholder?`	`string`	-
`label?`	`string`	-
`size?`	`'sm' \| 'md' \| 'lg' \| 'xl'`	`'sm'`
`variant?`	`'default' \| 'filled'`	`'default'`
`isMulti?`	`boolean`	`false`
`isClearable?`	`boolean`	`false`
`isSearchable?`	`boolean`	`true`
`isAsync?`	`boolean`	`false`
`isCreatable?`	`boolean`	`false`
`loadOptions?`	`(inputValue: string) => Promise<OptionType[]>`	-
`isDisabled?`	`boolean`	`false`
`error?`	`string`	-
`helperText?`	`string`	-
`requiredIndicator?`	`boolean`	`false`
`info?`	`string \| ReactNode`	-
`labelRightAddon?`	`ReactNode`	-
`showSeparator?`	`boolean`	`false`
`dropdownIndicatorIcon?`	`ReactElement`	-
`dropdownIndicatorPosition?`	`'left' \| 'right'`	`'right'`
`menuPortalTarget?`	`HTMLElement \| null`	-
`className?`	`string`	-
`css?`	`object`	-

Select

Import

Usage

Examples

Comprehensive Features

Props

Select

On this page