Reddot UI Library

Docs
Toggle Group

Toggle Group

A set of two-state buttons that can be toggled on or off.

Installation

$npx shadcn@latest add https://reddot.dottools.xyz/r/toggle-group.json

Utilisation

import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group"
 
export function ToggleGroupDemo() {
  return (
    <ToggleGroup type="single">
      <ToggleGroupItem value="a">A</ToggleGroupItem>
      <ToggleGroupItem value="b">B</ToggleGroupItem>
      <ToggleGroupItem value="c">C</ToggleGroupItem>
    </ToggleGroup>
  )
}

Exemples

Par défaut

import { Bold, Italic, Underline } from "lucide-react"
import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group"
 
export function ToggleGroupDemo() {
  return (
    <ToggleGroup variant="outline" type="multiple">
      <ToggleGroupItem value="bold" aria-label="Toggle bold">
        <Bold className="h-4 w-4" />
      </ToggleGroupItem>
      <ToggleGroupItem value="italic" aria-label="Toggle italic">
        <Italic className="h-4 w-4" />
      </ToggleGroupItem>
      <ToggleGroupItem value="underline" aria-label="Toggle underline">
        <Underline className="h-4 w-4" />
      </ToggleGroupItem>
    </ToggleGroup>
  )
}

Sélection simple

import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group"
 
export function ToggleGroupSingle() {
  return (
    <ToggleGroup type="single" defaultValue="center">
      <ToggleGroupItem value="left">Gauche</ToggleGroupItem>
      <ToggleGroupItem value="center">Centre</ToggleGroupItem>
      <ToggleGroupItem value="right">Droite</ToggleGroupItem>
    </ToggleGroup>
  )
}

Sélection multiple

import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group"
 
export function ToggleGroupMultiple() {
  return (
    <ToggleGroup type="multiple" defaultValue={["bold", "italic"]}>
      <ToggleGroupItem value="bold">Gras</ToggleGroupItem>
      <ToggleGroupItem value="italic">Italique</ToggleGroupItem>
      <ToggleGroupItem value="underline">Souligné</ToggleGroupItem>
    </ToggleGroup>
  )
}

Avec état

"use client"
 
import { useState } from "react"
import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group"
 
export function ToggleGroupWithState() {
  const [value, setValue] = useState("left")
 
  return (
    <div className="space-y-4">
      <ToggleGroup type="single" value={value} onValueChange={setValue}>
        <ToggleGroupItem value="left">Gauche</ToggleGroupItem>
        <ToggleGroupItem value="center">Centre</ToggleGroupItem>
        <ToggleGroupItem value="right">Droite</ToggleGroupItem>
      </ToggleGroup>
      <p className="text-sm text-muted-foreground">
        Sélectionné : {value || "Aucun"}
      </p>
    </div>
  )
}

Variantes

Outline

<ToggleGroup variant="outline" type="single">
  <ToggleGroupItem value="a">A</ToggleGroupItem>
  <ToggleGroupItem value="b">B</ToggleGroupItem>
</ToggleGroup>

Default

<ToggleGroup variant="default" type="single">
  <ToggleGroupItem value="a">A</ToggleGroupItem>
  <ToggleGroupItem value="b">B</ToggleGroupItem>
</ToggleGroup>

Tailles

Small

<ToggleGroup size="sm" type="single">
  <ToggleGroupItem value="a">A</ToggleGroupItem>
  <ToggleGroupItem value="b">B</ToggleGroupItem>
</ToggleGroup>

Large

<ToggleGroup size="lg" type="single">
  <ToggleGroupItem value="a">A</ToggleGroupItem>
  <ToggleGroupItem value="b">B</ToggleGroupItem>
</ToggleGroup>

État désactivé

<ToggleGroup type="multiple" disabled>
  <ToggleGroupItem value="a">A</ToggleGroupItem>
  <ToggleGroupItem value="b">B</ToggleGroupItem>
</ToggleGroup>

API Reference

ToggleGroup

Un groupe de boutons toggle à deux états.

PropTypeDefaultDescription
type"single" | "multiple""single"Détermine si un seul ou plusieurs éléments peuvent être pressés en même temps.
valuestring | string[]-La valeur contrôlée du groupe toggle.
defaultValuestring | string[]-La valeur par défaut du groupe toggle.
onValueChange(value: string | string[]) => void-Gestionnaire d'événement appelé lorsque la valeur change.
disabledbooleanfalseQuand true, empêche l'utilisateur d'interagir avec le groupe toggle.
rovingFocusbooleantrueQuand false, la navigation au clavier sera désactivée.
orientation"horizontal" | "vertical""horizontal"L'orientation du composant.
dir"ltr" | "rtl"-La direction de lecture du groupe toggle.
loopbooleantrueQuand true, la navigation au clavier bouclera du dernier élément au premier.
variant"default" | "outline""default"La variante du groupe toggle.
size"default" | "sm" | "lg""default"La taille du groupe toggle.

ToggleGroupItem

Un élément dans le groupe toggle.

PropTypeDefaultDescription
valuestring-Une valeur unique pour l'élément.
disabledbooleanfalseQuand true, empêche l'utilisateur d'interagir avec l'élément.

Références