# InputButtons

Renders `AttachButton` and `CommandsButton` on the left side of the input inside [`MessageInput`](/chat/docs/sdk/react-native/v8/ui-components/message-input/). This is the default component for the `InputButtons` prop on [`Channel`](/chat/docs/sdk/react-native/v8/core-components/channel#inputbuttons/).

## Best Practices

- Show only the buttons that match enabled capabilities to reduce clutter.
- Keep the left-side actions minimal for faster composition.
- Use `MoreOptionsButton` for secondary actions to preserve space.
- Use `toggleAttachmentPicker` to keep picker state in sync.
- Keep icons and spacing consistent across input modes.

## Props

### `hasCommands`

Enable commands in [`MessageInput`](/chat/docs/sdk/react-native/v8/ui-components/message-input/).

| Type    | Default |
| ------- | ------- |
| boolean | true    |

### `hasCameraPicker`

Enable the camera picker in [`MessageInput`](/chat/docs/sdk/react-native/v8/ui-components/message-input/).

| Type    | Default |
| ------- | ------- |
| Boolean | `true`  |

### `hasFilePicker`

Enable the file picker in [`MessageInput`](/chat/docs/sdk/react-native/v8/ui-components/message-input/).

| Type    | Default |
| ------- | ------- |
| Boolean | `true`  |

### `hasImagePicker`

Enable the image picker in [`MessageInput`](/chat/docs/sdk/react-native/v8/ui-components/message-input/).

| Type    | Default |
| ------- | ------- |
| Boolean | `true`  |

### `selectedPicker`

Value is `images` (string), when image attachment picker is open else `undefined`.

| Type                  |
| --------------------- |
| 'images' \| undefined |


### `toggleAttachmentPicker`

Function to toggle attachment picker. By default, this function is attached to `onPress` handler for [`AttachButton`](/chat/docs/sdk/react-native/v8/core-components/channel#attachbutton/).

| Type     |
| -------- |
| Function |

### `uploadFile`

Whether file upload is enabled in the channel.

| Type    |
| ------- |
| Boolean |

## UI Component Props

### `AttachButton`

Renders the attach button next to the input box.

| Type          | Default                                                                       |
| ------------- | ----------------------------------------------------------------------------- |
| ComponentType | [`AttachButton`](/chat/docs/sdk/react-native/v8/ui-components/attach-button/) |

### `CommandsButton`

Renders the button next to the input box that opens the commands list.

| Type          | Default                                                                           |
| ------------- | --------------------------------------------------------------------------------- |
| ComponentType | [`CommandsButton`](/chat/docs/sdk/react-native/v8/ui-components/commands-button/) |

### `MoreOptionsButton`

Renders the MessageInput “more options” button (for AttachButton, CommandsButton, etc.).

| Type          | Default                                                                                  |
| ------------- | ---------------------------------------------------------------------------------------- |
| ComponentType | [`MoreOptionsButton`](/chat/docs/sdk/react-native/v8/ui-components/more-options-button/) |


---

This page was last updated at 2026-04-17T17:33:44.749Z.

For the most recent version of this documentation, visit [https://getstream.io/chat/docs/sdk/react-native/v8/ui-components/input-buttons/](https://getstream.io/chat/docs/sdk/react-native/v8/ui-components/input-buttons/).