Input Group
A flexible component for grouping inputs with addons, buttons, and other elements.
<script lang="ts">
import { Search } from "@lucide/svelte";
import { InputGroup, InputGroupAddon, InputGroupInput } from "coss-svelte";
</script>
<InputGroup class="w-full max-w-sm">
<InputGroupInput aria-label="Search" placeholder="Search" type="search" />
<InputGroupAddon>
<Search aria-hidden="true" />
</InputGroupAddon>
</InputGroup>
Installation
Install the component package, shared coss-svelte theme, and Bits UI peer.
npm install coss-svelte @coss-svelte/theme bits-uiUsage
Import the Svelte component exports directly from the package.
import { InputGroup, InputGroupAddon, InputGroupInput, InputGroupText, InputGroupTextarea } from "coss-svelte";Anatomy
- InputGroup
- InputGroupAddon
- InputGroupInput
- InputGroupText
- InputGroupTextarea
API Reference
InputGroup
A flexible component for grouping inputs with addons, buttons, and other elements.
children : Snippet<[]>Inherits from Svelte component attributes.
InputGroupAddon
Renders supporting content attached to an input group.
| Prop | Type | Default | Description |
|---|---|---|---|
align | "inline-start" | "inline-end" | "block-start" | "block-end" | "center" | "inline-start" | Positions the addon within an input group. |
children : Snippet<[]>Inherits from Svelte component attributes.
InputGroupInput
Renders the input field for the parent component.
| Prop | Type | Default | Description |
|---|---|---|---|
type | HTMLInputTypeAttribute | null | "text" | Behavior, selection, or HTML type passed to the underlying control. |
children : Snippet<[]>Inherits from Svelte <input> attributes.
InputGroupText
Renders text content inside the parent component.
children : Snippet<[]>Inherits from Svelte component attributes.
InputGroupTextarea
Renders a multiline input inside the parent component.
children : Snippet<[]>Inherits from Svelte <textarea> attributes.
Implementation Details
- Status
- Stable
- Foundation
- compound
- Category
- Selection & Input
- Particles
- 28