InputGroup

Prefix

Prefix — see the example below.

https://

tsx

import { InputGroup } from "~/components/ui/base/input-group";

<InputGroup.Root aria-label="URL">
  <InputGroup.Addon>https://</InputGroup.Addon>
  <InputGroup.Input placeholder="example.com" />
</InputGroup.Root>

Suffix

Suffix — see the example below.

@company.com

tsx

import { InputGroup } from "~/components/ui/base/input-group";

<InputGroup.Root aria-label="E-mail">
  <InputGroup.Input type="email" placeholder="name" />
  <InputGroup.Addon align="end">@company.com</InputGroup.Addon>
</InputGroup.Root>

Field and button

A direct Button child gets alignment and a separating border from the group.

tsx

import { Button } from "~/components/ui/base/button";
import { InputGroup } from "~/components/ui/base/input-group";

<InputGroup.Root aria-label="Search">
  <InputGroup.Input placeholder="Search…" />
  <Button variant="secondary">Search</Button>
</InputGroup.Root>

Lucide icon in the addon

Icons from @qwikest/icons/lucide (e.g. LuSearch) — size via {"[&_svg]:size-4"} on the addon.

tsx

import { LuSearch } from "@qwikest/icons/lucide";
import { InputGroup } from "~/components/ui/base/input-group";

<InputGroup.Root aria-label="Search">
  <InputGroup.Addon class="[&_svg]:size-4">
    <LuSearch aria-hidden="true" />
  </InputGroup.Addon>
  <InputGroup.Input placeholder="Query…" />
</InputGroup.Root>

Metadata

Source: meta.generated.json (see npm run generate)

File base/input-group/meta.generated.json not found or path not allowed.