TagGroup

GitHub Figma

Denne komponenten er under aktiv utvikling, og vi trenger din feedback!

Er du eventyrlysten, test den og kom med innspill til oss på Slack.

Om komponenten

Tags brukes til å ta ett valg, eller flere. De kan også brukes for å fjerne valg (som f.eks. 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" (bruk heller Badge til dette)
Skjema, bruk 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).

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

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

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

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

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

Eksempler

Med ikoner

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

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

Med hjelpetekst

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

<div className="p-6">
      <UNSAFE_TagGroup defaultSelectedKeys={["slot1"]}>
        <Label>Velg en tid:</Label>
        <UNSAFE_TagList className="my-2 flex flex-wrap gap-2">
          <UNSAFE_Tag id="slot1" textValue="11:00 - 12:00">
            <Calendar /> 11:00 - 12:00
          </UNSAFE_Tag>
          <UNSAFE_Tag id="slot2" textValue="13:30 - 14:30">
            <Calendar /> 13:30 - 14:30
          </UNSAFE_Tag>
          <UNSAFE_Tag id="slot3" textValue="16:00 - 17:00">
            <Calendar /> 16:00 - 17:00
          </UNSAFE_Tag>
        </UNSAFE_TagList>
        <Description slot="description">
          Velg en tid som passer for deg. Du kan kun velge én tid.
        </Description>
      </UNSAFE_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">
      <UNSAFE_TagGroup onRemove={handleRemove}>
        <Label>Aktive filter:</Label>
        <UNSAFE_TagList className="my-2">
          {tags.map((tag) => (
            <UNSAFE_Tag id={tag} key={tag}>
              {tag}
            </UNSAFE_Tag>
          ))}
        </UNSAFE_TagList>
      </UNSAFE_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">
      <UNSAFE_TagGroup
        selectedKeys={selectedKeys}
        onSelectionChange={setSelectedKeys}
        selectionMode="multiple"
      >
        <Label>Velg flere:</Label>
        <UNSAFE_TagList className="my-2">
          <UNSAFE_Tag id="tag1">Tag 1</UNSAFE_Tag>
          <UNSAFE_Tag id="tag2">Tag 2</UNSAFE_Tag>
          <UNSAFE_Tag id="tag3">Tag 3</UNSAFE_Tag>
        </UNSAFE_TagList>
      </UNSAFE_TagGroup>
      <div className="mt-4">
        Selected: {Array.from(selectedKeys).join(", ")}
      </div>
    </div>
  );
}

Props

Tag

Prop	Description	Default
`children?`	The children of the component. A function may be provided to alter the children based on component state.	-
`style?`	The inline [style](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style) for the element. A function may be provided to compute the style based on component state.	-
`href?`	A URL to link to. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#href).	-
`target?`	The target window for the link. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#target).	-
`rel?`	The relationship between the linked resource and the current page. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/rel).	-
`isDisabled?`	Whether the tag is disabled.	-
`id?`	A unique id for the tag.	-
`hrefLang?`	Hints at the human language of the linked URL. See[MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#hreflang).	-
`download?`	Causes the browser to download the linked URL. A string may be provided to suggest a file name. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#download).	-
`ping?`	A space-separated list of URLs to ping when the link is followed. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#ping).	-
`referrerPolicy?`	How much of the referrer to send when following the link. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#referrerpolicy).	-
`routerOptions?`	Options for the configured client side router.	-
`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.	-
`textValue?`	A string representation of the tags's contents, used for accessibility. Required if children is not a plain text string.	-
`ref?`	Allows getting a ref to the component instance. Once the component unmounts, React will set `ref.current` to `null` (or call the ref with `null` if you passed a callback ref). @see {@link https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom React Docs}	-
`key?`		-
`className?`	CSS classes to apply to the tag	-

Prop	Description	Default
`children?`	The contents of the collection.	-
`style?`	The inline [style](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style) for the element. A function may be provided to compute the style based on component state.	-
`items?`	Item objects in the collection.	-
`dependencies?`	Values that should invalidate the item cache when using dynamic collections.	-
`renderEmptyState?`	Provides content to display when there are no items in the tag list.	-
`ref?`	Allows getting a ref to the component instance. Once the component unmounts, React will set `ref.current` to `null` (or call the ref with `null` if you passed a callback ref). @see {@link https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom React Docs}	-
`key?`		-
`className?`	CSS classes to apply to the tag list	-

Prop	Description	Default
`children?`	The children of the component.	-
`style?`	The inline [style](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style) for the element.	-
`id?`	The element's unique identifier. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id).	-
`aria-label?`	Defines a string value that labels the current element.	-
`aria-labelledby?`	Identifies the element (or elements) that labels the current element.	-
`aria-describedby?`	Identifies the element (or elements) that describes the object.	-
`aria-details?`	Identifies the element (or elements) that provide a detailed, extended description for the object.	-
`slot?`	A slot name for the component. Slots allow the component to receive props from a parent component. An explicit `null` value indicates that the local props completely override all props received from a parent.	-
`disallowEmptySelection?`	Whether the collection allows empty selection.	-
`onSelectionChange?`	Handler that is called when the selection changes.	-
`disabledKeys?`	The item keys that are disabled. These items cannot be selected, focused, or otherwise interacted with.	-
`selectionBehavior?`	How multiple selection should behave in the collection.	-
`onRemove?`	Handler that is called when a user deletes a tag. The function to call when the tag is removed	-
`selectionMode?`	The type of selection that is allowed in the collection. The selection mode for the tag group	"single"
`selectedKeys?`	The currently selected keys in the collection (controlled).	-
`defaultSelectedKeys?`	The initial selected keys in the collection (uncontrolled).	-
`ref?`	Allows getting a ref to the component instance. Once the component unmounts, React will set `ref.current` to `null` (or call the ref with `null` if you passed a callback ref). @see {@link https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom React Docs}	-
`key?`		-
`className?`	CSS classes to apply to the tag group	-