digdir · oddvernes · Mar 13, 2026 · Mar 13, 2026 · Mar 13, 2026 · Mar 16, 2026
@@ -0,0 +1,5 @@
+---
+"@digdir/designsystemet-css": minor
+---
+
+**Field / Radio / Checkbox / Switch**: Now supports `data-variant="outline"` for an outlined tile look.
@@ -0,0 +1,5 @@
+---
+"@digdir/designsystemet-react": minor
+---
+
+**Field / Radio / Checkbox / Switch**: added `variant='outline' for an outlined tile look`
@@ -349,3 +349,109 @@ export const InTableEn = () => {
     </Table>
   );
 };
+
+export const Outline = () => {
+  const [value, setValue] = useState<string[]>(['epost']);
+
+  return (
+    <Fieldset>
+      <Fieldset.Legend>
+        Hvordan vil du helst at vi skal kontakte deg?
+      </Fieldset.Legend>
+      <Fieldset.Description>
+        Velg alle alternativene som er relevante for deg.
+      </Fieldset.Description>
+      <Checkbox
+        label='E-post'
+        value='epost'
+        variant='outline'
+        checked={value.includes('epost')}
+        onChange={(e) => {
+          if (e.target.checked) {
+            setValue([...value, 'epost']);
+          } else {
+            setValue(value.filter((v) => v !== 'epost'));
+          }
+        }}
+      />
+      <Checkbox
+        label='Telefon'
+        value='telefon'
+        variant='outline'
+        checked={value.includes('telefon')}
+        onChange={(e) => {
+          if (e.target.checked) {
+            setValue([...value, 'telefon']);
+          } else {
+            setValue(value.filter((v) => v !== 'telefon'));
+          }
+        }}
+      />
+      <Checkbox
+        label='SMS'
+        value='sms'
+        variant='outline'
+        checked={value.includes('sms')}
+        onChange={(e) => {
+          if (e.target.checked) {
+            setValue([...value, 'sms']);
+          } else {
+            setValue(value.filter((v) => v !== 'sms'));
+          }
+        }}
+      />
+    </Fieldset>
+  );
+};
+
+export const OutlineEn = () => {
+  const [value, setValue] = useState<string[]>(['epost']);
+
+  return (
+    <Fieldset>
+      <Fieldset.Legend>How would you prefer us to contact you?</Fieldset.Legend>
+      <Fieldset.Description>
+        Select all the options that are relevant to you.
+      </Fieldset.Description>
+      <Checkbox
+        label='E-mail'
+        value='email'
+        variant='outline'
+        checked={value.includes('email')}
+        onChange={(e) => {
+          if (e.target.checked) {
+            setValue([...value, 'email']);
+          } else {
+            setValue(value.filter((v) => v !== 'email'));
+          }
+        }}
+      />
+      <Checkbox
+        label='Phone'
+        value='phone'
+        variant='outline'
+        checked={value.includes('phone')}
+        onChange={(e) => {
+          if (e.target.checked) {
+            setValue([...value, 'phone']);
+          } else {
+            setValue(value.filter((v) => v !== 'phone'));
+          }
+        }}
+      />
+      <Checkbox
+        label='Text message'
+        value='text'
+        variant='outline'
+        checked={value.includes('text')}
+        onChange={(e) => {
+          if (e.target.checked) {
+            setValue([...value, 'text']);
+          } else {
+            setValue(value.filter((v) => v !== 'text'));
+          }
+        }}
+      />
+    </Fieldset>
+  );
+};
@@ -18,6 +18,11 @@ Use [`Fieldset`](/en/components/docs/fieldset/code) and `useCheckboxGroup` for g
 
 <Story story="GroupEn" />
 
+### Outline
+`variant="outline"` adds extra padding and a border around the selection, increasing the clickable area.
+
+<Story story="OutlineEn" />
+
 ### Indeterminate checkbox
 
 Add `allowIndeterminate: true` to `getCheckboxProps` to create a parent `Checkbox` that can select or clear all options.

@@ -27,7 +27,12 @@ A `Checkbox` for consent must always require an active action, and you should ne
 
 Most of the time, `Checkbox` is used in groups where the user can select more than one option. The `<fieldset>` around the group should have a legend that explains what the options relate to.
 
-<Story story="Group" />
+<Story story="GroupEn" />
+
+### Outline
+`variant="outline"` adds extra padding and a border around the selection, increasing the clickable area.
+
+<Story story="OutlineEn" />
 
 ### With error
 

@@ -18,6 +18,11 @@ Bruk [`Fieldset`](/no/components/docs/fieldset/code) og `useCheckboxGroup` for g
 
 <Story story="Group" />
 
+### Outline
+`variant="outline"` legger på ekstra padding og en ramme rundt valget slik at det blir en større klikkflate.
+
+<Story story="Outline" />
+
 ### Indeterminate checkbox
 
 Legg inn `allowIndeterminate: true` i `getCheckboxProps` for å opprette en overordnet `Checkbox` som kan velge eller fjerne alle alternativer.

@@ -29,6 +29,11 @@ De aller fleste ganger brukes `Checkbox` i grupper, der brukerne kan velge flere
 
 <Story story="Group" />
 
+### Outline
+`variant="outline"` legger på ekstra padding og en ramme rundt valget slik at det blir en større klikkflate.
+
+<Story story="Outline" />
+
 ### Med feil
 
 Når `Checkbox` brukes i grupper, skal feilmeldingen vises på `Fieldset`, så den blir samlet for hele gruppen.

@@ -16,6 +16,11 @@ Use [`Fieldset`](/en/components/docs/fieldset/code) around a group of radio butt
 
 <Story story="GroupEn" />
 
+### Outline
+`variant="outline"` adds extra padding and a border around the selection, increasing the clickable area.
+
+<Story story="OutlineEn" />
+
 ### With Error
 Here we must use [`Fieldset`](/en/components/docs/fieldset/code), because it activates the correct style and ensures that the content has the correct connections for accessibility.
 

@@ -18,6 +18,11 @@ Use a legend to ask the question, and include a description if additional explan
 
 <Story story="GroupEn" />
 
+### Outline
+`variant="outline"` adds extra padding and a border around the selection, increasing the clickable area.
+
+<Story story="OutlineEn" />
+
 ### With error
 
 If the user attempts to continue without answering a required question, the error message should apply to the entire group of options.

@@ -16,6 +16,11 @@ Bruk [`Fieldset`](/no/components/docs/fieldset/code) rundt en gruppe med radiokn
 
 <Story story="Group" />
 
+### Outline
+`variant="outline"` legger på ekstra padding og en ramme rundt valget slik at det blir en større klikkflate.
+
+<Story story="Outline" />
+
 ### Med feil
 Her må vi bruke [`Fieldset`](/no/components/docs/fieldset/code), fordi den aktiverer riktig stil og sørger for at innholdet har de riktige sammenkoblingene for tilgjengelighet.
 

@@ -17,6 +17,11 @@ Bruk ledetekst til å stille spørsmålet og legg eventuelt ved beskrivelse der
 
 <Story story="Group" />
 
+### Outline
+`variant="outline"` legger på ekstra padding og en ramme rundt valget slik at det blir en større klikkflate.
+
+<Story story="Outline" />
+
 ### Med feil
 Hvis brukeren prøver å gå videre uten å svare på et obligatorisk spørsmål, skal feilmeldingen gjelde for hele gruppen med alternativer.
 <Story story="WithError" />

@@ -187,3 +187,69 @@ export const InlineEn = () => {
     </Fieldset>
   );
 };
+
+export const Outline = () => {
+  return (
+    <Fieldset>
+      <Fieldset.Legend>Hvordan ønsker du at vi kontakter deg?</Fieldset.Legend>
+      <Fieldset.Description>
+        Velg metoden som passer best for deg. Vi bruker dette kun til å sende
+        viktig informasjon om saken din.
+      </Fieldset.Description>
+      <Radio
+        label='E-post'
+        variant='outline'
+        description='Vi bruker e-postadressen du har oppgitt tidligere (navn@epost.no)'
+        value='epost'
+        name='kontakt'
+      />
+      <Radio
+        label='SMS'
+        variant='outline'
+        description='Vi bruker telefonnummeret du har oppgitt tidligere (99 99 99 99)'
+        value='sms'
+        name='kontakt'
+      />
+      <Radio
+        label='Brev'
+        variant='outline'
+        description='Levering kan ta 3-5 virkedager, avhengig av posttjenesten.'
+        value='brev'
+        name='kontakt'
+      />
+    </Fieldset>
+  );
+};
+
+export const OutlineEn = () => {
+  return (
+    <Fieldset>
+      <Fieldset.Legend>How would you like us to contact you?</Fieldset.Legend>
+      <Fieldset.Description>
+        Choose the method that works best for you. We use this only to send
+        important updates about your case.
+      </Fieldset.Description>
+      <Radio
+        label='Email'
+        description='We will use the email address you provided earlier (name@example.com)'
+        value='email'
+        name='contact'
+        variant='outline'
+      />
+      <Radio
+        label='SMS'
+        description='We will use the phone number you provided earlier (99 99 99 99)'
+        value='sms'
+        name='contact'
+        variant='outline'
+      />
+      <Radio
+        label='Letter'
+        description='Delivery may take 3-5 working days, depending on the postal service.'
+        value='letter'
+        name='contact'
+        variant='outline'
+      />
+    </Fieldset>
+  );
+};
@@ -17,6 +17,11 @@ Use [Fieldset](/en/components/docs/fieldset/code) to group multiple `Switch` com
 
 <Story story="GroupEn" />
 
+### Outline
+`variant="outline"` adds extra padding and a border around the selection, increasing the clickable area.
+
+<Story story="OutlineEn" />
+
 ### Right-aligned
 Use `position="end"` to position `Switch` on the right side of the prompt if
 you need it.

@@ -20,6 +20,11 @@ Use [Fieldset](/en/components/docs/fieldset/overview) to group multiple `Switch`
 
 <Story story="GroupEn" />
 
+### Outline
+`variant="outline"` adds extra padding and a border around the selection, increasing the clickable area.
+
+<Story story="OutlineEn" />
+
 ### Right aligned
 Sometimes it can be useful to right-align a `Switch`, for example when it is placed in a table or within a fixed layout.
 

@@ -16,6 +16,11 @@ Bruk [Fieldset](/no/components/docs/fieldset/code) for å gruppere flere `Switch
 
 <Story story="Group" />
 
+### Outline
+`variant="outline"` legger på ekstra padding og en ramme rundt valget slik at det blir en større klikkflate.
+
+<Story story="Outline" />
+
 ### Høyrejustert
 Bruk `position="end"` til å plassere `Switch` på høyre side av ledeteksten hvis
 du trenger det.

@@ -20,6 +20,11 @@ Bruk [Fieldset](/no/components/docs/fieldset/overview) for å gruppere flere `Sw
 
 <Story story="Group" />
 
+### Outline
+`variant="outline"` legger på ekstra padding og en ramme rundt valget slik at det blir en større klikkflate.
+
+<Story story="Outline" />
+
 ### Høyrejustert
 Noen ganger kan det være nyttig å høyrejustere `Switch`, for eksempel når den er plassert i en tabell eller et fast oppsett.
 

@@ -126,3 +126,37 @@ export const RightAligned2En = () => (
     <Divider />
   </div>
 );
+
+export const Outline = () => {
+  return (
+    <Fieldset>
+      <Fieldset.Legend>Skru av/på lys</Fieldset.Legend>
+      <Switch variant='outline' label='Stue' checked />
+      <Switch variant='outline' label='Kjøkken' />
+      <Switch variant='outline' label='Bad' />
+      <Switch
+        label='Soverom'
+        description='Får ikke kontakt med lyspærene'
+        variant='outline'
+        readOnly
+      />
+    </Fieldset>
+  );
+};
+
+export const OutlineEn = () => {
+  return (
+    <Fieldset>
+      <Fieldset.Legend>Turn lights on/off</Fieldset.Legend>
+      <Switch variant='outline' label='Living room' checked />
+      <Switch variant='outline' label='Kitchen' />
+      <Switch variant='outline' label='Bathroom' />
+      <Switch
+        label='Bedroom'
+        description='Unable to connect to the light bulbs'
+        variant='outline'
+        readOnly
+      />
+    </Fieldset>
+  );
+};
@@ -21,8 +21,6 @@
   border-color: var(--dsc-card-border-color);
   box-sizing: border-box;
   color: var(--dsc-card-color);
-  font: inherit; /* In case used as <button> */
-  margin: 0; /* In case used as <button> */
   overflow: clip; /* Needed to clip media elements and and Card.Block */
   padding: var(--dsc-card-padding);
   text-align: inherit;
@@ -95,6 +93,11 @@
 }
 
 /* Using :where to overwrite user agent CSS, but not our own CSS */
+:where(.ds-card) {
+  font: inherit; /* In case used as <button> */
+  margin: 0; /* In case used as <button> */
+}
+
 :where(.ds-card, .ds-card__block) > :first-child {
   margin-block: 0;
 }