Radio
Radio
Note
You should always use Radio.Group instead of Radio. This package does not wrap Radio itself and simply exposes the raw ElRadio component. In newer Element Plus versions, the value prop on ElRadio conflicts with the Field binding contract. Making that compatible would require extra wrapping and complexity, and in form scenarios there is rarely a meaningful case for using a standalone radio item directly.
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
<script lang="ts" setup>
import { createForm } from '@silver-formily/core'
import { FormItem, Radio, Submit } from '@silver-formily/element-plus'
import { createSchemaField, FormProvider } from '@silver-formily/vue'
const form = createForm()
const { SchemaField, SchemaStringField } = createSchemaField({
components: {
FormItem,
Radio,
},
})
function log(value: Record<string, any>) {
console.log(value)
}
</script>
<template>
<FormProvider :form="form">
<SchemaField>
<SchemaStringField
name="radio"
title="Radio"
x-decorator="FormItem"
x-component="Radio.Group"
:enum="[
{
label: 'Option 1',
value: 1,
},
{
label: 'Option 2',
value: 2,
},
]"
/>
<SchemaStringField
name="radio-slot"
title="Slot-based Radio"
x-decorator="FormItem"
x-component="Radio.Group"
:enum="[
{
label: 'Option 1',
value: 1,
},
{
label: 'Option 2',
value: 2,
},
]"
:x-content="{
option: (_, { attrs }) => {
return `Slot rendered ${attrs.option.label}`
},
}"
/>
</SchemaField>
<Submit @submit="log">
Submit
</Submit>
</FormProvider>
</template>JSON Schema Example
<script lang="ts" setup>
import { createForm } from '@silver-formily/core'
import { Form, FormItem, Radio, Submit } from '@silver-formily/element-plus'
import { createSchemaField } from '@silver-formily/vue'
const { SchemaField } = createSchemaField({
components: {
FormItem,
Radio,
},
})
const schema = {
type: 'object',
properties: {
radio: {
'type': 'boolean',
'title': 'Radio',
'enum': [
{
label: 'Option 1',
value: 1,
},
{
label: 'Option 2',
value: 2,
},
],
'x-decorator': 'FormItem',
'x-component': 'Radio.Group',
'x-component-props': {
optionType: 'button',
},
},
},
}
const form = createForm()
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
<script lang="ts" setup>
import { createForm } from '@silver-formily/core'
import { FormItem, Radio, Submit } from '@silver-formily/element-plus'
import { Field, FormProvider } from '@silver-formily/vue'
const form = createForm()
function log(value: Record<string, any>) {
console.log(value)
}
</script>
<template>
<FormProvider :form="form">
<Field
name="radio"
title="Radio"
:decorator="[FormItem]"
:component="[Radio.Group]"
:data-source="[
{
label: 'Option 1',
value: 1,
},
{
label: 'Option 2',
value: 2,
},
]"
/>
<Field
name="radio-slot"
title="Radio Slot"
:component="[Radio.Group]"
:decorator="[FormItem]"
:data-source="[
{ label: 'Tag 1', value: '1' },
{ label: 'Tag 2', value: '2' },
]"
>
<template #option="{ option }">
Rendered via slot: {{ option.label }}
</template>
</Field>
<Submit @submit="log">
Submit
</Submit>
</FormProvider>
</template>API
See https://element-plus.org/en-US/component/radio.html
Extended Props
| Prop | Type | Description | Default |
|---|---|---|---|
optionType | enum | Style type | 'default' |
Radio Slot
| Slot | Description | Type |
|---|---|---|
option | Scoped slot for customizing how each option is rendered | object |