ai prompt input textarea chat ai prompt input textarea send ai prompt input chat input field
AI Prompt Base
Fetch pattern JSON:
curl https://webspire.de/patterns/ai-prompt/base.json base.html
<section
class="ws-ai-prompt mx-auto max-w-2xl rounded-2xl border shadow-md"
style="
--ws-ai-prompt-bg: oklch(0.985 0.002 75);
--ws-ai-prompt-text: oklch(0.205 0.015 75);
--ws-ai-prompt-text-soft: oklch(0.556 0.01 75);
--ws-ai-prompt-border: oklch(0.885 0.008 75);
--ws-ai-prompt-accent: oklch(0.588 0.16 250);
--ws-ai-prompt-input-bg: oklch(0.97 0.003 75);
background: var(--ws-ai-prompt-bg);
color: var(--ws-ai-prompt-text);
border-color: var(--ws-ai-prompt-border);
"
>
<form class="flex flex-col gap-3 p-4" onsubmit="return false">
<label for="ai-prompt-base" class="sr-only">Enter your prompt</label>
<div
class="rounded-xl border transition focus-within:ring-2"
style="
border-color: var(--ws-ai-prompt-border);
background: var(--ws-ai-prompt-input-bg);
"
>
<textarea
id="ai-prompt-base"
rows="3"
placeholder="Ask anything..."
class="w-full resize-none bg-transparent px-4 pt-3 pb-2 text-sm outline-none"
style="color: var(--ws-ai-prompt-text)"
aria-label="Prompt input"
></textarea>
<div class="flex items-center justify-between px-4 pb-3">
<p class="text-xs" style="color: var(--ws-ai-prompt-text-soft)">
Press Enter to send
</p>
<button
type="submit"
class="flex h-8 w-8 items-center justify-center rounded-lg text-white transition hover:opacity-90"
style="background: var(--ws-ai-prompt-accent)"
aria-label="Send prompt"
>
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M10 18a1 1 0 01-.707-.293l-7-7a1 1 0 011.414-1.414L9 14.586V3a1 1 0 112 0v11.586l5.293-5.293a1 1 0 011.414 1.414l-7 7A1 1 0 0110 18z" clip-rule="evenodd" transform="rotate(180 10 10)" />
</svg>
</button>
</div>
</div>
</form>
</section>
Details
Responsive Dark Mode Tailwind Only SSR Safe Copy & Paste
Stable Published
aipromptinputtextareachat
Slots
| Name | Required | Description |
|---|---|---|
| input | Yes | Textarea input with send action |
Base variant for the AI Prompt family. Use this as the default starting point for AI chat input areas before applying attachment or model-selector derivatives.