Label Picker

Coloured repository labels, picked from a searchable list. Chip text is derived from the fill by luminance, since a label set imported from a forge only gives you a background colour.

src/components/ui/label-picker.tsx

About

From the component's own source, where it was written.

Repository labels: coloured chips, picked from a searchable list.

Each label carries its own colour, so the chip is styled from data rather than from a variant — which is why this is not just a Badge with a prop. The text colour is derived from the fill rather than stored, since a label set imported from a forge only gives you the background.

Install

npx astralyx-ui add label-picker

Usage

import { LabelPicker } from '@/components/ui/label-picker'

<LabelPicker labels={labels} selected={selected} onSelectedChange={setSelected} />

Composer

Change the props and the source below follows.

bug

Props

triggerLabel

searchPlaceholder

tsx

<LabelPicker
  labels={labels}
  selected={selected}
  onSelectedChange={setSelected}
/>

Examples

Picker

tsx

<LabelPicker labels={labels} selected={selected} onSelectedChange={setSelected} />

API

Generated from the source, so it cannot fall behind the code. One table per exported component, then hooks, functions and types.

`LabelChip`

The chip on its own, for rendering labels outside the picker.

Extends ComponentProps<'span'>.

Prop	Type	Default	Description
label	LabelOption	required	—

`LabelPicker`

Extends Omit<ComponentProps<'div'>, 'onSelect'>.

Prop	Type	Default	Description
labels	LabelOption[]	required	`{ id, name, color, description? }` where colour is any CSS colour.
selected	string[]	required	Controlled selection by id.
onSelectedChange	(ids: string[]) => void	required	Controlled selection by id.
triggerLabel	string	'Labels'	—
searchPlaceholder	string	'Filter labels'	—
searchLabel	string	'Filter labels'	Accessible name for the filter field.
listLabel	string	'Labels'	Accessible name for the option list.
emptyMessage	ReactNode	'No labels match.'	—

Functions

Function	Signature	Description
readableInk	(color: string) => 'white' \| 'black'	Exported helper. Picks black or white from Rec. 709 luma — `color-mix` cannot answer "is this light or dark", and relative `oklch()` cannot branch.

Types

`LabelOption`

Repository labels: coloured chips, picked from a searchable list.

Field	Type	Description
id	string	—
name	string	—
color	string	Any CSS colour.
description?	string	—