InputGroup

import { createSignal } from 'solid-js';
import { InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText } from '@tile-ui/solid';

export default function InputGroupDemo() {
	const [copied, setCopied] = createSignal(false);
	return (

Use InputGroup to combine a control with contextual text and embedded actions.

Registry install

pnpm dlx shadcn@latest add @tile-ui/input-group

Package usage

import { InputGroup, InputGroupAddon, InputGroupInput } from '@tile-ui/solid';

<InputGroup>
	<InputGroupAddon>https://</InputGroupAddon>
	<InputGroupInput placeholder="example.com" />
</InputGroup>

Highlights

• Addon, button, and text
• Input and textarea
• Addon alignment

Registry dependencies

Item	Purpose
input-group	Component source and module styles
core	Framework-agnostic logic helpers
utils	Shared utility helpers
button	Registry component dependency
styles	Shared SCSS tokens and globals

API reference

InputGroup

Prop	Type	Default
variant	'default' | 'outline'	—

InputGroupAddon

Prop	Type	Default
variant	'default' | 'outline'	—
align	'inline-start' | 'inline-end' | 'block-start' | 'block-end'	—

InputGroupButton

Prop	Type	Default
variant	ButtonVariant	—
size	ButtonSize	—

InputGroupText

No custom props.

InputGroupInput

No custom props.

InputGroupTextarea

No custom props.

Related docs

• Input
• Button
• NativeSelect