Red Orange Yellow Green Blue Picker

A ROYGB (Red/Orange/Yellow/Green/Blue) picker is a UI/UX component that allows users to select a five-level color-coded status value from a dropdown. ROYGB extends the traditional RAG (Red/Amber/Green) model by adding orange and blue levels for more granular status reporting. Red indicates a critical problem, orange signals a hazard or significant risk, yellow means caution or minor issues, green indicates normal on-track status, and blue represents a paused or informational state. The component renders as a select element with appropriate accessibility attributes, providing native keyboard navigation and screen reader support. This headless component provides the semantic structure while allowing consumers to apply their own visual styling.

Example

Show demo markup

<div class="red-orange-yellow-green-blue-picker" role="radiogroup" aria-label="Rating"><button class="red-orange-yellow-green-blue-picker-button" role="radio" aria-checked="false">Red</button><button class="red-orange-yellow-green-blue-picker-button" role="radio" aria-checked="false">Orange</button><button class="red-orange-yellow-green-blue-picker-button" role="radio" aria-checked="false">Yellow</button><button class="red-orange-yellow-green-blue-picker-button" role="radio" aria-checked="true">Green</button><button class="red-orange-yellow-green-blue-picker-button" role="radio" aria-checked="false">Blue</button></div>

Usage example

<script lang="ts">
  import RedOrangeYellowGreenBluePicker from './RedOrangeYellowGreenBluePicker.svelte';
</script>

<RedOrangeYellowGreenBluePicker label="Alert status" value="green" />

Show Svelte source

// In your Svelte component:
import RedOrangeYellowGreenBluePicker from "lily-design-system-svelte-headless/components/RedOrangeYellowGreenBluePicker/RedOrangeYellowGreenBluePicker.svelte";

<RedOrangeYellowGreenBluePicker label="Picker" />

Usage

Risk matrix with five-level granularity:

<Field label="Clinical risk assessment" required>
  <RedOrangeYellowGreenBluePicker label="Clinical risk level">
    <RedOrangeYellowGreenBluePickerButton value="red" label="Red - Critical" onclick={handleSelect} />
    <RedOrangeYellowGreenBluePickerButton value="orange" label="Orange - Serious" onclick={handleSelect} />
    <RedOrangeYellowGreenBluePickerButton value="yellow" label="Yellow - Caution" selected onclick={handleSelect} />
    <RedOrangeYellowGreenBluePickerButton value="green" label="Green - Good" onclick={handleSelect} />
    <RedOrangeYellowGreenBluePickerButton value="blue" label="Blue - Excellent" onclick={handleSelect} />
  </RedOrangeYellowGreenBluePicker>
</Field>

Detailed project health assessment:

<RedOrangeYellowGreenBluePicker label="Project health" data-dashboard="main">
  <RedOrangeYellowGreenBluePickerButton value="red" label="Red - Blocked" onclick={handleSelect} />
  <RedOrangeYellowGreenBluePickerButton value="orange" label="Orange - Major risks" onclick={handleSelect} />
  <RedOrangeYellowGreenBluePickerButton value="yellow" label="Yellow - Minor risks" onclick={handleSelect} />
  <RedOrangeYellowGreenBluePickerButton value="green" label="Green - On track" selected onclick={handleSelect} />
  <RedOrangeYellowGreenBluePickerButton value="blue" label="Blue - Ahead of schedule" onclick={handleSelect} />
</RedOrangeYellowGreenBluePicker>

Props

label: string (required) -- accessible label for the select
value: string (default: "") -- currently selected status, bindable
...restProps: Any additional HTML attributes spread onto the select

Options

red: Critical problem
orange: Hazard or significant risk
yellow: Caution or minor issues
green: Normal, on track
blue: Paused or informational

Keyboard Interactions

Arrow keys navigate options (native select behavior)
Enter/Space opens the dropdown
Escape closes the dropdown

ARIA

aria-label on the select from the label prop

When to Use

Use for selecting a five-level colour status extending the traditional RAG pattern with additional granularity.
Use in risk matrices where distinguishing between critical, serious, and cautionary levels matters.
Use in detailed health assessments that need more than three status tiers.
Use in project tracking dashboards where five levels capture the full range of progress states.

When Not to Use

Do not use for display-only status -- use RedOrangeYellowGreenBlueView instead.
Do not use when a simpler three-level scale suffices -- use RedAmberGreenPicker instead.
Do not use for binary on/off states -- use SwitchButton or CheckboxInput instead.

Headless

The RedOrangeYellowGreenBluePicker headless component provides a <select> with aria-label and five predefined options (red, orange, yellow, green, blue) with two-way value binding. Native select keyboard navigation is fully supported. The consumer provides all visual styling, including color coding.

Styles

The consumer provides all CSS styling. The component renders with a .red-orange-yellow-green-blue-picker class for targeting. No default styles are included — this is a fully headless component.

Testing

Verify the component renders a <div> element with class red-orange-yellow-green-blue-picker
Verify aria-label` on the select from the label prop
Verify keyboard interactions work correctly
Verify pass-through attributes are applied

Advice

Designers: Assign distinct, accessible colors to each of the five levels and always include text labels since five color-only indicators are harder to distinguish.
Developers: Initialize the value prop to a valid default, and consider providing a placeholder option if no initial status is appropriate.

Implementation Notes

Renders as <select aria-label={label}> with five options: red, orange, yellow, green, blue
The value prop is two-way binding
Uses native select keyboard navigation

Composition

RedOrangeYellowGreenBluePicker is the container for RedOrangeYellowGreenBluePickerButton children. Use <RedOrangeYellowGreenBluePicker> to wrap <RedOrangeYellowGreenBluePickerButton> elements, where each button represents one of the five status levels with aria-pressed toggle state.

Related components

red-orange-yellow-green-blue-picker-button — a picker button for selecting a five-level color status

References

Traffic Light Rating System: https://en.wikipedia.org/wiki/Traffic_light_rating_system

Canonical contract

Generated from this component's canonical metadata — the machine-checked source the implementations are held to.

Metadata

Component: red-orange-yellow-green-blue-picker
PascalCase: RedOrangeYellowGreenBluePicker
Description: a picker for selecting a five-level color status
Status: stable — exercised in composed page flows under e2e and axe, beyond the per-component checks
HTML tag: <div>
CSS class: .red-orange-yellow-green-blue-picker
Interactive: yes

ARIA

aria-label on the select from the label prop

Keyboard

Arrow keys navigate options (native select behavior)
Enter/Space opens the dropdown
Escape closes the dropdown

Props

label: string (required) -- accessible label for the select
value: string (default: "") -- currently selected status, bindable
...restProps: Any additional HTML attributes spread onto the select