Toggle GroupAndroid

Single or multi-select group over toggle buttons.

$ npx lumioui add toggle-group

import { ToggleGroupItem, ToggleGroup } from "@/components/ui/toggle-group/toggle-group";

Parts: ToggleGroupItem

Props11

ToggleGroup
type	"single" \| "multiple"	Single select or multiple select.
value?	string \| string[]	Controlled selected value(s). Omit with defaultValue for uncontrolled use.
defaultValue?	string \| string[]	Initial value(s) for uncontrolled use.
onValueChange?	(value: string \| string[]) => void	Called when the selection changes.
disabled?	boolean
className?	string
children?	React.ReactNode
ToggleGroupItem
value	string
disabled?	boolean
className?	string
children?	React.ReactNode

Toggle Group — Multiplemultiple.tsx

toggle-group/variants/multiple.tsx open

Single or multi-select group over toggle buttons.

import { ToggleGroupMultiple } from "@/components/ui/toggle-group/variants/multiple";

export function Example() {
  return (
    <ToggleGroupMultiple />
  );
}

import * as React from "react";
import { View } from "react-native";
import { ToggleGroup, ToggleGroupItem } from "../toggle-group";
import { Text } from "../../text/text";
import { Glass } from "../../glass/glass";

/** ToggleGroupMultiple — multi-select topping chips. */
export function ToggleGroupMultiple() {
  const [toppings, setToppings] = React.useState<string[]>(["egg", "nori"]);
  return (
    <View className="w-full gap-3">
        <Glass interactive curvature="edge" className="w-full gap-3 rounded-2xl p-4">
          <View className="flex-row items-baseline justify-between">
            <Text variant="small" className="font-semibold">Extra toppings</Text>
            <Text variant="muted">$1.50 each</Text>
          </View>
          <ToggleGroup type="multiple" value={toppings} onValueChange={(v) => setToppings(v as string[])} className="w-full flex-row flex-wrap">
            <ToggleGroupItem value="egg">Egg</ToggleGroupItem>
            <ToggleGroupItem value="nori">Nori</ToggleGroupItem>
            <ToggleGroupItem value="chashu">Chashu</ToggleGroupItem>
            <ToggleGroupItem value="corn">Corn</ToggleGroupItem>
          </ToggleGroup>
          <Text variant="muted">{toppings.length === 0 ? "No extras" : `+ $${(toppings.length * 1.5).toFixed(2)} — ${toppings.join(", ")}`}</Text>
        </Glass>
      </View>
  );
}

Toggle Group — Singlesingle.tsx

toggle-group/variants/single.tsx open

Single or multi-select group over toggle buttons.

import { ToggleGroupSingle } from "@/components/ui/toggle-group/variants/single";

export function Example() {
  return (
    <ToggleGroupSingle />
  );
}

import * as React from "react";
import { View } from "react-native";
import { ToggleGroup, ToggleGroupItem } from "../toggle-group";
import { Text } from "../../text/text";
import { Glass } from "../../glass/glass";

/** ToggleGroupSingle — single-select delivery speed picker. */
export function ToggleGroupSingle() {
  const [speed, setSpeed] = React.useState("express");
  return (
    <View className="w-full gap-3">
        <Glass interactive curvature="edge" className="w-full gap-3 rounded-2xl p-4">
          <Text variant="small" className="font-semibold">Delivery speed</Text>
          <ToggleGroup type="single" value={speed} onValueChange={(v) => setSpeed(v as string)} className="w-full flex-row flex-wrap">
            <ToggleGroupItem value="standard">Standard</ToggleGroupItem>
            <ToggleGroupItem value="express">Express</ToggleGroupItem>
            <ToggleGroupItem value="priority">Priority</ToggleGroupItem>
          </ToggleGroup>
          <Text variant="muted">{speed === "standard" ? "Free · 40–55 min" : speed === "express" ? "$2.90 · 20–30 min" : "$4.90 · 10–15 min"}</Text>
        </Glass>
      </View>
  );
}