Qwik select - Flowbite

Get started with the select component to allow the user to choose from one or more options from a dropdown list based on multiple styles, sizes, and variants

The select input component can be used to gather information from users based on multiple options in the form of a dropdown list and by browsing this page you will find multiple options, styles, sizes, and variants built with the utility classes from Tailwind CSS also available in dark mode.

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

import { Select } from "flowbite-qwik"

Default

Get started with the default example of a select input component to get a single option selection.

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

export default component$(() => {
  const selected = useSignal('')
  const countries = [
    { value: 'us', name: 'United States' },
    { value: 'ca', name: 'Canada' },
    { value: 'fr', name: 'France' },
  ]

  return (
    <>
      <div class="flex flex-col gap-3 p-3">
        <Select bind:value={selected} options={countries} placeholder="Choose a country" label="Select an option" />
      </div>
    </>
  )
})

Disabled

Apply the disable state to the select component to disallow the selection of new options.

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

export default component$(() => {
  const selected = useSignal('')
  const countries = [
    { value: 'us', name: 'United States' },
    { value: 'ca', name: 'Canada' },
    { value: 'fr', name: 'France' },
  ]

  return (
    <>
      <div class="flex flex-col gap-3 p-3">
        <Select bind:value={selected} disabled options={countries} placeholder="Choose a country" label="Select an option" />
      </div>
    </>
  )
})

Selected option

Use this example to get a single option selection with the selected state of the select input component.

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

export default component$(() => {
  const selected = useSignal('fr')
  const countries = [
    { value: 'us', name: 'United States' },
    { value: 'ca', name: 'Canada' },
    { value: 'fr', name: 'France' },
  ]

  return (
    <>
      <div class="flex flex-col gap-3 p-3">
        <Select bind:value={selected} options={countries} placeholder="Choose a country" label="Select an option" />
      </div>
    </>
  )
})

Sizes

Get started with the small, default, and large sizes for the select component from the example below.

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

export default component$(() => {
  const selected = useSignal('')
  const countries = [
    { value: 'us', name: 'United States' },
    { value: 'ca', name: 'Canada' },
    { value: 'fr', name: 'France' },
  ]

  return (
    <>
      <div class="flex flex-col gap-3 p-3">
        <Select bind:value={selected} options={countries} placeholder="Choose a country" label="Small" sizing="sm" />
        <Select bind:value={selected} options={countries} placeholder="Choose a country" label="Medium" sizing="md" />
        <Select bind:value={selected} options={countries} placeholder="Choose a country" label="Large" sizing="lg" />
      </div>
    </>
  )
})

Underline

Use the underline style for the select component as an alternative appearance.

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

export default component$(() => {
  const selected = useSignal('')
  const countries = [
    { value: 'us', name: 'United States' },
    { value: 'ca', name: 'Canada' },
    { value: 'fr', name: 'France' },
  ]

  return (
    <>
      <div class="flex flex-col gap-3 p-3">
        <Select bind:value={selected} options={countries} underline placeholder="Choose a country" label="Underline" />
      </div>
    </>
  )
})