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>
    </>
  )
})