digdir · eirikbacker · Mar 26, 2026 · Mar 26, 2026 · Mar 26, 2026 · Mar 27, 2026
@@ -0,0 +1,5 @@
+---
+"@digdir/designsystemet-web": patch
+---
+
+**All components:** Renders instantly for easier test setup
@@ -56,7 +56,7 @@ export const ColorPreview = () => {
         <div className='panelBottom'>
           <div className={classes.label}>{t('colorPreview.view')}</div>
           <ToggleGroup
-            data-toggle-group='Visning'
+            aria-label='Visning'
             data-size='sm'
             defaultValue={DEFAULT_VIEW}
             onChange={(value: string) => setView(value as ViewType)}

@@ -36,7 +36,7 @@ export const Previews = () => {
     <>
       <div className={classes.toolbar} data-size='sm'>
         <ToggleGroup
-          data-toggle-group='Tema'
+          aria-label='Tema'
           value={theme as string}
           onChange={(v) => setTheme(v as keyof typeof themes)}
         >
@@ -48,7 +48,7 @@ export const Previews = () => {
           </ToggleGroup.Item>
         </ToggleGroup>
         <ToggleGroup
-          data-toggle-group='Modus'
+          aria-label='Modus'
           value={colorScheme}
           onChange={(v) => setColorScheme(v as ColorScheme)}
         >

@@ -184,7 +184,7 @@ const Editor = ({ live, html, id, hidden, language }: EditorProps) => {
       </ds.Paragraph>
       <ds.ToggleGroup
         variant='secondary'
-        data-toggle-group={t('live-component.language')}
+        aria-label={t('live-component.language')}
         data-size='sm'
         value={showHTML.toString()}
         onChange={(v) => setShowHTML(v === 'true')}

@@ -35,7 +35,7 @@ Please check all tests and console to look for errors or unexpected behavior.
 `ToggleGroup` still uses `ToggleGroup.Item` in React, but now internally does not create `<button>` anymore.
 The new structure is:
 ```html
-<fieldset class="ds-toggle-group" data-toggle-group="Text alignment">
+<fieldset class="ds-toggle-group" aria-label="Text alignment">
   <label>
     <input type="radio" name="alignment-two" value="left" checked />
     Left aligned

@@ -29,7 +29,6 @@ Much of Designsystemet is already solved with pure web-standard HTML and CSS, wh
 - `<ds-pagination>` - used by [Pagination](/en/components/docs/pagination/code#html)
 - `<ds-suggestion>` - used by [Suggestion](/en/components/docs/suggestion/code#html)
 - `<ds-tabs>` - used by [Tabs](/en/components/docs/tabs/code#html)
-- `data-toggle-group` - used by [ToggleGroup](/en/components/docs/toggle-group/code#html)
 - `data-tooltip` - used by [Tooltip](/en/components/docs/tooltip/code#html)
 - `data-clickdelegatefor` - used by [Table](/en/components/docs/table/code#clickable-row) and [Card](/en/components/docs/card/code#link-card-with-data-attribute)
 - `popover` - used by [Popover](/en/components/docs/popover/code#html), [Dropdown](/en/components/docs/dropdown/code#html)

@@ -36,7 +36,7 @@ Gjerne sjekk alt av tester og konsoll for å sjå etter feil eller uventa oppfø
 `ToggleGroup` brukar fortsatt `ToggleGroup.Item` i React, men lagar no internt ikkje`<button>` lengre.
 Den nye strukturen er:
 ```html
-<fieldset class="ds-toggle-group" data-toggle-group="Tekstjustering">
+<fieldset class="ds-toggle-group" aria-label="Tekstjustering">
   <label>
     <input type="radio" name="alignment-two" value="left" checked />
     Venstestilt

@@ -29,7 +29,6 @@ Mye av Designsystemet løses allerede med ren web-standard HTML og CSS, mens and
 - `<ds-pagination>` - brukes av [Pagination](/no/components/docs/pagination/code#html)
 - `<ds-suggestion>` - brukes av [Suggestion](/no/components/docs/suggestion/code#html)
 - `<ds-tabs>` - brukes av [Tabs](/no/components/docs/tabs/code#html)
-- `data-toggle-group` - brukes av [ToggleGroup](/no/components/docs/toggle-group/code#html)
 - `data-tooltip` - brukes av [Tooltip](/no/components/docs/tooltip/code#html)
 - `data-clickdelegatefor` - brukes av [Table](/no/components/docs/table/code#klikkbar-rad) og [Card](/no/components/docs/card/code#lenkekort-med-data-attributt)
 - `popover` - brukes av [Popover](/no/components/docs/popover/code#html), [Dropdown](/no/components/docs/dropdown/code#html)

@@ -6,7 +6,7 @@
 ```tsx
 import { ToggleGroup } from '@digdir/designsystemet-react';
 
-<ToggleGroup data-toggle-group='Options' defaultValue="option1">
+<ToggleGroup aria-label='Options' defaultValue="option1">
 <ToggleGroup.Item value="option1">Option 1</ToggleGroup.Item>
 <ToggleGroup.Item value="option2">Option 2</ToggleGroup.Item>
 </ToggleGroup>
@@ -29,10 +29,10 @@ Use [`Tooltip`](/en/components/docs/tooltip/code) to explain the actions when us
 <Story story="SecondaryEn" />
 
 ## HTML
-If you are using `@digdir/designsystemet-web`, you can implement `ToggleGroup` by using the `data-toggle-group` attribute.
+If you are using `@digdir/designsystemet-web`, you can implement `ToggleGroup` by using the `aria-label` attribute.
 
 ```html
-<fieldset class="ds-toggle-group" data-toggle-group="Text alignment" data-variant="secondary">
+<fieldset class="ds-toggle-group" aria-label="Text alignment" data-variant="secondary">
   <label>
     <input type="radio" name="alignment-two" value="left" checked />
     Leftadjusted

@@ -6,7 +6,7 @@
 ```tsx
 import { ToggleGroup } from '@digdir/designsystemet-react';
 
-<ToggleGroup data-toggle-group='Alternativer' defaultValue="option1">
+<ToggleGroup aria-label='Alternativer' defaultValue="option1">
   <ToggleGroup.Item value="option1">Alternativ 1</ToggleGroup.Item>
   <ToggleGroup.Item value="option2">Alternativ 2</ToggleGroup.Item>
 </ToggleGroup>
@@ -28,10 +28,10 @@ Bruk [`Tooltip`](/no/components/docs/tooltip/code) for å forklare handlingane n
 <Story story="Secondary" />
 
 ## HTML
-Bruker du `@digdir/designsystemet-web` kan du implementere `ToggleGroup` ved å bruke `data-toggle-group`-attributtet.
+Bruker du `@digdir/designsystemet-web` kan du implementere `ToggleGroup` ved å bruke `aria-label`-attributtet.
 
 ```html
-<fieldset class="ds-toggle-group" data-toggle-group="Tekstjustering" data-variant="secondary">
+<fieldset class="ds-toggle-group" aria-label="Tekstjustering" data-variant="secondary">
   <label>
     <input type="radio" name="alignment-two" value="left" checked />
     Venstestilt

@@ -18,7 +18,7 @@ import { useState } from 'react';
 
 export const Preview = () => {
   return (
-    <ToggleGroup data-toggle-group='Filter' defaultValue='innboks'>
+    <ToggleGroup aria-label='Filter' defaultValue='innboks'>
       <ToggleGroup.Item value='innboks'>Innboks</ToggleGroup.Item>
       <ToggleGroup.Item value='utkast'>Utkast</ToggleGroup.Item>
       <ToggleGroup.Item value='arkiv'>Arkiv</ToggleGroup.Item>
@@ -29,7 +29,7 @@ export const Preview = () => {
 
 export const PreviewEn = () => {
   return (
-    <ToggleGroup data-toggle-group='Filter' defaultValue='inbox'>
+    <ToggleGroup aria-label='Filter' defaultValue='inbox'>
       <ToggleGroup.Item value='inbox'>Inbox</ToggleGroup.Item>
       <ToggleGroup.Item value='drafts'>Drafts</ToggleGroup.Item>
       <ToggleGroup.Item value='archive'>Archive</ToggleGroup.Item>
@@ -40,7 +40,7 @@ export const PreviewEn = () => {
 
 export const OnlyIcons = () => {
   return (
-    <ToggleGroup data-toggle-group='Tekstjustering' defaultValue='option-1'>
+    <ToggleGroup aria-label='Tekstjustering' defaultValue='option-1'>
       <Tooltip content='Venstrestilt'>
         <ToggleGroup.Item value='option-1'>
           <AlignLeftIcon aria-hidden />
@@ -62,7 +62,7 @@ export const OnlyIcons = () => {
 
 export const OnlyIconsEn = () => {
   return (
-    <ToggleGroup data-toggle-group='Textalignment' defaultValue='option-1'>
+    <ToggleGroup aria-label='Textalignment' defaultValue='option-1'>
       <Tooltip content='Left aligned'>
         <ToggleGroup.Item value='option-1'>
           <AlignLeftIcon aria-hidden />
@@ -86,7 +86,7 @@ export const Controlled = () => {
   const [value, setValue] = useState<string>('utkast');
   return (
     <>
-      <ToggleGroup data-toggle-group='Filter' value={value} onChange={setValue}>
+      <ToggleGroup aria-label='Filter' value={value} onChange={setValue}>
         <ToggleGroup.Item value='innboks'>
           <EnvelopeClosedIcon aria-hidden />
           Innboks
@@ -117,7 +117,7 @@ export const ControlledEn = () => {
   const [value, setValue] = useState<string>('drafts');
   return (
     <>
-      <ToggleGroup data-toggle-group='Filter' value={value} onChange={setValue}>
+      <ToggleGroup aria-label='Filter' value={value} onChange={setValue}>
         <ToggleGroup.Item value='inbox'>
           <EnvelopeClosedIcon aria-hidden />
           Inbox
@@ -146,11 +146,7 @@ export const ControlledEn = () => {
 
 export const Secondary = () => {
   return (
-    <ToggleGroup
-      data-toggle-group='Filter'
-      defaultValue='innboks'
-      variant='secondary'
-    >
+    <ToggleGroup aria-label='Filter' defaultValue='innboks' variant='secondary'>
       <ToggleGroup.Item value='innboks'>Innboks</ToggleGroup.Item>
       <ToggleGroup.Item value='utkast'>Utkast</ToggleGroup.Item>
       <ToggleGroup.Item value='arkiv'>Arkiv</ToggleGroup.Item>
@@ -161,11 +157,7 @@ export const Secondary = () => {
 
 export const SecondaryEn = () => {
   return (
-    <ToggleGroup
-      data-toggle-group='Filter'
-      defaultValue='inbox'
-      variant='secondary'
-    >
+    <ToggleGroup aria-label='Filter' defaultValue='inbox' variant='secondary'>
       <ToggleGroup.Item value='inbox'>Inbox</ToggleGroup.Item>
       <ToggleGroup.Item value='drafts'>Drafts</ToggleGroup.Item>
       <ToggleGroup.Item value='archive'>Archive</ToggleGroup.Item>

@@ -36,12 +36,12 @@
    * Ensure proper spacing if there is svg or img and span.
    */
   &:has(> span):has(> :is(img, svg)) {
-    &:first-child {
-      margin-inline-start: var(--ds-size-1);
-    }
-    &:last-child {
+    & > :first-child {
       margin-inline-end: var(--ds-size-1);
     }
+    & > :last-child {
+      margin-inline-start: var(--ds-size-1);
+    }
   }
 
   /* What do we do here? */

@@ -8,8 +8,7 @@
   --dsc-togglegroup-spacing: 0;
   --dsc-togglegroup-border-radius: var(--ds-border-radius-default);
   --dsc-togglegroup-button-size: var(--ds-size-12);
-  --dsc-togglegroup-label: '';
-  --_ds-data-toggle-group: var(--dsc-togglegroup-label); /* "proxy" so attrOrCSS works even if changing --ds- prefix */
+  --_ds-toggle-group: 1; /* Used in JS, and works even if changing --ds- prefix */
 
   background: var(--dsc-togglegroup-background);
   border-radius: var(--dsc-togglegroup-border-radius);

@@ -1,18 +1,13 @@
-import { Slot } from '@radix-ui/react-slot';
-import { type AriaAttributes, forwardRef, type HTMLAttributes } from 'react';
+import { type AriaAttributes, forwardRef } from 'react';
+import { Button, type ButtonProps } from '../button/button';
 
 export type PaginationButtonProps = {
   /**
    * Toggle button as active
    * @default false
    */
   'aria-current'?: AriaAttributes['aria-current'];
-  /**
-   * Change the default rendered element for the one passed as a child, merging their props and behavior.
-   * @default false
-   */
-  asChild?: boolean;
-} & HTMLAttributes<HTMLButtonElement>;
+} & Omit<ButtonProps, 'icon' | 'loading'>;
 
 /**
  * PaginationButton component, use within a Pagination.Item.
@@ -25,16 +20,6 @@ export type PaginationButtonProps = {
 export const PaginationButton = forwardRef<
   HTMLButtonElement,
   PaginationButtonProps
->(function PaginationButton({ asChild, ...rest }, ref) {
-  const Component = asChild ? Slot : 'button';
-
-  return (
-    <Component
-      className='ds-button'
-      data-variant='tertiary'
-      suppressHydrationWarning // Since <ds-pagination> adds attributes
-      ref={ref}
-      {...rest}
-    />
-  );
+>(function PaginationButton(rest, ref) {
+  return <Button data-variant='tertiary' ref={ref} {...rest} />;
 });
@@ -58,11 +58,12 @@ export const SuggestionList = forwardRef<
   return (
     <u-datalist
       class={className} // Using "class" since React does not translate className on custom elements
-      popover='manual' // Is also set by field.ts, but is nice to have in case focus runs before toggle event
       data-nofilter
       data-sr-plural={plural}
       data-sr-singular={singular}
+      popover='manual'
       ref={ref}
+      role='listbox' // Is also set by <ds-suggestion> but nice to have to please tests
       suppressHydrationWarning // Since <u-datalist> adds attributes
       {...rest}
     />

@@ -14,7 +14,7 @@ type ToggleGroup = typeof ToggleGroupParent & {
  * Display a group of buttons that can be toggled between.
  *
  * @example
- * <ToggleGroup data-toggle-group="Label" onChange={(value) => console.log(value)}>
+ * <ToggleGroup aria-label="Label" onChange={(value) => console.log(value)}>
  *   <ToggleGroup.Item value='1'>Toggle 1</ToggleGroup.Item>
  *   <ToggleGroup.Item value='2'>Toggle 2</ToggleGroup.Item>
  *   <ToggleGroup.Item value='3'>Toggle 3</ToggleGroup.Item>

@@ -51,31 +51,18 @@ export const ToggleGroupItem = forwardRef<
   const active = toggleGroup.value === value;
 
   const {
+    'aria-disabled': ariaDisabled,
+    disabled,
     form,
     formAction,
     formEncType,
     formMethod,
     formNoValidate,
     formTarget,
     required,
-    disabled,
-    'aria-disabled': ariaDisabled,
     ...labelProps
   } = rest;
 
-  /** Add backwards compatibility for `button` props that were previously allowed on `ToggleGroupItem` but are passeable to `input`*/
-  const inputProps: InputHTMLAttributes<HTMLInputElement> = {
-    form,
-    formAction,
-    formEncType,
-    formMethod,
-    formNoValidate,
-    formTarget,
-    required,
-    disabled,
-    'aria-disabled': ariaDisabled,
-  };
-
   return (
     <label
       ref={ref}
@@ -85,14 +72,20 @@ export const ToggleGroupItem = forwardRef<
       aria-disabled={ariaDisabled ?? disabled}
     >
       <input
-        {...inputProps}
+        aria-disabled={ariaDisabled}
         checked={active}
+        disabled={disabled}
+        form={form}
+        formAction={formAction}
+        formEncType={formEncType}
+        formMethod={formMethod}
+        formNoValidate={formNoValidate}
+        formTarget={formTarget}
         name={toggleGroup.name}
         onChange={() => toggleGroup.onChange?.(value)}
+        required={required}
         type='radio'
         value={value}
-        disabled={disabled}
-        aria-disabled={ariaDisabled}
       />
       {children}
     </label>