Input
Displays a form input field or a component that looks like an input field.
import { component$ } from '@builder.io/qwik';
import { Input } from '~/components/ui';
export default component$(() => {
return (
<>
<Input type="email" placeholder="Email" />
</>
);
});
Installation
Run the following cli command or copy/paste the component code into your project
qwik-ui add input
import { $, component$, type PropsOf } from '@builder.io/qwik';
import { cn } from '@qwik-ui/utils';
type InputProps = PropsOf<'input'> & {
error?: string;
};
export const Input = component$<InputProps>(
({ name, error, id, ['bind:value']: valueSig, value, onInput$, ...props }) => {
const inputId = id || name;
return (
<>
<input
{...props}
aria-errormessage={`${inputId}-error`}
aria-invaid={!!error}
// workaround to support two way data-binding on the Input component (https://github.com/QwikDev/qwik/issues/3926)
value={valueSig ? valueSig.value : value}
onInput$={valueSig ? $((__, el) => (valueSig.value = el.value)) : onInput$}
class={cn(
'flex h-12 w-full rounded-base border border-input bg-background px-3 py-1 text-sm text-foreground shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50',
props.class,
)}
id={inputId}
/>
{error && (
<div id={`${inputId}-error`} class="text-alert mt-1 text-sm">
{error}
</div>
)}
</>
);
},
);
Usage
import { Input } from '~/components/ui';
<Input />
Examples
File
import { component$ } from '@builder.io/qwik';
import { Input } from '~/components/ui';
import { Label } from '~/components/ui';
export default component$(() => {
return (
<div class="grid w-full max-w-sm items-center gap-1.5">
<Label for="picture">Picture</Label>
<Input id="picture" type="file" />
</div>
);
});
Disabled
import { component$ } from '@builder.io/qwik';
import { Input } from '~/components/ui';
export default component$(() => {
return <Input disabled type="email" placeholder="Email" />;
});
With Label
import { component$ } from '@builder.io/qwik';
import { Input } from '~/components/ui';
import { Label } from '~/components/ui';
export default component$(() => {
return (
<div class="grid w-full max-w-sm items-center gap-1.5">
<Label for="email">Email</Label>
<Input type="email" id="email" placeholder="Email" />
</div>
);
});
With button
import { component$ } from '@builder.io/qwik';
import { Input } from '~/components/ui';
import { Button } from '~/components/ui';
export default component$(() => {
return (
<div class="flex w-full max-w-sm items-center space-x-2">
<Input type="email" placeholder="Email" />
<Button type="submit">Subscribe</Button>
</div>
);
});
With text
Enter your email address.
import { component$ } from '@builder.io/qwik';
import { Input } from '~/components/ui';
import { Label } from '~/components/ui';
export default component$(() => {
return (
<div class="grid w-full max-w-sm items-center gap-1.5">
<Label for="email-2">Email</Label>
<Input type="email" id="email-2" placeholder="Email" />
<p class="text-sm text-muted-foreground">Enter your email address.</p>
</div>
);
});
Data-binding
Your email is: [email protected]
import { component$, useSignal } from '@builder.io/qwik';
import { Input, Label } from '~/components/ui';
export default component$(() => {
const valueSig = useSignal('[email protected]');
return (
<div class="grid w-full max-w-sm items-center gap-1.5">
<Label for="email-2">Email</Label>
<Input type="email" id="email-2" placeholder="Email" bind:value={valueSig} />
<p class="text-sm text-muted-foreground">Your email is: {valueSig.value}</p>
</div>
);
});