oa/documentation/radio/radio-outlined-documentation.md

state

state
selected value_2

VRadio

Vuero provides default styled radio buttons in 2 main styles, outlined (default) and solid. Those radio buttons also support all main colors. The available modifiers are primary, success,info, warning, danger.

<script setup lang="ts">

const selected = ref('value_2')
</script>

<template>
  <VField>
    <VControl>
      <VRadio
        v-model="selected"
        value="value_1"
        label="Choice 1"
        name="outlined_radio"
      />

      <VRadio
        v-model="selected"
        value="value_2"
        label="Choice 2"
        name="outlined_radio"
        color="primary"
      />

      <VRadio
        v-model="selected"
        value="value_3"
        label="Choice 3"
        name="outlined_radio"
        color="info"
      />

      <VRadio
        v-model="selected"
        value="value_4"
        label="Choice 4"
        name="outlined_radio"
        color="success"
      />

      <VRadio
        v-model="selected"
        value="value_5"
        label="Choice 5"
        name="outlined_radio"
        color="warning"
      />

      <VRadio
        v-model="selected"
        value="value_6"
        label="Choice 6"
        name="outlined_radio"
        color="danger"
      />
    </VControl>
  </VField>
</template>