---
title: 下拉选择
slug: 下拉选择
category: 组件
figma_node_id: 1:18
figma_page_name: ＞下拉选择
aliases: [Select, Picker, 选择器, 单选下拉, dropdown, combobox]
last_extracted: 2026-05-19
status: ok
---

# 下拉选择

> 用于从一组预设选项中选择一项 / 多项的输入类组件。如流的下拉选择按容器形态分**有框式**与**无框式**两类，按弹层形态分菜单面板 / 滚动式半层面板 / 操作菜单半层面板 / 全页面下拉弹层 / 浮层菜单五种，覆盖从轻量页面到表单可输入场景的全部下拉需求。

## 类型与号型

### 按容器形态

| 类型 | 适用场景 |
|---|---|
| 有框式下拉选择器 | 一般用于表单可输入场景，与输入框等共用，选择框宽度自适应（如日历） |
| 无框式下拉选择器 | 一般用于较轻量的页面，如消息侧边栏 |

### 按弹层形态

| 形态 | 适用 / 备注 |
|---|---|
| 菜单面板 | 一般用于选项较多时，如时间、地点的选择；参考【日期范围选择】 |
| 滚动式半层面板 | 各段一般使用系统默认样式；无法使用系统样式时，可参考列表菜单 |
| 操作菜单半层面板 | 同上 |
| 全页面下拉弹层 | 下拉选项是页面级（非半浮层面板），且下拉选项位于偏上的位置时，弹出带遮罩的选项 |
| 浮层菜单 | 具体可参考移动端【浮层】规范 |

### 按内容类型（菜单选项）

| 类型 | 说明 |
|---|---|
| 纯文本类 | 只有文字的选项 |
| 二级面板 | 含子级的选项，右侧展开 |
| 勾选类 | 多选、带勾选标记 |
| 图标/头像类 | 文字前带 icon 或头像 |

## 尺寸规格

桌面端规范画板：1280 × 5205px。

- 章节大标题：24px Medium，色 `#11141A`
- 章节小标题（"菜单面板 / 样式 / 位置与间距 / 状态 / 类型"等）：12px Medium，色 `#17181A`
- 选项文字：12px Regular（章节说明）/ 14px Regular（选项正文）
- 题头一般是图标与文字的组合；下拉箭头可选择配置——一般的下拉列表建议用箭头，选择器类可不带箭头

> 左侧可以是图标或者题头文字（小于等于 6 个字）。
> 题头一般是图标与文字的组合；下拉箭头可选择配置，一般的下拉列表建议用箭头，选择器类可不带箭头。

## 状态

下拉选择器（有框式 / 无框式通用）的状态枚举（来自 Figma 状态标注）：

| 状态 | 含义 |
|---|---|
| 默认 | 未选中、未聚焦 |
| Hover | 鼠标悬停 |
| 回显 | 已选择某项后的展示态（含已选值） |
| 激活（展开菜单） | 点击后菜单展开 |
| 禁用 | 不可点击 |
| 加载 | 加载选项中 |
| 文本最长间距限制 | 选项文字过长时的截断态 |

弹层方向状态：

- 下拉-两端对齐 / 上拉-两端对齐
- 下拉-居中对齐
- 下拉-左对齐 / 下拉-右对齐
- 上拉-左对齐 / 上拉-右对齐

## 颜色与 token

| 用途 | hex | token / 说明 |
|---|---|---|
| 容器底色 | `#FFFFFF` | 默认底色 |
| 选项面板渐变背景 | `linear-gradient(-64deg, rgba(51,119,255,0) 0%, rgba(51,119,255,0.06) 100%)` | 设计说明区 Union 渐变 |
| 大标题文字 | `#11141A` | 24px Medium |
| 小节标题文字 | `#17181A` | 12px Medium |
| 说明 / 占位文字 | `#878D99` = `C-Coolgray60` | 12 / 14px Regular |
| 警示色（错误 / 禁用提示） | `#FF5040` | 警示语义 |
| 强调色（选中项 / 主按钮） | `#3377FF` | 通用主色（与品牌主色 `Brandblue60 #165DFF` 略有偏差） |
| 暂无内容文案色 | `#878D99` | 12px Regular |

> 关联 token 见 [色彩](../基础/色彩.md)。

## 间距与排布

- 设计说明区左内边距：189px（章节标签 `x=189`）
- 章节段落与说明区垂直步进：约 79–91px（章节标签→说明文本→示例区）
- 弹层与触发器：触发器底边与弹层顶边间距由弹层形态决定（菜单面板贴边、全页面下拉带遮罩）
- 文本最长间距限制：选项内文字超过容器宽度时启用省略截断

## 文案规则

- 题头（trigger 文字）应 ≤6 字，与图标可组合
- placeholder 默认值：`选择时间` / `这是题头` 等（Figma 占位）
- 暂无选项时文案：`暂无内容等文案`，统一灰色 12px 占位

## 交互行为

- **点击触发器**：弹出对应形态的菜单 / 半层面板 / 全页面弹层
- **二级面板**：右侧 / 下方展开子选项
- **勾选类**：点击 row 切换勾选状态，不立即收起；点击外部确认后收起
- **位置自适应**：根据触发器在屏幕中的相对位置，自动选择「下拉 / 上拉 / 左对齐 / 右对齐 / 两端对齐 / 居中对齐」之一
- **遮罩**：下拉选项是页面级且位置偏上时，弹出带遮罩的选项
- **加载态**：选项区显示加载指示；选项加载完成后切回默认
- **回显**：选择某项后，触发器显示已选值，下拉箭头朝下保持

## 示例

![桌面端-下拉选择全集](../图片/组件/下拉选择/desktopdropdown.png)
![移动端-下拉选择全集](../图片/组件/下拉选择/mobiledropdown.png)
![有框式下拉选择器](../图片/组件/下拉选择/mobiledropdown.png)
![无框式下拉选择器](../图片/组件/下拉选择/mobiledropdown.png)
![菜单面板](../图片/组件/下拉选择/mobiledropdown.png)
![滚动式半层面板](../图片/组件/下拉选择/mobiledropdown.png)
![操作菜单半层面板](../图片/组件/下拉选择/mobiledropdown.png)
![全页面下拉弹层](../图片/组件/下拉选择/mobiledropdown.png)
![浮层菜单](../图片/组件/下拉选择/mobiledropdown.png)
![菜单选项-纯文本类](../图片/组件/下拉选择/mobiledropdown.png)
![菜单选项-二级面板](../图片/组件/下拉选择/mobiledropdown.png)
![菜单选项-勾选类](../图片/组件/下拉选择/mobiledropdown.png)
![菜单选项-图标头像类](../图片/组件/下拉选择/mobiledropdown.png)
![位置-下拉两端对齐](../图片/组件/下拉选择/mobiledropdown.png)
![位置-上拉两端对齐](../图片/组件/下拉选择/mobiledropdown.png)

## 设计考量 / 原文摘录

> 一般用于选项较多时，如时间、地点的选择；参考【日期范围选择】。
> 各段一般使用系统默认样式，无法使用系统样式时，可参考如下列表菜单。
> 下拉选项是页面级（非半浮层面板），且下拉选项位于偏上的位置时，弹出带遮罩的选项。
> 题头一般是图标与文字的组合；下拉箭头可选择配置，一般的下拉列表建议用箭头，选择器类可不带箭头。
> 一般用于较轻量的页面。如消息侧边栏。

- **优先用系统默认样式**：避免重复造轮子；非要自定义时再用列表菜单方案
- **有框 vs 无框**：表单复用输入框时用有框，让控件组在视觉上对齐；侧边栏等轻量场景用无框，减少视觉噪声
- **位置自适应矩阵**：8 种组合（上 / 下 × 左 / 中 / 右 / 两端）覆盖任何屏幕位置

## 不推荐用法

- 选项 ≤3 项时使用下拉选择（改用 [单复选](单复选.md) 或分段控件可见性更强）
- 在浮层 / 弹窗中嵌套全页面下拉弹层（层级混乱）
- 触发器不带任何视觉提示（既无箭头也无 hover 态），导致用户不知道可点
- 把多选场景塞进单选下拉（应改用勾选类下拉或独立 [单复选](单复选.md)）
- 弹层方向手动写死，不做自适应（导致弹层超出视窗）

## 关联

- 表单容器与排布 [表单](表单.md)
- 输入类对照 [输入框](输入框.md)
- 日期 / 时间选择 [日期选择](日期选择.md)、[时间选择](时间选择.md)
- 浮层 / 半层面板规范 [浮层](浮层.md)
- 长按 / 操作菜单 [长按气泡](长按气泡.md)
- 色彩 token 见 [色彩](../基础/色彩.md)
