Import
import { TagSelector } from '@adoptaunabuelo/react-components';
Usage
<TagSelector
type="multiple"
options={[
{ id: "1", title: "React" },
{ id: "2", title: "TypeScript", subtitle: "Recommended" }
]}
optionsSelected={selectedTags}
onChange={(tags) => setSelectedTags(tags)}
/>
Props
Selection mode: single for radio-like behavior, multiple for multi-select
options
Array<OptionProps>
required
Available tag options to display
Pre-selected options (controlled component pattern)
onChange
(selection: Array<OptionProps>) => void
Callback fired when selection changes, receives array of selected options
When true, disables click interactions (display only)
Custom styles for the container
OptionProps
Unique identifier for the tag
Main text displayed on the tag
Optional secondary text below the title
Custom styles for individual tag
Features
- Flex-wrap layout that automatically wraps tags to multiple rows
- Single selection mode: only one tag can be selected at a time (clicking again deselects)
- Multiple selection mode: multiple tags can be selected simultaneously
- Supports tags with optional subtitles
- Visual-only mode for display without interaction
- Automatically renders Tag or TagSubtitle components based on subtitle presence
Examples
Multiple Selection
const [selectedSkills, setSelectedSkills] = useState([]);
<TagSelector
type="multiple"
options={[
{ id: '1', title: 'JavaScript' },
{ id: '2', title: 'React' },
{ id: '3', title: 'TypeScript' },
{ id: '4', title: 'Node.js' }
]}
optionsSelected={selectedSkills}
onChange={(tags) => setSelectedSkills(tags)}
/>
Single Selection
const [selectedPlan, setSelectedPlan] = useState([]);
<TagSelector
type="single"
options={[
{ id: 'basic', title: 'Basic', subtitle: '$9/month' },
{ id: 'pro', title: 'Pro', subtitle: '$29/month' },
{ id: 'enterprise', title: 'Enterprise', subtitle: 'Custom pricing' }
]}
optionsSelected={selectedPlan}
onChange={(tags) => setSelectedPlan(tags)}
/>
With Subtitles
<TagSelector
type="multiple"
options={[
{ id: '1', title: 'React', subtitle: 'Frontend library' },
{ id: '2', title: 'Vue', subtitle: 'Progressive framework' },
{ id: '3', title: 'Angular', subtitle: 'Full framework' }
]}
optionsSelected={frameworks}
onChange={setFrameworks}
/>
Visual Only (Display Mode)
<TagSelector
type="multiple"
options={userSkills}
optionsSelected={userSkills}
onlyVisual
/>
Custom Design
<TagSelector
type="multiple"
options={tags}
optionsSelected={selected}
onChange={setSelected}
design="design2"
style={{ gap: '12px', padding: '16px' }}
/>
