Service tag picker

ServiceTagPicker is a single-select control for picking a Brik service category — Brand, Marketing, Information, Product, Back Office. It renders each category as a selectable ServiceTag pill, drawing colors and labels from the shared categoryConfig so callers never restate the taxonomy.

Use it for

• Assigning a service category to a service line, event, or record
• Any single-choice picker where the options are the Brik service lines

Import

import { ServiceTagPicker } from '@brikdesigns/bds';

Variants

Default

import { useState } from 'react';
import type { ServiceLine } from '@brikdesigns/bds';

const [category, setCategory] = useState<ServiceLine>('brand');

<ServiceTagPicker value={category} onChange={setCategory} />

Sizes

The size prop is forwarded to the underlying ServiceTag pills.

• sm — dense forms and inline editing
• md — default for panels and sheets
• lg — prominent, page-level selection

Limiting the options

Pass categories to offer a subset, in your own order. Omit it to render all canonical service lines.

<ServiceTagPicker
  value={category}
  onChange={setCategory}
  categories={['brand', 'marketing', 'product']}
/>

When not to use

• Don't use it for multi-select. It is single-select; for multiple categories use a Checkbox group or MultiSelect.
• Don't restate the category list. Import SERVICE_LINES rather than hard-coding the categories.

Accessibility

• Renders a <div role="radiogroup">; each option is a visually-hidden native <input type="radio"> wrapped in a <label> around a ServiceTag.
• Keyboard behavior is the browser's native radiogroup — Tab reaches the group, arrow keys move selection — with no custom key handling.
• The selected pill carries an emphasis ring; the focused radio shows a focus outline.

API