TagGroup

Om komponenten

Tags (også kalt Chips) brukes til å ta ett valg, eller flere. De kan også brukes for å fjerne valg, som for eksempel valg i filter.

Egnet til:

For å toggle mellom forskjellige valg
Ta flere valg
Valg i filter

Uegnet til:

Når man skal kategorisere innhold
Når man skal skille ut viktig informasjon, for eksempel "Frist for forkjøp". Da bruker du heller Badge
Bruk i skjema. Da bruker du heller RadioGroup eller CheckboxGroup

Tags kan brukes både med og uten ikon. Og de kan være enten single select, multi select eller removable. Single select er default og betyr at det kun er mulig å ta ett valg (tilsvarende RadioGroup).

<TagGroup>
  <Label>
    Velg en:
  </Label>
  <TagList className="my-2">
    <Tag id="tag1">
      Tag 1
    </Tag>
    <Tag id="tag2">
      Tag 2
    </Tag>
    <Tag id="tag3">
      Tag 3
    </Tag>
  </TagList>
</TagGroup>

Multi select betyr at det er mulig å velge flere, tilsvarende CheckboxGroup

<TagGroup
  selectionMode="multiple"
  defaultSelectedKeys={['tag1', 'tag3']}
>
  <Label>Multiple Selection</Label>

  <TagList className="my-2">
    <Tag id="tag1">Tag 1</UNSAFE_Tag>
    <Tag id="tag2">Tag 2</UNSAFE_Tag>
    <Tag id="tag3">Tag 3</UNSAFE_Tag>
  </TagList>
</TagGroup>

Forskjellen mellom Tags og Radio/Checkbox-Group er at Radio/Checkbox-Group brukes i skjema, og tags brukes ikke i skjema.

Varianter

Med ikoner

Du kan bruke ikoner i Tag-komponenten. Husk å sette textValue, slik at komponenten er universelt utformet

<div className="p-6">
      <TagGroup defaultSelectedKeys={["tag1"]}>
        <Label>Velg et sted:</Label>
        <TagList className="my-2">
          <Tag id="tag1" textValue="Bislett">
            <House /> Bislett
          </Tag>
          <Tag id="tag2" textValue="Fredensborg">
            <House /> Fredensborg
          </Tag>
          <Tag id="tag3" textValue="Majorstuen">
            <House /> Majorstuen
          </Tag>
        </TagList>
      </TagGroup>
    </div>

Med hjelpetekst

Bruk slot="description" for hjelpetekster, slik at brukeren får mer nødvendig informasjon

<div className="p-6">
      <TagGroup defaultSelectedKeys={["slot1"]}>
        <Label>Velg en tid:</Label>
        <TagList className="my-2 flex flex-wrap gap-2">
          <Tag id="slot1" textValue="11:00 - 12:00">
            <Calendar /> 11:00 - 12:00
          </Tag>
          <Tag id="slot2" textValue="13:30 - 14:30">
            <Calendar /> 13:30 - 14:30
          </Tag>
          <Tag id="slot3" textValue="16:00 - 17:00">
            <Calendar /> 16:00 - 17:00
          </Tag>
        </TagList>
        <Description slot="description">
          Velg en tid som passer for deg. Du kan kun velge én tid.
        </Description>
      </TagGroup>
    </div>

Removable

Removable betyr at du kan fjerne hver tag, og at handlingen brukeren utfører ved å trykke på taggen er å fjerne et valg. Bruk onRemove-prop i TagGroup for å definere hva som skal skje ved fjerning. I tillegg til å klikke kan brukeren slette tagger med backspace.

function () {
  const [tags, setTags] = React.useState(["Oslo", "Stavanger", "Göteborg"]);

  const handleRemove = (keys: React.Key | Set<React.Key>) => {
    // Convert to array for consistent handling
    const keysArray = keys instanceof Set ? Array.from(keys) : [keys];

    // Filter out removed tags
    setTags((currentTagState) =>
      currentTagState.filter((tag) => !keysArray.includes(tag))
    );
  };

  return (
    <div className="p-6">
      <TagGroup onRemove={handleRemove}>
        <Label>Aktive filter:</Label>
        <TagList className="my-2">
          {tags.map((tag) => (
            <Tag id={tag} key={tag}>
              {tag}
            </Tag>
          ))}
        </TagList>
      </TagGroup>
      {tags.length === 0 && (
        <p className="mt-4">All tags removed! Refresh to try again.</p>
      )}
    </div>
  );
}

Controlled

Kan brukes som kontrollert. Da håndterer du state på egen hånd

function () {
const [selectedKeys, setSelectedKeys] = React.useState<Selection>(
    new Set(["tag1"])
  );

  return (
    <div className="p-6">
      <TagGroup
        selectedKeys={selectedKeys}
        onSelectionChange={setSelectedKeys}
        selectionMode="multiple"
      >
        <Label>Velg flere:</Label>
        <TagList className="my-2">
          <Tag id="tag1">Tag 1</UNSAFE_Tag>
          <Tag id="tag2">Tag 2</UNSAFE_Tag>
          <Tag id="tag3">Tag 3</UNSAFE_Tag>
        </TagList>
      </TagGroup>
      <div className="mt-4">
        Selected: {Array.from(selectedKeys).join(", ")}
      </div>
    </div>
  );
}

Props

Prop	Description	Default
`children?`		-
`disabledKeys?`	The item keys that are disabled. These items cannot be selected, focused, or otherwise interacted with.	-
`disallowEmptySelection?`	Whether the collection allows empty selection.	-
`selectionMode?`	The type of selection that is allowed in the collection.	-
`escapeKeyBehavior?`	Whether pressing the escape key should clear selection in the TagGroup or not. Most experiences should not modify this option as it eliminates a keyboard user's ability to easily clear selection. Only use if the escape key is being handled externally or should not trigger selection clearing contextually.	'clearSelection'
`shouldSelectOnPressUp?`	Whether selection should occur on press up instead of press down.	-
`selectedKeys?`	The currently selected keys in the collection (controlled).	-
`defaultSelectedKeys?`	The initial selected keys in the collection (uncontrolled).	-
`selectionBehavior?`	How multiple selection should behave in the collection.	-
Events
`onSelectionChange?`	Handler that is called when the selection changes.	-
`onRemove?`	Handler that is called when a user deletes a tag. The function to call when the tag is removed	-
Styles
`style?`		-
`className?`	CSS classes to apply to the tag group	-
Accessibility
`id?`		-
`aria-describedby?`		-
`aria-details?`		-
`aria-label?`		-
`aria-labelledby?`		-

Prop	Description	Default
`children?`		-
`items?`	Item objects in the collection.	-
`dependencies?`		-
`renderEmptyState?`		-
Styles
`style?`		-
`className?`	CSS classes to apply to the tag list	-

Tag

Prop	Description	Default
`children?`		-
`id?`		-
`isDisabled?`		-
`textValue?`		-
Events
`onClick?`	Not recommended – use `onPress` instead. `onClick` is an alias for `onPress` provided for compatibility with other libraries. `onPress` provides additional event details for non-mouse interactions.	-
`onPress?`	Handler that is called when the press is released over the target.	-
`onPressStart?`	Handler that is called when a press interaction starts.	-
`onPressEnd?`	Handler that is called when a press interaction ends, either over the target or when the pointer leaves the target.	-
`onPressChange?`	Handler that is called when the press state changes.	-
`onPressUp?`	Handler that is called when a press is released over the target, regardless of whether it started on the target or not.	-
`onHoverStart?`	Handler that is called when a hover interaction starts.	-
`onHoverEnd?`	Handler that is called when a hover interaction ends.	-
`onHoverChange?`	Handler that is called when the hover state changes.	-
Links
`referrerPolicy?`		-
`rel?`		-
`href?`		-
`target?`		-
`hrefLang?`		-
`download?`		-
`ping?`		-
`routerOptions?`		-
Styles
`style?`		-
`className?`	CSS classes to apply to the tag	-