Qwik input - Flowbite

Get started with a collection of input fields built with Tailwind CSS to start accepting data from the user based on multiple sizes, variants, and input types

The input field is an important part of the form element that can be used to create interactive controls to accept data from the user based on multiple input types, such as text, email, number, password, URL, phone number, and more.

On this page you will find all of the input types based on multiple variants, styles, colors, and sizes built with the utility classes from Tailwind CSS and components from Flowbite.

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

import { Input } from "flowbite-qwik"

Default input

Use this example as a generic form element which includes multiple input fields types such as text, email, password, number, URL, and phone number and use the grid layout to add multiple columns and rows.

tsx
import { component$, useSignal } from '@builder.io/qwik'
import { Input } from 'flowbite-qwik'

export default component$(() => {
  const val = useSignal('')
  return (
    <>
      <div class="p-3">
        <p class="text-xl">Value : {val.value}</p>
        <Input bind:value={val} label="Name" placeholder="John Doe" />
      </div>
    </>
  )
})

Input sizes

Use the following examples to apply a small, default or large size for the input fields.

tsx
import { component$, useSignal } from '@builder.io/qwik'
import { Input } from 'flowbite-qwik'

export default component$(() => {
  const val = useSignal('')
  return (
    <>
      <div class="p-3">
        <p class="text-xl">Value : {val.value}</p>
        <div class="flex flex-col gap-3">
          <Input bind:value={val} label="Small" placeholder="enter your name" size="sm" />
          <Input bind:value={val} label="Medium" placeholder="enter your name" size="md" />
          <Input bind:value={val} label="Large" placeholder="enter your name" size="lg" />
        </div>
      </div>
    </>
  )
})

Required

Get started with this example if you want to apply the required state to an input field.

tsx
import { component$, useSignal } from '@builder.io/qwik'
import { Input } from 'flowbite-qwik'

export default component$(() => {
  const val = useSignal('')
  return (
    <>
      <div class="p-3">
        <Input bind:value={val} required label="First name" placeholder="First name" />
      </div>
    </>
  )
})

Disabled state

Get started with this example if you want to apply the disabled state to an input field.

tsx
import { component$, useSignal } from '@builder.io/qwik'
import { Input } from 'flowbite-qwik'

export default component$(() => {
  const val = useSignal('')
  return (
    <>
      <div class="p-3">
        <Input bind:value={val} disabled label="First name" placeholder="First name" />
      </div>
    </>
  )
})

Helper Text

Use this example to show a helper text below the input field for additional explanation and links.

tsx
import { component$, useSignal } from '@builder.io/qwik'
import { Input } from 'flowbite-qwik'

export default component$(() => {
  const val = useSignal('')
  return (
    <div class="p-3">
      <Input
        bind:value={val}
        label="First name"
        placeholder="First name"
        helper={
          <>
            We'll never share your details. Read our{' '}
            <a href="#" class="text-blue-600 dark:text-blue-500">
              Privacy Policy
            </a>
            .
          </>
        }
      />
    </div>
  )
})

Prefix

Use this example to add a prefix to the input field.

tsx
import { component$, useSignal } from '@builder.io/qwik'
import { Input } from 'flowbite-qwik'
import { IconSearchOutline } from 'flowbite-qwik-icons'

export default component$(() => {
  const val = useSignal('')
  return (
    <div class="p-3">
      <Input
        bind:value={val}
        label="First name"
        placeholder="First name"
        prefix={<IconSearchOutline class="h-5 w-5 text-gray-500 dark:text-gray-400" />}
      />
    </div>
  )
})

Suffix

Use this example to add a suffix to the input field.

tsx
import { component$, useSignal } from '@builder.io/qwik'
import { Input, Button } from 'flowbite-qwik'
import { IconSearchOutline } from 'flowbite-qwik-icons'

export default component$(() => {
  const val = useSignal('')
  return (
    <div class="p-3">
      <Input
        bind:value={val}
        label="First name"
        placeholder="First name"
        size="lg"
        prefix={<IconSearchOutline class="h-5 w-5 text-gray-500 dark:text-gray-400" />}
        suffix={<Button>Hello</Button>}
      />
    </div>
  )
})

Input validation

Use this example to add a validation message to the input field.

tsx
import { component$, useSignal } from '@builder.io/qwik'
import { Input } from 'flowbite-qwik'

export default component$(() => {
  const val = useSignal('')
  return (
    <div class="p-3">
      <Input bind:value={val} label="First name" placeholder="First name" validationStatus="success" />
      <hr class="mt-4 border-0"></hr>
      <Input bind:value={val} label="First name" placeholder="First name" validationStatus="error" validationMessage="This field is not valid" />
    </div>
  )
})