Chip row

A row of chip links that scrolls sideways with scroll-snap on a phone (the edge fades) and wraps from md: an audience picker, a page's filters.

Web · ✓Mobile · n/aDesktop · ✓BetaNavigation

import { ChipRow } from "@krizaka/ui/chip-row";

Web only — React, from @krizaka/ui/chip-row. Beta: its API may still change in a minor version.

Mobile · n/a. A block of a public site's page; an app screen uses Chip.Group with scrollable. → Chip

Why it is here. Yomizaka's « Pour qui ? » audience picker (krizaka/yomizaka home redesign, AudiencePicker moves into it), then any page of filters that are addresses.

When to use

A short list of choices that are addresses (« For whom? »): each one a link, on a phone one swipeable row instead of three wrapped lines.
Filters of a page that change the URL, with a « Soon » badge on those not ready.

When not to use

Filtering a list in place, without changing the address.Use instead: Chip
A single link as a filter, in a layout you control.Use instead: Chip link
Switching views of the same page.Use instead: Tabs

Installation

Install

npm install @krizaka/ui @krizaka/tailwind @krizaka/tokens tailwindcss

Styles

@import "tailwindcss";
@import "@krizaka/tailwind";
@import "@krizaka/ui/tailwind.css";

Import

import { ChipRow } from "@krizaka/ui/chip-row";

Examples

Audience picker

Who it is for: one selected, one with a « Soon » badge.

Many items

More than fit a phone: a swipeable row that wraps from md.

Props

Prop	Type	Default	Description
`label`required	`string`	—	What the links choose among ("For whom?"): the row's accessible name, passed translated.
`hint`	`ReactNode`	—	A line under the label that says how to choose; read with the row.

Accessibility

A nav named by label, a list of real links: the role, focus and keyboard come from the platform.
Every target is at least 44 px high.
The scroll is a convenience: the fade only hints; every link stays reachable by keyboard.

Keyboard

Keys	Action
`Tab`	Goes through the links.
`← →`	Move focus to the previous or next link; the row scrolls it into view.
`Home / End`	First or last link.
`Enter`	Follows the link.

Best practices

Name the row with label; add a hint that says how to choose.
Mark the current choice with selected: aria-current says it, the accent shows it.
One or two words per item; the badge is a word (« Soon »), never a sentence.

Generated from the code of @krizaka/ui 3.63.1: its meta.ts, its examples and its types.Edit this documentation on GitHub