TagSelect

import { TagSelect } from "@cynco-labs/ui";

import { useState } from "react";
import { FormLabel, TagSelect } from "@cynco-labs/ui";

export default function TagSelectDemo() {
	const [s, setS] = useState(["sa", "kl"]);
	return (
		<div className="max-w-[360px]">
			<FormLabel htmlFor="tag-select-branches">Branches</FormLabel>
			<TagSelect
				id="tag-select-branches"
				value={s}
				onChange={setS}
				placeholder="Select branches"
				options={[
					{ value: "kl", label: "Kuala Lumpur" },
					{ value: "sa", label: "Shah Alam" },
					{ value: "pg", label: "Penang" },
				]}
			/>
		</div>
	);
}

Use

Choosing several known options (tags, branches, tax codes).

Props

value, onChange, options [{value,label}], placeholder, optional formatTag, renderContent, className (the field box). Label it with id + a <label htmlFor> (FormLabel, FieldLabel), or aria-label / aria-labelledby; aria-describedby and aria-invalid also go on the trigger.

Notes

The trigger fills the field from behind and announces "{n} selected"; the tags sit beside it, not inside it, so each "Remove {label}" button is its own tab stop. Removing a tag moves focus to the next tag, or back to the trigger.