Flowbite Vue 3

Appearance

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 ​

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 ​

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 ​

Technology Vue JS

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 ​

Technology svelte

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 ​

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>
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 ​

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>

Released under the MIT License.

Copyright © 2023 Flowbite™