Checkbox
Checkbox
Tip
This component includes compatibility handling for older element-plus versions. No matter which version you use, objects in dataSource should include both label and value when you are not using slots. For older versions, slot rendering still needs the label prop to act as the value.
Markup Schema Example
vue
<script lang="ts" setup>
import { createForm } from '@silver-formily/core'
import { Checkbox, Form, FormItem, Submit } from '@silver-formily/element-plus'
import { createSchemaField } from '@silver-formily/vue'
const form = createForm({
initialValues: {
single: true,
multiple: [1],
},
})
const { SchemaField, SchemaBooleanField, SchemaArrayField } = createSchemaField(
{
components: {
FormItem,
Checkbox,
},
},
)
async function onSubmit(value: Record<string, any>) {
console.log(value)
}
</script>
<template>
<Form :form="form">
<SchemaField>
<SchemaBooleanField
name="single"
title="Confirm"
x-decorator="FormItem"
x-component="Checkbox"
/>
<SchemaArrayField
name="multiple"
title="Checkbox"
:enum="[
{ label: 'Option 1', value: 1 },
{ label: 'Option 2', value: 2 },
]"
x-decorator="FormItem"
x-component="Checkbox.Group"
/>
</SchemaField>
<Submit @submit="onSubmit">
Submit
</Submit>
</Form>
</template>查看源码
Markup Schema Slot Example
vue
<script lang="ts" setup>
import { createForm } from '@silver-formily/core'
import { Checkbox, Form, FormItem, Submit } from '@silver-formily/element-plus'
import { createSchemaField } from '@silver-formily/vue'
import { Fragment, h } from 'vue'
const form = createForm()
const { SchemaField, SchemaBooleanField, SchemaArrayField } = createSchemaField(
{
components: {
FormItem,
Checkbox,
},
},
)
async function onSubmit(value: Record<string, any>) {
console.log(value)
}
</script>
<template>
<Form :form="form">
<SchemaField>
<SchemaBooleanField
name="single"
title="Confirm"
x-decorator="FormItem"
x-component="Checkbox"
/>
<SchemaArrayField
name="multiple"
title="Checkbox"
:enum="[
{ label: 'Option 1', value: 1 },
{ label: 'Option 2', value: 2 },
]"
x-decorator="FormItem"
x-component="Checkbox.Group"
:x-content="{
option: (props, { attrs }) => {
return h(Fragment, [`Rendered via slot: ${attrs.option.label}`])
},
}"
/>
</SchemaField>
<Submit @submit="onSubmit">
Submit
</Submit>
</Form>
</template>查看源码
JSON Schema Example
vue
<script lang="ts" setup>
import { createForm } from '@silver-formily/core'
import { Checkbox, Form, FormItem, Submit } from '@silver-formily/element-plus'
import { createSchemaField } from '@silver-formily/vue'
const schema = {
type: 'object',
properties: {
checkbox: {
'type': 'number',
'title': 'Confirm',
'x-decorator': 'FormItem',
'x-component': 'Checkbox',
},
checkboxGroup: {
'type': 'array',
'title': 'Checkbox',
'x-decorator': 'FormItem',
'x-component': 'Checkbox.Group',
'enum': [
{
label: 'Option 1',
value: 1,
},
{
label: 'Option 2',
value: 2,
},
],
},
},
}
const form = createForm()
const { SchemaField } = createSchemaField({
components: {
FormItem,
Checkbox,
},
})
async function onSubmit(value: Record<string, any>) {
console.log(value)
}
</script>
<template>
<Form :form="form">
<SchemaField :schema="schema" />
<Submit @submit="onSubmit">
Submit
</Submit>
</Form>
</template>查看源码
Template Example
vue
<script lang="ts" setup>
import { createForm } from '@silver-formily/core'
import { Checkbox, Form, FormItem, Submit } from '@silver-formily/element-plus'
import { ArrayField, Field } from '@silver-formily/vue'
const form = createForm()
async function onSubmit(value: Record<string, any>) {
console.log(value)
}
</script>
<template>
<Form :form="form">
<Field
name="single"
title="Confirm"
:decorator="[FormItem]"
:component="[Checkbox]"
/>
<ArrayField
name="multiple"
title="Checkbox"
:data-source="[
{ label: 'Option 1', value: 1 },
{ label: 'Option 2', value: 2 },
]"
:decorator="[FormItem]"
:component="[Checkbox.Group, { optionType: 'button' }]"
/>
<ArrayField
name="multiple-slot"
title="Checkbox with Slot"
:data-source="[
{ label: 'Option 1', value: 1 },
{ label: 'Option 2', value: 2 },
]"
:decorator="[FormItem]"
:component="[Checkbox.Group, { optionType: 'button' }]"
>
<template #option="{ option }">
<div>Rendered via slot: {{ option.label }}</div>
</template>
</ArrayField>
<Submit @submit="onSubmit">
Submit
</Submit>
</Form>
</template>查看源码
API
See https://element-plus.org/en-US/component/checkbox.html
Extended Props
| Prop | Type | Description | Default |
|---|---|---|---|
optionType | enum | Style type | 'default' |
Checkbox Slot
| Slot | Description | Type |
|---|---|---|
option | Scoped slot for customizing how each option is rendered | object |
Object values and property selection
Set optionAsValue: true to submit option objects. The optional optionValueKeys?: string[] strictly selects top-level properties. Omit it to return complete objects; an empty array returns an empty object, and missing properties are ignored. optionAsValue defaults to false.
Projection affects only the submitted value, never dataSource. Include the identity property (value, or the configured nodeKey / rowKey) in the allowlist. Labels are resolved from the complete data source, so the form value does not need a label.
ts
const componentProps = {
optionAsValue: true,
optionValueKeys: ['value'],
}
// dataSource: [{ value: 1, label: 'One', extra: 'Business data' }]
// Form value: { value: 1 }