ComparisonTable
ExperimentalCompares 2 to 5 things side by side. On a small screen, it becomes stacked cards.
Also known as compare table, feature comparison, pricing table
Install with npm install @tattva/ui (setup), or copy the code from the kit in Downloads.
Three plans
| Attribute | Free | TeamRecommended | Scale |
|---|---|---|---|
| Seats | 1 | 10 | Unlimited |
| History | 7 days | 1 year | Unlimited |
Plan comparison
Free
- Seats
- 1
- History
- 7 days
TeamRecommended
- Seats
- 10
- History
- 1 year
Scale
- Seats
- Unlimited
- History
- Unlimited
<ComparisonTable
caption="Plan comparison"
items={[{ id: "a", name: "Free" }, { id: "b", name: "Team", badge: "Recommended" }, { id: "c", name: "Scale" }]}
rows={[
{ id: "seats", label: "Seats", values: ["1", "10", "Unlimited"] },
{ id: "history", label: "History", values: ["7 days", "1 year", "Unlimited"] },
]}
/>Make the window narrow to see the stacked cards.
When to use it
Lines up two to five options against the same features so people can compare them at a glance. On a small screen it becomes one card per option, because wide tables are hard to read on a phone.
Made of: Caption · Item headings · Feature names · Cells · Badge
Use it for
- Comparing plans, models or products on the same features.
- Pointing out a recommended option among a few choices, with a badge.
Not for
- The numbers behind a chart: use DataTable.
- Picking one of a few options inside a control: use SegmentedControl.
- Laying out a page in columns: use Grid.
Do and avoid
| Feature | Basic | PlusMost picked |
|---|---|---|
| Monthly fee | $0 | $8 |
| Storage | 5 GB | 100 GB |
Compare plans
Basic
- Monthly fee
- $0
- Storage
- 5 GB
PlusMost picked
- Monthly fee
- $8
- Storage
- 100 GB
| Feature | Basic | PlusMost picked |
|---|---|---|
| Monthly fee | $0 | $8 |
| Storage | 100 GB |
Compare plans
Basic
- Monthly fee
- $0
- Storage
PlusMost picked
- Monthly fee
- $8
- Storage
- 100 GB
Do
- Compare two to five items on the same features.
- Keep cell text short.
- Mark a recommendation with the badge text.
- Write a caption that says what is compared.
Avoid
- Do not use a table to lay out a page.
- Do not compare more than five items.
- Do not show a winner with color alone.
- Do not leave cells empty. Write a dash or a reason.
On a phone
- Below 600px wide it switches from a table to one card per item, with each attribute in a two-column list, so nothing scrolls sideways.
- From 600px wide it is a real table that scrolls sideways inside its box if it is wider than the screen.
- Only one of the two forms is shown at a time, so screen readers do not read the data twice.
Seen in products
- Our research table lists this as a proper table with headings.
- W3C guidance on complex images says not to rely on color alone.
Properties
| Prop | Type | Default | Description |
|---|---|---|---|
| itemsrequired | ComparisonItem[] | none | Two to five items with id, name, optional subtitle and optional badge. Extras are ignored. |
| rowsrequired | ComparisonRow[] | none | Each row has id, label and values in the same order as items. |
| captionrequired | string | none | Names the table. Used as the heading of the stacked cards. |
| attributeLabel | string | "Attribute" | Header of the first column. |
"Show code under the preview gives the code for the example on the stage."
States
States this part has beyond its default look. Build each one your screen can reach. States set by a property are in the Code tab.
- recommended column
- Set badge on an item to tint its column and show the badge under its name.
- narrow screen
- Below the small breakpoint the table becomes one stacked card per item.
- scrolling
- On wider screens a table that does not fit scrolls sideways and can be focused with the keyboard.
- item limit
- Only the first five items are shown.
Tokens
Change one of these and every part that uses it follows.
--surface-sunken--lime--border--radius-card
Built in
- It is a real table with a caption and column and row headings, so screen readers say which option and feature each cell belongs to.
- On a small screen the table is hidden and only the cards are shown, so screen readers read one version, not both.
- The recommended option is named by the badge text, not only by its tint.
- The table can be reached by keyboard and scrolled sideways when it is wider than the space.
What you need to do
- Write a caption that says what is compared. It names the table for screen readers and heads the cards.
- Fill every cell. Write a dash or a short reason instead of leaving one empty.
Built toward WCAG 2.2 AA and checked automatically; no independent audit yet. Read the accessibility guide