Radio

Default

Option 1Option 2

code

<script setup>
import { ref } from 'vue'

const modelValue = ref('one')
</script>

<template>
  <PStack direction="col">
    <PRadio v-model="modelValue" label="Option 1" value="one" />
    <PRadio v-model="modelValue" value="two">Option 2</PRadio>
  </PStack>
</template>

Group

Support all props of stack components

code

<script setup>
import { ref } from 'vue'

const value = ref('one')
const options = [
  { label: 'Options 1', value: 'one' },
  { label: 'Options 2', value: 'tow' },
  { label: 'Options 3', value: 'three' },
]
</script>

<template>
  <PRadioGroup
    v-model="value"
    :options="options"
    gap="3"
    direction="col"
  />

  <PRadioGroup
    v-model="value"
    :options="options"
    gap="3"
    disabled
    class="mt-6"
    direction="col"
  />
</template>

Disabled

Option 1Option 2

code

<script setup>
import { ref } from 'vue'

const modelValue = ref('one')
</script>

<template>
  <PStack direction="col">
    <PRadio v-model="modelValue" disabled label="Option 1" value="one" />
    <PRadio v-model="modelValue" disabled value="two">Option 2</PRadio>
  </PStack>
</template>

Radio standalone

Standalone unlabelled radio input for use in custom UI.

Option 1

code

<script setup>
import { ref } from 'vue'

const value = ref('one')
</script>

<template>
  <PStack align="center">
    <span>Option 1</span>
    <PRadio v-model="value" value="one" />
  </PStack>
</template>