Radio Components

Examples

<script>
import { Radio } from 'flowbite-svelte'
let radiooptions = [
  {
    id: 'country-option-1',
    name: 'country',
    value: 'USA',
    checked: true,
    label: 'United States'
  },
  {
    id: 'country-option-2',
    name: 'country',
    label: 'Germany',
    value: 'Germany'
  },
  {
    id: 'country-option-3',
    name: 'country',
    label: 'Spain (disabled)',
    value: 'Spain',
    disabled: true
  }
];
</script>

{#each radiooptions as option}
<Radio {...option} divClass="flex items-center mb-4"/>
{/each}

Radio label with a link

<script>
let radiooptions2 = [
  {
    id: 'country-option-1',
    name: 'country',
    value: 'USA',
    checked: false,
    label: 'Radio button with a <a href="#" class="text-blue-600 dark:text-blue-500 hover:underline">link inside</a>.'
  }
];
</script>

{#each radiooptions2 as option}
<Radio {...option} />
{/each}

Helper text

<script>
let radiooptions3 = [
  {
    id: 'country-option-1',
    name: 'country',
    value: 'USA',
    checked: false,
    label: 'Free shipping via Flowbite',
    helper: 'For orders shipped from $25 in books or $29 in other categories'
  }
];
</script>
{#each radiooptions3 as option}
<Radio {...option} />
{/each}

Inline

<script>

let radiooptions4 =[
  {
    id: 'inline-1',
    name: 'inline',
    value:'inline-1',
    label: 'Inline 1',
  },
  {
    id: 'inline-2',
    name: 'inline',
    value:'inline-2',
    label: 'Inline 2',
  },
  {
    id: 'inline-3',
    name: 'inline',
    value:'inline-3',
    label: 'Inline 3',
  },
  {
    id: 'inline-4',
    name: 'inline',
    value:'inline-4',
    label: 'Inline 4 (disabled)',
    disabled: true
  }
]
</script>

<RadioInline>
{#each radiooptions4 as option}
<Radio {...option} />
{/each}
</RadioInline>

Colors

<script>
let radiooptions5 =[
  {
    id: 'red',
    name: 'color',
    value:'red',
    label: 'Red',
    color: 'red'
  },
  {
    id: 'green',
    name: 'color',
    value:'green',
    label: 'Green',
    color:'green'
  },
  {
    id: 'purple',
    name: 'color',
    value:'purple',
    label: 'Purple',
    color: 'purple'
  },
  {
    id: 'teal',
    name: 'color',
    value:'teal',
    label: 'Teal',
    color: 'teal'
  },
  {
    id: 'yellow',
    name: 'color',
    value:'yellow',
    label: 'Yellow',
    color: 'yellow'
  },
  {
    id: 'orange',
    name: 'color',
    value:'orange',
    label: 'Orange',
    color: 'orange'
  }
]
</script>

<RadioInline>
{#each radiooptions5 as option}
<Radio {...option} />
{/each}
</RadioInline>

Props

The component has the following props, type, and default values. See type-list page for type information.

Related components

Checkbox

File input

Floating label

Input

Radio

Range

Search

Select

Textarea

Toggle

References

Flowbite Forms