InputGroup

Field wrapper that reserves room for leading and trailing adornments, such as a search icon or a clear button.

Usage

svelte

<script lang="ts">
  import { ListFilter } from "@lucide/svelte";
  import { css } from "@milandekruijf/pandacss/css";
  import { Input, InputGroup } from "@milandekruijf/ui/svelte";

  let value = $state("");
  const iconClass = css({ w: 4, h: 4 });
</script>

<InputGroup>
  {#snippet leading()}
    <ListFilter class={iconClass} aria-hidden="true" />
  {/snippet}
  <Input bind:value placeholder="Filter…" />
</InputGroup>

Examples

Leading icon

<script lang="ts">
  import { ListFilter } from "@lucide/svelte";
  import { css } from "@milandekruijf/pandacss/css";
  import { Input, InputGroup } from "@milandekruijf/ui/svelte";

  let value = $state("");

  const wrapClass = css({ maxW: "28rem", minW: 0 });
  const iconClass = css({ w: 4, h: 4 });
</script>

<div class={wrapClass}>
  <InputGroup>
    {#snippet leading()}
      <ListFilter class={iconClass} aria-hidden="true" />
    {/snippet}
    <Input bind:value placeholder="Filter…" />
  </InputGroup>
</div>

Props

Prop	Type	Default	Description
leading?	`Snippet`	—	Content rendered inside the field's start padding, e.g. a decorative icon.
trailing?	`Snippet`	—	Content rendered inside the field's end padding, e.g. a clear button.
children	`Snippet`	—	The field to wrap, typically `<Input>`.
class?	`string`	—	Extra classes merged onto the wrapper.

Reserves padding for its adornments and reads the field's computed padding, so `Input`'s spring caret still starts after a leading icon. The leading wrapper ignores pointer events; interactive content re-enables them with `pointer-events: auto`. Sized for 16px icons.