SelectionChip

Preview

Installation

pnpm add @oshon-ai/components @oshon-ai/tokens @oshon-ai/primitives

pnpm dlx @oshon-ai/cli add selectionchip

Wire the tokens into your Tailwind v4 stylesheet:

/* app/globals.css */
@import 'tailwindcss';
@import '@oshon-ai/tokens/css';
@import '@oshon-ai/tokens/tailwind';

New here? Walk through the full setup — prereqs, theming, your first render.

Usage

Import the component and render it. Every component supports the standard tier, size, and disabled props where applicable.

'use client';
import { SelectionChip } from '@oshon-ai/components';

export default function Example() {
  return <SelectionChip />;
}

<SelectionChipPlayground />

API

Every prop is documented here directly from the component's TypeScript interface. Inherited DOM attributes (aria-*, onClick, style, etc.) work as usual but are omitted from this table.

Styling

Three layers of customization, in order of escape-hatch strength: className overrides → data-attribute targeting → CSS custom properties.

Passing Tailwind classes

Every Oshon component accepts a className prop merged AFTER the component's default classes. Use it to override spacing, color, or size without forking the component.

<SelectionChip
  className="ring-2 ring-offset-2 ring-blue-500"
/>

Data attributes

Oshon components expose their internal state as data-oshon-* attributes so you can target them from CSS without coupling to internal class names. The most common attributes are listed below — see the component's source for the full set.

/* Target the secondary tier specifically */
[data-oshon-tier="secondary"] {
  --oshon-color-primary-700: var(--my-brand-color);
}

Interactive states

Every interactive component supports the standard CSS pseudo- classes plus Tailwind's state variants. Focus rings always use :focus-visible so keyboard users see them but mouse users don't.

• :hover / hover:* — pointer hover
• :focus-visible / focus-visible:* — keyboard focus
• :active / active:* — pressed
• :disabled / disabled:* — set via the disabled prop

Anatomy

The named regions a consumer composes when rendering this component. Each is documented separately so you can target keyboard nav, ARIA labels, and slot props with precision.

Keyboard

Accessibility

Every Oshon component ships axe-clean. We test in CI on every PR and publish the audit log per component.

WCAG level

2.2 AA

Screen readers tested

VoiceOver (macOS), NVDA (Windows)

Last axe audit

2026-04-20

Do / Don't

<div role="radiogroup" aria-label="Plan">
  <Chip.Choice selected={plan === 'free'} onClick={() => setPlan('free')}>Free</Chip.Choice>
  <Chip.Choice selected={plan === 'pro'} onClick={() => setPlan('pro')}>Pro</Chip.Choice>
</div>

<Chip.Selection checked={tags.has('bug')} onClick={() => toggle('bug')}>Bug</Chip.Selection>

<Chip.Pivot pressed={active === 'open'} onClick={() => setActive('open')}>Open</Chip.Pivot>

<Chip.Input onDismiss={() => remove(tag)} dismissLabel={`Remove ${tag}`}>{tag}</Chip.Input>

<Chip.Pivot>
  <button onClick={dismiss}>×</button>
</Chip.Pivot>

<Chip.Choice className="bg-blue-600">Free</Chip.Choice>

<Chip.Counter onClick={openDetails}>12</Chip.Counter>

<Chip.Choice selected={a} onClick={pickA}>A</Chip.Choice>
<Chip.Choice selected={b} onClick={pickB}>B</Chip.Choice>

Related

• @oshon-ai/primitives/button
• Button
• Popover
• Select

Design rationale

Chip fan-out follows ADR-002 (file-per-variant) for pin-point tree shaking; `chip-shared.tsx` holds the single source of truth for size scale, surface palettes, and icons so each variant file differs only in role semantics + slot contract. One family manifest (not five) matches the consumer mental model ("it's all Chip") and avoids 90%-duplicated manifest documents. The Choice/Selection visual similarity is intentional — the distinction is semantic, announced by assistive tech; visual convergence plus semantic divergence is a long-standing DS 3.1 pattern. CounterChip is the first leaf in @oshon-ai/components that doesn't need a client boundary; proving principle #5 here unlocks Badge / Avatar / Divider / Typography landing as RSC leaves later.