index.md

import BasicDemo from './demo/Basic'; import BasicSource from './demo/Basic.tsx?raw'; import SearchDemo from './demo/Search'; import SearchSource from './demo/Search.tsx?raw'; import MultipleDemo from './demo/Multiple'; import MultipleSource from './demo/Multiple.tsx?raw'; import SizesDemo from './demo/Sizes'; import SizesSource from './demo/Sizes.tsx?raw'; import GroupsDemo from './demo/Groups'; import GroupsSource from './demo/Groups.tsx?raw'; import CustomDemo from './demo/Custom'; import CustomSource from './demo/Custom.tsx?raw'; import RenderDemo from './demo/Render'; import RenderSource from './demo/Render.tsx?raw'; import ScrollToSelectedDemo from './demo/ScrollToSelected'; import ScrollToSelectedSource from './demo/ScrollToSelected.tsx?raw';

Select

Select component to select value from options.

Scenario

• A dropdown menu for displaying choices.
• Single or multiple selection from a list of options.
• Supports searching/filtering, custom rendering, and data-driven options.

Usage

import { Select } from 'tiny-design';

const { Option, OptGroup } = Select;

Examples

Basic

Basic usage of Select.

</Demo>
<Demo>

Search

Select with search functionality. Set showSearch to enable filtering.

</Demo>
<Demo>

Multiple

Multiple selection mode displays selected items as tags. Set mode="multiple" and optionally showSearch for filtering.

</Demo>
<Demo>

Scroll to Selected

Automatically scrolls the dropdown to the selected option when opened. Enabled by default, set scrollToSelected={false} to disable.

</Demo>

Sizes

Three sizes: sm, md (default), and lg.

</Demo>
<Demo>

Option Groups

Use OptGroup to group options together.

</Demo>
<Demo>

Custom Rendering & Loading

Use the options prop for data-driven rendering, optionRender for custom option content, and loading for async states.

</Demo>
<Demo>

Custom Rendering

Use optionRender to customize dropdown items and labelRender to customize the selected label.

</Demo>

Props

Select

Property	Description	Type	Default
value	Current selected value	string | string[]	-
defaultValue	Initial selected value	string | string[]	-
mode	Selection mode	'multiple' | 'tags'	-
showSearch	Enable search filtering	boolean	false
filterOption	Custom filter function or disable filtering	boolean | (inputValue, option) => boolean	true
onSearch	Callback when search input changes	(value: string) => void	-
onChange	Callback when value changes	(value, option) => void	-
onSelect	Callback when an option is selected	(value: string | string[]) => void	-
allowClear	Show clear button	boolean	false
loading	Show loading spinner in dropdown	boolean	false
size	Size of selector	'sm' | 'md' | 'lg'	'md'
maxTagCount	Max number of tags displayed in multiple mode	number	-
notFoundContent	Content shown when no options match	ReactNode	'No data'
options	Data-driven options (alternative to children)	{ value, label?, disabled? }[]	-
optionRender	Custom option rendering	(option, { index }) => ReactNode	-
labelRender	Custom selected label rendering	({ label, value }) => ReactNode	-
placeholder	Placeholder text	string	-
disabled	Whether disabled	boolean	false
defaultOpen	Initial open state of dropdown	boolean	false
open	Controlled open state of dropdown	boolean	-
onDropdownVisibleChange	Callback when dropdown open state changes	(open: boolean) => void	-
scrollToSelected	Scroll to selected option when dropdown opens	boolean	true
dropdownStyle	Style of dropdown menu	CSSProperties	-
style	Style of container	CSSProperties	-
className	Class name of container	string	-

Option

Property	Description	Type	Default
value	Value of the option	string	-
label	Display label (overrides children)	ReactNode	-
disabled	Whether disabled	boolean	false

OptGroup

Property	Description	Type	Default
label	Group label	string	-