Qwik input - Flowbite
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.
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.
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.
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.
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.
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.
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.
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.
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>
)
})
Modular Forms
Use this example to use it with Modula Forms lib.
import { $, component$, QRL } from '@builder.io/qwik'
import { Button, Input } from 'flowbite-qwik'
import { routeLoader$, StaticGenerateHandler, z } from '@builder.io/qwik-city'
import { formAction$, type InitialValues, SubmitHandler, useForm, zodForm$ } from '@modular-forms/qwik'
type LoginForm = {
email: string
password: string
}
const LoginSchema = z.object({
email: z.string().email(),
password: z.string().min(1),
})
export const useFormLoader = routeLoader$<InitialValues<LoginForm>>(() => {
return {
email: '',
password: '',
}
})
export const useFormAction = formAction$<LoginForm>((values) => {
console.log('server side', { values })
}, zodForm$(LoginSchema))
export default component$(() => {
const [, { Form, Field }] = useForm<LoginForm>({
loader: useFormLoader(),
action: useFormAction(),
validate: zodForm$(LoginSchema),
})
const handleSubmit: QRL<SubmitHandler<LoginForm>> = $((values) => {
console.log('client side', { values })
})
return (
<Form onSubmit$={handleSubmit}>
<Field name="email">
{(field, props) => (
<div>
<label for={field.name}>Email</label>
<Input {...props} id={field.name} value={field.value} type="email" required />
{field.error && <div>{field.error}</div>}
</div>
)}
</Field>
<Field name="password">
{(field, props) => (
<div>
<label for={field.name}>Password</label>
<Input {...props} id={field.name} value={field.value} type="password" required />
{field.error && <div>{field.error}</div>}
</div>
)}
</Field>
<Button class="mt-2" type="submit">
Login
</Button>
</Form>
)
})