UG666

UG666 UI
React 组件

UGSelect 选择器

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

导入方式

按需从包入口导入组件，并在应用入口引入一次样式文件。

tsx
import { UGSelect } from '@ug666/ui-react'

变体预览

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

状态展示

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

用于路由消息通知

当前流程不允许修改状态

尺寸展示

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

代码示例

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

tsx
import { useState } from 'react'
import { UGSelect } from '@ug666/ui-react'

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

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

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

Props

属性类型默认值说明
optionsSelectOption[][]下拉选项数组。
placeholderstring—占位提示，会渲染为禁用首项。
labelstring—字段标签文本。
errorstring—错误提示。