Input

import { component$ } from "@builder.io/qwik";
import { Input } from "~/components/ui/base/input";

export default component$(() => (
  <Input type="text" placeholder="Enter text…" />
));

import { Input } from "~/components/ui/base/input";
import { Label } from "~/components/ui/base/label";

<div class="flex max-w-md flex-col gap-2">
  <Label for="user-email">E-mail</Label>
  <Input id="user-email" type="email" name="email" placeholder="you@example.com" />
</div>

import { Input } from "~/components/ui/base/input";

<div class="flex max-w-md flex-col gap-3">
  <Input placeholder="Normal state" />
  <Input disabled value="Disabled" />
  <Input readOnly value="Read only" />
</div>

import { Input } from "~/components/ui/base/input";

<div class="flex flex-col gap-4">
  <Input variant="xl" placeholder="Extra Large" />
  <Input variant="lg" placeholder="Large" />
  <Input variant="md" placeholder="Medium (Default)" />
  <Input variant="sm" placeholder="Small" />
  <Input variant="xs" placeholder="Extra Small" />
</div>