diff --git a/packages/ffe-form-react/src/BaseRadioButton.spec.tsx b/packages/ffe-form-react/src/BaseRadioButton.spec.tsx
index d3bc919a18..93372bda55 100644
--- a/packages/ffe-form-react/src/BaseRadioButton.spec.tsx
+++ b/packages/ffe-form-react/src/BaseRadioButton.spec.tsx
@@ -51,18 +51,6 @@ describe('', () => {
expect(radio).not.toBeChecked();
});
- it('accepts boolean values and checks the input if it is selected', () => {
- renderBaseRadioButton({ selectedValue: true, value: true });
- const radio = screen.getByRole('radio');
- expect(radio).toBeChecked();
- });
-
- it('accepts boolean values and does not check the input if it is not selected', () => {
- renderBaseRadioButton({ selectedValue: 'false', value: true });
- const radio = screen.getByRole('radio');
- expect(radio).not.toBeChecked();
- });
-
describe('id', () => {
it('is unique across instances', () => {
renderBaseRadioButton();
diff --git a/packages/ffe-form-react/src/BaseRadioButton.tsx b/packages/ffe-form-react/src/BaseRadioButton.tsx
index dac3eeda1f..d7298bdfa2 100644
--- a/packages/ffe-form-react/src/BaseRadioButton.tsx
+++ b/packages/ffe-form-react/src/BaseRadioButton.tsx
@@ -1,15 +1,16 @@
import React, { useId } from 'react';
import classNames from 'classnames';
import { Tooltip, TooltipProps } from './Tooltip';
+import { SelectedRadioValue } from './types';
export interface BaseRadioButtonProps
extends Omit, 'value'> {
/** Additional props passed to the label element */
labelProps?: React.ComponentProps<'label'>;
/** The selected value of the radio button set */
- selectedValue?: boolean | string | number | null;
+ selectedValue?: SelectedRadioValue;
/** The value of the radio button */
- value: boolean | string | number;
+ value: string;
/** Tooltip providing further detail about the choice */
tooltip?: string;
tooltipProps?: TooltipProps;
diff --git a/packages/ffe-form-react/src/RadioBlock.tsx b/packages/ffe-form-react/src/RadioBlock.tsx
index 3194fdb246..6dbe4fbdac 100644
--- a/packages/ffe-form-react/src/RadioBlock.tsx
+++ b/packages/ffe-form-react/src/RadioBlock.tsx
@@ -1,9 +1,10 @@
import React, { useId } from 'react';
import classNames from 'classnames';
+import { SelectedRadioValue } from './types';
export interface RadioBlockProps
extends React.ComponentPropsWithoutRef<'input'> {
- /** Whether or not the radio block is selected */
+ /** Whether the radio block is selected */
checked?: boolean;
/** The always visible label of the radio block */
label: React.ReactNode;
@@ -12,8 +13,8 @@ export interface RadioBlockProps
/** The name of the radio button set */
name: string;
/** The selected value of the radio button set */
- selectedValue?: string | null;
- /** Whether or not children are always visible */
+ selectedValue?: SelectedRadioValue;
+ /** Whether children are always visible */
showChildren?: boolean;
/** The value of the radio block */
value: string;
diff --git a/packages/ffe-form-react/src/RadioButtonInputGroup.tsx b/packages/ffe-form-react/src/RadioButtonInputGroup.tsx
index deefebc57a..0045ed88e2 100644
--- a/packages/ffe-form-react/src/RadioButtonInputGroup.tsx
+++ b/packages/ffe-form-react/src/RadioButtonInputGroup.tsx
@@ -2,6 +2,7 @@ import React, { useId } from 'react';
import classNames from 'classnames';
import { ErrorFieldMessage } from './message';
import { Tooltip } from './Tooltip';
+import { SelectedRadioValue } from './types';
export interface RadioButtonInputGroupProps
extends Omit<
@@ -17,7 +18,7 @@ export interface RadioButtonInputGroupProps
inline?: boolean;
name: string;
onChange: React.ChangeEventHandler;
- selectedValue?: boolean | string | number | null;
+ selectedValue?: SelectedRadioValue;
onColoredBg?: boolean;
}) => React.ReactNode;
/** Additional class names applied to the fieldset */
@@ -50,7 +51,7 @@ export interface RadioButtonInputGroupProps
/** Change handler, receives value of selected radio button */
onChange?: React.ChangeEventHandler;
/** The currently selected value */
- selectedValue?: string | boolean | number | null;
+ selectedValue?: SelectedRadioValue;
/**
* String or Tooltip component with further detail about the radio button
* set
diff --git a/packages/ffe-form-react/src/RadioSwitch.spec.tsx b/packages/ffe-form-react/src/RadioSwitch.spec.tsx
index 3487a503e1..653e7a8c48 100644
--- a/packages/ffe-form-react/src/RadioSwitch.spec.tsx
+++ b/packages/ffe-form-react/src/RadioSwitch.spec.tsx
@@ -4,7 +4,7 @@ import { render, screen } from '@testing-library/react';
const defaultProps = {
leftLabel: 'Ja',
- leftValue: true,
+ leftValue: 'ja',
name: 'choice',
rightLabel: 'Nei',
rightValue: 'nei',
@@ -17,7 +17,7 @@ describe('', () => {
it('sets aria-invalid correctly', () => {
renderRadioSwitch({
'aria-invalid': 'true',
- selectedValue: true,
+ selectedValue: 'ja',
});
const [radioLeft, radioRight] = screen.getAllByRole('radio');
diff --git a/packages/ffe-form-react/src/RadioSwitch.tsx b/packages/ffe-form-react/src/RadioSwitch.tsx
index 7aac8d2e18..abd59f93e0 100644
--- a/packages/ffe-form-react/src/RadioSwitch.tsx
+++ b/packages/ffe-form-react/src/RadioSwitch.tsx
@@ -1,9 +1,7 @@
import React from 'react';
import classNames from 'classnames';
-
import { BaseRadioButton } from './BaseRadioButton';
-
-type Value = boolean | string | number;
+import { SelectedRadioValue } from './types';
export interface RadioSwitchProps
extends Omit, 'value'> {
@@ -12,17 +10,17 @@ export interface RadioSwitchProps
/** The label of the choice to the left */
leftLabel: string;
/** The value of the choice to the left */
- leftValue: Value /** Ref-setting function, or ref created by useRef, passed to the input element */;
+ leftValue: string /** Ref-setting function, or ref created by useRef, passed to the input element */;
/** Ref to left radio */
leftInnerRef?: React.Ref;
/** The label of the choice to the right */
rightLabel: string;
/** The value of the choice to the right */
- rightValue: Value;
+ rightValue: string;
/** Ref to right radio */
rightInnerRef?: React.Ref;
/** The selected value of the radio button set */
- selectedValue?: Value | null;
+ selectedValue?: SelectedRadioValue;
/** Condensed modifier. Use in condensed designs */
condensed?: boolean;
}
diff --git a/packages/ffe-form-react/src/types.ts b/packages/ffe-form-react/src/types.ts
index 0a56ad84d1..cb8ccc86d5 100644
--- a/packages/ffe-form-react/src/types.ts
+++ b/packages/ffe-form-react/src/types.ts
@@ -24,3 +24,5 @@ export type ComponentWithRefAsPropParams = {
>;
export type Optional = Pick, K> & Omit;
+
+export type SelectedRadioValue = string | null | undefined;