Installation
pnpm dlx shadcn-svelte@latest add https://coss-sv.vercel.app/r/input-group.jsonUsage
<script lang="ts">
import * as InputGroup from "$lib/components/ui/input-group/index.js";
import HugeiconsIcon from "$lib/hugeicons-icon.svelte";
import Mail01Icon from "@hugeicons/core-free-icons/Mail01Icon";
</script>
<InputGroup.Root>
<InputGroup.Input type="email" placeholder="Email" />
<InputGroup.Addon>
<HugeiconsIcon aria-hidden="true" icon={Mail01Icon} strokeWidth={2} />
</InputGroup.Addon>
</InputGroup.Root>API Reference
InputGroup.Root
The main component that wraps inputs and addons.
| Prop | Type | Description |
|---|---|---|
class | string | Additional CSS classes |
...props | HTMLAttributes<HTMLDivElement> | Native div attributes |
InputGroup.Addon
A container for icons, text, buttons, and other elements. It can appear at the inline start, inline end, block start, or block end.
| Prop | Type | Default | Description |
|---|---|---|---|
align | "inline-start" \| "inline-end" \| "block-start" \| "block-end" | "inline-start" | Position relative to the input |
class | string | Additional CSS classes | |
...props | HTMLAttributes<HTMLDivElement> | Native div attributes |
For proper focus navigation, the `InputGroup.Addon` component should be placed after the input in
the DOM order.
InputGroup.Text
A text container for content within an addon. It styles muted text and child icons.
| Prop | Type | Description |
|---|---|---|
class | string | Additional CSS classes |
...props | HTMLAttributes<HTMLSpanElement> | Native span attributes |
InputGroup.Input
An unstyled Input that inherits the parent input-group styling. It accepts the same props as Input.
| Prop | Type | Description |
|---|---|---|
class | string | Additional CSS classes |
...props | InputProps | All Input props, including native input attributes |
InputGroup.Textarea
An unstyled Textarea that inherits the parent input-group styling. It accepts the same props as Textarea.
| Prop | Type | Description |
|---|---|---|
class | string | Additional CSS classes |
...props | TextareaProps | All Textarea props, including native textarea attributes |