Skip to content

fix: allow passing props shared by all checkboxes / radios to use...Group hook #4864

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
unekinn wants to merge 5 commits into
base: main
Choose a base branch
from
Open

fix: allow passing props shared by all checkboxes / radios to use...Group hook #4864

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
cea8490
fix(useCheckboxGroup): allow passing props shared by all checkboxes to
unekinn May 7, 2026
edd689d
fix(useRadioGroup): allow passing props shared by all radios to
unekinn May 8, 2026
af9d762
Add changeset
unekinn May 8, 2026
0bdf684
fix checkbox Disabled story extending the wrong base story, which now
unekinn May 8, 2026
8450f94
Align function signature for useRadioGroup with useCheckboxGroup
unekinn May 8, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions .changeset/fuzzy-zoos-rhyme.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"@digdir/designsystemet-react": patch
---

**useCheckboxGroup** and **useRadioGroup**: these hooks now accept all `CheckboxProps` / `RadioProps` that don't conflict with the hooks' own props. This can be used to easily set common props like `variant` for all the checkboxes or radios in the group.
180 changes: 26 additions & 154 deletions apps/www/app/content/components/checkbox/checkbox.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,9 @@ export const OneOption = () => (
);

export const Group = () => {
const [value, setValue] = useState<string[]>(['epost']);
const { getCheckboxProps } = useCheckboxGroup({
value: ['epost'],
});

return (
<Fieldset>
Expand All @@ -35,91 +37,27 @@ export const Group = () => {
<Fieldset.Description>
Velg alle alternativene som er relevante for deg.
</Fieldset.Description>
<Checkbox
label='E-post'
value='epost'
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'
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'
checked={value.includes('sms')}
onChange={(e) => {
if (e.target.checked) {
setValue([...value, 'sms']);
} else {
setValue(value.filter((v) => v !== 'sms'));
}
}}
/>
<Checkbox label='E-post' {...getCheckboxProps('epost')} />
<Checkbox label='Telefon' {...getCheckboxProps('telefon')} />
<Checkbox label='SMS' {...getCheckboxProps('sms')} />
</Fieldset>
);
};

export const GroupEn = () => {
const [value, setValue] = useState<string[]>(['epost']);
const { getCheckboxProps } = useCheckboxGroup({
value: ['email'],
});

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'
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'
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'
checked={value.includes('text')}
onChange={(e) => {
if (e.target.checked) {
setValue([...value, 'text']);
} else {
setValue(value.filter((v) => v !== 'text'));
}
}}
/>
<Checkbox label='E-mail' {...getCheckboxProps('email')} />
<Checkbox label='Phone' {...getCheckboxProps('phone')} />
<Checkbox label='Text message' {...getCheckboxProps('text')} />
</Fieldset>
);
};
Expand Down Expand Up @@ -351,7 +289,10 @@ export const InTableEn = () => {
};

export const Outline = () => {
const [value, setValue] = useState<string[]>(['epost']);
const { getCheckboxProps } = useCheckboxGroup({
value: ['epost'],
variant: 'outline',
});

return (
<Fieldset>
Expand All @@ -361,97 +302,28 @@ export const Outline = () => {
<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'));
}
}}
/>
<Checkbox label='E-post' {...getCheckboxProps('epost')} />
<Checkbox label='Telefon' {...getCheckboxProps('telefon')} />
<Checkbox label='SMS' {...getCheckboxProps('sms')} />
</Fieldset>
);
};

export const OutlineEn = () => {
const [value, setValue] = useState<string[]>(['epost']);
const { getCheckboxProps } = useCheckboxGroup({
value: ['email'],
variant: 'outline',
});

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'));
}
}}
/>
<Checkbox label='E-mail' {...getCheckboxProps('email')} />
<Checkbox label='Phone' {...getCheckboxProps('phone')} />
<Checkbox label='Text message' {...getCheckboxProps('text')} />
</Fieldset>
);
};
65 changes: 35 additions & 30 deletions apps/www/app/content/components/radio/radio.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import {
Fieldset,
Radio,
useRadioGroup,
ValidationMessage,
} from '@digdir/designsystemet-react';

Expand All @@ -9,6 +10,11 @@ export const Preview = () => {
};

export const Group = () => {
const { getRadioProps } = useRadioGroup({
name: 'kontakt',
value: 'epost',
});

return (
<Fieldset>
<Fieldset.Legend>Hvordan ønsker du at vi kontakter deg?</Fieldset.Legend>
Expand All @@ -19,26 +25,28 @@ export const Group = () => {
<Radio
label='E-post'
description='Vi bruker e-postadressen du har oppgitt tidligere (navn@epost.no)'
value='epost'
name='kontakt'
{...getRadioProps('epost')}
/>
<Radio
label='SMS'
description='Vi bruker telefonnummeret du har oppgitt tidligere (99 99 99 99)'
value='sms'
name='kontakt'
{...getRadioProps('sms')}
/>
<Radio
label='Brev'
description='Levering kan ta 3-5 virkedager, avhengig av posttjenesten.'
value='brev'
name='kontakt'
{...getRadioProps('brev')}
/>
</Fieldset>
);
};

export const GroupEn = () => {
const { getRadioProps } = useRadioGroup({
name: 'contact',
value: 'email',
});

return (
<Fieldset>
<Fieldset.Legend>How would you like us to contact you?</Fieldset.Legend>
Expand All @@ -49,20 +57,17 @@ export const GroupEn = () => {
<Radio
label='Email'
description='We will use the email address you provided earlier (name@example.com)'
value='email'
name='contact'
{...getRadioProps('email')}
/>
<Radio
label='SMS'
description='We will use the phone number you provided earlier (99 99 99 99)'
value='sms'
name='contact'
{...getRadioProps('sms')}
/>
<Radio
label='Letter'
description='Delivery may take 3-5 working days, depending on the postal service.'
value='letter'
name='contact'
{...getRadioProps('letter')}
/>
</Fieldset>
);
Expand Down Expand Up @@ -189,6 +194,12 @@ export const InlineEn = () => {
};

export const Outline = () => {
const { getRadioProps } = useRadioGroup({
name: 'kontakt',
value: 'epost',
variant: 'outline',
});

return (
<Fieldset>
<Fieldset.Legend>Hvordan ønsker du at vi kontakter deg?</Fieldset.Legend>
Expand All @@ -198,30 +209,30 @@ export const Outline = () => {
</Fieldset.Description>
<Radio
label='E-post'
variant='outline'
description='Vi bruker e-postadressen du har oppgitt tidligere (navn@epost.no)'
value='epost'
name='kontakt'
{...getRadioProps('epost')}
/>
<Radio
label='SMS'
variant='outline'
description='Vi bruker telefonnummeret du har oppgitt tidligere (99 99 99 99)'
value='sms'
name='kontakt'
{...getRadioProps('sms')}
/>
<Radio
label='Brev'
variant='outline'
description='Levering kan ta 3-5 virkedager, avhengig av posttjenesten.'
value='brev'
name='kontakt'
{...getRadioProps('brev')}
/>
</Fieldset>
);
};

export const OutlineEn = () => {
const { getRadioProps } = useRadioGroup({
name: 'contact',
value: 'email',
variant: 'outline',
});

return (
<Fieldset>
<Fieldset.Legend>How would you like us to contact you?</Fieldset.Legend>
Expand All @@ -232,23 +243,17 @@ export const OutlineEn = () => {
<Radio
label='Email'
description='We will use the email address you provided earlier (name@example.com)'
value='email'
name='contact'
variant='outline'
{...getRadioProps('email')}
/>
<Radio
label='SMS'
description='We will use the phone number you provided earlier (99 99 99 99)'
value='sms'
name='contact'
variant='outline'
{...getRadioProps('sms')}
/>
<Radio
label='Letter'
description='Delivery may take 3-5 working days, depending on the postal service.'
value='letter'
name='contact'
variant='outline'
{...getRadioProps('letter')}
/>
</Fieldset>
);
Expand Down
Loading
Loading