TagGroup

Tags allow users to categorize content. They can represent keywords or people, and are grouped to describe an item or a search request.

install	`yarn add @adobe/react-spectrum`
added	3.27.0
usage	`import {TagGroup, Item} from '@adobe/react-spectrum'`

View guidelines

Spectrum

Example#

<TagGroup aria-label="Static TagGroup items example">
  <Item>News</Item>
  <Item>Travel</Item>
  <Item>Gaming</Item>
  <Item>Shopping</Item>
</TagGroup>

<TagGroup aria-label="Static TagGroup items example">
  <Item>News</Item>
  <Item>Travel</Item>
  <Item>Gaming</Item>
  <Item>Shopping</Item>
</TagGroup>

<TagGroup aria-label="Static TagGroup items example">
  <Item>News</Item>
  <Item>Travel</Item>
  <Item>Gaming</Item>
  <Item>Shopping</Item>
</TagGroup>

Content#

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: 'News'},
  {id: 2, name: 'Travel'},
  {id: 3, name: 'Gaming'},
  {id: 4, name: 'Shopping'}
];

<TagGroup items={items} aria-label="Dynamic TagGroup items example">
  {item => <Item>{item.name}</Item>}
</TagGroup>

const items = [
  { id: 1, name: 'News' },
  { id: 2, name: 'Travel' },
  { id: 3, name: 'Gaming' },
  { id: 4, name: 'Shopping' }
];

<TagGroup
  items={items}
  aria-label="Dynamic TagGroup items example"
>
  {(item) => <Item>{item.name}</Item>}
</TagGroup>

const items = [
  {
    id: 1,
    name: 'News'
  },
  {
    id: 2,
    name: 'Travel'
  },
  {
    id: 3,
    name: 'Gaming'
  },
  {
    id: 4,
    name: 'Shopping'
  }
];

<TagGroup
  items={items}
  aria-label="Dynamic TagGroup items example"
>
  {(item) => (
    <Item>
      {item.name}
    </Item>
  )}
</TagGroup>

Internationalization#

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.

Labeling#

A visual label can be provided with the label prop. If a visual label isn't included, 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.

<TagGroup label="Categories">
  <Item>News</Item>
  <Item>Travel</Item>
  <Item>Gaming</Item>
  <Item>Shopping</Item>
</TagGroup>

<TagGroup label="Categories">
  <Item>News</Item>
  <Item>Travel</Item>
  <Item>Gaming</Item>
  <Item>Shopping</Item>
</TagGroup>

<TagGroup label="Categories">
  <Item>News</Item>
  <Item>Travel</Item>
  <Item>Gaming</Item>
  <Item>Shopping</Item>
</TagGroup>

Events#

onRemove#

Removing tags can be enabled by providing the onRemove prop to the TagGroup, which will receive the set of keys to remove.

function Example() {
  let defaultItems = [
    {id: 1, name: 'News'},
    {id: 2, name: 'Travel'},
    {id: 3, name: 'Gaming'},
    {id: 4, name: 'Shopping'}
  ];

  let [items, setItems] = React.useState(defaultItems);

  let onRemove = (keys) => {
    setItems(prevItems => prevItems.filter((item) => !keys.has(item.id)));
  };

  return (
    <TagGroup
      items={items}
      onRemove={onRemove}      aria-label="Removable TagGroup example">
      {item => <Item>{item.name}</Item>}
    </TagGroup>
  );
}

function Example() {
  let defaultItems = [
    { id: 1, name: 'News' },
    { id: 2, name: 'Travel' },
    { id: 3, name: 'Gaming' },
    { id: 4, name: 'Shopping' }
  ];

  let [items, setItems] = React.useState(defaultItems);

  let onRemove = (keys) => {
    setItems((prevItems) =>
      prevItems.filter((item) => !keys.has(item.id))
    );
  };

  return (
    <TagGroup
      items={items}
      onRemove={onRemove}      aria-label="Removable TagGroup example"
    >
      {(item) => <Item>{item.name}</Item>}
    </TagGroup>
  );
}

function Example() {
  let defaultItems = [
    {
      id: 1,
      name: 'News'
    },
    {
      id: 2,
      name: 'Travel'
    },
    {
      id: 3,
      name: 'Gaming'
    },
    {
      id: 4,
      name: 'Shopping'
    }
  ];

  let [items, setItems] =
    React.useState(
      defaultItems
    );

  let onRemove = (
    keys
  ) => {
    setItems(
      (prevItems) =>
        prevItems.filter(
          (item) =>
            !keys.has(
              item.id
            )
        )
    );
  };

  return (
    <TagGroup
      items={items}
      onRemove={onRemove}      aria-label="Removable TagGroup example"
    >
      {(item) => (
        <Item>
          {item.name}
        </Item>
      )}
    </TagGroup>
  );
}

onAction#

TagGroup supports an onAction handler that, when used with the actionLabel prop, will add an action button at the end of the tags that can be used to perform a custom action.

<TagGroup
  actionLabel="Clear"
  onAction={() => alert('Clear action pressed.')}  aria-label="TagGroup with action">
  <Item>News</Item>
  <Item>Travel</Item>
  <Item>Gaming</Item>
  <Item>Shopping</Item>
</TagGroup>

<TagGroup
  actionLabel="Clear"
  onAction={() => alert('Clear action pressed.')}  aria-label="TagGroup with action">
  <Item>News</Item>
  <Item>Travel</Item>
  <Item>Gaming</Item>
  <Item>Shopping</Item>
</TagGroup>

<TagGroup
  actionLabel="Clear"
  onAction={() =>
    alert(
      'Clear action pressed.'
    )}  aria-label="TagGroup with action"
>
  <Item>News</Item>
  <Item>Travel</Item>
  <Item>Gaming</Item>
  <Item>Shopping</Item>
</TagGroup>

Links#

Tags may be links to another page or website. This can be achieved by passing the href prop to the <Item> component.

<TagGroup label="Links">
  <Item href="https://adobe.com/" target="_blank">Adobe</Item>
  <Item href="https://apple.com/" target="_blank">Apple</Item>
  <Item href="https://google.com/" target="_blank">Google</Item>
  <Item href="https://microsoft.com/" target="_blank">Microsoft</Item>
</TagGroup>

<TagGroup label="Links">
  <Item href="https://adobe.com/" target="_blank">
    Adobe
  </Item>
  <Item href="https://apple.com/" target="_blank">
    Apple
  </Item>
  <Item href="https://google.com/" target="_blank">
    Google
  </Item>
  <Item href="https://microsoft.com/" target="_blank">
    Microsoft
  </Item>
</TagGroup>

<TagGroup label="Links">
  <Item
    href="https://adobe.com/"
    target="_blank"
  >
    Adobe
  </Item>
  <Item
    href="https://apple.com/"
    target="_blank"
  >
    Apple
  </Item>
  <Item
    href="https://google.com/"
    target="_blank"
  >
    Google
  </Item>
  <Item
    href="https://microsoft.com/"
    target="_blank"
  >
    Microsoft
  </Item>
</TagGroup>

Client side routing#

The <Item> component works with frameworks and client side routers like Next.js and React Router. As with other React Spectrum components that support links, this works via the Provider component at the root of your app. See the client side routing guide to learn how to set this up.

Props#

Name	Type	Default	Description
`children`	`CollectionChildren<T>`	—	The contents of the collection.
`actionLabel`	`string`	—	The label to display on the action button.
`renderEmptyState`	`() => JSX.Element`	—	Sets what the TagGroup should render when there are no tags to display.
`maxRows`	`number`	—	Limit the number of rows initially shown. This will render a button that allows the user to expand to show all tags.
`errorMessage`	`ReactNode`	—	An error message for the field.
`items`	`Iterable<T>`	—	Item objects in the collection.
`id`	`string \| undefined`	—	The element's unique identifier. See MDN.
`label`	`ReactNode`	—	The content to display as the label.
`description`	`ReactNode`	—	A description for the field. Provides a hint such as specific requirements for what to choose.
`labelPosition`	`LabelPosition`	`'top'`	The label's overall position relative to the element it is labeling.
`labelAlign`	`Alignment`	`'start'`	The label's horizontal alignment relative to the element it is labeling.
`contextualHelp`	`ReactNode`	—	A ContextualHelp element to place next to the label.
`isInvalid`	`boolean`	—	Whether the input value is invalid.

Events

Name	Type	Description
`onAction`	`() => void`	Handler that is called when the action button is pressed.
`onRemove`	`( (keys: Set<Key> )) => void`	Handler that is called when a user deletes a tag.

Layout

Name	Type	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

Name	Type	Description
`margin`	`Responsive<DimensionValue>`	The margin for all four sides of the element. See MDN.
`marginTop`	`Responsive<DimensionValue>`	The margin for the top side of the element. See MDN.
`marginBottom`	`Responsive<DimensionValue>`	The margin for the bottom side of the element. See MDN.
`marginStart`	`Responsive<DimensionValue>`	The margin for the logical start side of the element, depending on layout direction. See MDN.
`marginEnd`	`Responsive<DimensionValue>`	The margin for the logical end side of an element, depending on layout direction. See MDN.
`marginX`	`Responsive<DimensionValue>`	The margin for both the left and right sides of the element. See MDN.
`marginY`	`Responsive<DimensionValue>`	The margin for both the top and bottom sides of the element. See MDN.

Sizing

Name	Type	Description
`width`	`Responsive<DimensionValue>`	The width of the element. See MDN.
`minWidth`	`Responsive<DimensionValue>`	The minimum width of the element. See MDN.
`maxWidth`	`Responsive<DimensionValue>`	The maximum width of the element. See MDN.
`height`	`Responsive<DimensionValue>`	The height of the element. See MDN.
`minHeight`	`Responsive<DimensionValue>`	The minimum height of the element. See MDN.
`maxHeight`	`Responsive<DimensionValue>`	The maximum height of the element. See MDN.

Positioning

Name	Type	Description
`position`	`Responsive<'static' \| 'relative' \| 'absolute' \| 'fixed' \| 'sticky'>`	Specifies how the element is positioned. See MDN.
`top`	`Responsive<DimensionValue>`	The top position for the element. See MDN.
`bottom`	`Responsive<DimensionValue>`	The bottom position for the element. See MDN.
`left`	`Responsive<DimensionValue>`	The left position for the element. See MDN. Consider using `start` instead for RTL support.
`right`	`Responsive<DimensionValue>`	The right position for the element. See MDN. Consider using `start` instead for RTL support.
`start`	`Responsive<DimensionValue>`	The logical start position for the element, depending on layout direction. See MDN.
`end`	`Responsive<DimensionValue>`	The logical end position for the element, depending on layout direction. See MDN.
`zIndex`	`Responsive<number>`	The stacking order for the element. See MDN.
`isHidden`	`Responsive<boolean>`	Hides the element.

Accessibility

Name	Type	Description
`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.

Advanced

Name	Type	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.

Visual options#

With icons#

<TagGroup aria-label="TagGroup with icons example">
  <Item textValue="News">
    <News />
    <Text>News</Text>
  </Item>
  <Item textValue="Travel">
    <Airplane />
    <Text>Travel</Text>
  </Item>
  <Item textValue="Gaming">
    <Game />
    <Text>Gaming</Text>
  </Item>
  <Item textValue="Shopping">
    <ShoppingCart />
    <Text>Shopping</Text>
  </Item>
</TagGroup>

<TagGroup aria-label="TagGroup with icons example">
  <Item textValue="News">
    <News />
    <Text>News</Text>
  </Item>
  <Item textValue="Travel">
    <Airplane />
    <Text>Travel</Text>
  </Item>
  <Item textValue="Gaming">
    <Game />
    <Text>Gaming</Text>
  </Item>
  <Item textValue="Shopping">
    <ShoppingCart />
    <Text>Shopping</Text>
  </Item>
</TagGroup>

<TagGroup aria-label="TagGroup with icons example">
  <Item textValue="News">
    <News />
    <Text>News</Text>
  </Item>
  <Item textValue="Travel">
    <Airplane />
    <Text>Travel</Text>
  </Item>
  <Item textValue="Gaming">
    <Game />
    <Text>Gaming</Text>
  </Item>
  <Item textValue="Shopping">
    <ShoppingCart />
    <Text>
      Shopping
    </Text>
  </Item>
</TagGroup>

With avatars#

<TagGroup aria-label="TagGroup with avatars example">
  <Item textValue="Person 1">
    <Avatar src="https://i.imgur.com/kJOwAdv.png" />
    <Text>Person 1</Text>
  </Item>
  <Item textValue="Person 2">
    <Avatar src="https://i.imgur.com/kJOwAdv.png" />
    <Text>Person 2</Text>
  </Item>
  <Item textValue="Person 3">
    <Avatar src="https://i.imgur.com/kJOwAdv.png" />
    <Text>Person 3</Text>
  </Item>
  <Item textValue="Person 4">
    <Avatar src="https://i.imgur.com/kJOwAdv.png" />
    <Text>Person 4</Text>
  </Item>
</TagGroup>

<TagGroup aria-label="TagGroup with avatars example">
  <Item textValue="Person 1">
    <Avatar src="https://i.imgur.com/kJOwAdv.png" />
    <Text>Person 1</Text>
  </Item>
  <Item textValue="Person 2">
    <Avatar src="https://i.imgur.com/kJOwAdv.png" />
    <Text>Person 2</Text>
  </Item>
  <Item textValue="Person 3">
    <Avatar src="https://i.imgur.com/kJOwAdv.png" />
    <Text>Person 3</Text>
  </Item>
  <Item textValue="Person 4">
    <Avatar src="https://i.imgur.com/kJOwAdv.png" />
    <Text>Person 4</Text>
  </Item>
</TagGroup>

<TagGroup aria-label="TagGroup with avatars example">
  <Item textValue="Person 1">
    <Avatar src="https://i.imgur.com/kJOwAdv.png" />
    <Text>
      Person 1
    </Text>
  </Item>
  <Item textValue="Person 2">
    <Avatar src="https://i.imgur.com/kJOwAdv.png" />
    <Text>
      Person 2
    </Text>
  </Item>
  <Item textValue="Person 3">
    <Avatar src="https://i.imgur.com/kJOwAdv.png" />
    <Text>
      Person 3
    </Text>
  </Item>
  <Item textValue="Person 4">
    <Avatar src="https://i.imgur.com/kJOwAdv.png" />
    <Text>
      Person 4
    </Text>
  </Item>
</TagGroup>

Label position and alignment#

By default, the label is positioned above the TagGroup. The labelPosition prop can be used to position the label to the side. The labelAlign prop can be used to align the label as "start" or "end". For left-to-right (LTR) languages, "start" refers to the left most edge of the TagGroup and "end" refers to the right most edge. For right-to-left (RTL) languages, this is flipped.

<TagGroup label="Categories" labelPosition="side" labelAlign="end">
  <Item>News</Item>
  <Item>Travel</Item>
  <Item>Gaming</Item>
  <Item>Shopping</Item>
</TagGroup>

<TagGroup
  label="Categories"
  labelPosition="side"
  labelAlign="end"
>
  <Item>News</Item>
  <Item>Travel</Item>
  <Item>Gaming</Item>
  <Item>Shopping</Item>
</TagGroup>

<TagGroup
  label="Categories"
  labelPosition="side"
  labelAlign="end"
>
  <Item>News</Item>
  <Item>Travel</Item>
  <Item>Gaming</Item>
  <Item>Shopping</Item>
</TagGroup>

Help text#

View guidelines

Both a description and an error message can be supplied to a TagGroup. The description is always visible unless isInvalid is true and an error message is provided. The error message can be used to help the user fix their input quickly and should be specific to the detected error. All strings should be localized.

function Example() {
  let defaultItems = [
    {id: 1, name: 'News'},
    {id: 2, name: 'Travel'},
    {id: 3, name: 'Gaming'},
    {id: 4, name: 'Shopping'}
  ];

  let [items, setItems] = React.useState(defaultItems);

  let onRemove = (keys) => {
    setItems(prevItems => prevItems.filter((item) => !keys.has(item.id)));
  };

  let isValid = items.length <= 3;

  return (
    <TagGroup
      label="Categories"
      items={items}
      onRemove={onRemove}
      aria-label="TagGroup help text example"
      isInvalid={!isValid}
      description="Please include tags for related categories."
      errorMessage="Must contain no more than 3 tags. Please remove some."
      >
      {item => <Item>{item.name}</Item>}
    </TagGroup>
  );
}

function Example() {
  let defaultItems = [
    { id: 1, name: 'News' },
    { id: 2, name: 'Travel' },
    { id: 3, name: 'Gaming' },
    { id: 4, name: 'Shopping' }
  ];

  let [items, setItems] = React.useState(defaultItems);

  let onRemove = (keys) => {
    setItems((prevItems) =>
      prevItems.filter((item) => !keys.has(item.id))
    );
  };

  let isValid = items.length <= 3;

  return (
    <TagGroup
      label="Categories"
      items={items}
      onRemove={onRemove}
      aria-label="TagGroup help text example"
      isInvalid={!isValid}
      description="Please include tags for related categories."
      errorMessage="Must contain no more than 3 tags. Please remove some."
    >
      {(item) => <Item>{item.name}</Item>}
    </TagGroup>
  );
}

function Example() {
  let defaultItems = [
    {
      id: 1,
      name: 'News'
    },
    {
      id: 2,
      name: 'Travel'
    },
    {
      id: 3,
      name: 'Gaming'
    },
    {
      id: 4,
      name: 'Shopping'
    }
  ];

  let [items, setItems] =
    React.useState(
      defaultItems
    );

  let onRemove = (
    keys
  ) => {
    setItems(
      (prevItems) =>
        prevItems.filter(
          (item) =>
            !keys.has(
              item.id
            )
        )
    );
  };

  let isValid =
    items.length <= 3;

  return (
    <TagGroup
      label="Categories"
      items={items}
      onRemove={onRemove}
      aria-label="TagGroup help text example"
      isInvalid={!isValid}
      description="Please include tags for related categories."
      errorMessage="Must contain no more than 3 tags. Please remove some."
    >
      {(item) => (
        <Item>
          {item.name}
        </Item>
      )}
    </TagGroup>
  );
}

Contextual help#

A ContextualHelp element may be placed next to the label to provide additional information or help about a TagGroup.

import {Content, ContextualHelp, Heading} from '@adobe/react-spectrum';

<TagGroup
  label="Categories"
  contextualHelp={
    <ContextualHelp>
      <Heading>What are tags?</Heading>
      <Content>Tags allow users to categorize content.</Content>
    </ContextualHelp>
  }>
  <Item>News</Item>
  <Item>Travel</Item>
  <Item>Gaming</Item>
  <Item>Shopping</Item>
</TagGroup>

import {
  Content,
  ContextualHelp,
  Heading
} from '@adobe/react-spectrum';

<TagGroup
  label="Categories"
  contextualHelp={
    <ContextualHelp>
      <Heading>What are tags?</Heading>
      <Content>
        Tags allow users to categorize content.
      </Content>
    </ContextualHelp>
  }
>
  <Item>News</Item>
  <Item>Travel</Item>
  <Item>Gaming</Item>
  <Item>Shopping</Item>
</TagGroup>

import {
  Content,
  ContextualHelp,
  Heading
} from '@adobe/react-spectrum';

<TagGroup
  label="Categories"
  contextualHelp={
    <ContextualHelp>
      <Heading>
        What are tags?
      </Heading>
      <Content>
        Tags allow
        users to
        categorize
        content.
      </Content>
    </ContextualHelp>
  }
>
  <Item>News</Item>
  <Item>Travel</Item>
  <Item>Gaming</Item>
  <Item>Shopping</Item>
</TagGroup>

Limit rows#

TagGroup supports a maxRows prop that will limit the number of rows initially shown. This will add an action button that can be pressed to show the remaining tags.

<View
  maxWidth="size-3400"
  minHeight="size-2000"
  padding="size-150"
  borderWidth="thin"
  borderColor="dark"
  borderRadius="medium"
>
  <TagGroup
    maxRows={2}    aria-label="Static TagGroup items example with maxRows set"
  >
    <Item>News</Item>
    <Item>Travel</Item>
    <Item>Gaming</Item>
    <Item>Shopping</Item>
    <Item>Business</Item>
    <Item>Entertainment</Item>
    <Item>Food</Item>
    <Item>Technology</Item>
    <Item>Politics</Item>
    <Item>Health</Item>
    <Item>Science</Item>
  </TagGroup>
</View>

<View
  maxWidth="size-3400"
  minHeight="size-2000"
  padding="size-150"
  borderWidth="thin"
  borderColor="dark"
  borderRadius="medium"
>
  <TagGroup
    maxRows={2}    aria-label="Static TagGroup items example with maxRows set"
  >
    <Item>News</Item>
    <Item>Travel</Item>
    <Item>Gaming</Item>
    <Item>Shopping</Item>
    <Item>Business</Item>
    <Item>Entertainment</Item>
    <Item>Food</Item>
    <Item>Technology</Item>
    <Item>Politics</Item>
    <Item>Health</Item>
    <Item>Science</Item>
  </TagGroup>
</View>

<View
  maxWidth="size-3400"
  minHeight="size-2000"
  padding="size-150"
  borderWidth="thin"
  borderColor="dark"
  borderRadius="medium"
>
  <TagGroup
    maxRows={2}    aria-label="Static TagGroup items example with maxRows set"
  >
    <Item>News</Item>
    <Item>Travel</Item>
    <Item>Gaming</Item>
    <Item>
      Shopping
    </Item>
    <Item>
      Business
    </Item>
    <Item>
      Entertainment
    </Item>
    <Item>Food</Item>
    <Item>
      Technology
    </Item>
    <Item>
      Politics
    </Item>
    <Item>Health</Item>
    <Item>
      Science
    </Item>
  </TagGroup>
</View>

Empty state#

Use the renderEmptyState prop to customize what the TagGroup will display if there are no tags provided.

import {Link} from '@adobe/react-spectrum';

function renderEmptyState() {
  return (
    <span>
      No categories.{' '}
      <Link>
        <a href="//react-spectrum.com">Click here</a>
      </Link>{' '}
      to add some.
    </span>
  );
}

<TagGroup
  label="Categories"
  renderEmptyState={renderEmptyState}
>
  {[]}
</TagGroup>

import {Link} from '@adobe/react-spectrum';

function renderEmptyState() {
  return (
    <span>
      No categories.{' '}
      <Link>
        <a href="//react-spectrum.com">Click here</a>
      </Link>{' '}
      to add some.
    </span>
  );
}

<TagGroup
  label="Categories"
  renderEmptyState={renderEmptyState}
>
  {[]}
</TagGroup>

import {Link} from '@adobe/react-spectrum';

function renderEmptyState() {
  return (
    <span>
      No categories.{' '}
      <Link>
        <a href="//react-spectrum.com">
          Click here
        </a>
      </Link>{' '}
      to add some.
    </span>
  );
}

<TagGroup
  label="Categories"
  renderEmptyState={renderEmptyState}
>
  {[]}
</TagGroup>

CollectionElement<T>
  | CollectionElement<T>[]
  | (
    (item: T
  )) => CollectionElement<T>

SectionElement<T> | ItemElement<T>

ReactElement<SectionProps<T>> | null

Name	Type	Description
`children`	`ItemElement<T> \| ItemElement<T>[] \| ItemRenderer<T>`	Static child items or a function to render children.
`title`	`ReactNode`	Rendered contents of the section, e.g. a header.
`aria-label`	`string`	An accessibility label for the section.
`items`	`Iterable<T>`	Item objects in the section.

ReactElement<ItemProps<T>> | null

Name	Type	Description
`children`	`ReactNode`	Rendered contents of the item or child items.
`title`	`ReactNode`	Rendered contents of the item if `children` contains child items.
`textValue`	`string`	A string representation of the item's contents, used for features like typeahead.
`aria-label`	`string`	An accessibility label for this item.
`childItems`	`Iterable<T>`	A list of child item objects. Used for dynamic collections.
`hasChildItems`	`boolean`	Whether this item has children, even if not loaded yet.
`href`	`Href`	A URL to link to. See MDN.
`hrefLang`	`string`	Hints at the human language of the linked URL. SeeMDN.
`target`	`HTMLAttributeAnchorTarget`	The target window for the link. See MDN.
`rel`	`string`	The relationship between the linked resource and the current page. See MDN.
`download`	`boolean \| string`	Causes the browser to download the linked URL. A string may be provided to suggest a file name. See MDN.
`ping`	`string`	A space-separated list of URLs to ping when the link is followed. See MDN.
`referrerPolicy`	`HTMLAttributeReferrerPolicy`	How much of the referrer to send when following the link. See MDN.
`routerOptions`	`RouterOptions`	Options for the configured client side router.

RouterConfig extends {href: any
} ? H : string

RouterConfig extends {routerOptions: any
} ? O : never

(
  (item: T
)) => ItemElement<T>

'top' | 'side'

'start' | 'end'

T | ResponsiveProp<T>

{base?: T,
S?: T,
M?: T,
L?: T,
[custom: string]: T | undefined
}

See the Styling docs for a visualization of these values.

'size-0'
  | 'size-10'
  | 'size-25'
  | 'size-40'
  | 'size-50'
  | 'size-65'
  | 'size-75'
  | 'size-85'
  | 'size-100'
  | 'size-115'
  | 'size-125'
  | 'size-130'
  | 'size-150'
  | 'size-160'
  | 'size-175'
  | 'size-200'
  | 'size-225'
  | 'size-250'
  | 'size-275'
  | 'size-300'
  | 'size-325'
  | 'size-350'
  | 'size-400'
  | 'size-450'
  | 'size-500'
  | 'size-550'
  | 'size-600'
  | 'size-675'
  | 'size-700'
  | 'size-800'
  | 'size-900'
  | 'size-1000'
  | 'size-1200'
  | 'size-1250'
  | 'size-1600'
  | 'size-1700'
  | 'size-2000'
  | 'size-2400'
  | 'size-3000'
  | 'size-3400'
  | 'size-3600'
  | 'size-4600'
  | 'size-5000'
  | 'size-6000'
  | 'static-size-0'
  | 'static-size-10'
  | 'static-size-25'
  | 'static-size-50'
  | 'static-size-40'
  | 'static-size-65'
  | 'static-size-100'
  | 'static-size-115'
  | 'static-size-125'
  | 'static-size-130'
  | 'static-size-150'
  | 'static-size-160'
  | 'static-size-175'
  | 'static-size-200'
  | 'static-size-225'
  | 'static-size-250'
  | 'static-size-300'
  | 'static-size-400'
  | 'static-size-450'
  | 'static-size-500'
  | 'static-size-550'
  | 'static-size-600'
  | 'static-size-700'
  | 'static-size-800'
  | 'static-size-900'
  | 'static-size-1000'
  | 'static-size-1200'
  | 'static-size-1700'
  | 'static-size-2400'
  | 'static-size-2600'
  | 'static-size-3400'
  | 'static-size-3600'
  | 'static-size-4600'
  | 'static-size-5000'
  | 'static-size-6000'
  | 'single-line-height'
  | 'single-line-width'
  | string
    &  & {}
  | number