Input Group

Forms

An input fused with leading or trailing add-ons.

Example

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

<InputGroup.Root class="w-full max-w-sm">
	<InputGroup.Addon>
		<Search />
	</InputGroup.Addon>
	<InputGroup.Input type="search" placeholder="Search streams and springs" />
</InputGroup.Root>

Installation

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