LabelGroup

Use LabelGroup to add commonly used margins and other layout constraints to groups of Labels

React

readyNot reviewed for a11y

A LabelGroup is a component to handle the layout of a collection of labels or tokens.

React examples

Default

One
Two
Three
Four
Five
Six
Seven
Eight
Nine
Ten
Eleven
Twelve
Thirteen
Fourteen
Fifteen
Sixteen

<LabelGroup>
  <Label>One</Label>
  <Label>Two</Label>
  <Label>Three</Label>
  <Label>Four</Label>
  <Label>Five</Label>
  <Label>Six</Label>
  <Label>Seven</Label>
  <Label>Eight</Label>
  <Label>Nine</Label>
  <Label>Ten</Label>
  <Label>Eleven</Label>
  <Label>Twelve</Label>
  <Label>Thirteen</Label>
  <Label>Fourteen</Label>
  <Label>Fifteen</Label>
  <Label>Sixteen</Label>
</LabelGroup>

<LabelGroup>
  <Label>One</Label>
  <Label>Two</Label>
  <Label>Three</Label>
  <Label>Four</Label>
  <Label>Five</Label>
  <Label>Six</Label>
  <Label>Seven</Label>
  <Label>Eight</Label>
  <Label>Nine</Label>
  <Label>Ten</Label>
  <Label>Eleven</Label>
  <Label>Twelve</Label>
  <Label>Thirteen</Label>
  <Label>Fourteen</Label>
  <Label>Fifteen</Label>
  <Label>Sixteen</Label>
</LabelGroup>

Truncated

Trunacte after 5 labels

One
Two
Three
Four
Five
Six
Seven
Eight
Nine
Ten
Eleven
Twelve
Thirteen
Fourteen
Fifteen
Sixteen

Trunacte labels based on container size

One
Two
Three
Four
Five
Six
Seven
Eight
Nine
Ten
Eleven
Twelve
Thirteen
Fourteen
Fifteen
Sixteen

<>
  <p>Trunacte after 5 labels</p>
  <LabelGroup visibleChildCount={5}>
    <Label>One</Label>
    <Label>Two</Label>
    <Label>Three</Label>
    <Label>Four</Label>
    <Label>Five</Label>
    <Label>Six</Label>
    <Label>Seven</Label>
    <Label>Eight</Label>
    <Label>Nine</Label>
    <Label>Ten</Label>
    <Label>Eleven</Label>
    <Label>Twelve</Label>
    <Label>Thirteen</Label>
    <Label>Fourteen</Label>
    <Label>Fifteen</Label>
    <Label>Sixteen</Label>
  </LabelGroup>
  <p>Trunacte labels based on container size</p>
  {/* The `Box` wrapper is just to demonstrate the behavior of `visibleChildCount="auto"` */}
  <Box
    sx={{
      outline: '1px solid black',
      overflow: 'auto',
      padding: '0.25rem',
      resize: 'horizontal',
      width: '600px',
    }}
  >
    <LabelGroup visibleChildCount="auto">
      <Label>One</Label>
      <Label>Two</Label>
      <Label>Three</Label>
      <Label>Four</Label>
      <Label>Five</Label>
      <Label>Six</Label>
      <Label>Seven</Label>
      <Label>Eight</Label>
      <Label>Nine</Label>
      <Label>Ten</Label>
      <Label>Eleven</Label>
      <Label>Twelve</Label>
      <Label>Thirteen</Label>
      <Label>Fourteen</Label>
      <Label>Fifteen</Label>
      <Label>Sixteen</Label>
    </LabelGroup>
  </Box>
</>

<>
  <p>Trunacte after 5 labels</p>
  <LabelGroup visibleChildCount={5}>
    <Label>One</Label>
    <Label>Two</Label>
    <Label>Three</Label>
    <Label>Four</Label>
    <Label>Five</Label>
    <Label>Six</Label>
    <Label>Seven</Label>
    <Label>Eight</Label>
    <Label>Nine</Label>
    <Label>Ten</Label>
    <Label>Eleven</Label>
    <Label>Twelve</Label>
    <Label>Thirteen</Label>
    <Label>Fourteen</Label>
    <Label>Fifteen</Label>
    <Label>Sixteen</Label>
  </LabelGroup>
  <p>Trunacte labels based on container size</p>
  {/* The `Box` wrapper is just to demonstrate the behavior of `visibleChildCount="auto"` */}
  <Box
    sx={{
      outline: '1px solid black',
      overflow: 'auto',
      padding: '0.25rem',
      resize: 'horizontal',
      width: '600px',
    }}
  >
    <LabelGroup visibleChildCount="auto">
      <Label>One</Label>
      <Label>Two</Label>
      <Label>Three</Label>
      <Label>Four</Label>
      <Label>Five</Label>
      <Label>Six</Label>
      <Label>Seven</Label>
      <Label>Eight</Label>
      <Label>Nine</Label>
      <Label>Ten</Label>
      <Label>Eleven</Label>
      <Label>Twelve</Label>
      <Label>Thirteen</Label>
      <Label>Fourteen</Label>
      <Label>Fifteen</Label>
      <Label>Sixteen</Label>
    </LabelGroup>
  </Box>
</>

More code examples

See the LabelGroup Storybook stories

Props

LabelGroup

Name	Default	Description
overflowStyle		`'inline' \| 'overlay'` How hidden tokens should be shown. `'inline'` shows the hidden tokens after the visible tokens. `'overlay'` shows all tokens in an overlay that appears on top of the visible tokens.
visibleChildCount		`'auto' \| number` How many tokens to show. `'auto'` truncates the tokens to fit in the parent container. Passing a number will truncate after that number tokens. If this is undefined, tokens will never be truncated.
as	`ul`	`React.ElementType` Customize the element type of the rendered container.

Label
Token