Select

Installation

npx shadcn@latest add https://ui.timkit.cn/r/select.json

Usage

import { Select } from "@/components/ui/select"

Examples

Select · With label

Loading preview...

Select · With label

Loading preview...

Select · With label

Loading preview...

Select · With label

Loading preview...

Select · With label

Loading preview...

Select · With label

Loading preview...

Select · With label

Loading preview...

Select · With label

Loading preview...

Select · With label

Loading preview...

Select · With label

Loading preview...

Select · With label

Loading preview...

Select · With label

Loading preview...

Select · With label

Loading preview...

Select · With label

Loading preview...

Select · With label

Loading preview...

Select · With label

Loading preview...

Select · With label

Loading preview...

Select · With label

Loading preview...

Select · With label

Loading preview...

Select · With label

Loading preview...

Select · With label

Loading preview...

Select · With label

Loading preview...

Select · With label

Loading preview...

Select · With label

Loading preview...

Select · With label

Loading preview...

Select · With label

Loading preview...

Select · With label

Loading preview...

Select · With label

Loading preview...

Select · With label

Loading preview...

Select · With label

Loading preview...

Select · With label

Loading preview...

Select · With label

Loading preview...

Select · With label

Loading preview...

Select · With label

Loading preview...

Select · With label

Loading preview...

Select · With label

Loading preview...

Select · With label

Loading preview...

Select · With label

Loading preview...

Select · With label

Loading preview...

Select · With label

Loading preview...

Select · With label

Loading preview...

Select · With label

Loading preview...

Select · With label

Loading preview...

Select · With label

Loading preview...

Select · With label

Loading preview...

Select · With label

Loading preview...

Select · With label

Loading preview...

Select · With label

Loading preview...

Select · With label

Loading preview...

Select · With label

Loading preview...

Select · With label

Loading preview...

Structured API

Component

select

Logic

zag / select

Runtime Frameworks

ReactVueWeappHTML

Supported Platforms

WebWeChat Mini Program

Configuration

Prop	Type	Default	Description
logic.provider*	enum (zag \| native \| none)	zag	State and interaction provider used by this component.
logic.machine	string	select	Underlying state machine identifier when provider is zag.
platforms*	array	Web, WeChat Mini Program	Platforms officially supported by this schema.
frameworks*	array	React, Vue, Weapp, HTML	Framework demos/code currently available in registry files.
dependencies	array	@timui/core, @zag-js/react	Runtime package dependencies required by this registry item.
optionalPeerDependencies	array	lucide-react	Optional peer dependencies used by this registry item.
registryDependencies	array	-	Dependent Timkit registry components/hook entries.

Props

Prop	Type	Default	Description
value	string	-	The controlled value.
placeholder	string	-	The placeholder text.

Events

Prop	Type	Default	Description
onValueChange	event	-	Event handler called when the value changes.

Slots

Prop	Type	Default	Description
default	slot	-	The select segments

Parts

Prop	Type	Default	Description
root*	root	-	The select container
trigger	part	-	The toggle button
value	part	-	The display value
content	part	-	The dropdown content
item	part	-	A single option
group	part	-	A group of options
label	part	-	A group label
separator	part	-	A separator line

This API reference is generated from `/packages/core` component schemas to keep React/Vue/Weapp docs consistent.

Extended notes are not available for this component yet.

On This Page

Installation
Usage
Examples
API Reference

Select

Installation

npx shadcn@latest add https://ui.timkit.cn/r/select.json

Usage

import { Select } from "@/components/ui/select"

Examples

Select · With label

Loading preview...

Select · With label

Loading preview...

Select · With label

Loading preview...

Select · With label

Loading preview...

Select · With label

Loading preview...

Select · With label

Loading preview...

Select · With label

Loading preview...

Select · With label

Loading preview...

Select · With label

Loading preview...

Select · With label

Loading preview...

Select · With label

Loading preview...

Select · With label

Loading preview...

Select · With label

Loading preview...

Select · With label

Loading preview...

Select · With label

Loading preview...

Select · With label

Loading preview...

Select · With label

Loading preview...

Select · With label

Loading preview...

Select · With label

Loading preview...

Select · With label

Loading preview...

Select · With label

Loading preview...

Select · With label

Loading preview...

Select · With label

Loading preview...

Select · With label

Loading preview...

Select · With label

Loading preview...

Select · With label

Loading preview...

Select · With label

Loading preview...

Select · With label

Loading preview...

Select · With label

Loading preview...

Select · With label

Loading preview...

Select · With label

Loading preview...

Select · With label

Loading preview...

Select · With label

Loading preview...

Select · With label

Loading preview...

Select · With label

Loading preview...

Select · With label

Loading preview...

Select · With label

Loading preview...

Select · With label

Loading preview...

Select · With label

Loading preview...

Select · With label

Loading preview...

Select · With label

Loading preview...

Select · With label

Loading preview...

Select · With label

Loading preview...

Select · With label

Loading preview...

Select · With label

Loading preview...

Select · With label

Loading preview...

Select · With label

Loading preview...

Select · With label

Loading preview...

Select · With label

Loading preview...

Select · With label

Loading preview...

Select · With label

Loading preview...

Structured API

Component

select

Logic

zag / select

Runtime Frameworks

ReactVueWeappHTML

Supported Platforms

WebWeChat Mini Program

Configuration

Prop	Type	Default	Description
logic.provider*	enum (zag \| native \| none)	zag	State and interaction provider used by this component.
logic.machine	string	select	Underlying state machine identifier when provider is zag.
platforms*	array	Web, WeChat Mini Program	Platforms officially supported by this schema.
frameworks*	array	React, Vue, Weapp, HTML	Framework demos/code currently available in registry files.
dependencies	array	@timui/core, @zag-js/react	Runtime package dependencies required by this registry item.
optionalPeerDependencies	array	lucide-react	Optional peer dependencies used by this registry item.
registryDependencies	array	-	Dependent Timkit registry components/hook entries.

Props

Prop	Type	Default	Description
value	string	-	The controlled value.
placeholder	string	-	The placeholder text.

Events

Prop	Type	Default	Description
onValueChange	event	-	Event handler called when the value changes.

Slots

Prop	Type	Default	Description
default	slot	-	The select segments

Parts

Prop	Type	Default	Description
root*	root	-	The select container
trigger	part	-	The toggle button
value	part	-	The display value
content	part	-	The dropdown content
item	part	-	A single option
group	part	-	A group of options
label	part	-	A group label
separator	part	-	A separator line

This API reference is generated from `/packages/core` component schemas to keep React/Vue/Weapp docs consistent.

Extended notes are not available for this component yet.

On This Page

Installation
Usage
Examples
API Reference