WARNING: This component is in

Draft

status. This means that it is still in development and may have bugs or missing features. It is not intended to be used in production. You may use it for testing purposes.

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-destructive mt-1 text-sm">
            {error}
          </div>
        )}
      </>
    );
  },
);

Usage

import { Input } from '~/components/ui';

<Input />

Examples

File

Picture

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: test@test.com

import { component$, useSignal } from '@builder.io/qwik';
import { Input, Label } from '~/components/ui';

export default component$(() => {
  const valueSig = useSignal('test@test.com');
  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>
  );
});