ChoiceCard

Installation

pnpm add @talex-touch/tuffex

import { TxChoiceCard } from '@talex-touch/tuffex/choice-card'
import '@talex-touch/tuffex/choice-card/style.css'
// It renders TxIcon and TxSkeleton, whose sheets are separate
import '@talex-touch/tuffex/icon/style.css'
import '@talex-touch/tuffex/skeleton/style.css'
import '@talex-touch/tuffex/base.css' // tokens + resets, once per app

Usage

Single Question

selected marks the picked row; a disabled row can't be picked.

Steps

The host pages by updating v-model:step in select; columns="2" lays the rows out two per row.

Loading

loading draws skeleton rows in the rows' own boxes, so nothing shifts when the options arrive.

Best Practices

• Ask one question per step, with three to six answers.
• Page by updating v-model:step in select, and pass selected for the page on screen so going back shows the pick.
• Bind loading through useDeferredLoading, and set loadingRows to the number of answers coming.
• Keep a row that needs something first disabled rather than hidden, and say what it needs in its description.
• Pass prevLabel, nextLabel, and stepLabel in the page's language; the card ships English defaults only.

API Reference

Props

Events

Slots

Types

ChoiceStep, one entry of steps:

ChoiceOption, one answer:

import type {
  ChoiceCardColumns, // 1 | 2
  ChoiceCardEmits,
  ChoiceCardProps,
  ChoiceOption,
  ChoiceSelectPayload, // { step, stepIndex, option }
  ChoiceStep,
  ChoiceStepLabelFormatter, // (current, total) => string
  TxChoiceCardInstance,
} from '@talex-touch/tuffex/choice-card'

CSS Variables

Set them on the card or any ancestor; the component only writes --tx-choice-card-index (the row's stagger position) on each row.

Overview

• Semantics: a <section> named by the question, with rows as native <button>s in a <ul role="list">, named by the label and described by the description. The selected row has a check and aria-current="true", so colour is never the only mark.
• select never changes the page. Without step, the card tracks its own page and emits update:step; the pager renders only with two or more pages, and its counter is a role="status" region.
• Keyboard: the list is one Tab stop (the selected row, else the first enabled one); Up and Down move and wrap, Left and Right move in reading order in two columns, Home and End jump to the ends, and disabled rows are skipped.
• When the page changes with focus in the list, focus moves to the new page's Tab stop; when the arrow in use becomes disabled, focus moves to the other arrow.
• Two columns fall back to one below a 480px card (a container query), and the arrow keys follow the rendered column count.
• Entrance and page-change motion are CSS animations on fresh nodes, so rows are clickable from their first frame; reduced motion drops them.

Technologies

• Skeleton rows reuse the loaded row's own containers, with TxSkeleton bars inside.
• Source: packages/tuffex/packages/components/src/choice-card/.

Use cases

• An assistant's opening guide: "Where should we start?", one question per step.
• A "Ready for you" list of suggestions that arrives after the card.
• Reviewing an answered question: selected marks what was picked.

Related components