PromptBox

AI prompt input with auto-growing textarea, context chips, suggestion pills, and Enter-to-submit. The primary interface between human intent and model output.

PromptBox — Live Demo

PromptBox — Submit Button Variants

Default (text)

Icon only

Icon + text

PromptBox — With Chips & Suggestions

Import

tsx

import { PromptBox } from "@arc-lo/ui";

Basic usage

tsx

<PromptBox.Root onSubmit={(value) => sendToAI(value)}>
  <PromptBox.Input />
  <PromptBox.Footer>
    <PromptBox.SubmitButton />
  </PromptBox.Footer>
</PromptBox.Root>

With chips and suggestions

tsx

<PromptBox.Root onSubmit={handleSubmit} isSubmitting={loading}>
  <PromptBox.Chips>
    <PromptBox.Chip onRemove={() => removeModel()}>
      GPT-4
    </PromptBox.Chip>
    <PromptBox.Chip onRemove={() => removeFile()}>
      report.pdf
    </PromptBox.Chip>
  </PromptBox.Chips>
  <PromptBox.Input placeholder="Ask about your document..." />
  <PromptBox.Suggestions
    suggestions={[
      "Summarize the key findings",
      "What are the risks?",
      "Compare with last quarter",
    ]}
  />
  <PromptBox.Footer>
    <PromptBox.SubmitButton />
  </PromptBox.Footer>
</PromptBox.Root>

Controlled value

tsx

const [prompt, setPrompt] = useState("");

<PromptBox.Root
  value={prompt}
  onValueChange={setPrompt}
  onSubmit={handleSubmit}
>
  <PromptBox.Input />
  <PromptBox.Footer>
    <PromptBox.SubmitButton />
  </PromptBox.Footer>
</PromptBox.Root>

Parts

Part	Description
`Root`	Form wrapper with context provider
`Input`	Auto-growing textarea (1–8 rows)
`Chips`	Container for context chips above input
`Chip`	Individual removable context chip
`Footer`	Bottom row for submit button and extras
`SubmitButton`	Submit button (disabled when empty or submitting)
`Suggestions`	Contextual suggestion pills

Props

Root

Prop	Type	Default	Description
`value`	`string`	—	Controlled value
`defaultValue`	`string`	`""`	Uncontrolled default
`onSubmit`	`(value: string) => void`	—	Called on submit
`onValueChange`	`(value: string) => void`	—	Called on change
`isSubmitting`	`boolean`	`false`	Shows loading state
`disabled`	`boolean`	`false`	Disables the entire box