Skip to main content

按钮与表单

参考资料​

效果展示​

进度
提醒已关闭

示例状态保存在当前组件中，刷新页面后恢复初始值。

按钮​

属性类型与默认值用途
variantprimary、secondary、ghost、danger；默认 secondary操作层级
sizesm、md、lg；默认 md控件尺寸
leftIconReactNode文字前的图标
fullWidthboolean填满可用宽度
roundedboolean胶囊形圆角
activeboolean按钮选中态，同时设置 aria-pressed

Button 支持原生按钮属性和 ref，默认 type="button"。表单提交应显式设置 type="submit"。

267 Btsx
import { Button, IconButton } from '@lailai0916/ui';

export function Actions() {
  return (
    <>
      <Button variant="primary" type="submit">
        保存
      </Button>
      <IconButton label="关闭" size="sm">
        ×
      </IconButton>
    </>
  );
}

IconButton 的 label 必填，尺寸为 sm 或 md。示例只展示控件结构，应用需要提供实际操作的 onClick。

选择与调整​

组件必要属性可选属性与行为
Segmentedvalue、items；按钮模式提供 onChange默认纵向；orientation="horizontal" 横向；ariaLabel 命名选择组
Slidervalue、min、max、onChangestep、label、valueLabel、onCommit、aria-label
Switchchecked、onChange用 aria-label 提供开关用途

Segmented.items 中每项包含 value 和 label，可附 icon。按钮模式采用单选组语义，通过方向键移动和选择。横向排列在 480 px 以下堆叠，也可指定 stackAt={360}。

导航模式给每一项设置 href，选中值由当前路由决定，此时不会调用 onChange。同一组不要混用按钮与链接。

440 Btsx
import { useState } from 'react';
import { Segmented } from '@lailai0916/ui';

export function DensityControl() {
  const [density, setDensity] = useState('compact');
  return (
    <Segmented
      ariaLabel="显示密度"
      orientation="horizontal"
      value={density}
      onChange={setDensity}
      items={[
        { value: 'compact', label: '紧凑' },
        { value: 'comfortable', label: '宽松' },
      ]}
    />
  );
}

Slider.onChange 接收数值，Switch.onChange 接收布尔值；它们与原生输入框的事件参数不同。

表单字段​

TextField、TextAreaField 和 SelectField 分别接受原生 input、textarea、select 属性。三者均要求 label，支持 description、error，并自动生成字段 ID、连接说明与错误消息。

727 Btsx
import { useState } from 'react';
import { SelectField, Stack, TextAreaField, TextField } from '@lailai0916/ui';

export function ProfileFields() {
  const [email, setEmail] = useState('');
  return (
    <Stack>
      <TextField
        label="电子邮箱"
        type="email"
        autoComplete="email"
        required
        value={email}
        onChange={(event) => setEmail(event.currentTarget.value)}
        description="用于接收通知。"
      />
      <TextAreaField label="备注" rows={3} defaultValue="" />
      <SelectField label="语言" defaultValue="zh-Hans">
        <option value="zh-Hans">简体中文</option>
        <option value="en">English</option>
      </SelectField>
    </Stack>
  );
}

校验失败时传入具体的 error 文案，组件会设置 aria-invalid 并关联错误消息。业务校验、请求状态与提交处理由宿主负责；不要把占位文字作为唯一标签。