Components / agents

Question Card

A question the agent needs answered before it can carry on: the question, a few choices (and optionally Something else, which opens a text field) and one button, which stays off until there is an answer.

import { QuestionCard } from '@basiiik/ui';

The snippet an agent gets

From get_component_snippet, with the required props filled in from the spec. Every snippet is type-checked against the library before it is shipped.

import { QuestionCard } from '@basiiik/ui';

<QuestionCard question="Which database should the app use?" options={[{ value: 'pg', label: 'PostgreSQL' }, { value: 'sqlite', label: 'SQLite' }]} onAnswer={(answer) => console.log(answer)} />

• Example values were filled in for the required props question, options, onAnswer: replace them with your own.
• Values in braces are your own variables, handlers or data, such as const [open, setOpen] = useState(false).
• Open versus Answered is the answered prop (set it from your own state once onAnswer has run). Other is allowOther: choosing Something else shows a text field. The answer button stays disabled until there is an answer.
• Compose with: button, radio, text-field.
• Storybook: Agents/Question card.

Props

States. Open versus Answered is the answered prop (set it from your own state once onAnswer has run). Other is allowOther: choosing Something else shows a text field. The answer button stays disabled until there is an answer.

Native attributes such as className, id and data-* are forwarded to the root element.

Use it when

• The agent needs one answer before it can continue
• A clarifying question with a few likely answers

Do not use it when

• Approving a plan (use Plan Card)
• A long form (use form fields)

Rules for agents

• Ask one question at a time
• Give two to five options and add allowOther when the list may be incomplete
• Pass the real value in each option and show a friendly label
• After onAnswer set answered and pass answer as text for the person to read

Avoid

• Several questions in one card
• Options that overlap
• Using it for yes or no on a destructive action (use Modal)

Writing the content

• The question ends with a question mark and stands on its own
• Options: short noun phrases

Keyboard

• Arrow keys move between the options
• Tab moves to the typed answer and the Answer button
• Enter in the typed answer submits it

Accessibility

• A fieldset named by the question, with native radios
• The answer button is disabled until there is an answer
• Once answered the result is a polite status region

Colour tokens it reads

Related

• Plan Card
• Radio
• Prompt Input
• Chat Message

agents 3 Figma variants Try it in the live demo