Home / Components / expandable-control

Expandable ControlAndroid

Inline row that expands into rich controls.

$ npx lumioui add expandable-control

import { ExpandableControl } from "@/components/ui/expandable-control/expandable-control";

Props9

icon	IconName
label	string
variant?	"default" \| "secondary" \| "outline" \| "ghost" \| "destructive"	Visual style. Default "default".
size?	"sm" \| "md" \| "lg"	Size. Default "md".
expanded?	boolean	Controlled expanded state.
defaultExpanded?	boolean	Initial expanded state (uncontrolled). Default false.
onExpandedChange?	(expanded: boolean) => void
disabled?	boolean
className?	string

Expandable Control — Actionsactions.tsx

expandable-control/variants/actions.tsx open

Inline row that expands into rich controls.

import { ExpandableActions } from "@/components/ui/expandable-control/variants/actions";

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

import * as React from "react";
import { View } from "react-native";
import { ExpandableControl } from "../expandable-control";
import { Image } from "../../image/image";
import { Text } from "../../text/text";
import { Glass } from "../../glass/glass";

/** ExpandableActions — all five colorways as photo actions under a real photo. */
export function ExpandableActions() {
  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-center justify-between">
            <Text variant="small" className="font-semibold">Kyoto at Dusk.jpg</Text>
            <Text variant="muted" className="text-xs">3.2 MB · HEIC</Text>
          </View>
          <Image
            source={{ uri: "https://images.unsplash.com/photo-1493976040374-85c8e12f0c0e?w=640&h=400&fit=crop&q=70&auto=format" }}
            rounded="lg"
            aspectRatio={16 / 10}
            className="w-full"
            alt="Kyoto at dusk"
          />
          <View className="gap-2 flex-row flex-wrap">
            <ExpandableControl icon="share" label="Share with Priya" variant="default" />
            <ExpandableControl icon="edit" label="Edit in Snapseed" variant="secondary" />
            <ExpandableControl icon="trash" label="Delete Photo" variant="destructive" />
            <ExpandableControl icon="info" label="f/1.8 · ISO 400 · Kyoto" variant="outline" />
            <ExpandableControl icon="heart" label="Favorite" variant="ghost" />
          </View>
        </Glass>
      </View>
  );
}

Expandable Control — Sizessizes.tsx

expandable-control/variants/sizes.tsx open

Inline row that expands into rich controls.

import { ExpandableSizes } from "@/components/ui/expandable-control/variants/sizes";

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

import * as React from "react";
import { View } from "react-native";
import { ExpandableControl } from "../expandable-control";
import { Text } from "../../text/text";

/** ExpandableSizes — sm / md / lg money-send controls. */
export function ExpandableSizes() {
  return (
    <View className="w-full gap-3">
        <Text variant="small" className="text-white drop-shadow">Sizes</Text>
        <View className="gap-2 flex-row flex-wrap items-center">
          <ExpandableControl icon="send" label="Send $86.00" size="sm" />
          <ExpandableControl icon="send" label="Send $860.00" size="md" />
          <ExpandableControl icon="send" label="Send $8,600.00" size="lg" />
        </View>
      </View>
  );
}

Expandable Control — Toggletoggle.tsx

expandable-control/variants/toggle.tsx open

Inline row that expands into rich controls.

import { ExpandableToggle } from "@/components/ui/expandable-control/variants/toggle";

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

import * as React from "react";
import { View } from "react-native";
import { ExpandableControl } from "../expandable-control";
import { Text } from "../../text/text";

/** ExpandableToggle — controlled icon → labeled pill expansion. */
export function ExpandableToggle() {
  const [expanded, setExpanded] = React.useState(false);
  return (
    <View className="w-full gap-3">
        <Text variant="small" className="text-white drop-shadow">Toggle on press</Text>
        <ExpandableControl icon="plus" label="Add to Lisbon Album" expanded={expanded} onExpandedChange={setExpanded} />
      </View>
  );
}