Qwik 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

The radio component can be used to allow the user to choose a single option from one or more available options coded with the utility classes from Tailwind CSS and available in multiple styles, variants, and colors and support dark mode.

To use the range component, you need to import it from flowbite-qwik :

import { Radio } from "flowbite-qwik"

Default

Use the default example of a radio component with the checked and unchecked state.

Edit on GitHub
tsx
import { component$ } from '@builder.io/qwik'
import { Radio } from 'flowbite-qwik'

export default component$(() => {
  return (
    <>
      <div class="flex flex-col gap-3 p-3">
        <Radio name="radio" value="one">
          First option
        </Radio>
        <Radio name="radio" value="two">
          Second option
        </Radio>
      </div>
    </>
  )
})

Color

This example can be used for the color of the radio component by applying the color attribute to the input element.

Edit on GitHub
tsx
import { component$, useSignal } from '@builder.io/qwik'
import { Heading, Radio } from 'flowbite-qwik'

export default component$(() => {
  const pick = useSignal('blue')

  return (
    <>
      <Heading tag="h5">Picked color : {pick.value}</Heading>
      <div class="flex flex-col gap-3 p-3">
        <Radio name="radio" value="blue" bind:option={pick}>
          Blue
        </Radio>
        <Radio name="radio" value="purple" color="purple" bind:option={pick}>
          Purple
        </Radio>
        <Radio name="radio" value="red" color="red" bind:option={pick}>
          Red
        </Radio>
        <Radio name="radio" value="green" color="green" bind:option={pick}>
          Green
        </Radio>
        <Radio name="radio" value="pink" color="pink" bind:option={pick}>
          Pink
        </Radio>
      </div>
    </>
  )
})

Disabled

This example can be used for the disabled state of the radio component by applying the disabled attribute to the input element.

Edit on GitHub
tsx
import { component$, useSignal } from '@builder.io/qwik'
import { Radio } from 'flowbite-qwik'

export default component$(() => {
  const pick = useSignal<string>('')

  return (
    <>
      <div class="flex flex-col gap-3 p-3">
        <Radio name="radio" value="one" disabled bind:option={pick}>
          First option
        </Radio>
        <Radio name="radio" value="two" disabled bind:option={pick}>
          Second option
        </Radio>
      </div>
    </>
  )
})

On change event

This example can be used for the onchange event of the radio component.

Edit on GitHub
tsx
import { component$, useSignal } from '@builder.io/qwik'
import { Radio } from 'flowbite-qwik'

export default component$(() => {
  const pick = useSignal('')

  return (
    <div class="flex flex-col gap-3">
      Reactivity choice : {pick.value}
      <div class="flex flex-col gap-3">
        <Radio
          onChange$={(checked: boolean, value: string) => {
            alert(`Checkbox state changed to ${checked} with value ${value}`)
          }}
          name="radio"
          value="one"
          bind:option={pick}
        >
          First option
        </Radio>
        <Radio
          onChange$={(checked: boolean, value: string) => {
            alert(`Checkbox state changed to ${checked} with value ${value}`)
          }}
          name="radio"
          value="two"
          bind:option={pick}
        >
          Second option
        </Radio>
      </div>
    </div>
  )
})