Radio GroupAndroid

Single-select options with animated indicator.

$ npx lumioui add radio-group

import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group/radio-group";

Parts: RadioGroupItem

Props12

RadioGroup
value?	string	Controlled value. Omit with defaultValue for uncontrolled use.
defaultValue?	string	Uncontrolled initial value.
onValueChange?	(value: string) => void
disabled?	boolean
className?	string
RadioGroupItem
value	string
label?	string
icon?	IconName	Leading icon in the option row.
subtitle?	string	Secondary text under the label.
disabled?	boolean
className?	string
children?	React.ReactNode	Custom content rendered next to the ring when `label` is absent.

Radio Group — Deliverydelivery.tsx

radio-group/variants/delivery.tsx open

Single-select options with animated indicator.

import { RadioDelivery } from "@/components/ui/radio-group/variants/delivery";

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

import * as React from "react";
import { View } from "react-native";
import { RadioGroup, RadioGroupItem } from "../radio-group";
import { Text } from "../../text/text";
import { Glass } from "../../glass/glass";

/** RadioDelivery — delivery speed options with icons and subtitles. */
export function RadioDelivery() {
  const [speed, setSpeed] = React.useState("standard");
  return (
    <View className="w-full gap-3">
        <Glass interactive curvature="edge" className="w-full gap-2 rounded-2xl p-4">
          <Text variant="small" className="font-semibold">Delivery speed</Text>
          <RadioGroup value={speed} onValueChange={setSpeed}>
            <RadioGroupItem value="standard" label="Standard" subtitle="Free · 30–40 min" icon="package" />
            <RadioGroupItem value="priority" label="Priority" subtitle="$2.99 · 15–20 min" icon="zap" />
            <RadioGroupItem value="drone" label="Drone" subtitle="Unavailable in your area" icon="send" disabled />
          </RadioGroup>
          <Text variant="muted">
            {speed === "standard" ? "Free — arrives 30–40 min" : speed === "priority" ? "+$2.99 — arrives 15–20 min" : "Unavailable nearby"}
          </Text>
        </Glass>
      </View>
  );
}

Radio Group — Paymentpayment.tsx

radio-group/variants/payment.tsx open

Single-select options with animated indicator.

import { RadioPayment } from "@/components/ui/radio-group/variants/payment";

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

import * as React from "react";
import { View } from "react-native";
import { RadioGroup, RadioGroupItem } from "../radio-group";
import { Text } from "../../text/text";
import { Glass } from "../../glass/glass";

/** RadioPayment — payment method picker for Lumo Wallet. */
export function RadioPayment() {
  const [payment, setPayment] = React.useState("wallet");
  return (
    <View className="w-full gap-3">
        <Glass interactive curvature="edge" className="w-full gap-2 rounded-2xl p-4">
          <Text variant="small" className="font-semibold">Pay with</Text>
          <RadioGroup value={payment} onValueChange={setPayment}>
            <RadioGroupItem value="wallet" label="Wallet balance" subtitle="$4,280.50 available" icon="zap" />
            <RadioGroupItem value="card" label="Visa ···· 4242" subtitle="Expires 09/28" icon="credit-card" />
          </RadioGroup>
          <Text variant="muted">{payment === "wallet" ? "Instant — drawn from your balance" : "Charged when the order ships"}</Text>
        </Glass>
      </View>
  );
}