);
@@ -433,45 +379,38 @@ export const Checkbox: StoryFn = function Render(args) {
gap: '1rem',
}}
>
-
Small
-
-
-
-
-
-
-
-
-
-
-
-
+
+
Medium
-
-
-
-
-
-
-
-
-
-
-
-
+
+
Large
-
-
-
-
-
-
-
-
-
-
-
-
+
+
);
};
@@ -676,31 +603,30 @@ export const Switch: StoryFn = (args) => (
maxWidth: '90vw',
}}
>
-
Small
-
-
-
-
- {/*
- */}
-
-
+
+
Medium
-
-
-
-
- {/*
- */}
-
-
+
+
Large
-
-
-
-
- {/*
- */}
-
-
+
+
);
diff --git a/packages/react/src/components/form/Input/Input.tsx b/packages/react/src/components/form/Input/Input.tsx
index 579a3f9456..a6c53da372 100644
--- a/packages/react/src/components/form/Input/Input.tsx
+++ b/packages/react/src/components/form/Input/Input.tsx
@@ -33,7 +33,7 @@ export type InputProps = {
* ```
*/
export const Input = forwardRef(function Input(
- { type = 'text', size, htmlSize, className, onClick, ...rest },
+ { type = 'text', size, htmlSize, className, onChange, onClick, ...rest },
ref,
) {
return (
@@ -43,6 +43,7 @@ export const Input = forwardRef(function Input(
ref={ref}
size={htmlSize}
type={type}
+ onChange={(event) => rest.readOnly || onChange?.(event)} // Make readonly work for checkbox / radio / switch
onClick={(event) => {
if (rest.readOnly) event.preventDefault(); // Make readonly work for checkbox / radio / switch
onClick?.(event);
diff --git a/packages/react/src/components/form/Radio/Radio.mdx b/packages/react/src/components/form/Radio/Radio.mdx
index 8fcdd03ffb..13a39f4201 100644
--- a/packages/react/src/components/form/Radio/Radio.mdx
+++ b/packages/react/src/components/form/Radio/Radio.mdx
@@ -1,14 +1,13 @@
import { Meta, Canvas, Controls, Primary } from '@storybook/blocks';
import { CssVariables } from '@doc-components';
-import css from '@digdir/designsystemet-css/radio.css?inline';
+import css from '@digdir/designsystemet-css/input.css?inline';
import * as RadioStories from './Radio.stories';
-import * as RadioGroupStories from './RadioGroup.stories';
# Radio
-`Radio` viser brukeren en liste med alternativer de kan velge mellom. Brukerne kan bytte mellom alternativene, men må velge ett. Bruk `Radio.Group` for å gruppere alternativknappene.
+`Radio` viser brukeren en liste med alternativer de kan velge mellom. Brukerne kan bytte mellom alternativene, men må velge ett. Bruk `Fieldset` for å gruppere alternativknappene.
@@ -18,10 +17,10 @@ import * as RadioGroupStories from './RadioGroup.stories';
```tsx
import { Radio } from '@digdir/designsystemet-react';
-
+;
+;
```
## Eksempler
@@ -32,28 +31,28 @@ import { Radio } from '@digdir/designsystemet-react';
`Radio` skal alltid ha en `label`. Når du bruker `label` fra en annen plass, husk å bruke `aria-label` eller `aria-labelledby`.
-
+
-## `Radio.Group`
+## `Fieldset`
-Bruk `Radio.Group` for gruppering av alternativknapper.
+Bruk `Fieldset` for gruppering av alternativknapper.
-
-
+
+
### Feilmelding
-Bruk `error` på `Radio.Group` for å vise feilmelding.
+Bruk `error` på `Fieldset` for å vise feilmelding.
-Her må vi bruke `Radio.Group`, fordi den aktiverer riktig stil og sørger for at innholdet har de riktige attributtene for tilgjengelighet.
+Her må vi bruke `Fieldset`, fordi den aktiverer riktig stil og sørger for at innholdet har de riktige attributtene for tilgjengelighet.
-
+
### Kontrollert
-Bruk `value` på `Radio.Group` for å kontrollere verdiene selv.
+Bruk `value` på `Fieldset` for å kontrollere verdiene selv.
-
+
### Readonly
@@ -61,19 +60,19 @@ Felter med `readonly`-attributtet er med i tabrekkefølgen. Brukerne kan kopiere
`readonly`-felter kan være forvirrende for noen brukere. Ikke alle vil skjønne hvorfor de ikke får til å endre innholdet i feltet. Vi anbefaler derfor å unngå `readonly` så langt det lar seg gjøre.
-
+
### Disabled
Unngå deaktiverte tilstander om du kan. De har lav fargekontrast som er problematisk for noen brukere. `disabled` kan ikke møte kontrastkravene, for da kan brukeren tro at elementet er aktivt, prøve å trykke på det, og ikke skjønne hvorfor det ikke går.
-
+
### Inline
`Radio` skal som hovedregel *ikke* plasseres på samme linje. Men, hvis du har kun to alternativer med korte tekster som "Ja" og "Nei", kan du vurdere om de bør plasseres ved siden av hverandre.
-
+
## Retningslinjer
diff --git a/packages/react/src/components/form/Radio/Radio.stories.tsx b/packages/react/src/components/form/Radio/Radio.stories.tsx
index f23da161d2..2126e6b15a 100644
--- a/packages/react/src/components/form/Radio/Radio.stories.tsx
+++ b/packages/react/src/components/form/Radio/Radio.stories.tsx
@@ -1,6 +1,8 @@
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryFn, StoryObj } from '@storybook/react';
-import { Radio } from '.';
+import { useState } from 'react';
+import type { ChangeEvent } from 'react';
+import { Button, Divider, Fieldset, Paragraph, Radio } from '../..';
type Story = StoryObj;
@@ -11,7 +13,7 @@ export default {
export const Preview: Story = {
args: {
- children: 'Radio',
+ label: 'Radio',
description: 'Description',
disabled: false,
readOnly: false,
@@ -20,9 +22,126 @@ export const Preview: Story = {
},
};
-export const Single: Story = {
+export const AriaLabel: Story = {
args: {
value: 'value',
'aria-label': 'Radio',
},
};
+
+export const Group: StoryFn = (args) => {
+ const props = {
+ 'aria-invalid': !!args.error,
+ name: 'my-radio',
+ size: args.size,
+ };
+
+ return (
+
+ );
+};
+
+Group.args = {
+ legend: 'Hvilken iskremsmak er best?',
+ description: 'Velg din favorittsmak blant alternativene.',
+ disabled: false,
+ error: '',
+ size: 'md',
+};
+
+export const WithError = {
+ args: {
+ ...Group.args,
+ error: 'Du må velge jordbær fordi det smaker best',
+ },
+ render: Group,
+};
+
+export const Controlled: StoryFn = () => {
+ const [value, setValue] = useState();
+ const onChange = (event: ChangeEvent) =>
+ setValue(event.target.value);
+
+ return (
+ <>
+
+
+
+
+
+ Du har valgt: {value}
+
+
+
+
+
+
+ );
+};
+
+export const ReadOnly = {
+ args: { ...Group.args, readOnly: true },
+ render: Group,
+};
+
+export const Disabled = {
+ args: { ...Group.args, disabled: true },
+ render: Group,
+};
+
+export const Inline: StoryFn = () => (
+
+);
diff --git a/packages/react/src/components/form/Radio/Radio.test.tsx b/packages/react/src/components/form/Radio/Radio.test.tsx
index 6cdb45e61d..87d0a1294b 100644
--- a/packages/react/src/components/form/Radio/Radio.test.tsx
+++ b/packages/react/src/components/form/Radio/Radio.test.tsx
@@ -6,28 +6,20 @@ import { Radio } from './Radio';
describe('Radio', () => {
test('has correct value and label', () => {
- render(label);
+ render();
expect(screen.getByLabelText('label')).toBeDefined();
expect(screen.getByDisplayValue('test')).toBeDefined();
});
test('has correct description', () => {
- render(
-
- test
- ,
- );
+ render();
expect(
screen.getByRole('radio', { description: 'description' }),
).toBeDefined();
});
test('should pass down name attribute to input', () => {
- render(
-
- label
- ,
- );
+ render();
expect(screen.getByRole('radio', { name: 'label' })).toHaveAttribute(
'name',
'radio-group123',
@@ -59,9 +51,12 @@ describe('Radio', () => {
const value = 'test';
render(
-
- label
- ,
+ ,
);
const radio = screen.getByRole('radio');
@@ -81,9 +76,13 @@ describe('Radio', () => {
const onClick = vi.fn();
render(
-
- disabled radio
- ,
+ ,
);
const radio = screen.getByRole('radio');
@@ -94,24 +93,25 @@ describe('Radio', () => {
expect(onChange).not.toHaveBeenCalled();
});
- it('does not call onChange or onClick when user clicks and the radio is readOnly', async () => {
+ it('does not call onChange when user clicks and the radio is readOnly', async () => {
const user = userEvent.setup();
const onChange = vi.fn();
const onClick = vi.fn();
render(
-
- readonly radio
- ,
+ ,
);
const radio = screen.getByRole('radio');
await act(async () => await user.click(radio));
expect(radio).toHaveAttribute('readonly');
- expect(onClick).not.toHaveBeenCalled();
expect(onChange).not.toHaveBeenCalled();
});
-
- //TODO is there a good way to test size?
});
diff --git a/packages/react/src/components/form/Radio/Radio.tsx b/packages/react/src/components/form/Radio/Radio.tsx
index 57153e0afc..8d791c4c22 100644
--- a/packages/react/src/components/form/Radio/Radio.tsx
+++ b/packages/react/src/components/form/Radio/Radio.tsx
@@ -1,73 +1,44 @@
-import cl from 'clsx/lite';
import type { InputHTMLAttributes, ReactNode } from 'react';
import { forwardRef } from 'react';
-import { omit } from '../../../utilities';
import { Label } from '../../Label';
-import { Paragraph } from '../../Paragraph';
-import type { FormFieldProps } from '../useFormField';
-
-import { useRadio } from './useRadio';
+import { ValidationMessage } from '../../ValidationMessage';
+import { Field } from '../Field';
+import { Input } from '../Input';
export type RadioProps = {
+ /** Optional aria-label */
+ 'aria-label'?: string;
/** Radio label */
- children?: ReactNode;
+ label?: ReactNode;
+ /** Description for field */
+ description?: ReactNode;
/** Value of the `input` element */
value: string;
-} & Omit &
- Omit, 'size' | 'value'>;
-
-export const Radio = forwardRef((props, ref) => {
- const { children, description, className, style, ...rest } = props;
- const {
- inputProps,
- descriptionId,
- hasError,
- size = 'md',
- readOnly,
- } = useRadio(props);
+ /** Validation message for field */
+ validation?: ReactNode;
+ /**
+ * Changes field size and paddings
+ * @default md
+ */
+ size?: 'sm' | 'md' | 'lg';
+} & Omit, 'size'> &
+ (
+ | { 'aria-label': string; 'aria-labelledby'?: never; label?: never }
+ | { 'aria-label'?: never; 'aria-labelledby'?: never; label: ReactNode }
+ | { 'aria-label'?: never; 'aria-labelledby': string; label?: never }
+ );
+export const Radio = forwardRef(function Radio(
+ { children, label, description, validation, ...rest },
+ ref,
+) {
return (
-
-