All components (204)

Suggestions

AI · Suggestions

What it is and when to use it

The quick replies an assistant proposes. With a single question you answer with one tap; with several you answer all and send them together, with the count on the button.

When to use it

Below an assistant's response, so the reader can answer without typing.
For short questions with few options: colour, format, yes or no.

When not to

For a choice inside a form: that is a RadioGroup or a Select.
For a long list of options: that is a Select or a Combobox.

Keyboard: they are buttons; Tab moves through them and Enter or Space choose. With several questions, pressing the chosen option again undoes it, and "Send answers" is not enabled until all of them have an answer.

Accessibility: each question is a group with its name. With several, the options carry aria-pressed to say which one is chosen; with a single one they are actions and do not carry it.

Fine-tuning: the chips use the accent tokens; it has no variables of its own.

What it looks like

Pick one option from each question.

<Suggestions
  groups={[
    { key: 'orders', question: 'Which orders should I check?', options: ['The pending ones', 'Today's', 'The returned ones'] },
    { key: 'formato', question: 'How should I tell you?', options: ['In a table', 'In one sentence'] },
  ]}
  onSelect={(respuestas) => preguntar(respuestas)}
/>

Props

Import it with import { Suggestions } from '@amset/ui'. Required props are marked.

Prop	Type	What it does
`groups`required	`readonly SuggestionGroup[]`	—
`onSelect`required	`(answers: readonly SuggestionAnswer[]) => void`	With ONE group it is called when an option is pressed; with several, when "Send answers" is pressed, with one answer per group.
`allowPartial`	`boolean`	With several groups, allows sending with half the answers: the button lights up with the first one and sends only what was answered. By default, all of them must be answered.
`className`	`string`	Merged with the library classes; it does not replace them.
`disabled`	`boolean`	—

It also accepts the attributes of the element it renders: className, style, data-*, aria-* and its events.

In the test bench

Every state and variant, to try one at a time, on its page at ui.amset.tech: