Bouton radio

Un choix parmi plusieurs. Le groupe est natif : tous les boutons partageant un name lui appartiennent, et le navigateur se charge de l'exclusivité et des flèches.

Utilisation

vue

FreeStandardPro

<script setup lang="ts">
import { ref } from 'vue'
import { VRadio } from 'vectis-ui'

const plan = ref('standard')
</script>

<template>
  <VRadio v-model="plan" name="plan" value="free">Free</VRadio>
  <VRadio v-model="plan" name="plan" value="standard">Standard</VRadio>
  <VRadio v-model="plan" name="plan" value="pro">Pro</VRadio>
</template>

Exemples

Aide

label écrit le texte à côté du point, et le slot par défaut le remplace. hint ajoute une légende en dessous, reliée au bouton par aria-describedby : c'est l'endroit où dire ce qu'une option implique.

vue

StandardThree to five working days.ExpressNext working day, when ordered before noon.

<script setup lang="ts">
import { ref } from 'vue'
import { VRadio } from 'vectis-ui'

const delivery = ref('standard')
</script>

<template>
  <div class="stack">
    <VRadio
      v-model="delivery"
      name="delivery"
      value="standard"
      label="Standard"
      hint="Three to five working days."
    />
    <VRadio
      v-model="delivery"
      name="delivery"
      value="express"
      label="Express"
      hint="Next working day, when ordered before noon."
    />
  </div>
</template>

<style scoped>
.stack {
  display: grid;
  justify-items: start;
  gap: var(--vectis-space-3);
}
</style>

Position du libellé

labelPosition place le libellé avant le point plutôt qu'après.

vue

Label after the dot, the default Label before the dot

<script setup lang="ts">
import { ref } from 'vue'
import { VRadio } from 'vectis-ui'

const side = ref('end')
</script>

<template>
  <div class="stack">
    <VRadio v-model="side" name="label-side" value="end">Label after the dot, the default</VRadio>
    <VRadio v-model="side" name="label-side" value="start" label-position="start">
      Label before the dot
    </VRadio>
  </div>
</template>

<style scoped>
/* `justify-items: start` keeps each row as wide as its own label: the clickable area is
   the whole <label>, so a stretched row would be clickable well past its text. */
.stack {
  display: grid;
  justify-items: start;
  gap: var(--vectis-space-2);
}
</style>

Écartement

spread prend toute la largeur offerte et pousse le libellé et le point aux deux extrémités de la ligne.

vue

Label at the start, dot at the end Dot at the start, label at the end

<script setup lang="ts">
import { ref } from 'vue'
import { VRadio } from 'vectis-ui'

const side = ref('start')
</script>

<template>
  <div class="settings">
    <VRadio v-model="side" name="spread-side" value="start" spread label-position="start">
      Label at the start, dot at the end
    </VRadio>
    <VRadio v-model="side" name="spread-side" value="end" spread>
      Dot at the start, label at the end
    </VRadio>
  </div>
</template>

<style scoped>
/* A spread row takes the width it is given, so the panel is what decides how far apart
   the label and the dot end up. */
.settings {
  display: grid;
  gap: var(--vectis-space-3);
  inline-size: 100%;
  max-inline-size: 24rem;
  padding: var(--vectis-space-4);
  border: 1px solid var(--vectis-color-border);
  border-radius: var(--vectis-radius-surface);
}
</style>

Lecture seule

readonly, posé sur chaque bouton du groupe, laisse la sélection où elle est. Le composant annule le clic, et les flèches sont couvertes aussi, puisque le navigateur sélectionne le bouton suivant par un clic : le focus se déplace, la sélection non. Aucun aria-readonly n'est écrit, ARIA l'autorisant sur un radiogroup et pas sur un radio : posez-le sur l'élément qui nomme la question, sinon rien n'annonce l'état. Et un bouton en lecture seule participe toujours à la validation de contrainte, donc readonly avec required et rien de sélectionné laisse un formulaire impossible à envoyer comme à corriger.

vue

FreeStandardPro

<script setup lang="ts">
import { ref } from 'vue'
import { VRadio } from 'vectis-ui'

const plan = ref('standard')
</script>

<template>
  <div class="stack">
    <!-- Set on every button of the group. The arrow keys still move the focus, and the
         selection stays where it is. -->
    <VRadio v-model="plan" name="locked-plan" value="free" readonly label="Free" />
    <VRadio v-model="plan" name="locked-plan" value="standard" readonly label="Standard" />
    <VRadio v-model="plan" name="locked-plan" value="pro" readonly label="Pro" />
  </div>
</template>

<style scoped>
.stack {
  display: grid;
  justify-items: start;
  gap: var(--vectis-space-3);
}
</style>

Désactivé

disabled empêche de choisir le bouton et le grise par les tokens de couleur. Un bouton à la fois sélectionné et désactivé garde son point.

vue

Free Pro, not available on this account Legacy, no longer offered

<script setup lang="ts">
import { ref } from 'vue'
import { VRadio } from 'vectis-ui'

const plan = ref('legacy')
</script>

<template>
  <div class="stack">
    <VRadio v-model="plan" name="plan-tier" value="free">Free</VRadio>
    <VRadio v-model="plan" name="plan-tier" value="pro" disabled>
      Pro, not available on this account
    </VRadio>
    <VRadio v-model="plan" name="plan-tier" value="legacy" disabled>
      Legacy, no longer offered
    </VRadio>
  </div>
</template>

<style scoped>
.stack {
  display: grid;
  justify-items: start;
  gap: var(--vectis-space-2);
}
</style>

API

Props

Prop	Type	Défaut
`value`	`ItemValue`	aucune
Ce que signifie le choix de ce bouton. Le v-model du groupe porte la valeur du bouton sélectionné : c'est donc ce qu'il devient quand celui-ci est choisi.
`label`	`string`	aucune
Le texte à côté du point, qui le nomme. Le slot par défaut le remplace.
`hint`	`string`	aucune
Une ligne d'aide sous le libellé. Elle est reliée au bouton pour les technologies d'assistance, qui la lisent après le libellé et non comme une partie de celui-ci.
`labelPosition`	`RadioLabelPosition'start' \| 'end'`	`'end'`
De quel côté du point se place le libellé.
`spread`	`boolean`	`false`
Pousse le libellé et le point aux extrémités opposées de la ligne, qui prend toute la largeur disponible.
`invalid`	`boolean`	`false`
Marque le champ comme invalide, ce qui colore le point et le signale aux technologies d'assistance. C'est pour une règle que le navigateur ne sait pas vérifier seul.
`disabled`	`boolean`	`false`
Rend ce choix inutilisable, grisé par les tokens de couleur.
`readonly`	`boolean`	`false`
Montre la sélection sans permettre de la changer. Le bouton reste focalisable et s'envoie toujours avec son formulaire ; un clic ou une flèche ne sélectionnent simplement rien. À poser sur chaque bouton du groupe.
`v-model`	`ItemValue`	`''`
La valeur sélectionnée dans le groupe, partagée par tous les boutons portant le même `name`. Elle est vide tant que rien n'est choisi, et un bouton est sélectionné quand elle correspond à sa propre `value`.

Slots

Slot	Type
`default`	`{}`
Le libellé, quand il demande plus que le texte de la prop `label`. Il est cliquable.

Types

Les types que les tables ci-dessus nomment, écrits comme la librairie les déclare. Ceux qui portent export s'importent depuis vectis-ui pour typer votre propre code ; les autres décrivent la forme de ce qu'un slot fournit.

export type ItemValue = string | number

Variables CSS

Token	Valeur
`--vectis-control-size-check`	`1.25rem`
`--vectis-control-size-check-dot`	`0.5rem`