---
title: InputGroup
description: Place addons and actions around a native text control.
package: moraine
version: 0.6.0
repository: https://github.com/subframe7536/moraine
---
# InputGroup
> Place addons and actions around a native text control.
Use InputGroup when an editable control and its addons should share one visual boundary. The inner input or textarea still owns text entry and its accessible name.
## Basic usage
```tsx
import { Field, Input, InputGroup } from 'moraine'
export function Example() {
return (
@
)
}
```
## Anatomy
```text
InputGroup [component; slot=root]
├── InputGroup.Leading [part; slot=leading]
├── InputGroup.Trailing [part; slot=trailing]
└── frame [internal]
```
Place Leading parts before one Input or Textarea, then Trailing parts. The final internal frame paints the shared boundary.
## Usage
### Direction and orientation
In horizontal groups, Leading and Trailing follow the document's writing direction. In vertical
groups, they sit above and below the control. Set `inputGroup.defaultVariants.orientation` in
your Theme to change the shared default, or `inputGroup.variants.orientation` to override its styles.
```tsx
import { Icon, Input, InputGroup } from 'moraine'
export function Alignment() {
return (
https://
.comProject websiteUse your public domain.١٢ نتيجة
)
}
```
### Compact
Set `compact` on a `Leading` or `Trailing` part to reduce its padding while keeping the same layout role. In horizontal groups it uses smaller inline padding; in vertical groups it uses smaller padding on all sides. This is useful for compact buttons, keyboard shortcuts, inline prefixes or suffixes, and other addons that need less surrounding space.
```tsx
import { Button, Icon, Input, InputGroup } from 'moraine'
import { createSignal } from 'solid-js'
export function Compact() {
const [txt, setTxt] = createSignal('')
return (
https://
)
}
```
### Styling and forms
`InputGroup` owns the shared border, background, radius, and focus/invalid frame. Set its `size` and `variant` to style the group. Disabled presentation remains on the native `Input` or `Textarea`, and the native control's `variant` applies when it is outside a group.
Size precedence is the control's explicit size, group size, Field size, then theme defaults. `classes.leading`, `classes.trailing`, and their style equivalents set group-wide presentation; each part's `class` and `style` override it.
Keep `name`, `value`, `onValueChange`, `required`, `disabled`, `readOnly`, and ARIA attributes on the control. InputGroup does not register a form field. Clicking non-interactive group space focuses the native control; buttons and links retain their own focus behavior.
## Examples
### Icon
Place one or more icons in either horizontal part.
```tsx
import { Icon, Input, InputGroup } from 'moraine'
export function Icons() {
return (
)
}
```
### Text
Supporting content accepts plain text and JSX without a dedicated text component.
```tsx
import { Input, InputGroup, Textarea } from 'moraine'
export function TextContent() {
return (
$USDhttps://.com@company.com120 characters left
)
}
```
### Button
Use the existing `Button` component for copy, toggle, and submit actions. Add `compact` to the containing part when the button should use denser surrounding padding; keep each button's state and disabled behavior explicit.
```tsx
import { Button, Icon, Input, InputGroup } from 'moraine'
import { createSignal, Show } from 'solid-js'
const targetURL = 'https://github.com/subframe7536/moraine'
export function Actions() {
const [copied, setCopied] = createSignal(false)
const [favorite, setFavorite] = createSignal(false)
const copyUrl = () => {
void navigator.clipboard?.writeText(targetURL)
setCopied(true)
setTimeout(() => setCopied(false), 2000)
}
return (
https://
)
}
```
### Kbd
Use `Kbd` to show a shortcut without changing the input's keyboard behavior. Add `compact` to the containing part when the shortcut should use denser surrounding padding.
```tsx
import { Icon, Input, InputGroup, KbdGroup } from 'moraine'
export function KeyboardShortcut() {
return (
)
}
```
### Dropdown
`DropdownMenu.Trigger` can render as a button inside either horizontal part.
```tsx
import { Button, DropdownMenu, Icon, Input, InputGroup } from 'moraine'
export function DropdownActions() {
return (
More file actions
Search in
)
}
```
### Spinner
Render a loading icon explicitly wherever progress needs to appear.
```tsx
import { Icon, Input, InputGroup } from 'moraine'
export function LoadingIndicators() {
return (
Saving...Please wait...
)
}
```
### Textarea
Set `orientation="vertical"` to form a toolbar and status bar around the independent `Textarea`.
```tsx
import { Button, Icon, InputGroup, Textarea } from 'moraine'
export function TextareaEditor() {
return (
script.jsLine 1, Column 1
)
}
```
#### Auto-resize
`Textarea` keeps its own value, ref, native attributes, and autoresize behavior. The same group can provide header and footer regions.
```tsx
import { Button, Icon, InputGroup, Textarea } from 'moraine'
import { createSignal } from 'solid-js'
export function Composer() {
const [value, setValue] = createSignal('')
return (
Comment