Skip to content
Tattva

PromptBox

Stable

A box for describing what you want made, with a Generate button and optional examples.

Also known as prompt input, generation prompt, prompt field

Install with npm install @tattva/ui (setup), or copy the code from the kit in Downloads.

With example ideas

0 characters

Try:

Click an example to fill the box, then Generate. The demo shows Generating for 1.5 seconds.

UsageCodeDesignAccessibility

When to use it

A roomy box for describing something to make, such as an image or a draft. Enter adds a line instead of sending, because these descriptions are often long and reworked before each run.

Made of: Text box · Character count · Generate button · Example ideas

Use it for

  • The input of a tool that makes images, designs or drafts.
  • Offering a few example ideas that fill the box in one click.
  • A Generate step that takes a while: set busy so it cannot be pressed twice.

Not for

  • Chatting back and forth with the assistant: use Composer.
  • Fine settings such as size, style or seed: use ParameterPanel.

Do and avoid

0 characters

Try:

Do. Short examples fit their buttons and show what to describe.
0 characters

Try:

Avoid. Long example sentences do not fit, so people cannot read them.

Do

  • Use it when each submit makes something new.
  • Offer two or three examples so new people see what to write.
  • Keep it in the working state the whole time, so people cannot submit twice.
  • Pair it with VariantGrid and CanvasPanel in a SplitCanvasTemplate.
  • Set busy back to false when the run ends, or Generate stays off.

Avoid

  • Do not use it for chat. Use Composer, which has Enter and Stop.
  • Do not show a PromptBox and a Composer on the same screen.
  • Do not use long sentences as examples. They do not fit in small buttons.

On a phone

  • The text box is 16px on a touch screen so the page does not zoom on focus. It stays three rows tall and does not grow.
  • Enter adds a new line, so people send with the Generate button, which has a 44px tap area on a touch screen.
  • The example chips wrap onto more lines. Each keeps its size and has a 44px tap area on a touch screen.

Build your next AI screen with Tattva.

Free and open, with the code. Start in one line.

Get started