PaceUI

Blocks
MCPComponentsTemplatesChartsStarter
Native AI
Introduction
Components
Browser SupportResponse RendererChat HeaderChat MessagesChat SuggestionsChat Input
Use Cases
Quick ChatFollow Ups
Hooks
useBrowserSupportuseNativeAI

Chat Input

PreviousNext

An input form component supporting text entry, submit callbacks, loading state visualization, and disabled overrides.

npx shadcn add ...

Loading preview...

Overview

The ChatInput component provides a standard chat text box with a send button. It handles pressing Enter to submit the message and disables state automatically during loading or when AI support is missing.

default.tsx

API Reference

Props

PropTypeDescriptionDefault
valuestringThe current text value of the input.(Required)
onChange(val: string) => voidCallback function fired when the text changes.(Required)
onSubmit() => voidCallback function fired when the form is submitted (button click or Enter).(Required)
isLoadingbooleanIf true, disables input and swaps the send icon for a loading spinner.false
isSupportedbooleanIf false, disables the input, indicating that AI is not supported/active.false
placeholderstringPlaceholder text for the input box."Type your message..."
Chat SuggestionsQuick Chat

PaceUI

The ultimate toolkit empowering your designers and developers to launch their next big idea without ever settling on quality

Pages

ComponentsBlocksMCPTemplatesStarter

Account

ManageLicensesPricing

Support

AffiliateContact UsPrivacy PolicyTerms of ServiceDocs

© 2026 PaceUI. All rights reserved. Built by indie developer, Denish

PACEUI