# InputGroup

Container for combining input fields with addons and buttons

## InputGroup

Container for combining input fields with addons and buttons

**Source:** [`packages/appkit-ui/src/react/ui/input-group.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/input-group.tsx)

### Props

This component extends standard HTML element attributes.

### Usage

```tsx
import { InputGroup } from '@databricks/appkit-ui';

```

## InputGroupAddon

Decorative content positioned at the start or end of an input group

**Source:** [`packages/appkit-ui/src/react/ui/input-group.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/input-group.tsx)

### Props

| Prop | Type | Required | Default | Description |
|------|------|----------|---------|-------------|
| `align` | `"inline-start" \| "inline-end" \| "block-start" \| "block-end" \| null` |  | `inline-start` | - |

### Usage

```tsx
import { InputGroupAddon } from '@databricks/appkit-ui';

```

## InputGroupButton

Button integrated within an input group

**Source:** [`packages/appkit-ui/src/react/ui/input-group.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/input-group.tsx)

### Props

| Prop | Type | Required | Default | Description |
|------|------|----------|---------|-------------|
| `asChild` | `boolean` |  | - | - |
| `variant` | `"link" \| "default" \| "destructive" \| "secondary" \| "outline" \| "ghost" \| null` |  | `ghost` | - |
| `size` | `"sm" \| "icon-sm" \| "xs" \| "icon-xs" \| null` |  | `xs` | - |

### Usage

```tsx
import { InputGroupButton } from '@databricks/appkit-ui';

```

## InputGroupInput

Text input styled for use within an input group

**Source:** [`packages/appkit-ui/src/react/ui/input-group.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/input-group.tsx)

### Props

This component extends standard HTML element attributes.

### Usage

```tsx
import { InputGroupInput } from '@databricks/appkit-ui';

```

## InputGroupText

Static text or icon displayed within an input group

**Source:** [`packages/appkit-ui/src/react/ui/input-group.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/input-group.tsx)

### Props

This component extends standard HTML element attributes.

### Usage

```tsx
import { InputGroupText } from '@databricks/appkit-ui';

```

## InputGroupTextarea

Textarea styled for use within an input group

**Source:** [`packages/appkit-ui/src/react/ui/input-group.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/input-group.tsx)

### Props

This component extends standard HTML element attributes.

### Usage

```tsx
import { InputGroupTextarea } from '@databricks/appkit-ui';

```