@utrecht/components/form-field/src/stories/radio-group.stories.mdx

Components for the Municipality of Utrecht based on the NL Design System architecture

{/* @license CC0-1.0 */}

import { Canvas, Meta, Story } from "@storybook/blocks";
import { argTypes, defaultArgs, exampleArgs, FormFieldRadioGroup } from "../story-template";
import "../../../checkbox/src/index.scss";
import "../../../form-label/src/index.scss";
import "../index.scss";

<Meta
  id="css-form-field--radio-group"
  title="CSS Component/Form field/with radio group"
  component={FormFieldRadioGroup}
  argTypes={argTypes}
  args={defaultArgs}
  parameters={{
    status: {
      type: "WORK IN PROGRESS",
    },
  }}
/>

# Form field with radio group

## with only a label

<Canvas>
  <Story
    name="label"
    args={{
      ...exampleArgs,
      name: "890a84a6-5088-47df-8f8e-4566d3bd42ad",
      groupLabel: "Choose your option",
      groupId: "115a159b-7527-452d-bcfc-f4770b30d00e",
      options: [
        {
          id: "2185ffaa-0086-43f7-82ef-162d048df198",
          value: "1",
          label: "Option 1",
        },
        {
          id: "c664343d-22d9-417d-a3ca-356e2d0774d5",
          value: "2",
          label: "Option 2",
        },
        {
          id: "36242fff-3a06-48eb-8451-f32ffcd00f7a",
          value: "3",
          label: "Option 3",
        },
      ],
    }}
  >
    {FormFieldRadioGroup.bind({})}
  </Story>
</Canvas>

## with heading as label

<Canvas>
  <Story
    name="Heading as label"
    args={{
      ...exampleArgs,
      name: "2ce3b9f7-5ade-4048-8719-e4b57fc0fd4f",
      groupLabel: "Choose your option",
      groupId: "4adcc33d-1ac3-4e2e-9630-04c09213dbb9",
      headingLevel: 1,
      options: [
        {
          id: "3bce233e-57aa-49b3-bba7-87fa36f3774c",
          value: "1",
          label: "Option 1",
        },
        {
          id: "de55cc3e-ca5b-4487-8295-ee3ca804ed5e",
          value: "2",
          label: "Option 2",
        },
        {
          id: "d3bcfabb-ed87-4185-87b9-65dc63ac5430",
          value: "3",
          label: "Option 3",
        },
      ],
    }}
  >
    {FormFieldRadioGroup.bind({})}
  </Story>
</Canvas>

## with an additional description

<Canvas>
  <Story
    name="description"
    args={{
      ...exampleArgs,
      name: "398a943f-a170-4be4-af6b-c74ed3452bce",
      groupId: "2c0d76a7-0232-45ba-bbf3-6897288253dd",
      groupLabel: "Label",
      groupDescription: "Description",
      options: [
        {
          id: "555a9615-6ad3-453f-a504-14bf71fc3cf9",
          label: "Option 1",
          value: "1",
          description: "The first option is the most popular, but not the best option.",
        },
        {
          id: "37aa1094-9b94-4d56-99af-615adc6bd861",
          checked: true,
          label: "Option 2",
          value: "2",
          description: "The best option!",
        },
        {
          id: "8f4b330a-a554-4545-a616-17578766a534",
          label: "Option 3",
          value: "3",
          description: "The last option.",
        },
      ],
    }}
  >
    {FormFieldRadioGroup.bind({})}
  </Story>
</Canvas>

## with a description for an invalid value

<Canvas>
  <Story
    name="invalid"
    args={{
      ...exampleArgs,
      name: "ddf3c086-5337-4032-8b23-367d9423c7bb",
      groupLabel: "Choose your option",
      groupInvalidDescription: "Bad option!",
      groupId: "9257c2a4-4445-47f5-9847-4c5eb9f3ab9e",
      invalid: true,
      options: [
        {
          id: "2140c911-983d-47bc-ade4-199cf2d09ea8",
          value: "1",
          label: "Option 1",
        },
        {
          id: "d713af44-62e4-41be-8d05-8d7917e9bc66",
          value: "2",
          label: "Option 2",
        },
        {
          id: "17988dcf-d790-4204-a0a4-87f0211d2ac2",
          value: "3",
          label: "Option 3",
        },
      ],
    }}
  >
    {FormFieldRadioGroup.bind({})}
  </Story>
</Canvas>