# @askrjs/themes/input-group

> Published API exports for @askrjs/themes/input-group.

Source: [https://askrjs.com/docs/reference/api/themes/input-group](https://askrjs.com/docs/reference/api/themes/input-group)

Status: stable. Packages: @askrjs/themes/input-group.

**Published packages are authoritative.** Examples may lag behind a published contract. When guidance differs, verify the exports and TypeScript declarations in your installed package, then file an issue.

## Exports

This entrypoint publishes 6 exports from the declarations shipped by @askrjs/themes.

### `InputGroup`

```ts
InputGroup: (props: InputGroupProps) => JSX.Element
```

Groups related inputs/addons together, optionally visually attached, with a horizontal or vertical orientation and `role="group"` by default.

### `InputGroupOrientation`

```ts
InputGroupOrientation: "horizontal" | "vertical"
```

Layout direction of an {@link InputGroup }.

### `InputGroupProps`

```ts
InputGroupProps: DivProps & {
  children?: unknown;
  attached?: boolean;
  orientation?: InputGroupOrientation;
  ref?: Ref<HTMLDivElement>;
}
```

Props for the {@link InputGroup } component.

- `attached`: attached?: boolean | undefined;

- `children`: children?: unknown;

- `orientation`: orientation?: InputGroupOrientation | undefined;

- `ref`: ref?: Ref<HTMLDivElement>;

### `InputGroupText`

```ts
InputGroupText: { (props: InputGroupTextProps): JSX.Element; (props: InputGroupTextAsChildProps): JSX.Element; }
```

Renders static text/label content within an {@link InputGroup}.

### `InputGroupTextAsChildProps`

```ts
InputGroupTextAsChildProps: SpanProps & {
  asChild: true;
  children: JSXElement;
  ref?: Ref<unknown>;
}
```

Props for {@link InputGroupText } rendered with `asChild`, merging its attributes onto a single child element.

- `asChild`: asChild: true;

- `children`: children: JSXElement;

- `ref`: ref?: Ref<unknown>;

### `InputGroupTextProps`

```ts
InputGroupTextProps: SpanProps & {
  asChild?: false;
  children?: unknown;
  ref?: Ref<HTMLSpanElement>;
}
```

Props for {@link InputGroupText } rendered as its default `<span>` element.

- `asChild`: asChild?: false | undefined;

- `children`: children?: unknown;

- `ref`: ref?: Ref<HTMLSpanElement>;

## Documentation navigation

[Previous](https://askrjs.com/docs/reference/api/themes/hover-card/index.md) | [Next](https://askrjs.com/docs/reference/api/themes/input-otp/index.md)