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

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: [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>
  );
});