# InputGroup

Container for combining input fields with addons and buttons

## InputGroup[​](#inputgroup-1 "Direct link to 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[​](#props "Direct link to Props")

This component extends standard HTML element attributes.

### Usage[​](#usage "Direct link to Usage")

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

<InputGroup /* props */ />

```

## InputGroupAddon[​](#inputgroupaddon "Direct link to 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[​](#props-1 "Direct link to Props")

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

### Usage[​](#usage-1 "Direct link to Usage")

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

<InputGroupAddon /* props */ />

```

## InputGroupButton[​](#inputgroupbutton "Direct link to 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[​](#props-2 "Direct link to 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[​](#usage-2 "Direct link to Usage")

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

<InputGroupButton /* props */ />

```

## InputGroupInput[​](#inputgroupinput "Direct link to 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[​](#props-3 "Direct link to Props")

This component extends standard HTML element attributes.

### Usage[​](#usage-3 "Direct link to Usage")

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

<InputGroupInput /* props */ />

```

## InputGroupText[​](#inputgrouptext "Direct link to 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[​](#props-4 "Direct link to Props")

This component extends standard HTML element attributes.

### Usage[​](#usage-4 "Direct link to Usage")

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

<InputGroupText /* props */ />

```

## InputGroupTextarea[​](#inputgrouptextarea "Direct link to 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[​](#props-5 "Direct link to Props")

This component extends standard HTML element attributes.

### Usage[​](#usage-5 "Direct link to Usage")

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

<InputGroupTextarea /* props */ />

```