Una guía de Orbit centrada en viajes, con colores y espaciado reales del producto, opciones nativas de equipaje, un desglose de precios coherente y un flujo local completo de revisión.
Diseño de selección de viajes del sistema de diseño Kiwi Orbit
Presenta la ruta antes de los extras
El resumen de la ruta muestra los códigos de los dos aeropuertos, los nombres de las ciudades y una duración ficticia antes de las opciones de equipaje. Así, el contexto de compra permanece visible mientras el usuario compara los extras. La línea discontinua es una ilustración original de CSS, no un gráfico de rutas de una aerolínea ni una promesa sobre un servicio real.
Separa las opciones del total
Los viajeros y el equipaje aparecen a un lado, y el desglose del precio se muestra junto a ellos. El mismo estado determina tanto los controles seleccionados como los importes. En el móvil, el resumen aparece después de las opciones en el orden del documento, para que quede claro qué datos explican el total.
Color del producto y comentarios del sistema de diseño Kiwi Orbit
Usa la familia del producto para la acción principal
El paquete de tokens proporciona una acción de producto verde con tonos diferenciados para hover y active. La referencia muestra los valores exactos de la función del botón, en lugar de depender de un tono de verde de marca supuesto. Las superficies neutras en tonos nube enmarcan los extras seleccionables sin hacer que todos los paneles compitan con la acción de revisión.
Haz que los comentarios sean específicos para el resultado
La alerta de éxito nativa indica «Selección revisada localmente» y muestra la cantidad de viajeros y el total. Se borra cada vez que cambia una opción. Así, una confirmación verde anterior no puede seguir visible como si validara un conjunto de extras recién editado.
Tipografía y jerarquía de precios del sistema de diseño Kiwi Orbit
Usa los estilos de texto nativos para el contenido explicativo
Orbit ofrece estilos de texto de cuerpo pequeño de 13 px y normal de 15 px, además de opciones de mayor tamaño. El ejemplo usa los componentes Text y Heading nativos, mientras que los códigos de ruta y el total tienen un énfasis propio. El navegador usa aquí una pila de fuentes alternativas documentada; no se carga ninguna fuente de marca de Kiwi.com de forma silenciosa.
Mantén las unidades junto a los importes
Cada precio del equipaje indica que es por viajero. El desglose multiplica cada extra seleccionado por la cantidad de viajeros, y el total destaca visualmente más que sus partidas. La unidad no debe desaparecer en móviles, porque una cifra grande y llamativa sin especificar su alcance puede interpretarse fácilmente de forma incorrecta.
Escalas de radios y espaciado del sistema de diseño Kiwi Orbit
Diferencia los controles de las superficies más amplias
La escala de radios actual incluye valores de 2, 4, 6, 8, 12 y 16 px, además de las opciones sin radio y completo. Los paneles de ruta y resumen usan esquinas de 12 px, mientras que los controles nativos conservan sus propias reglas de tema. Aplicar el radio más grande a cada elemento anidado haría que el formulario perdiera jerarquía.
Mantén intacta la fila de opciones cuando se ajuste en varias líneas
Casillas y selectores controlados del sistema de diseño Kiwi Orbit
Usa las etiquetas de los componentes y los campos de información
Checkbox recibe la etiqueta visible y la información complementaria mediante propiedades públicas. Select recibe una etiqueta y opciones explícitas para elegir entre uno y cuatro viajeros. Estas composiciones nativas conservan su comportamiento de interacción y etiquetado, sin recurrir a un div con apariencia de control de equipaje en el que se pueda hacer clic.
Modela cada extra de forma independiente
El equipaje de cabina y el equipaje facturado son booleanos independientes. La aplicación no da a entender que seleccionar uno deseleccione automáticamente el otro. Esta es una política de ejemplo deliberadamente sencilla; una aerolínea real podría ofrecer paquetes mutuamente excluyentes o franquicias específicas para cada pasajero, que requerirían un modelo distinto.
Cálculo y revisión de la selección del sistema de diseño Kiwi Orbit
Calcula el total con una sola fórmula
El ejemplo calcula el número de viajeros multiplicado por la tarifa base más los extras seleccionados por persona. No guarda un total editable por separado que pueda dejar de coincidir con las opciones visibles. Todos los precios y las franquicias son expresamente ficticios y no corresponden a ofertas actuales de Kiwi.com.
Guarda una instantánea de la revisión
La revisión guarda juntos el número de viajeros, las opciones de equipaje y el total. Al cambiar cualquier control, se borra esa instantánea. Así, el ejemplo demuestra la coherencia del estado sin presentar un clic local como una reserva, un pago, una comprobación de disponibilidad en tiempo real o una cotización definitiva.
Comentarios accesibles sobre la selección del sistema de diseño Kiwi Orbit
Comprueba conjuntamente las etiquetas y el recálculo
Con el teclado o el puntero, se puede elegir el número de viajeros y activar cualquiera de las dos opciones de equipaje mediante los controles nativos. El resultado de la revisión aparece en una región de estado. No se inventa ninguna validación para el equipaje opcional: dejar sin seleccionar ambos extras es un estado válido para esta tarifa ficticia.
Selecciona dos viajeros y añade equipaje de cabina.
Añade equipaje facturado y comprueba los tres importes del desglose.
Revisa la selección localmente, cambia una opción y confirma que desaparezca el mensaje de éxito anterior.
Evita consecuencias ocultas
La página explica el alcance ficticio encima del formulario y junto al total. La acción es «Revisar selección local», no «Comprar» ni «Reservar». Todos los cambios permanecen en la página y no se solicitan datos personales de los pasajeros, ya que no son necesarios para una demostración.
Proveedor y estilos compilados del sistema de diseño Kiwi Orbit
Usa la versión estable correspondiente
Este ejemplo fija la versión de los componentes React en 27.7.0 y la de las referencias a tokens en 11.0.0. Importa OrbitProvider, el paquete defaultTheme y el archivo compilado lib/tailwind.css. Si se omite esa hoja de estilos, los estilos de los componentes basados en utilidades quedan incompletos, aunque se renderice el árbol de React.
OrbitProvider y el paquete defaultTheme.
Archivo compilado lib/tailwind.css de components 27.7.0.
Node.js 22 o posterior para el entorno de compilación del paquete.
Especifica claramente los requisitos de despliegue
Ejemplos de componentes del sistema de diseño Kiwi Orbit
main.jsx — ejemplo completo y funcional
Elige el equipaje y revisa un total de ejemplo. El código fuente siguiente es la entrada completa de React, incluidos todos los estados y la validación.
jsx
import React, { useState } from "react";
import { createRoot } from "react-dom/client";
import {
OrbitProvider,
Button,
Checkbox,
Select,
Alert,
Heading,
Text,
} from "@kiwicom/orbit-components";
import defaultTheme from "@kiwicom/orbit-components/lib/defaultTheme";
import "@kiwicom/orbit-components/lib/tailwind.css";
import "./orbit.css";
function App() {
const [travellers, setTravellers] = useState("1"),
[cabin, setCabin] = useState(false),
[checked, setChecked] = useState(false),
[saved, setSaved] = useState(null);
const count = Number(travellers),
extras = (cabin ? 18 : 0) + (checked ? 32 : 0),
total = count * (96 + extras);
function update(fn) {
fn();
setSaved(null);
}
return (
<OrbitProvider theme={defaultTheme}>
<main className="trip">
<header>
<Text size="small">ORIGINAL TRAVEL SPECIMEN</Text>
<Heading as="h1" type="title1">Choose what travels with you</Heading>
<Text>
Fictional one-way fare. Prices illustrate the interface, not a
bookable flight.
</Text>
</header>
<div className="trip-grid">
<section>
<div className="route">
<div>
<strong>PRG</strong>
<span>Prague</span>
</div>
<div className="route-line">
<span>1h 45m · direct</span>
<i></i>
</div>
<div>
<strong>AMS</strong>
<span>Amsterdam</span>
</div>
</div>
<div className="options">
<Heading as="h2" type="title3">Travellers and baggage</Heading>
<Select
label="Travellers"
ariaLabel="Travellers"
value={travellers}
options={[1, 2, 3, 4].map((n) => ({
value: String(n),
label: n + " adult" + (n === 1 ? "" : "s"),
}))}
onChange={(e) => update(() => setTravellers(e.target.value))}
/>
<div className="bag-option">
<div>
<Heading as="h3" type="title4">Personal item</Heading>
<Text size="small">
Fits under the seat · included in this example fare
</Text>
</div>
<strong>Included</strong>
</div>
<div className="bag-option">
<Checkbox
label="Add cabin baggage"
info="One 10 kg bag per traveller · fictional allowance"
checked={cabin}
onChange={(e) => update(() => setCabin(e.target.checked))}
/>
<strong>
€18<span>/ traveller</span>
</strong>
</div>
<div className="bag-option">
<Checkbox
label="Add checked baggage"
info="One 20 kg bag per traveller · fictional allowance"
checked={checked}
onChange={(e) => update(() => setChecked(e.target.checked))}
/>
<strong>
€32<span>/ traveller</span>
</strong>
</div>
</div>
</section>
<aside>
<Heading as="h2" type="title3">Your example selection</Heading>
<dl>
<dt>Base fare × {count}</dt>
<dd>€{96 * count}</dd>
{cabin && (
<>
<dt>Cabin baggage × {count}</dt>
<dd>€{18 * count}</dd>
</>
)}
{checked && (
<>
<dt>Checked baggage × {count}</dt>
<dd>€{32 * count}</dd>
</>
)}
</dl>
<div className="trip-total">
<span>Total</span>
<strong>€{total}</strong>
</div>
<Text size="small">
All amounts are illustrative. No payment or reservation will be
created.
</Text>
<Button
fullWidth
onClick={() => setSaved({ count, cabin, checked, total })}
>
Review local selection
</Button>
{saved && (
<div role="status" className="trip-confirm">
<Alert type="success" title="Selection reviewed locally">
{saved.count} traveller{saved.count === 1 ? "" : "s"} · €
{saved.total}. No booking created.
</Alert>
</div>
)}
</aside>
</div>
<footer>
Native Orbit 27.7.0 components and compiled package styles. Original
layout and fictional pricing logic by OpenDesign.
</footer>
</main>
</OrbitProvider>
);
}
createRoot(document.getElementById("root")).render(<App />);
Guárdalo junto a main.jsx. Estas reglas de composición personalizadas se distinguen de la referencia de tokens de la biblioteca.
04
Configuración del agente del sistema de diseño Kiwi Orbit
Punto de partida para la implementación
El ejemplo nativo fijado se empaquetó y se comprobó localmente en el navegador. El ejemplo utiliza únicamente el estado local de la aplicación.
sh
npm create vite@latest orbit-trip -- --template react
cd orbit-trip
npm install
npm install [email protected][email protected] @kiwicom/[email protected]
# Use Node.js >=22. Replace src/main.jsx and add src/orbit.css.
npm run dev
Una instrucción para tu proyecto
Instrucción para el agente
Crea un selector de extras de viaje con componentes nativos de Orbit y estilos compilados. Mantén coherentes el contexto de la ruta, los precios por viajero, los extras seleccionados y el total. Indica claramente que los precios son ficticios y que la revisión es local, borra la revisión anterior cuando se edite y no des a entender que hay funciones de reserva o pago.
05
Fuentes y alcance del sistema de diseño Kiwi Orbit
Guía de aplicación de OpenDesign. La ruta, la duración, los precios y las franquicias de equipaje son ficticios. Los controles nativos de Orbit funcionan localmente; no se realiza ninguna búsqueda de vuelos, reserva ni pago.
