# Radio 单选框

<template>
  <Flex gap="160px">
    <Flex gap="24px">
      <Radio v-model="value" value="A">A</Radio>
      <Radio v-model="value" value="B">B</Radio>
    </Flex>

    <Flex gap="24px">
      <Radio v-model="value" value="A" disabled>A</Radio>
      <Radio v-model="value" value="B" disabled>B</Radio>
    </Flex>
  </Flex>
</template>

<script>
import { ref } from 'vue'
import { Flex, Radio } from 'comz'

export default {
  components: {
    Flex,
    Radio
  },
  setup() {
    return {
      value: ref('A')
    }
  }
}
</script>

<template>
  <pre>value: <code>{{ JSON.stringify(value, null, 0) }}</code></pre>

  <Flex gap="24px">
    <Radio v-model="value" :value="`string`">String</Radio>
    <Radio v-model="value" :value="123">Number</Radio>
    <Radio v-model="value" :value="['arr1', 'arr2']">Array</Radio>
    <Radio v-model="value" :value="true">Boolean</Radio>
    <Radio v-model="value" :value="{ key: 'value' }">Object</Radio>
  </Flex>

  <br />

  <pre>Invalid value: <code>{{ JSON.stringify(value2, null, 0) }}</code></pre>

  <Flex gap="24px">
    <Radio v-model="value2" :value="() => {}">Function</Radio>
    <Radio v-model="value2" :value="[new Map(), () => {}]">Array</Radio>
    <Radio v-model="value2" :value="{ key: () => {} }">Object</Radio>
  </Flex>
</template>

<script>
import { ref } from 'vue'
import { Flex, Radio } from 'comz'

export default {
  components: {
    Flex,
    Radio
  },
  setup() {
    return {
      value: ref(''),
      value2: ref('')
    }
  }
}
</script>

<template>
  <Flex gap="160px">
    <Flex gap="24px">
      <Radio v-model="value" value="image1">
        <Icon size="64px" color="#d2d2d2"><CardImage /></Icon>
      </Radio>
      <Radio v-model="value" value="image2">
        <Icon size="64px" color="#d2d2d2"><CardImage /></Icon>
      </Radio>
      <Radio v-model="value" value="image3">
        <Icon size="64px" color="#d2d2d2"><CardImage /></Icon>
      </Radio>
    </Flex>
  </Flex>
</template>

<script>
import { ref } from 'vue'
import { Flex, Radio, Icon } from 'comz'
import { CardImage } from '@comz/icons'

export default {
  components: {
    Flex,
    Radio,
    Icon,
    CardImage
  },
  setup() {
    return {
      value: ref('')
    }
  }
}
</script>