beta
TagGroup
Tags allow users to categorize content. They can represent keywords or people, and are grouped to describe an item or a search request.
< TagGroup aria-label = "Static TagGroup items example" >
< Item > Adobe Photoshop< / Item >
< Item > Adobe InDesign< / Item >
< Item > Adobe AfterEffects< / Item >
< Item > Adobe Illustrator< / Item >
< Item > Adobe Lightroom< / Item >
< / TagGroup >
< TagGroup aria-label = "Static TagGroup items example" >
< Item > Adobe Photoshop< / Item >
< Item > Adobe InDesign< / Item >
< Item > Adobe AfterEffects< / Item >
< Item > Adobe Illustrator< / Item >
< Item > Adobe Lightroom< / Item >
< / TagGroup >
< TagGroup aria-label = "Static TagGroup items example" >
< Item >
Adobe Photoshop
< / Item >
< Item >
Adobe InDesign
< / Item >
< Item >
Adobe AfterEffects
< / Item >
< Item >
Adobe Illustrator
< / Item >
< Item >
Adobe Lightroom
< / Item >
< / TagGroup >
TagGroup is a component that allows users to categorize content. Basic usage of TagGroup, seen in the example above, shows the use of a static collection where the contents of the TagGroup are hard coded.
Dynamic collections, as shown below, can be used when the options come from an external data source such as an API, or update over time.
Each item has a unique key defined by the data. In the example below, the key
of each row element is implicitly defined by the id property of the row object.
See collections to learn more about keys in dynamic collections.
const items = [
{ id : 1 , name : 'Adobe Photoshop' } ,
{ id : 2 , name : 'Adobe XD' } ,
{ id : 3 , name : 'Adobe InDesign' } ,
{ id : 4 , name : 'Adobe AfterEffects' } ,
{ id : 5 , name : 'Adobe Illustrator' } ,
{ id : 6 , name : 'Adobe Lightroom' } ,
{ id : 7 , name : 'Adobe Premiere Pro' } ,
{ id : 8 , name : 'Adobe Fresco' } ,
{ id : 9 , name : 'Adobe Dreamweaver' }
] ;
< Flex width = { 500 } >
< TagGroup items = { items } aria-label = "Dynamic TagGroup items example" >
{ item => < Item > { item . name } < / Item > }
< / TagGroup >
< / Flex >
const items = [
{ id : 1 , name : 'Adobe Photoshop' } ,
{ id : 2 , name : 'Adobe XD' } ,
{ id : 3 , name : 'Adobe InDesign' } ,
{ id : 4 , name : 'Adobe AfterEffects' } ,
{ id : 5 , name : 'Adobe Illustrator' } ,
{ id : 6 , name : 'Adobe Lightroom' } ,
{ id : 7 , name : 'Adobe Premiere Pro' } ,
{ id : 8 , name : 'Adobe Fresco' } ,
{ id : 9 , name : 'Adobe Dreamweaver' }
] ;
< Flex width = { 500 } >
< TagGroup
items = { items }
aria-label = "Dynamic TagGroup items example"
>
{ ( item ) => < Item > { item . name } < / Item > }
< / TagGroup >
< / Flex >
const items = [
{
id : 1 ,
name :
'Adobe Photoshop'
} ,
{
id : 2 ,
name : 'Adobe XD'
} ,
{
id : 3 ,
name :
'Adobe InDesign'
} ,
{
id : 4 ,
name :
'Adobe AfterEffects'
} ,
{
id : 5 ,
name :
'Adobe Illustrator'
} ,
{
id : 6 ,
name :
'Adobe Lightroom'
} ,
{
id : 7 ,
name :
'Adobe Premiere Pro'
} ,
{
id : 8 ,
name : 'Adobe Fresco'
} ,
{
id : 9 ,
name :
'Adobe Dreamweaver'
}
] ;
< Flex width = { 500 } >
< TagGroup
items = { items }
aria-label = "Dynamic TagGroup items example"
>
{ ( item ) => (
< Item >
{ item . name }
< / Item >
) }
< / TagGroup >
< / Flex >
To internationalize a TagGroup, all text content within the TagGroup should be localized. This includes the aria-label
provided to the TagGroup if any.
For languages that are read right-to-left (e.g. Hebrew and Arabic), the layout of TagGroup is automatically flipped.
An aria-label
must be provided to the TagGroup for accessibility. If the TagGroup is labeled by a separate element, an aria-labelledby
prop must be provided using the id of the labeling element instead.
Removing tags can be enabled by providing the allowsRemoving
prop to the TagGroup. TagGroup will pass the key of the removed item to the onRemove
handler as shown below.
function Example ( ) {
let defaultItems = [
{ id : 1 , name : 'Adobe Photoshop' } ,
{ id : 2 , name : 'Adobe XD' } ,
{ id : 3 , name : 'Adobe InDesign' } ,
{ id : 4 , name : 'Adobe AfterEffects' } ,
{ id : 5 , name : 'Adobe Illustrator' } ,
{ id : 6 , name : 'Adobe Lightroom' } ,
{ id : 7 , name : 'Adobe Premiere Pro' } ,
{ id : 8 , name : 'Adobe Fresco' } ,
{ id : 9 , name : 'Adobe Dreamweaver' }
] ;
let [ items , setItems ] = React . useState ( defaultItems ) ;
let removeItem = ( key ) => {
setItems ( ( prevItems ) => prevItems . filter ( ( item ) => key !== item . id ) ) ;
} ;
return (
< Flex width = { 500 } >
< TagGroup
items = { items }
allowsRemoving
onRemove = { removeItem }
aria-label = "Removable TagGroup example"
>
{ ( item ) => < Item > { item . name } < / Item > }
< / TagGroup >
< / Flex >
) ;
}
function Example ( ) {
let defaultItems = [
{ id : 1 , name : 'Adobe Photoshop' } ,
{ id : 2 , name : 'Adobe XD' } ,
{ id : 3 , name : 'Adobe InDesign' } ,
{ id : 4 , name : 'Adobe AfterEffects' } ,
{ id : 5 , name : 'Adobe Illustrator' } ,
{ id : 6 , name : 'Adobe Lightroom' } ,
{ id : 7 , name : 'Adobe Premiere Pro' } ,
{ id : 8 , name : 'Adobe Fresco' } ,
{ id : 9 , name : 'Adobe Dreamweaver' }
] ;
let [ items , setItems ] = React . useState ( defaultItems ) ;
let removeItem = ( key ) => {
setItems ( ( prevItems ) =>
prevItems . filter ( ( item ) => key !== item . id )
) ;
} ;
return (
< Flex width = { 500 } >
< TagGroup
items = { items }
allowsRemoving
onRemove = { removeItem }
aria-label = "Removable TagGroup example"
>
{ ( item ) => < Item > { item . name } < / Item > }
< / TagGroup >
< / Flex >
) ;
}
function Example ( ) {
let defaultItems = [
{
id : 1 ,
name :
'Adobe Photoshop'
} ,
{
id : 2 ,
name : 'Adobe XD'
} ,
{
id : 3 ,
name :
'Adobe InDesign'
} ,
{
id : 4 ,
name :
'Adobe AfterEffects'
} ,
{
id : 5 ,
name :
'Adobe Illustrator'
} ,
{
id : 6 ,
name :
'Adobe Lightroom'
} ,
{
id : 7 ,
name :
'Adobe Premiere Pro'
} ,
{
id : 8 ,
name :
'Adobe Fresco'
} ,
{
id : 9 ,
name :
'Adobe Dreamweaver'
}
] ;
let [ items , setItems ] =
React . useState (
defaultItems
) ;
let removeItem = (
key
) => {
setItems (
( prevItems ) =>
prevItems . filter (
( item ) =>
key !==
item . id
)
) ;
} ;
return (
< Flex width = { 500 } >
< TagGroup
items = { items }
allowsRemoving
onRemove = { removeItem }
aria-label = "Removable TagGroup example"
>
{ ( item ) => (
< Item >
{ item . name }
< / Item >
) }
< / TagGroup >
< / Flex >
) ;
}
EventsName Type Default Description onRemove
(
( key : Key
) ) => void
— Called when the user removes a tag.
LayoutName Type Default Description flex
Responsive < string
| number
| boolean >
— When used in a flex layout, specifies how the element will grow or shrink to fit the space available. See MDN . flexGrow
Responsive < number >
— When used in a flex layout, specifies how the element will grow to fit the space available. See MDN . flexShrink
Responsive < number >
— When used in a flex layout, specifies how the element will shrink to fit the space available. See MDN . flexBasis
Responsive < number | string >
— When used in a flex layout, specifies the initial main size of the element. See MDN . alignSelf
Responsive < 'auto'
| 'normal'
| 'start'
| 'end'
| 'center'
| 'flex-start'
| 'flex-end'
| 'self-start'
| 'self-end'
| 'stretch' >
— Overrides the alignItems
property of a flex or grid container. See MDN . justifySelf
Responsive < 'auto'
| 'normal'
| 'start'
| 'end'
| 'flex-start'
| 'flex-end'
| 'self-start'
| 'self-end'
| 'center'
| 'left'
| 'right'
| 'stretch' >
— Specifies how the element is justified inside a flex or grid container. See MDN . order
Responsive < number >
— The layout order for the element within a flex or grid container. See MDN . gridArea
Responsive < string >
— When used in a grid layout, specifies the named grid area that the element should be placed in within the grid. See MDN . gridColumn
Responsive < string >
— When used in a grid layout, specifies the column the element should be placed in within the grid. See MDN . gridRow
Responsive < string >
— When used in a grid layout, specifies the row the element should be placed in within the grid. See MDN . gridColumnStart
Responsive < string >
— When used in a grid layout, specifies the starting column to span within the grid. See MDN . gridColumnEnd
Responsive < string >
— When used in a grid layout, specifies the ending column to span within the grid. See MDN . gridRowStart
Responsive < string >
— When used in a grid layout, specifies the starting row to span within the grid. See MDN . gridRowEnd
Responsive < string >
— When used in a grid layout, specifies the ending row to span within the grid. See MDN .
Spacing Sizing Positioning AccessibilityName Type Default Description id
string
— The element's unique identifier. See MDN . aria-label
string
— Defines a string value that labels the current element. aria-labelledby
string
— Identifies the element (or elements) that labels the current element. aria-describedby
string
— Identifies the element (or elements) that describes the object. aria-details
string
— Identifies the element (or elements) that provide a detailed, extended description for the object.
AdvancedName Type Default Description UNSAFE_className
string
— Sets the CSS className for the element. Only use as a last resort . Use style props instead. UNSAFE_style
CSSProperties
— Sets inline style for the element. Only use as a last resort . Use style props instead.
< TagGroup aria-label = "TagGroup with icons example" >
< Item >
< News / >
< Text > News< / Text >
< / Item >
< Item >
< Airplane / >
< Text > Travel< / Text >
< / Item >
< Item >
< Game / >
< Text > Gaming< / Text >
< / Item >
< Item >
< ShoppingCart / >
< Text > Shopping< / Text >
< / Item >
< / TagGroup >
< TagGroup aria-label = "TagGroup with icons example" >
< Item >
< News / >
< Text > News< / Text >
< / Item >
< Item >
< Airplane / >
< Text > Travel< / Text >
< / Item >
< Item >
< Game / >
< Text > Gaming< / Text >
< / Item >
< Item >
< ShoppingCart / >
< Text > Shopping< / Text >
< / Item >
< / TagGroup >
< TagGroup aria-label = "TagGroup with icons example" >
< Item >
< News / >
< Text > News< / Text >
< / Item >
< Item >
< Airplane / >
< Text > Travel< / Text >
< / Item >
< Item >
< Game / >
< Text > Gaming< / Text >
< / Item >
< Item >
< ShoppingCart / >
< Text >
Shopping
< / Text >
< / Item >
< / TagGroup >