Interrupteur - DsfrToggleSwitch

🌟 Introduction

Le DsfrToggleSwitch est un composant Vue versatile, conçu pour permettre à l’utilisateur de faire un choix entre deux états opposés (activé / désactivé).

🏅 La documentation sur les interrupteurs sur le DSFR

La story sur la carte sur le storybook de VueDsfr

🛠️ Props

Nom	Type	Défaut	Obligatoire	Description
modelValue	boolean			Valeur booléenne associée à la case à cocher
disabled	boolean			Valeur booléenne pour désactiver le toggle
hint	string			Texte d'information complémentaire affiché en dessous de l'interrupteur
label	string	''		Texte du label associé à l'interrupteur
name	string	undefined		Attribut name de l’input
labelLeft	boolean	false		Permet d'afficher le label à gauche de l'interrupteur
borderBottom	boolean	false		Affiche une bordure sous l'interrupteur et le label
inputId	string	useRandomId('toggle')		Identifiant unique pour le toggle. Utilisé pour l'accessibilité.
activeText	string	Activé		Texte à afficher sous l'interrupteur lorsqu'il est activé
inactiveText	string	Désactivé		Texte à afficher sous l'interrupteur lorsqu'il est désactivé
noText	boolean	false		Désactive l'affichage de activeText et inactiveText

📡Évenements

DsfrToggleSwitch émet l'événement suivant :

Nom	type	Description
update:modelValue	boolean	Est émis lorsque la valeur de l'interrupteur change

🧩 Slots

Aucun slot n'est prévu dans ce composant. Le contenu est entièrement basé sur les props.

📝 Exemples

Démo

DsfrToggleSwitchDemo.vue

<script lang="ts" setup>
import DsfrToggleSwitch from '../DsfrToggleSwitch.vue'
</script>

<template>
  <div
    class="flex flex-col"
  >
    <div>
      <DsfrToggleSwitch label="Label action interrupteur" />
    </div>
    <div>
      <DsfrToggleSwitch
        label="Label action interrupteur"
        label-left
      />
    </div>
    <div>
      <DsfrToggleSwitch
        label="Vitesse lumière ?"
        border-bottom
        active-text="Vers l'infini et au-delà"
        inactive-text="restons terre à terre"
      />
    </div>
  </div>
</template>

⚙️ Code source du composant

DsfrToggleSwitch.vue

<script lang="ts" setup>
import type { DsfrToggleSwitchProps } from './DsfrToggleSwitch.types'

import { computed } from 'vue'

import { useRandomId } from '../../utils/random-utils'

export type { DsfrToggleSwitchProps }

const props = withDefaults(defineProps<DsfrToggleSwitchProps>(), {
  inputId: () => useRandomId('toggle'),
  hint: '',
  label: '',
  labelLeft: false,
  borderBottom: false,
  activeText: 'Activé',
  inactiveText: 'Désactivé',
  noText: false,
  name: undefined,
})

defineEmits<{ (e: 'update:modelValue', payload: boolean): void }>()

const labelId = computed(() => {
  return `${props.inputId}-hint-text`
})
</script>

<template>
  <div
    class="fr-toggle"
    :class="{
      'fr-toggle--label-left': labelLeft,
      'fr-toggle--border-bottom': borderBottom,
    }"
  >
    <input
      :id="inputId"
      :disabled="disabled"
      :aria-disabled="disabled"
      type="checkbox"
      :checked="modelValue"
      :data-testid="inputId"
      class="fr-toggle__input"
      :aria-describedby="labelId"
      :name="name"
      @input="$emit('update:modelValue', ($event.target as HTMLInputElement).checked)"
    >
    <label
      :id="labelId"
      class="fr-toggle__label"
      :for="inputId"
      :data-fr-checked-label="noText ? undefined : activeText"
      :data-fr-unchecked-label="noText ? undefined : inactiveText"
      style="--toggle-status-width: 3.55208125rem;"
    >
      {{ label }}
    </label>
    <p
      v-if="hint"
      :id="`${inputId}-hint-text`"
      class="fr-hint-text"
    >
      {{ hint }}
    </p>
  </div>
</template>

DsfrToggleSwitch.types.ts

export type DsfrToggleSwitchProps = {
  modelValue?: boolean
  inputId?: string
  hint?: string
  label?: string
  disabled?: boolean
  labelLeft?: boolean
  borderBottom?: boolean
  activeText?: string
  inactiveText?: string
  noText?: boolean
  name?: string
}