Input Group

Groups an input or textarea with addons, buttons, or text.

Loading preview…

1<script lang="ts">
2	import SearchIcon from '@lucide/svelte/icons/search';
3	import InfoIcon from '@lucide/svelte/icons/info';
4	import * as InputGroup from './index.js';
5</script>
6
7<div class="grid w-full max-w-sm gap-4">
8	<InputGroup.Root>
9		<InputGroup.Input placeholder="Search..." />
10		<InputGroup.Addon>
11			<SearchIcon />
12		</InputGroup.Addon>
13		<InputGroup.Addon align="inline-end">12 results</InputGroup.Addon>
14	</InputGroup.Root>
15	<InputGroup.Root>
16		<InputGroup.Input placeholder="example.com" class="!ps-1" />
17		<InputGroup.Addon>
18			<InputGroup.Text>https://</InputGroup.Text>
19		</InputGroup.Addon>
20		<InputGroup.Addon align="inline-end">
21			<InputGroup.Button class="rounded-full" size="icon-xs">
22				<InfoIcon />
23			</InputGroup.Button>
24		</InputGroup.Addon>
25	</InputGroup.Root>
26</div>
27

Installation

Usage

Use input group to attach prefixes, suffixes, or actions to an input or textarea.

1<script lang="ts">
2	import SearchIcon from '@lucide/svelte/icons/search';
3	import * as InputGroup from '~/components/input-group';
4</script>
5
6<InputGroup.Root>
7	<InputGroup.Input placeholder="Search..." />
8	<InputGroup.Addon>
9		<SearchIcon />
10	</InputGroup.Addon>
11	<InputGroup.Addon align="inline-end">
12		<InputGroup.Button>Search</InputGroup.Button>
13	</InputGroup.Addon>
14</InputGroup.Root>