@ug666/react 文档演示

Select 选择器

Select 封装原生 select，适合状态、分类、成员角色等单选场景。

导入方式

所有示例均直接使用 @ug666/react 中的真实组件导出。

import { Select } from '@ug666/react'

变体预览

基础选择器与占位选择器。

文档状态

发布环境

状态展示

错误提示、帮助说明与禁用态。

负责人

用于路由消息通知

审批流

当前流程不允许修改状态

只读环境

尺寸展示

组件高度固定，通常通过容器宽度适配不同布局。

紧凑宽度

标准宽度

代码示例

配合受控状态更便于和表单联动。

import { useState } from 'react'
import { Select } from '@ug666/react'

const options = [
  { label: '草稿', value: 'draft' },
  { label: '已发布', value: 'published' },
]

export function StatusSelect() {
  const [value, setValue] = useState('draft')

  return (
    <Select
      label="文档状态"
      options={options}
      value={value}
      onChange={(event) => setValue(event.target.value)}
    />
  )
}

Props 说明

属性	类型	默认值	说明
options	SelectOption[]	[]	下拉选项数组。
placeholder	string	—	占位提示，会渲染为禁用首项。
label	string	—	字段标签文本。
error	string	—	错误提示。