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/aBureau · ✓BêtaNavigation

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

Web uniquement — React, depuis @krizaka/ui/chip-row. Bêta : son API peut encore changer à une version mineure.

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

Pourquoi il est là. Yomizaka's « Pour qui ? » audience picker (krizaka/yomizaka home redesign, AudiencePicker moves into it), then any page of filters that are addresses.

Quand l’utiliser

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.

Quand ne pas l’utiliser

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

Installation

Installer

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

Styles

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

Importer

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

Exemples

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	Défaut	Description
`label`requis	`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.

Accessibilité

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.

Clavier

Touches	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.

Bonnes pratiques

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.

Générée depuis le code de @krizaka/ui 3.63.1 : son meta.ts, ses exemples et ses types.Modifier cette documentation sur GitHub