Todos los componentes (204)

Sugerencias

IA · Suggestions

Qué es y cuándo usarlo

Las respuestas rápidas que propone un asistente. Con una sola pregunta se contesta con un toque; con varias se contestan todas y se mandan juntas, con el recuento en el botón.

Cuándo usarlo

Debajo de la respuesta de un asistente, para que quien lee conteste sin escribir.
Para preguntas cortas con pocas opciones: color, formato, sí o no.

Cuándo no

Para una elección dentro de un formulario: es un RadioGroup o un Select.
Para una lista larga de opciones: es un Select o un Combobox.

Teclado: son botones; Tab los recorre e Intro o Espacio eligen. Con varias preguntas, volver a pulsar la opción elegida la deshace, y «Enviar respuestas» no se activa hasta que todas tienen respuesta.

Accesibilidad: cada pregunta es un grupo con su nombre. Con varias, las opciones llevan aria-pressed para decir cuál está elegida; con una sola son acciones y no lo llevan.

Aspecto fino: las fichas usan los tokens de acento; no tiene variables propias.

Cómo se ve

Elige una opción de cada pregunta.

<Suggestions
  groups={[
    { key: 'pedidos', question: '¿Qué pedidos miro?', options: ['Los pendientes', 'Los de hoy', 'Los devueltos'] },
    { key: 'formato', question: '¿Cómo te lo cuento?', options: ['En una tabla', 'En una frase'] },
  ]}
  onSelect={(respuestas) => preguntar(respuestas)}
/>

Props

Se importa con import { Suggestions } from '@amset/ui'. Las obligatorias van marcadas.

Prop	Tipo	Para qué sirve
`groups`obligatoria	`readonly SuggestionGroup[]`	—
`onSelect`obligatoria	`(answers: readonly SuggestionAnswer[]) => void`	Con UN solo grupo se llama al pulsar una opcion; con varios, al pulsar «Enviar respuestas», con una respuesta por grupo.
`allowPartial`	`boolean`	Con varios grupos, deja enviar con respuestas a medias: el boton se enciende con la primera y manda solo lo contestado. Por defecto, hay que contestarlas todas.
`className`	`string`	Se une a las clases de la biblioteca, no las sustituye.
`disabled`	`boolean`	—

Acepta además los atributos del elemento que pinta: className, style, data-*, aria-* y sus eventos.

En el banco de pruebas

Cada estado y cada variante, para tocarlos de uno en uno, en su ficha de ui.amset.tech: