67 lines
1.6 KiB
Vue
67 lines
1.6 KiB
Vue
<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>
|