Blog Category Assign

ProNew

A transfer list of categories with a primary category chosen from the ones picked, which is dropped back automatically when its category is removed. Use this when an item can sit in several categories but one must lead.

Customize

Derived from this item’s props table, because it declares no controls of its own. This item has no standalone playground, so changes update the code, the share link and the AI prompt.

defaultPrimary

Guide and examples

When to use it

Use it for blog posts, products and documents that belong to several categories, one of which is shown first or used in the URL.

Do not use it when only one category is allowed (use a select) or none needs to lead.

Installation

This item is part of tealmac UI Pro

The source for this item installs with a Pro licence key. Log in with your key to see the install command, or read the Pro setup page.

Props

Prop	Type	Default	Description
`categories`	`TransferItem[]`	-	All categories.
`defaultValue`	`string[]`	`[]`	Categories the post is in.
`defaultPrimary`	`string \| null`	`first`	The primary category.
`onChange`	`({ categories, primary }) => void`	-	Called when either changes.

Accessibility

The primary choice is a native radio group in a fieldset with a legend, built from the picked categories.
Automatic changes of the primary category are announced.
The lists keep the keyboard model of transfer-list.

Testing

The pattern ships with a Testing Library test (blog-category-assign.test.tsx) that covers the empty state, the first primary, changing it and the hand-over on removal.

Guide and examples

When to use it

Use it for blog posts, products and documents that belong to several categories, one of which is shown first or used in the URL.

Do not use it when only one category is allowed (use a select) or none needs to lead.

Installation

This item is part of tealmac UI Pro

The source for this item installs with a Pro licence key. Log in with your key to see the install command, or read the Pro setup page.

Props

Prop	Type	Default	Description
`categories`	`TransferItem[]`	-	All categories.
`defaultValue`	`string[]`	`[]`	Categories the post is in.
`defaultPrimary`	`string \| null`	`first`	The primary category.
`onChange`	`({ categories, primary }) => void`	-	Called when either changes.

Accessibility

The primary choice is a native radio group in a fieldset with a legend, built from the picked categories.
Automatic changes of the primary category are announced.
The lists keep the keyboard model of transfer-list.

Testing

The pattern ships with a Testing Library test (blog-category-assign.test.tsx) that covers the empty state, the first primary, changing it and the hand-over on removal.