controls

Prompt input

A framed composer — a borderless textarea and a row of actions inside one bordered box.

NewCSS onlyPlain classes; no JavaScript in any stack.

Usage

The frame carries the border and the focus ring; the textarea inside stays naked.

<div class="ca-prompt-input w-full">
  <textarea class="ca-prompt-input__textarea" aria-label="Message" placeholder="Ask anything…" rows="1"></textarea>
  <div class="ca-prompt-input__actions">
    <button class="ca-button ca-button--ghost ca-button--icon" type="button" aria-label="Attach a file">
      <svg class="ca-icon" aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m21.4 11.05-9.19 9.19a6 6 0 0 1-8.49-8.49l8.57-8.57A4 4 0 1 1 18 8.84l-8.59 8.57a2 2 0 0 1-2.83-2.83l8.49-8.48" /></svg>
    </button>
    <button class="ca-button ca-button--primary ca-button--icon ms-auto" type="submit" aria-label="Send message">
      <svg class="ca-icon" aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 19V5m-7 7 7-7 7 7" /></svg>
    </button>
  </div>
</div>

Examples

Guidance and accessibility

When to use

Use the prompt input for a message composer — a chat box, an AI prompt — where a bare bordered textarea looks like a form field instead of a conversation.
The actions row holds buttons under the text: ca-button--icon for an attach or send button, plain ca-button variants for the rest.
A row of suggestions above the composer is a cluster of ca-button pills, not part of this contract.

Accessibility

The focus ring lands on the frame (through has-focus-visible), not the textarea — keyboard users see one ring for the whole composer.
The frame shows cursor: text; data-disabled on it dims the box and switches to the not-allowed cursor. Disable the real textarea too.
Give the textarea an accessible name with aria-label or a visible label, and label icon-only action buttons.

Classes

Generated from the component contract. Parts use __, modifiers use --.

Classes of the prompt-input component
Class	Kind	Use it for
`ca-prompt-input`	Component	The frame; draws the box and the focus ring, and shows a text cursor.
`ca-prompt-input__textarea`	Part	The borderless textarea inside the frame; autosize it with `field-sizing` or your own script.
`ca-prompt-input__actions`	Part	A row for the controls under the text — attach, send.

Skins

The same markup, dressed by each skin. Structure and behavior stay the same; only the look changes.

Base skin

Neutral grayscale starting point; product skins extend it and change what differs.

Calaca skin

The Calaca UI brand: hueso paper and tinta ink, cempasúchil marigold, rosa and jade.

Bloque skin

Example skin pushed far from base: square, heavy, offset shadows, larger targets.

Pliego skin

Example skin from the press sheet: cool ground, bond-paper sheets, rule-grey hairlines, one red mark.

Framework notes

Link the prebuilt stylesheet of your skin next to your brand stylesheet. No build step.

<link rel="stylesheet" href="brand.css" />
<link rel="stylesheet" href="ca-base.css" />

In Astro, Vite and other Tailwind projects, import Calaca after Tailwind and your brand in your main stylesheet.

@import "tailwindcss";
@import "./brand.css";
@import "@usecalaca/ui/core.css";
@import "@usecalaca/ui/skins/base.css";

Same stylesheet as above; write the classes in className.

<button className="ca-button ca-button--primary ca-button--md" type="button">Save changes</button>

Search

Documentation