72Commencer
HextaUI

Toggle

Un bouton qui reste activé ou désactivé, avec un remplissage qui se pose à l’appui, une étape claire entre survol et activation, et des icônes qui peuvent se remplir selon l’état.

import { IconBold, IconItalic, IconUnderline } from "@tabler/icons-react"

import { Toggle } from "@/components/ui/toggle"

export function ToggleDemo() {
  return (
    <div className="flex items-center gap-1">
      <Toggle aria-label="Bold" defaultPressed>
        <IconBold />
      </Toggle>
      <Toggle aria-label="Italic">
        <IconItalic />
      </Toggle>
      <Toggle aria-label="Underline">
        <IconUnderline />
      </Toggle>
    </div>
  )
}

Installation

pnpm dlx shadcn@latest add https://hextaui.com/r/toggle.json

Ajoute le composant, les tokens de thème HextaUI et les composants HextaUI dont il dépend.

Utilisation

import { Toggle } from "@/components/ui/toggle"
<Toggle aria-label="Bold">
  <IconBold />
</Toggle>

Survoler un toggle désactivé montre une légère teinte ; l'activer installe un remplissage plus fort et amène le label au contraste maximal, si bien que l'état activé ne ressemble jamais à un survol.

Exemples

Outline

variant="outline" ajoute une bordure et une surface, pour les toggles qui se tiennent seuls.

import { IconBookmark } from "@tabler/icons-react"

import { Toggle } from "@/components/ui/toggle"

export function ToggleOutline() {
  return (
    <div className="flex items-center gap-2">
      <Toggle variant="outline" aria-label="Bookmark">
        <IconBookmark />
      </Toggle>
      <Toggle variant="outline">
        <IconBookmark />
        Bookmark
      </Toggle>
    </div>
  )
}

Avec du texte

Les icônes et les labels se placent côte à côte. Les toggles avec texte visible n'ont pas besoin d'aria-label.

import { IconItalic, IconTextWrap } from "@tabler/icons-react"

import { Toggle } from "@/components/ui/toggle"

export function ToggleText() {
  return (
    <div className="flex flex-wrap items-center gap-2">
      <Toggle>
        <IconItalic />
        Italic
      </Toggle>
      <Toggle variant="outline" defaultPressed>
        <IconTextWrap />
        Wrap lines
      </Toggle>
      <Toggle variant="outline">Show hidden files</Toggle>
    </div>
  )
}

Rempli quand activé

Ajoutez group-data-pressed/toggle:fill-current à une icône outline et elle se remplit quand le toggle s'active.

import { IconBookmark, IconHeart, IconStar } from "@tabler/icons-react"

import { Toggle } from "@/components/ui/toggle"

export function ToggleFilledIcon() {
  return (
    <div className="flex items-center gap-1">
      <Toggle aria-label="Like" defaultPressed>
        <IconHeart className="group-data-pressed/toggle:fill-current" />
      </Toggle>
      <Toggle aria-label="Star">
        <IconStar className="group-data-pressed/toggle:fill-current" />
      </Toggle>
      <Toggle aria-label="Save">
        <IconBookmark className="group-data-pressed/toggle:fill-current" />
      </Toggle>
    </div>
  )
}

Tailles

sm, default et lg. Les toggles réduits à une icône restent carrés.

import { IconBold } from "@tabler/icons-react"

import { Toggle } from "@/components/ui/toggle"

export function ToggleSizes() {
  return (
    <div className="flex flex-col gap-4">
      <div className="flex items-center gap-2">
        <Toggle size="sm" aria-label="Bold, small">
          <IconBold />
        </Toggle>
        <Toggle aria-label="Bold">
          <IconBold />
        </Toggle>
        <Toggle size="lg" aria-label="Bold, large">
          <IconBold />
        </Toggle>
      </div>
      <div className="flex items-center gap-2">
        <Toggle size="sm" variant="outline">
          Small
        </Toggle>
        <Toggle variant="outline">Default</Toggle>
        <Toggle size="lg" variant="outline">
          Large
        </Toggle>
      </div>
    </div>
  )
}

Pill

shape="pill" arrondit complètement les extrémités, pour les toggles placés dans des surfaces arrondies comme un compositeur de chat.

import { IconSparkles, IconWorld } from "@tabler/icons-react"

import { Toggle } from "@/components/ui/toggle"

export function TogglePill() {
  return (
    <div className="flex flex-wrap items-center gap-2">
      <Toggle shape="pill" defaultPressed>
        <IconSparkles />
        Think
      </Toggle>
      <Toggle shape="pill" variant="outline">
        <IconWorld />
        Search
      </Toggle>
    </div>
  )
}

Désactivé

Un toggle désactivé continue d'indiquer s'il est activé, mais ne peut être ni pressé ni focalisé.

import { IconBold, IconUnderline } from "@tabler/icons-react"

import { Toggle } from "@/components/ui/toggle"

export function ToggleDisabled() {
  return (
    <div className="flex items-center gap-2">
      <Toggle disabled aria-label="Bold">
        <IconBold />
      </Toggle>
      <Toggle disabled defaultPressed aria-label="Underline">
        <IconUnderline />
      </Toggle>
      <Toggle disabled variant="outline">
        Read-only mode
      </Toggle>
    </div>
  )
}

Contrôlé

Passez pressed et onPressedChange. Le label reste le même pendant que l'icône suit l'état.

"use client"

import * as React from "react"
import { IconMicrophone, IconMicrophoneOff } from "@tabler/icons-react"

import { Toggle } from "@/components/ui/toggle"

export function ToggleControlled() {
  const [muted, setMuted] = React.useState(false)

  return (
    <div className="flex items-center gap-3 text-sm">
      <Toggle
        variant="outline"
        aria-label="Mute microphone"
        pressed={muted}
        onPressedChange={setMuted}
      >
        {muted ? <IconMicrophoneOff /> : <IconMicrophone />}
      </Toggle>
      <span className="text-muted-foreground">
        Microphone is {muted ? "muted" : "on"}
      </span>
    </div>
  )
}

De droite à gauche

Les icônes précèdent le label depuis la droite.

import { IconAlignRight, IconBold, IconItalic } from "@tabler/icons-react"

import { Toggle } from "@/components/ui/toggle"

export function ToggleRtl() {
  return (
    <div dir="rtl" className="flex items-center gap-2">
      <Toggle variant="outline" defaultPressed>
        <IconBold />
        عريض
      </Toggle>
      <Toggle variant="outline">
        <IconItalic />
        مائل
      </Toggle>
      <Toggle variant="outline" aria-label="محاذاة لليمين">
        <IconAlignRight />
      </Toggle>
    </div>
  )
}

Clavier

ToucheAction
SpaceEnterActive ou désactive le toggle qui a le focus.
TabPlace le focus sur le toggle suivant.

Accessibilité

  • Le toggle est un button avec aria-pressed, si bien que les lecteurs d'écran annoncent s'il est activé.
  • Donnez aux toggles réduits à une icône un aria-label qui nomme l'action ("Couper le micro") et gardez-le identique dans les deux états. Le modifier en plus de l'état pressé se lit comme une double négation.
  • Sur écran tactile, la zone de clic passe à au moins 44px, sauf dans un toggle group où les voisins se chevaucheraient.
  • Avec la réduction des animations, rien ne change d'échelle ; le remplissage apparaît seulement en fondu.

Référence de l’API

Toggle

PropTypePar défaut
variant
"default" | "outline""default"
size
"default" | "sm" | "lg""default"
shape
"default" | "pill""default"
pressed
boolean–
defaultPressed
booleanfalse
onPressedChange
(pressed, details) => void–
disabled
booleanfalse
valueIdentifie le toggle dans un toggle group.
string–
className
string | (state) => string–
nativeButton
booleantrue
render
ReactElement | (props, state) => ReactElement<button>
AttributDescription
data-slot="toggle"Le bouton, avec data-variant et data-size.
data-pressedPrésent quand le toggle est activé.
data-disabledPrésent quand le toggle est désactivé.

Voir aussi

Utilisé dans les blocks

Des blocks qui s’appuient sur Toggle.