SelectiOS

Bottom-sheet picker with staggered options.

$ npx lumioui add select

import { SelectItem } from "@/components/ui/select/select";

Parts: SelectItem

Props21

SelectItem
value	string
label?	string
icon?	IconName	Leading icon in the option row (and in the trigger when selected).
subtitle?	string	Secondary text under the label.
className?	string
children?	React.ReactNode
Select
value?	string	Controlled value. Omit with defaultValue for uncontrolled use.
defaultValue?	string	Uncontrolled initial value.
onValueChange?	(value: string) => void
open?	boolean	Controlled open state. Omit with defaultOpen for uncontrolled use.
defaultOpen?	boolean	Uncontrolled initial open state.
onOpenChange?	(open: boolean) => void
options?	SelectOption[]
placeholder?	string
disabled?	boolean
title?	string	Title shown at the top of the options sheet.
variant?	"field" \| "row"	Trigger style: "field" renders a form input, "row" renders a settings row (label left, value + chevron right). Default "field".
icon?	IconName	Leading icon on the trigger when no option is selected (field variant).
label?	string	Visible label on the row variant. Ignored on field.
className?	string
children?	React.ReactNode

Select — Paymentpayment.tsx

select/variants/payment.tsx open

Bottom-sheet picker with staggered options.

import { SelectPayment } from "@/components/ui/select/variants/payment";

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

import * as React from "react";
import { View } from "react-native";
import { Select } from "../select";
import { Icon } from "../../icon/icon";
import { Text } from "../../text/text";
import { Glass } from "../../glass/glass";

/** SelectPayment — card picker staged as a send-money funding row. */
export function SelectPayment() {
  const [card, setCard] = React.useState("visa");
  const label =
    card === "visa" ? "Visa ···· 4242" :
    card === "mc" ? "Mastercard ···· 5555" :
    card === "amex" ? "Amex ···· 1005" :
    card === "apple" ? "Apple Pay" : "";
  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">
            <View className="flex-row items-center gap-2">
              <Icon name="send" size="sm" color="mutedForeground" />
              <Text variant="small" className="font-semibold">Paying from</Text>
            </View>
            <Text variant="muted">$86.00</Text>
          </View>

          <Select
            variant="row"
            label="Card"
            value={card}
            onValueChange={setCard}
            options={[
              { value: "visa", label: "Visa ···· 4242", icon: "credit-card", subtitle: "Expires 08/27" },
              { value: "mc", label: "Mastercard ···· 5555", icon: "credit-card", subtitle: "Expires 03/26" },
              { value: "amex", label: "Amex ···· 1005", icon: "credit-card", subtitle: "Expires 11/28" },
              { value: "apple", label: "Apple Pay", icon: "phone", subtitle: "Touch ID required" },
            ]}
            placeholder="Choose"
            title="Payment method"
            className="w-full"
          />

          <Glass interactive curvature="edge" className="flex-row items-center gap-2 rounded-xl px-3 py-2.5">
            <Icon name="check-circle" size="sm" color="success" />
            <Text variant="muted">{card ? `${label} charged instantly` : "Pick a card to continue"}</Text>
          </Glass>
        </Glass>
      </View>
  );
}

Select — Slotslot.tsx

select/variants/slot.tsx open

Bottom-sheet picker with staggered options.

import { SelectSlot } from "@/components/ui/select/variants/slot";

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

import * as React from "react";
import { View } from "react-native";
import { Select } from "../select";
import { Text } from "../../text/text";
import { Glass } from "../../glass/glass";

/** SelectSlot — delivery window picker as settings rows with icons. */
export function SelectSlot() {
  const [slot, setSlot] = React.useState("today");
  return (
    <View className="w-full gap-3">
        <Glass interactive curvature="edge" className="w-full gap-4 rounded-2xl p-4">
          <View className="gap-1.5">
            <Text variant="small" className="font-semibold">Delivery</Text>
            <Select
              variant="row"
              label="Time"
              value={slot}
              onValueChange={setSlot}
              options={[
                { value: "today", label: "Today · 2–4 pm", icon: "clock", subtitle: "Arrives in ~2 hours" },
                { value: "tomorrow", label: "Tomorrow · 9–11 am", icon: "clock", subtitle: "Morning delivery" },
                { value: "sat", label: "Sat Sep 12 · 10 am–12 pm", icon: "calendar", subtitle: "Weekend window" },
              ]}
              placeholder="Pick"
              title="Delivery slot"
              className="w-full"
            />
          </View>
          <View className="gap-1.5 border-t border-border pt-3">
            <Text variant="muted">Payment card</Text>
            <Select
              variant="row"
              label="Card"
              value=""
              onValueChange={() => {}}
              options={[{ value: "visa", label: "Visa ···· 4242" }]}
              placeholder="None on file"
              disabled
              className="w-full"
            />
          </View>
        </Glass>
      </View>
  );
}