Edit Profile

Dark Mode

Copy config

Copy and paste the following code into your global.css file to apply the styles.

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.

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,
    'bind:value': valueSig,
    // eslint-disable-next-line @typescript-eslint/no-unused-vars
    'bind:checked': checkedSig,
    ...props
  }) => {
    return (
      <>
        <input
          {...props}
          aria-errormessage={`${name}-error`}
          aria-invalid={!!error}
          bind:value={valueSig}
          class={cn(
            'rounded-base border-input placeholder:text-muted-foreground focus-visible:ring-ring bg-background text-foreground file:text-foreground flex h-12 w-full border px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium focus-visible:outline-none focus-visible:ring-1 disabled:cursor-not-allowed disabled:opacity-50',
            props.class,
          )}
          id={name}
        />
        {error && (
          <div id={`${name}-error`} class="text-destructive mt-1 text-sm">
            {error}
          </div>
        )}
      </>
    );
  },
);

Usage

import { Input } from '@/components/ui/input';
<Input />

Examples

File

import { component$ } from '@builder.io/qwik';
import { Input, Label } from '@qwik-ui/styled';

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 '@qwik-ui/styled';

export default component$(() => {
  return <Input disabled type="email" placeholder="Email" />;
});

With Label

import { component$ } from '@builder.io/qwik';
import { Input, Label } from '@qwik-ui/styled';

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 { Button, Input } from '@qwik-ui/styled';

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, Label } from '@qwik-ui/styled';

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