Checkbox

Checkbox 是对 antd-mobile Checkbox 的 Formily 适配。多选场景使用 Checkbox.Group，通过字段的 dataSource 提供选项，值为勾选项组成的数组。

基础使用

tsx

import { Checkbox, FormButtonGroup, FormItem, Submit } from '@silver-formily/antd-mobile'
import { createForm } from '@silver-formily/core'
import { Field, FormProvider } from '@silver-formily/react'

const form = createForm({
  initialValues: {
    hobbies: ['eat'],
  },
})

function onSubmit(values: unknown) {
  return Prompts.alert(JSON.stringify(values, null, 2))
}

export default function CheckboxBasic() {
  return (
    <FormProvider form={form}>
      <Field
        name="hobbies"
        title="兴趣爱好"
        decorator={[FormItem]}
        component={[Checkbox.Group]}
        dataSource={[
          { label: '吃饭', value: 'eat' },
          { label: '睡觉', value: 'sleep' },
          { label: '打豆豆', value: 'play' },
        ]}
      />
      <FormButtonGroup>
        <Submit onSubmit={onSubmit}>提交</Submit>
      </FormButtonGroup>
    </FormProvider>
  )
}

排列方向

layout 控制选项排列方向。

tsx

import { Checkbox, FormButtonGroup, FormItem, Submit } from '@silver-formily/antd-mobile'
import { createForm } from '@silver-formily/core'
import { Field, FormProvider } from '@silver-formily/react'

const form = createForm()

function onSubmit(values: unknown) {
  return Prompts.alert(JSON.stringify(values, null, 2))
}

export default function CheckboxLayout() {
  return (
    <FormProvider form={form}>
      <Field
        name="city"
        title="所在城市"
        decorator={[FormItem]}
        component={[Checkbox.Group, {
          options: [
            { label: '杭州', value: 'hangzhou' },
            { label: '上海', value: 'shanghai' },
            { label: '北京', value: 'beijing' },
          ],
          layout: 'horizontal',
          layoutBlock: true,
        }]}
      />
      <Field
        name="hobbies"
        title="兴趣爱好"
        decorator={[FormItem]}
        component={[Checkbox.Group]}
        dataSource={[
          { label: '吃饭', value: 'eat' },
          { label: '睡觉', value: 'sleep' },
          { label: '打豆豆', value: 'play' },
        ]}
      />
      <Field
        name="agree"
        title="协议"
        decorator={[FormItem]}
        component={[Checkbox.Group]}
        dataSource={[
          { label: '已阅读并同意用户协议', value: 'yes' },
        ]}
      />
      <FormButtonGroup>
        <Submit onSubmit={onSubmit}>提交</Submit>
      </FormButtonGroup>
    </FormProvider>
  )
}

禁用状态

dataSource 中的选项可单独设置 disabled；字段级 disabled 会禁用整个选项组。

tsx

import { Checkbox, FormButtonGroup, FormItem, Submit } from '@silver-formily/antd-mobile'
import { createForm } from '@silver-formily/core'
import { Field, FormProvider } from '@silver-formily/react'

const form = createForm({
  initialValues: {
    hobbies: ['eat'],
  },
})

function onSubmit(values: unknown) {
  return Prompts.alert(JSON.stringify(values, null, 2))
}

export default function CheckboxDisabled() {
  return (
    <FormProvider form={form}>
      <Field
        name="hobbies"
        title="部分禁用"
        decorator={[FormItem]}
        component={[Checkbox.Group]}
        dataSource={[
          { label: '吃饭', value: 'eat' },
          { label: '睡觉', value: 'sleep', disabled: true },
          { label: '打豆豆', value: 'play' },
        ]}
      />
      <Field
        name="frozen"
        title="整体禁用"
        decorator={[FormItem]}
        component={[Checkbox.Group]}
        disabled
        dataSource={[
          { label: '吃饭', value: 'eat' },
          { label: '睡觉', value: 'sleep' },
        ]}
      />
      <FormButtonGroup>
        <Submit onSubmit={onSubmit}>提交</Submit>
      </FormButtonGroup>
    </FormProvider>
  )
}

Formily 字段设置 readOnly 时保留选中值，并禁用交互；组组件会同时禁用所有选项。

API

Checkbox.Group 属性

属性名	类型	描述	默认值
`layout`	`enum`	选项排列方向	`'vertical'`
`layoutBlock`	`boolean`	横向排列时是否占满整行	`false`

独立 Checkbox

独立使用时绑定布尔字段，标签可通过 children 传入，未传入时使用字段标题。选项数据源仅由 Checkbox.Group 处理。

Checkbox.Group 也支持直接传入多个 Checkbox 子项，此时子项的 value 表示字符串或数字选项值；子项优先于数据源渲染，不再根据子节点类型自动猜测渲染模式。

其余配置参考 Checkbox 官方文档。

Checkbox ​

基础使用 ​

排列方向 ​

禁用状态 ​

API ​

Checkbox.Group 属性 ​