mirror of
https://github.com/ArthurDanjou/ui.git
synced 2026-01-18 14:08:06 +01:00
102 lines
1.2 KiB
Markdown
102 lines
1.2 KiB
Markdown
---
|
|
github: true
|
|
description: Display a radio field.
|
|
---
|
|
|
|
## Usage
|
|
|
|
Use a `v-model` to make the Radio reactive.
|
|
|
|
::component-example
|
|
#default
|
|
:radio-example
|
|
|
|
#code
|
|
```vue
|
|
<script setup>
|
|
const methods = [{
|
|
name: 'email',
|
|
value: 'email',
|
|
label: 'Email'
|
|
}, {
|
|
name: 'sms',
|
|
value: 'sms',
|
|
label: 'Phone (SMS)'
|
|
}, {
|
|
name: 'push',
|
|
value: 'push',
|
|
label: 'Push notification'
|
|
}]
|
|
|
|
const selected = ref('sms')
|
|
</script>
|
|
|
|
<template>
|
|
<URadio v-for="method of methods" :key="method.name" v-model="selected" v-bind="method" />
|
|
</template>
|
|
```
|
|
::
|
|
|
|
### Label
|
|
|
|
Use the `label` prop to display a label on the right.
|
|
|
|
::component-card
|
|
---
|
|
baseProps:
|
|
name: 'radio1'
|
|
props:
|
|
label: 'Label'
|
|
---
|
|
::
|
|
|
|
### Required
|
|
|
|
Use the `required` prop to display a red star next to the label.
|
|
|
|
::component-card
|
|
---
|
|
baseProps:
|
|
name: 'radio2'
|
|
props:
|
|
label: 'Label'
|
|
required: true
|
|
---
|
|
::
|
|
|
|
### Help
|
|
|
|
Use the `help` prop to display some text under the Radio.
|
|
|
|
::component-card
|
|
---
|
|
baseProps:
|
|
name: 'radio3'
|
|
props:
|
|
label: 'Label'
|
|
help: 'Please choose one'
|
|
---
|
|
::
|
|
|
|
### Disabled
|
|
|
|
Use the `disabled` prop to disable the Radio.
|
|
|
|
::component-card
|
|
---
|
|
baseProps:
|
|
name: 'radio4'
|
|
value: true
|
|
props:
|
|
disabled: true
|
|
---
|
|
::
|
|
|
|
## Props
|
|
|
|
:component-props
|
|
|
|
## Preset
|
|
|
|
:component-preset
|