First commit

src/components/forms/DsRadioGroup.vue

@@ -0,0 +1,66 @@
+<script setup lang="ts">
+import type { DsRadioOption } from "../../types";
+
+const model = defineModel<string>({ default: "" });
+withDefaults(
+  defineProps<{
+    legend: string;
+    name: string;
+    options: DsRadioOption[];
+    description?: string;
+    error?: string;
+    disabled?: boolean;
+    required?: boolean;
+  }>(),
+  {
+    description: undefined,
+    error: undefined,
+    disabled: false,
+    required: false,
+  },
+);
+</script>
+
+<template>
+  <fieldset
+    class="ds-radio-group"
+    :disabled="disabled"
+    :aria-describedby="
+      error ? `${name}-error` : description ? `${name}-description` : undefined
+    "
+  >
+    <legend class="ds-radio-group__legend">{{ legend }}</legend>
+    <p
+      v-if="description"
+      :id="`${name}-description`"
+      class="ds-field__description"
+    >
+      {{ description }}
+    </p>
+    <div class="ds-radio-group__options">
+      <label v-for="option in options" :key="option.value" class="ds-choice">
+        <input
+          v-model="model"
+          type="radio"
+          :name="name"
+          :value="option.value"
+          :disabled="option.disabled"
+          :required="required"
+        />
+        <span class="ds-choice__content">
+          <span class="ds-choice__label">{{ option.label }}</span>
+          <span v-if="option.description" class="ds-choice__description">{{
+            option.description
+          }}</span>
+        </span>
+      </label>
+    </div>
+    <p
+      v-if="error"
+      :id="`${name}-error`"
+      class="ds-field__message ds-field__message--error"
+    >
+      {{ error }}
+    </p>
+  </fieldset>
+</template>