# Ride Option

Ride and delivery tier picker showing vehicle, seats, arrival time and price. The chosen vehicle rolls forward, and once requested it drives off while its row reads “Finding your driver”.

> Composed · Pro · Forms & Inputs — React Native, Expo Go compatible.

## Install

```bash
npx @lumioui/cli add pro/ride-option
```

## Import

```tsx
import { RideOptionList, RideOption } from "@/components/ui/ride-option/ride-option";
```

## Variants

- `micromobility` — Micromobility: `npx @lumioui/cli add pro/ride-option-micromobility`
- `parcel` — Parcel: `npx @lumioui/cli add pro/ride-option-parcel`
- `tiers` — Ride tiers: `npx @lumioui/cli add pro/ride-option-tiers`

## Props

### RideOption

| Prop | Type | Notes |
| --- | --- | --- |
| `value` | `string` | Value reported to RideOption.List. |
| `title` | `string` | Tier name — "Roomy", "E-bike", "Van". |
| `glyph?` | `VehicleKind | React.ReactNode` | A built-in vehicle illustration, or your own node. |
| `glyphColor?` | `string` | Body colour for a built-in glyph (hex). |
| `seats?` | `number` | Passenger seats — shows a person glyph + count. |
| `eta?` | `string` | Second line — "3 min away · 6:42 PM", "Pickup in 25 min". |
| `description?` | `string` | Third line, muted — "Recent models, more legroom". |
| `price?` | `string` | Price label — "$18.40", "From $2.10 + $0.39/min". |
| `originalPrice?` | `string` | Original price, struck through, when a promo applies. |
| `tag?` | `RideTag` | — |
| `battery?` | `number` | Battery 0–100 for bikes / scooters — draws a charge bar on the second line. |
| `range?` | `string` | Range text next to the battery — "24 km range". |
| `selected?` | `boolean` | Standalone selected state (List supplies it otherwise). |
| `disabled?` | `boolean` | Not bookable right now — dimmed and unpressable. |
| `unavailableLabel?` | `string` | Replaces the price when disabled — "Unavailable". |
| `className?` | `string` | — |

### RideOptionList

| Prop | Type | Notes |
| --- | --- | --- |
| `value?` | `string` | Controlled selected value. |
| `defaultValue?` | `string` | Uncontrolled initial value. |
| `onValueChange?` | `(value: string) => void` | Fires when the rider picks another tier. |
| `accessibilityLabel?` | `string` | Group label for screen readers. Default "Ride options". |
| `indicator?` | `"ring" | "slab"` | "ring" (default) outlines the picked row; "slab" lights it with a soft  accent slab that glides on transforms only. |
| `requested?` | `boolean` | The picked ride has been requested: its car drives out, its row holds  lit reading `requestedLabel`, the other rows dim and stop taking taps. |
| `requestedLabel?` | `string` | Read on the requested row in place of its ETA. Default "Finding your driver". |
| `className?` | `string` | — |
| `children` | `React.ReactNode` | — |

## Icons rendered

- `user` — /icons.html?i=user

Source: https://lumioui.com/components/ride-option