docs(radio) : story + page playground MalioRadioGroup

This commit is contained in:
2026-06-24 16:30:05 +02:00
parent 62b23c53b4
commit a24748f7b1
3 changed files with 110 additions and 0 deletions
@@ -0,0 +1,50 @@
<template>
<div class="space-y-8 p-8">
<section>
<h2 class="mb-4 text-xl font-bold">Aligné avec un select (en ligne, erreur)</h2>
<div class="grid grid-cols-3 gap-x-[80px] gap-y-5">
<MalioRadioGroup v-model="prestation" :options="yesNo" inline error="Sélection requise" />
<MalioSelect
v-model="fournisseur"
label="Fournisseur"
error="Sélection requise"
:options="[
{label: 'Fournisseur 1', value: 'Fournisseur 1'},
{label: 'Fournisseur 2', value: 'Fournisseur 2'},
]"
/>
</div>
</section>
<section>
<h2 class="mb-4 text-xl font-bold">Empilé avec label</h2>
<MalioRadioGroup v-model="categorie" :options="categories" label="Catégorie" />
</section>
<section>
<h2 class="mb-4 text-xl font-bold">Slot custom + requis</h2>
<MalioRadioGroup v-model="civilite" inline required label="Civilité">
<MalioRadioButton value="M" label="Monsieur" />
<MalioRadioButton value="Mme" label="Madame" />
</MalioRadioGroup>
</section>
</div>
</template>
<script setup lang="ts">
import {ref} from 'vue'
const yesNo = [
{label: 'Oui', value: 'oui'},
{label: 'Non', value: 'non'},
]
const categories = [
{label: 'Catégorie 1', value: 'cat1'},
{label: 'Catégorie 2', value: 'cat2'},
]
const prestation = ref<string | null>(null)
const fournisseur = ref<string>('')
const categorie = ref<string | null>(null)
const civilite = ref<string | null>(null)
</script>
+1
View File
@@ -45,6 +45,7 @@ export const navSections: SidebarSection[] = [
{label: 'Select Checkbox', to: '/composant/select/selectCheckbox'},
{label: 'Checkbox', to: '/composant/checkbox/checkbox'},
{label: 'Radio', to: '/composant/radio/radioButton'},
{label: 'Radio (groupe)', to: '/composant/radio/radioGroup'},
],
},
{