Input Group

A layout wrapper designed to encapsulate inputs, icons, and buttons under a unified glass capsule. The entire block acts as a single cohesive magnetic and specular physics boundary.

Preview

Configuration

Specular Highlighting Aligns shiny reflection bounds along capsule border

Magnetic Elastic Force Capsule shifts towards pointer upon hovering

Haptic Hold Scaling Squeezes entire group capsule upon clicks

Installation

npx shadcn-svelte@latest add https://ui.grgurevic.click/r/input-group.json

Svelte Composition Code

<script lang="ts">
	import * as InputGroup from "$lib/components/ui/input-group";
	import { Search } from "lucide-svelte";
</script>

<InputGroup.Root>
	<InputGroup.Input placeholder="Search system docs..." />
	<InputGroup.Addon>
		<Search class="size-4" />
	</InputGroup.Addon>
	<InputGroup.Addon align="inline-end">
		<InputGroup.Button>Search</InputGroup.Button>
	</InputGroup.Addon>
</InputGroup.Root>

API & Props Reference

InputGroup.Root

Capsule container orchestrating mouse movements, specular borders, and scale wiggles.

• specular: boolean (true) - Enables 3D border reflection glare.
• magnetic: boolean (true) - Attracts capsule center to pointer.
• scale: boolean (true) - Compresses capsule bounds on press.

InputGroup.Input

The inner text input element. Bypasses normal borders to let the capsule contain it cleanly.

InputGroup.Addon

Padded section enclosing leading icons or tailing action buttons.

• align: "inline-start" | "inline-end" | "block-start" | "block-end" - Sets padding boundary alignments.

InputGroup.Button

Compact tailing button styled to blend inside the capsule outline.