tencent cloud

Select
Download PDF
Last updated:2026-02-03 16:21:03
Select
Last updated: 2026-02-03 16:21:03
Download PDF

Component Feature

Dropdown selection component for selecting values from predefined options, supports custom option styles, icons, and badges.

Basic Usage

Associate with the form field by name, set placeholder text, define drop-down list items in options, and add an icon, badge, or description for each option.
Template example:
<Select 
  name="city" 
  placeholder="Please select city" 
  options={[
    { value: "beijing", label: "Beijing" },
    { value: "shanghai", label: "Shanghai" },
    { value: "guangzhou", label: "Guangzhou" }
  ]}
/>
Click to view the dropdown option. Effect display as follows:



Select Beijing, and the effect display as follows:




Attribute Description

Property Name
Type
Description
Default value
name ★
string
Form Field Name
-
options ★
SelectOption[]
Option List
-
onChangeAction
ActionConfig
Action triggered on value change
-
placeholder
string
Placeholder text
-
defaultValue
string
Default Value
-
variant
"outline" | "solid" | "soft" | "ghost"
visual style
"outline"
size
"3xs" | "2xs" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl"
component size
"md"
pill
boolean
whether the shape is capsule
false
block
boolean
whether the element is block-level (100% width)
false
disabled
boolean
Disabled or not
false
clearable
boolean
whether to display the clear button
false

SelectOption Object

Property Name
Type
Description
Default value
value ★
string
Option value
-
label ★
string
Option display text
-
icon
string
icon name or URL
-
badge
string
badge text
-
description
string
Description text
-
color
string
Option color
-
disabled
boolean
Disabled or not
false
className
string
Customize CSS class name
-
Note:
Marked with required attribute.

Was this page helpful?
You can also Contact Sales or Submit a Ticket for help.
Yes
No

Feedback