Radio

In DSFR the radio options are more complex than other DS since it encompass anciliary elements like help texts and fieldset for grouping.

Properties

• Label
• Label help
• Grouping Label (fieldset)
• Grouping Description

Shoelace

https://shoelace.style/components/radio

<sl-radio-group label="Select an option" name="a" value="1">
  <sl-radio value="1">Option 1</sl-radio>
  <sl-radio value="2">Option 2</sl-radio>
  <sl-radio value="3">Option 3</sl-radio>
</sl-radio-group>

vue-dsfr

https://vue-dsfr.netlify.app/?path=/docs/composants-dsfrradiobutton--docs

<template>
  <div class="fr-form-group">
    <fieldset class="fr-fieldset">
      <div class="fr-fieldset__content" role="radiogroup">
        <DsfrRadioButton
          v-for="option of options"
          :modelValue="modelValue"
          v-bind="{modelValue:'3',small:false,options:{0:{label:'Valeur 1',value:'1',hint:'Description 1',name:'Choix'},1:{label:'Valeur 2',value:'2',disabled:true,hint:'Description 2',name:'Choix'},2:{label:'Valeur 3',value:'3',name:'Choix'}}}"
          :small="small"
          @update:modelValue="updateCheckedValue($event)"
        />
      </div>
    </fieldset>
  </div>
</template>

Vuetify

https://vuetifyjs.com/en/components/radio-buttons/

<v-container fluid>
    <p>Selected Button: {{ radios }}</p>
    <v-radio-group v-model="radios">
      <v-radio label="Option One" value="one"></v-radio>
      <v-radio label="Option 2 (string)" value="2"></v-radio>
      <v-radio label="Option 3 (integer)" :value="3"></v-radio>
    </v-radio-group>
  </v-container>