Skip to main content
Context GrammarContext-aware AI

Prompt field

Where a question to the AI starts. The spark caret marks the field as a prompt, the hint says what it takes, and an error says what to do next in words — never colour alone.

Ask
›
Plain words are fine.

Controls

Code

import { PromptField } from "@/components/ui/kit/forms";

<PromptField
  label="Ask"
  placeholder="What should this page explain?"
  hint="Plain words are fine."
/>

Every state

Ask
›
Plain words are fine.
Ask
Ask
›
Type a question first.

Usage

Do

  • Put an example question in the placeholder, written the way people talk.

Don’t

  • Don’t clear what someone typed when an answer fails.

Tokens it uses

Tokens it uses
--paper…
--line-control…
--spark…
--spark-ink…
--ink…
--faint…
--font-body…
--font-label…

Values are read live from the stylesheet, so they follow the site theme.