import"./chunks/FwbRange.vue_vue_type_style_index_0_scoped_fadec9c5_lang.66ff4c69.js";import{_ as p}from"./chunks/FwbRadio.vue_vue_type_script_setup_true_lang.a8d8cba7.js";import{h as i,o as t,c as u,H as l,l as o,k as y,b as q,w as e,a as d,t as m,Q as r}from"./chunks/framework.3f630664.js";import{_ as b}from"./chunks/FwbA.vue_vue_type_script_setup_true_lang.693a0ec3.js";import{a as F,_ as v}from"./chunks/FwbListGroupItem.vue_vue_type_script_setup_true_lang.9898f565.js";import{_ as g}from"./chunks/FwbP.vue_vue_type_script_setup_true_lang.b05f1505.js";import"./chunks/simplifyTailwindClasses.275301d3.js";import"./chunks/useMergeClasses.5cec3a4e.js";const f={class:"vp-raw"},C={__name:"FwbRadioExample",setup(c){const s=i();return(E,a)=>(t(),u("div",f,[l(o(p),{modelValue:s.value,"onUpdate:modelValue":a[0]||(a[0]=n=>s.value=n),label:"Radio 1",name:"radio",value:"one"},null,8,["modelValue"]),l(o(p),{modelValue:s.value,"onUpdate:modelValue":a[1]||(a[1]=n=>s.value=n),label:"Radio 2",name:"radio",value:"two"},null,8,["modelValue"])]))}},B={class:"vp-raw grid grid-cols-2 gap-6"},_={class:"flex items-center p-2 border border-gray-200 rounded dark:border-gray-700"},w={class:"flex items-center p-2 border border-gray-200 rounded dark:border-gray-700"},h={__name:"FwbRadioExampleBordered",setup(c){const s=i("one");return(E,a)=>(t(),u("div",B,[y("div",_,[l(o(p),{modelValue:s.value,"onUpdate:modelValue":a[0]||(a[0]=n=>s.value=n),label:"Radio 1",name:"radio-bordered",value:"one"},null,8,["modelValue"])]),y("div",w,[l(o(p),{modelValue:s.value,"onUpdate:modelValue":a[1]||(a[1]=n=>s.value=n),label:"Radio 2",name:"radio-bordered",value:"two"},null,8,["modelValue"])])]))}},A={class:"vp-raw"},k={__name:"FwbRadioExampleDisabled",setup(c){const s=i("two");return(E,a)=>(t(),u("div",A,[l(o(p),{modelValue:s.value,"onUpdate:modelValue":a[0]||(a[0]=n=>s.value=n),disabled:"",label:"Disabled radio",name:"radio-disabled",value:"one"},null,8,["modelValue"]),l(o(p),{modelValue:s.value,"onUpdate:modelValue":a[1]||(a[1]=n=>s.value=n),disabled:"",label:"Disabled checked",name:"radio-disabled",value:"two"},null,8,["modelValue"])]))}},D={class:"vp-raw flex w-96"},V={__name:"FwbRadioExampleInline",setup(c){const s=i("first");return(E,a)=>(t(),u("div",D,[l(o(p),{modelValue:s.value,"onUpdate:modelValue":a[0]||(a[0]=n=>s.value=n),label:"Inline 1",value:"first"},null,8,["modelValue"]),l(o(p),{modelValue:s.value,"onUpdate:modelValue":a[1]||(a[1]=n=>s.value=n),label:"Inline 2",value:"second"},null,8,["modelValue"]),l(o(p),{modelValue:s.value,"onUpdate:modelValue":a[2]||(a[2]=n=>s.value=n),label:"Inline 3",value:"third"},null,8,["modelValue"]),l(o(p),{modelValue:s.value,"onUpdate:modelValue":a[3]||(a[3]=n=>s.value=n),label:"Inline 4",value:"fourth"},null,8,["modelValue"])]))}},R={__name:"FwbRadioExampleLink",setup(c){const s=i();return(E,a)=>(t(),q(o(p),{modelValue:s.value,"onUpdate:modelValue":a[0]||(a[0]=n=>s.value=n),name:"with-link",value:"first"},{default:e(()=>[d(" I agree with the "),l(o(b),{class:"ml-1",href:"#"},{default:e(()=>[d(" terms and conditions ")]),_:1}),d(". ")]),_:1},8,["modelValue"]))}},x={class:"vp-raw"},T={__name:"FwbRadioExampleList",setup(c){const s=i("Vue JS");return(E,a)=>(t(),u("div",x,[l(o(g),{class:"mb-2"},{default:e(()=>[d(" Technology "+m(s.value),1)]),_:1}),l(o(v),null,{default:e(()=>[l(o(F),null,{default:e(()=>[l(o(p),{modelValue:s.value,"onUpdate:modelValue":a[0]||(a[0]=n=>s.value=n),label:"Svelte",name:"list-radio",value:"Svelte"},null,8,["modelValue"])]),_:1}),l(o(F),null,{default:e(()=>[l(o(p),{modelValue:s.value,"onUpdate:modelValue":a[1]||(a[1]=n=>s.value=n),label:"Vue JS",name:"list-radio",value:"Vue JS"},null,8,["modelValue"])]),_:1}),l(o(F),null,{default:e(()=>[l(o(p),{modelValue:s.value,"onUpdate:modelValue":a[2]||(a[2]=n=>s.value=n),label:"React",name:"list-radio",value:"React"},null,8,["modelValue"])]),_:1}),l(o(F),null,{default:e(()=>[l(o(p),{modelValue:s.value,"onUpdate:modelValue":a[3]||(a[3]=n=>s.value=n),label:"Angular",name:"list-radio",value:"Angular"},null,8,["modelValue"])]),_:1})]),_:1})]))}},S={class:"vp-raw"},I={class:"items-center w-full text-sm font-medium text-gray-900 bg-white border border-gray-200 rounded-lg sm:flex dark:bg-gray-700 dark:border-gray-600 dark:text-white"},P={class:"w-full !m-0 pl-3 flex border-gray-200 rounded-t-lg dark:border-gray-600"},$={class:"w-full !m-0 pl-3 flex border-gray-200 rounded-t-lg dark:border-gray-600"},U={class:"w-full !m-0 pl-3 flex border-gray-200 rounded-t-lg dark:border-gray-600"},z={class:"w-full !m-0 pl-3 flex border-gray-200 rounded-t-lg dark:border-gray-600"},J={__name:"FwbRadioExampleListHorizontal",setup(c){const s=i("svelte");return(E,a)=>(t(),u("div",S,[l(o(g),{class:"mb-2"},{default:e(()=>[d(" Technology "+m(s.value),1)]),_:1}),y("ul",I,[y("li",P,[l(o(p),{modelValue:s.value,"onUpdate:modelValue":a[0]||(a[0]=n=>s.value=n),label:"Svelte",name:"radio-horizontal",value:"Svelte"},null,8,["modelValue"])]),y("li",$,[l(o(p),{modelValue:s.value,"onUpdate:modelValue":a[1]||(a[1]=n=>s.value=n),label:"Vue JS",name:"radio-horizontal",value:"Vue JS"},null,8,["modelValue"])]),y("li",U,[l(o(p),{modelValue:s.value,"onUpdate:modelValue":a[2]||(a[2]=n=>s.value=n),label:"React",name:"radio-horizontal",value:"React"},null,8,["modelValue"])]),y("li",z,[l(o(p),{modelValue:s.value,"onUpdate:modelValue":a[3]||(a[3]=n=>s.value=n),label:"Angular",name:"radio-horizontal",value:"Angular"},null,8,["modelValue"])])])]))}},N=r('

Vue Toggle Radio - Flowbite

Get started with the radio component to let the user choose a single option from multiple options in the form of a circle based on multiple styles and colors

TIP

Original reference: https://flowbite.com/docs/forms/range/

Radio examples

',5),L=r(`

vue

<template>
  <fwb-radio v-model="picked" name="radio" label="Radio 1" value="one" />
  <fwb-radio v-model="picked" name="radio" label="Radio 2" value="two" />
</template>

<script setup>
import { ref } from 'vue'
import { FwbRadio } from 'flowbite-vue'

const picked = ref()
</script>

<template>
  <fwb-radio v-model="picked" name="radio" label="Radio 1" value="one" />
  <fwb-radio v-model="picked" name="radio" label="Radio 2" value="two" />
</template>

<script setup>
import { ref } from 'vue'
import { FwbRadio } from 'flowbite-vue'

const picked = ref()
</script>

Disabled Radio

`,2),G=r(`

vue

<template>
  <fwb-radio
    v-model="picked"
    disabled
    label="Disabled radio"
    name="radio-disabled"
    value="one"
  />
  <fwb-radio
    v-model="picked"
    disabled
    label="Disabled checked"
    name="radio-disabled"
    value="two"
  />
</template>

<script setup>
import { ref } from 'vue'
import { FwbRadio } from 'flowbite-vue'

const picked = ref('two')
</script>

<template>
  <fwb-radio
    v-model="picked"
    disabled
    label="Disabled radio"
    name="radio-disabled"
    value="one"
  />
  <fwb-radio
    v-model="picked"
    disabled
    label="Disabled checked"
    name="radio-disabled"
    value="two"
  />
</template>

<script setup>
import { ref } from 'vue'
import { FwbRadio } from 'flowbite-vue'

const picked = ref('two')
</script>

Radio list group

`,2),H=r(`

vue

<template>
  <fwb-p class="mb-2">
    Technology {{ picked }}
  </fwb-p>

  <fwb-list-group>
    <fwb-list-group-item>
      <fwb-radio
        v-model="picked"
        label="Svelte"
        name="list-radio"
        value="Svelte"
      />
    </fwb-list-group-item>
    <fwb-list-group-item>
      <fwb-radio
        v-model="picked"
        label="Vue JS"
        name="list-radio"
        value="Vue JS"
      />
    </fwb-list-group-item>
    <fwb-list-group-item>
      <fwb-radio
        v-model="picked"
        label="React"
        name="list-radio"
        value="React"
      />
    </fwb-list-group-item>
    <fwb-list-group-item>
      <fwb-radio
        v-model="picked"
        label="Angular"
        name="list-radio"
        value="Angular"
      />
    </fwb-list-group-item>
  </fwb-list-group>
</template>

<script setup>
import { ref } from 'vue'
import { FwbListGroup, FwbListGroupItem, FwbP, FwbRadio } from 'flowbite-vue'

const picked = ref('Vue JS')
</script>

<template>
  <fwb-p class="mb-2">
    Technology {{ picked }}
  </fwb-p>

  <fwb-list-group>
    <fwb-list-group-item>
      <fwb-radio
        v-model="picked"
        label="Svelte"
        name="list-radio"
        value="Svelte"
      />
    </fwb-list-group-item>
    <fwb-list-group-item>
      <fwb-radio
        v-model="picked"
        label="Vue JS"
        name="list-radio"
        value="Vue JS"
      />
    </fwb-list-group-item>
    <fwb-list-group-item>
      <fwb-radio
        v-model="picked"
        label="React"
        name="list-radio"
        value="React"
      />
    </fwb-list-group-item>
    <fwb-list-group-item>
      <fwb-radio
        v-model="picked"
        label="Angular"
        name="list-radio"
        value="Angular"
      />
    </fwb-list-group-item>
  </fwb-list-group>
</template>

<script setup>
import { ref } from 'vue'
import { FwbListGroup, FwbListGroupItem, FwbP, FwbRadio } from 'flowbite-vue'

const picked = ref('Vue JS')
</script>

Horizontal list group

`,2),O=r(`

vue

<template>
  <fwb-p class="mb-2">
    Technology {{ picked }}
  </fwb-p>
  <ul class="items-center w-full text-sm font-medium text-gray-900 bg-white border border-gray-200 rounded-lg sm:flex dark:bg-gray-700 dark:border-gray-600 dark:text-white">
    <li class="w-full !m-0 pl-3 flex border-gray-200 rounded-t-lg dark:border-gray-600">
      <fwb-radio
        v-model="picked"
        label="Svelte"
        name="radio-horizontal"
        value="Svelte"
      />
    </li>
    <li class="w-full !m-0 pl-3 flex border-gray-200 rounded-t-lg dark:border-gray-600">
      <fwb-radio
        v-model="picked"
        label="Vue JS"
        name="radio-horizontal"
        value="Vue JS"
      />
    </li>
    <li class="w-full !m-0 pl-3 flex border-gray-200 rounded-t-lg dark:border-gray-600">
      <fwb-radio
        v-model="picked"
        label="React"
        name="radio-horizontal"
        value="React"
      />
    </li>
    <li class="w-full !m-0 pl-3 flex border-gray-200 rounded-t-lg dark:border-gray-600">
      <fwb-radio
        v-model="picked"
        label="Angular"
        name="radio-horizontal"
        value="Angular"
      />
    </li>
  </ul>
</template>

<script setup>
import { ref } from 'vue'
import { FwbP, FwbRadio } from 'flowbite-vue'

const picked = ref('svelte')
</script>

<template>
  <fwb-p class="mb-2">
    Technology {{ picked }}
  </fwb-p>
  <ul class="items-center w-full text-sm font-medium text-gray-900 bg-white border border-gray-200 rounded-lg sm:flex dark:bg-gray-700 dark:border-gray-600 dark:text-white">
    <li class="w-full !m-0 pl-3 flex border-gray-200 rounded-t-lg dark:border-gray-600">
      <fwb-radio
        v-model="picked"
        label="Svelte"
        name="radio-horizontal"
        value="Svelte"
      />
    </li>
    <li class="w-full !m-0 pl-3 flex border-gray-200 rounded-t-lg dark:border-gray-600">
      <fwb-radio
        v-model="picked"
        label="Vue JS"
        name="radio-horizontal"
        value="Vue JS"
      />
    </li>
    <li class="w-full !m-0 pl-3 flex border-gray-200 rounded-t-lg dark:border-gray-600">
      <fwb-radio
        v-model="picked"
        label="React"
        name="radio-horizontal"
        value="React"
      />
    </li>
    <li class="w-full !m-0 pl-3 flex border-gray-200 rounded-t-lg dark:border-gray-600">
      <fwb-radio
        v-model="picked"
        label="Angular"
        name="radio-horizontal"
        value="Angular"
      />
    </li>
  </ul>
</template>

<script setup>
import { ref } from 'vue'
import { FwbP, FwbRadio } from 'flowbite-vue'

const picked = ref('svelte')
</script>

Inline Radio

`,2),j=r(`

vue

<template>
  <div class="flex w-96">
    <fwb-radio v-model="picked" label="Inline 1" value="first" />
    <fwb-radio v-model="picked" label="Inline 2" value="second" />
    <fwb-radio v-model="picked" label="Inline 3" value="third" />
    <fwb-radio v-model="picked" label="Inline 4" value="fourth" />
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { FwbRadio } from 'flowbite-vue'

const picked = ref('first')
</script>

<template>
  <div class="flex w-96">
    <fwb-radio v-model="picked" label="Inline 1" value="first" />
    <fwb-radio v-model="picked" label="Inline 2" value="second" />
    <fwb-radio v-model="picked" label="Inline 3" value="third" />
    <fwb-radio v-model="picked" label="Inline 4" value="fourth" />
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { FwbRadio } from 'flowbite-vue'

const picked = ref('first')
</script>

Radio with a link

`,2),Q=r(`

vue

<template>
  <fwb-radio v-model="picked" name="with-link" value="first">
    I agree with the
    <fwb-a class="ml-1" href="#">
      terms and conditions
    </fwb-a>.
  </fwb-radio>
</template>

<script setup>
import { ref } from 'vue'
import { FwbA, FwbRadio } from 'flowbite-vue'

const picked = ref()
</script>

<template>
  <fwb-radio v-model="picked" name="with-link" value="first">
    I agree with the
    <fwb-a class="ml-1" href="#">
      terms and conditions
    </fwb-a>.
  </fwb-radio>
</template>

<script setup>
import { ref } from 'vue'
import { FwbA, FwbRadio } from 'flowbite-vue'

const picked = ref()
</script>

Bordered Radio

`,2),K=r(`

vue

<template>
  <div class="grid grid-cols-2 gap-6">
    <div class="flex items-center p-2 border border-gray-200 rounded dark:border-gray-700">
      <fwb-radio v-model="picked" label="Radio 1" name="radio-bordered" value="one" />
    </div>
    <div class="flex items-center p-2 border border-gray-200 rounded dark:border-gray-700">
      <fwb-radio v-model="picked" label="Radio 2" name="radio-bordered" value="two" />
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { FwbRadio } from 'flowbite-vue'

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

<template>
  <div class="grid grid-cols-2 gap-6">
    <div class="flex items-center p-2 border border-gray-200 rounded dark:border-gray-700">
      <fwb-radio v-model="picked" label="Radio 1" name="radio-bordered" value="one" />
    </div>
    <div class="flex items-center p-2 border border-gray-200 rounded dark:border-gray-700">
      <fwb-radio v-model="picked" label="Radio 2" name="radio-bordered" value="two" />
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { FwbRadio } from 'flowbite-vue'

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

`,1),os=JSON.parse('{"title":"Vue Toggle Radio - Flowbite","description":"","frontmatter":{},"headers":[],"relativePath":"components/radio.md","filePath":"components/radio.md"}'),M={name:"components/radio.md"},ps=Object.assign(M,{setup(c){return(s,E)=>(t(),u("div",null,[N,l(C),L,l(k),G,l(T),H,l(J),O,l(V),j,l(R),Q,l(h),K]))}});export{os as __pageData,ps as default};

Vue Toggle Radio - Flowbite ​

Get started with the radio component to let the user choose a single option from multiple options in the form of a circle based on multiple styles and colors ​

Radio examples ​

Disabled Radio ​

Radio list group ​

Horizontal list group ​

Inline Radio ​

Radio with a link ​

Bordered Radio ​