TagGroup

beta

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 @react-spectrum/tag`
version	3.0.0-beta.2
usage	`import {Item, TagGroup} from '@react-spectrum/tag'`

View guidelines

Example#

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

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: '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>

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="Adobe Products">
  <Item>Adobe Photoshop</Item>
  <Item>Adobe InDesign</Item>
  <Item>Adobe AfterEffects</Item>
  <Item>Adobe Illustrator</Item>
  <Item>Adobe Lightroom</Item>
</TagGroup>

<TagGroup label="Adobe Products">
  <Item>Adobe Photoshop</Item>
  <Item>Adobe InDesign</Item>
  <Item>Adobe AfterEffects</Item>
  <Item>Adobe Illustrator</Item>
  <Item>Adobe Lightroom</Item>
</TagGroup>

<TagGroup label="Adobe Products">
  <Item>
    Adobe Photoshop
  </Item>
  <Item>
    Adobe InDesign
  </Item>
  <Item>
    Adobe AfterEffects
  </Item>
  <Item>
    Adobe Illustrator
  </Item>
  <Item>
    Adobe Lightroom
  </Item>
</TagGroup>

Events#

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>
  );
}

Props#

Name	Type	Default	Description
`children`	`CollectionChildren<object>`	—	The contents of the collection.
`actionLabel`	`string`	—	The label to display on the action button.
`keyboardDelegate`	`TagKeyboardDelegate<object>`	—	An optional keyboard delegate to handle arrow key navigation, to override the default.
`allowsRemoving`	`boolean`	—	Whether the TagGroup allows removal of tags.
`maxRows`	`number`	—	Limit the number of rows initially shown. This will render a button that allows the user to expand to show all tags.
`items`	`Iterable<object>`	—	Item objects in the collection.
`validationState`	`ValidationState`	—	Whether the input should display its "valid" or "invalid" visual styling.
`isRequired`	`boolean`	—	Whether user input is required on the input before form submission. Often paired with the `necessityIndicator` prop to add a visual indicator to the input.
`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.
`necessityIndicator`	`NecessityIndicator`	`'icon'`	Whether the required state should be shown as an icon or text.
`contextualHelp`	`ReactNode`	—	A ContextualHelp element to place next to the label.
`label`	`ReactNode`	—	The content to display as the label.
`isDisabled`	`boolean`	—	Whether the description is displayed with lighter text.
`showErrorIcon`	`boolean`	—	Whether an error icon is rendered.
`description`	`ReactNode`	—	A description for the field. Provides a hint such as specific requirements for what to choose.
`errorMessage`	`ReactNode`	—	An error message for the field.

Events

Name	Type	Default	Description
`onAction`	`() => void`	—	Handler that is called when the action button is pressed.
`onRemove`	`( (key: Key )) => void`	—	Called when the user removes a tag.

Layout

Name	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

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

Advanced

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

Visual options#

With icons#

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

With avatars#

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

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

<TagGroup aria-label="TagGroup with avatars example">
  <Item>
    <Avatar
      src="https://i.imgur.com/kJOwAdv.png"
      alt="Person 1 avatar"
    />
    <Text>
      Person 1
    </Text>
  </Item>
  <Item>
    <Avatar
      src="https://i.imgur.com/kJOwAdv.png"
      alt="Person 2 avatar"
    />
    <Text>
      Person 2
    </Text>
  </Item>
  <Item>
    <Avatar
      src="https://i.imgur.com/kJOwAdv.png"
      alt="Person 3 avatar"
    />
    <Text>
      Person 3
    </Text>
  </Item>
  <Item>
    <Avatar
      src="https://i.imgur.com/kJOwAdv.png"
      alt="Person 4 avatar"
    />
    <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="Adobe Products" labelPosition="side" labelAlign="end">
  <Item>Adobe Photoshop</Item>
  <Item>Adobe InDesign</Item>
  <Item>Adobe AfterEffects</Item>
  <Item>Adobe Illustrator</Item>
  <Item>Adobe Lightroom</Item>
</TagGroup>

<TagGroup
  label="Adobe Products"
  labelPosition="side"
  labelAlign="end"
>
  <Item>Adobe Photoshop</Item>
  <Item>Adobe InDesign</Item>
  <Item>Adobe AfterEffects</Item>
  <Item>Adobe Illustrator</Item>
  <Item>Adobe Lightroom</Item>
</TagGroup>

<TagGroup
  label="Adobe Products"
  labelPosition="side"
  labelAlign="end"
>
  <Item>
    Adobe Photoshop
  </Item>
  <Item>
    Adobe InDesign
  </Item>
  <Item>
    Adobe AfterEffects
  </Item>
  <Item>
    Adobe Illustrator
  </Item>
  <Item>
    Adobe Lightroom
  </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 the validationState is “invalid” 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: '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));
  };

  let isValid = items.length <= 8;

  return (
    <Flex width={500}>
      <TagGroup
        label="Adobe Products"
        items={items}
        allowsRemoving
        onRemove={removeItem}
        aria-label="TagGroup help text example"
        validationState={isValid ? 'valid' : 'invalid'}
        description="Please include tags for related Adobe products."
        errorMessage="Must contain no more than 8 tags. Please remove some."
        >
        {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)
    );
  };

  let isValid = items.length <= 8;

  return (
    <Flex width={500}>
      <TagGroup
        label="Adobe Products"
        items={items}
        allowsRemoving
        onRemove={removeItem}
        aria-label="TagGroup help text example"
        validationState={isValid ? 'valid' : 'invalid'}
        description="Please include tags for related Adobe products."
        errorMessage="Must contain no more than 8 tags. Please remove some."
      >
        {(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
        )
    );
  };

  let isValid =
    items.length <= 8;

  return (
    <Flex width={500}>
      <TagGroup
        label="Adobe Products"
        items={items}
        allowsRemoving
        onRemove={removeItem}
        aria-label="TagGroup help text example"
        validationState={isValid
          ? 'valid'
          : 'invalid'}
        description="Please include tags for related Adobe products."
        errorMessage="Must contain no more than 8 tags. Please remove some."
      >
        {(item) => (
          <Item>
            {item.name}
          </Item>
        )}
      </TagGroup>
    </Flex>
  );
}

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="Adobe Products"
  contextualHelp={
    <ContextualHelp>
      <Heading>What are tags?</Heading>
      <Content>Tags allow users to categorize content.</Content>
    </ContextualHelp>
  }>
  <Item>Adobe Photoshop</Item>
  <Item>Adobe InDesign</Item>
  <Item>Adobe AfterEffects</Item>
  <Item>Adobe Illustrator</Item>
  <Item>Adobe Lightroom</Item>
</TagGroup>

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

<TagGroup
  label="Adobe Products"
  contextualHelp={
    <ContextualHelp>
      <Heading>What are tags?</Heading>
      <Content>
        Tags allow users to categorize content.
      </Content>
    </ContextualHelp>
  }
>
  <Item>Adobe Photoshop</Item>
  <Item>Adobe InDesign</Item>
  <Item>Adobe AfterEffects</Item>
  <Item>Adobe Illustrator</Item>
  <Item>Adobe Lightroom</Item>
</TagGroup>

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

<TagGroup
  label="Adobe Products"
  contextualHelp={
    <ContextualHelp>
      <Heading>
        What are tags?
      </Heading>
      <Content>
        Tags allow
        users to
        categorize
        content.
      </Content>
    </ContextualHelp>
  }
>
  <Item>
    Adobe Photoshop
  </Item>
  <Item>
    Adobe InDesign
  </Item>
  <Item>
    Adobe AfterEffects
  </Item>
  <Item>
    Adobe Illustrator
  </Item>
  <Item>
    Adobe Lightroom
  </Item>
</TagGroup>

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

SectionElement<T> | ItemElement<T>

ReactElement<SectionProps<T>>

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

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.

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

Method	Description
`constructor( (collection: Collection<T>, , direction: Direction )): void`
`getFirstKey(): void`
`getLastKey(): void`
`getKeyRightOf( (key: Key )): void`
`getKeyLeftOf( (key: Key )): void`
`getKeyBelow( (key: any )): void`
`getKeyAbove( (key: any )): void`
`getKeyPageAbove( (key: any )): void`
`getKeyPageBelow( (key: any )): void`

A generic interface to access a readonly sequential collection of unique keyed items.

Properties

Name	Type	Description
`size`	`number`	The number of items in the collection.

Methods

Method	Description
`getKeys(): Iterable<Key>`	Iterate over all keys in the collection.
`getItem( (key: Key )): T`	Get an item by its key.
`at( (idx: number )): T`	Get an item by the index of its key.
`getKeyBefore( (key: Key )): Key \| null`	Get the key that comes before the given key in the collection.
`getKeyAfter( (key: Key )): Key \| null`	Get the key that comes after the given key in the collection.
`getFirstKey(): Key \| null`	Get the first key in the collection.
`getLastKey(): Key \| null`	Get the last key in the collection.

'ltr' | 'rtl'

'valid' | 'invalid'

'top' | 'side'

'start' | 'end'

'icon' | 'label'

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