Ride Option

Pro

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”.

Preview

Installation

npx @lumioui/cli add pro/ride-option

Usage

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

Also exported: RideOptionList.

Examples

Micromobility

Bikes and scooters at a dock.

Parcel

Pick a vehicle for a same-day delivery.

Ride tiers

The "choose a ride" sheet lifted over the trip map.

API reference

RideOption

Prop Type Default
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 Default
children* React.ReactNode —
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".

 "Ride options"
indicator "ring" | "slab"

"ring" (default) outlines the picked row; "slab" lights it with a soft accent slab that glides on transforms only.

 "ring"
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.

 false
requestedLabel string

Read on the requested row in place of its ETA. Default "Finding your driver".

 "Finding your driver"
className string —