Skip to main content
⚠️ AppKit is in an early development phase and is subject to change without notice. DO NOT use in production environments.

# 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`

### Props​

This component extends standard HTML element attributes.

### Usage​

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

    <InputGroup /* props */ />

## InputGroupAddon​

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

Source: `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​

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

    <InputGroupAddon /* props */ />

## InputGroupButton​

Button integrated within an input group

Source: `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​

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

    <InputGroupButton /* props */ />

## InputGroupInput​

Text input styled for use within an input group

Source: `packages/appkit-ui/src/react/ui/input-group.tsx`

### Props​

This component extends standard HTML element attributes.

### Usage​

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

    <InputGroupInput /* props */ />

## InputGroupText​

Static text or icon displayed within an input group

Source: `packages/appkit-ui/src/react/ui/input-group.tsx`

### Props​

This component extends standard HTML element attributes.

### Usage​

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

    <InputGroupText /* props */ />

## InputGroupTextarea​

Textarea styled for use within an input group

Source: `packages/appkit-ui/src/react/ui/input-group.tsx`

### Props​

This component extends standard HTML element attributes.

### Usage​

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

    <InputGroupTextarea /* props */ />