Inputalternative
Use Input for simple single-line text inputPrompt
Multi-line input with toolbar for AI/chat interfaces
Setup
import { Prompt } from '@fragments-sdk/ui';Examples
Basic
Simple prompt with submit button
Loading preview...
With Actions
Prompt with attachment and mode buttons
Loading preview...
With Usage
Shows token usage indicator
Loading preview...
Loading State
During API submission
Loading preview...
Disabled
Non-interactive prompt
Loading preview...
Props
| Prop | Type | Default | Description |
|---|---|---|---|
childrenRequired | node | Not set | Prompt composition using Prompt sub-components |
value | string | Not set | Controlled input value |
defaultValue | string | | Uncontrolled default value |
onChange | function | Not set | Called when value changes |
onSubmit | function | Not set | Called on form submission |
placeholder | string | Ask, Search or Chat... | Placeholder text for the textarea |
disabled | boolean | false | Disable the entire prompt |
loading | boolean | false | Show loading state |
minRows | number | 1 | Minimum number of visible rows |
maxRows | number | 8 | Maximum number of visible rows |
autoResize | boolean | true | Enable auto-resize based on content |
submitOnEnter | boolean | true | Submit on Enter (Shift+Enter for newline) |
variant | enumdefaultfixedsticky | default | Visual/positioning variant |
Usage Guidelines
When to use
- Building chat or AI assistant interfaces
- Need multi-line input with submit action
- Require toolbar with actions like attachments or model selection
When not to use
- Simple single-line text input (use Input)
- Basic multi-line without toolbar (use Textarea)
- Search-only interface (use Input with search variant)
Best practices
- Always provide an onSubmit handler
- Use loading state during API calls
- Prompt.Textarea forwards native textarea props (autoComplete, inputMode, aria-*, data-*, handlers)
- Prompt.Textarea composes your onChange/onKeyDown handlers with built-in submit and auto-resize behavior
- Consider showing usage/token limits for AI contexts
Accessibility
- Enter submits, Shift+Enter for newline
- Submit button is keyboard accessible
- Loading state prevents duplicate submissions