Toggle + toggle group

Activar una vista o formato. Toggle group para elegir 1 (o varios) de pocos.

Extensión de la galería, sin uso actual en la app. Botones con estado presionado sobre Base UI; el grupo permite uno o varios valores. No reemplaza los controles de vista reales del dashboard.

Instalación

shadcn

npx shadcn@latest add https://design.moodinary.com/r/toggle.json

import

import { Toggle, ToggleGroup, ToggleGroupItem } from "@moodinary/ui/components/toggle";

Ejemplos

Individual, formato, vista y deshabilitado

buttons une los bordes. segmented da el aspecto de un selector de vista, conservando la semántica de botones presionables.

Código

default.tsx

import { BellIcon } from "@moodinary/ui/components/icons";
import {
	Toggle,
	ToggleGroup,
	ToggleGroupItem,
} from "@moodinary/ui/components/toggle";
import {
	TextBoldIcon,
	TextItalicIcon,
	TextUnderlineIcon,
} from "@moodinary/ui/components/typography-icons";

export default function ToggleDefault() {
	return (
		<>
			<Toggle aria-label="Negrita">
				<TextBoldIcon />
			</Toggle>
			<ToggleGroup aria-label="Formato" defaultValue={["bold"]} multiple>
				<ToggleGroupItem aria-label="Negrita" value="bold">
					<TextBoldIcon />
				</ToggleGroupItem>
				<ToggleGroupItem aria-label="Cursiva" value="italic">
					<TextItalicIcon />
				</ToggleGroupItem>
				<ToggleGroupItem aria-label="Subrayado" value="underline">
					<TextUnderlineIcon />
				</ToggleGroupItem>
			</ToggleGroup>
			<ToggleGroup
				aria-label="Vista"
				defaultValue={["week"]}
				variant="segmented"
			>
				<ToggleGroupItem value="week">Semana</ToggleGroupItem>
				<ToggleGroupItem value="month">Mes</ToggleGroupItem>
				<ToggleGroupItem value="year">Año</ToggleGroupItem>
			</ToggleGroup>
			<Toggle aria-label="Avisos" disabled>
				<BellIcon />
			</Toggle>
		</>
	);
}

Props

Toggle / ToggleGroupItem

Prop	Tipo	Default	Descripción
pressed / defaultPressed	boolean	-	Estado controlado o inicial de un toggle independiente.
onPressedChange	(pressed: boolean, details: Toggle.ChangeEventDetails) => void	-	Notifica el nuevo estado.
value	string	-	Identificador del ítem dentro de ToggleGroup.
disabled	boolean	false	Impide alternar el estado.
aria-label	string	-	Nombre obligatorio si solo hay un ícono.

ToggleGroup

Prop	Tipo	Default	Descripción
variant	"buttons" \| "segmented"	"buttons"	Botones unidos o selector de vista.
value / defaultValue	readonly string[]	-	Valores presionados, siempre como array incluso para selección única.
onValueChange	(value: string[], details: ToggleGroup.ChangeEventDetails) => void	-	Recibe la nueva selección.
multiple	boolean	false	Permite presionar varios ítems a la vez.
loopFocus	boolean	true	Las flechas vuelven al inicio al pasar el último ítem.
orientation	"horizontal" \| "vertical"	"horizontal"	Dirección del recorrido con flechas.

Cuándo sí y cuándo no

Hacé

Dale un nombre a cada ícono.
Usá multiple para formatos independientes.
Guardá valores estables, no el texto visible.

Evitá

No uses Toggle como un botón de envío.
No asumas que selección única impide desmarcar el último valor.
No anuncies un radiogroup si el componente usa aria-pressed.

Espacio y Enter alternan un toggle.
Las flechas recorren el grupo, Home y End van a los extremos.
aria-pressed comunica el estado; aria-label nombra los botones de solo ícono.