# Components

Accessible React components built on Base UI, styled with intent and emphasis.

## Navigation

- [Breadcrumb](https://ticketsolutionsptyltd.github.io/roadie/components/breadcrumb.md): A navigation trail showing the current page location within a hierarchy
- [Link](https://ticketsolutionsptyltd.github.io/roadie/components/link.md): A text link that routes through your app’s router and underlines to match its emphasis
- [Navigator](https://ticketsolutionsptyltd.github.io/roadie/components/navigator.md): A full-height app frame with one set of destinations, drawn as a vertical navigation on large screens and a floating tab bar on phones
- [Steps](https://ticketsolutionsptyltd.github.io/roadie/components/steps.md): A multi-step wizard for guiding users through sequential tasks
- [Tabs](https://ticketsolutionsptyltd.github.io/roadie/components/tabs.md): Tabbed navigation between related views with an animated active indicator.

## Layout

- [Accordion](https://ticketsolutionsptyltd.github.io/roadie/components/accordion.md): Vertically stacked collapsible content sections
- [Collapsible](https://ticketsolutionsptyltd.github.io/roadie/components/collapsible.md): A single panel that a trigger shows and hides
- [Pane](https://ticketsolutionsptyltd.github.io/roadie/components/pane.md): A scrolling column in an app frame, with a sticky header and footer and a place in the stack when panes share a screen
- [ScrollArea](https://ticketsolutionsptyltd.github.io/roadie/components/scroll-area.md): A scroll container with a consistent custom scrollbar
- [Separator](https://ticketsolutionsptyltd.github.io/roadie/components/separator.md): A visual divider between content sections

## Actions

- [Button](https://ticketsolutionsptyltd.github.io/roadie/components/button.md): An interactive control that triggers an action when pressed
- [IconButton](https://ticketsolutionsptyltd.github.io/roadie/components/icon-button.md): A square button for icon-only actions
- [Toggle](https://ticketsolutionsptyltd.github.io/roadie/components/toggle.md): A button that stays pressed or unpressed, such as favourite or bold
- [Toggle group](https://ticketsolutionsptyltd.github.io/roadie/components/toggle-group.md): A segmented control for picking a view, a date range or a set of options
- [Toolbar](https://ticketsolutionsptyltd.github.io/roadie/components/toolbar.md): A row of buttons, toggles, links, and menus that takes one Tab stop

## Fields

- [Editor](https://ticketsolutionsptyltd.github.io/roadie/components/editor.md): A rich-text field that saves its content as an EditorValue
- [Field](https://ticketsolutionsptyltd.github.io/roadie/components/field.md): A compound wrapper for labelled form fields with helper and error text
- [Fieldset](https://ticketsolutionsptyltd.github.io/roadie/components/fieldset.md): A compound wrapper for grouping related form fields with a legend
- [Input](https://ticketsolutionsptyltd.github.io/roadie/components/input.md): A text input field for collecting user data
- [Label](https://ticketsolutionsptyltd.github.io/roadie/components/label.md): A styled label for form controls
- [Number field](https://ticketsolutionsptyltd.github.io/roadie/components/number-field.md): A number input with buttons to step the value down and up
- [OTP field](https://ticketsolutionsptyltd.github.io/roadie/components/otp-field.md): A one-time code input with one slot per character
- [Query field](https://ticketsolutionsptyltd.github.io/roadie/components/query-field.md): A search field that turns what you type into filter chips
- [Textarea](https://ticketsolutionsptyltd.github.io/roadie/components/textarea.md): A multi-line text input for longer form content

## Choices

- [Autocomplete](https://ticketsolutionsptyltd.github.io/roadie/components/autocomplete.md): A text input with suggestions that optionally complete your typing
- [Checkbox](https://ticketsolutionsptyltd.github.io/roadie/components/checkbox.md): A box people tick to opt in, or to pick any number of options from a set
- [Combobox](https://ticketsolutionsptyltd.github.io/roadie/components/combobox.md): A searchable dropdown for filtering and selecting from a list of options
- [Radio group](https://ticketsolutionsptyltd.github.io/roadie/components/radio-group.md): A group of radio buttons for selecting one option from a set
- [Select](https://ticketsolutionsptyltd.github.io/roadie/components/select.md): A dropdown for choosing from a list of options
- [Slider](https://ticketsolutionsptyltd.github.io/roadie/components/slider.md): A track with a thumb to drag for a number or a range
- [Switch](https://ticketsolutionsptyltd.github.io/roadie/components/switch.md): An on or off control for a setting that applies straight away

## Date and time

- [Calendar](https://ticketsolutionsptyltd.github.io/roadie/components/calendar.md): A month or week grid for choosing a date, several dates or a range
- [CalendarTile](https://ticketsolutionsptyltd.github.io/roadie/components/calendar-tile.md): A two-row tile showing a month and a day
- [Countdown](https://ticketsolutionsptyltd.github.io/roadie/components/countdown.md): Time remaining, rendered as a time element
- [Dashboard period](https://ticketsolutionsptyltd.github.io/roadie/charts/dashboard-period.md): A dashboard’s period and what it compares with, in one picker
- [Date field](https://ticketsolutionsptyltd.github.io/roadie/components/date-field.md): A text field that reads a typed date, such as "14 mar" or "next fri", and suggests dates as you type
- [Date picker](https://ticketsolutionsptyltd.github.io/roadie/components/date-picker.md): A typed date field with a calendar to choose from, and a time when needed
- [Date range picker](https://ticketsolutionsptyltd.github.io/roadie/components/date-range-picker.md): A button showing a date range, opening presets, typed dates and a calendar
- [DateTime](https://ticketsolutionsptyltd.github.io/roadie/components/date-time.md): A date or a time, rendered as a time element
- [Duration](https://ticketsolutionsptyltd.github.io/roadie/components/duration.md): A length of time, rendered as a time element
- [Time field](https://ticketsolutionsptyltd.github.io/roadie/components/time-field.md): A text field that reads a typed time, such as "7:30pm" or "19:30"

## Collections

- [Card](https://ticketsolutionsptyltd.github.io/roadie/components/card.md): A container for grouping related content with optional header and footer
- [Carousel](https://ticketsolutionsptyltd.github.io/roadie/components/carousel.md): Compound horizontal or vertical carousel built on Embla
- [DataTable](https://ticketsolutionsptyltd.github.io/roadie/charts/data-table.md): A data-driven table with inline sparklines and meters
- [List](https://ticketsolutionsptyltd.github.io/roadie/components/list.md): An iOS-style list for menus, pickers, and settings. Rows have inset hairline dividers, leading tiles, and auto chevrons.
- [Marquee](https://ticketsolutionsptyltd.github.io/roadie/components/marquee.md): An infinitely scrolling horizontal content strip
- [RecordGrid](https://ticketsolutionsptyltd.github.io/roadie/components/record-grid.md): A grid of record cards to search, filter, sort, and page through
- [RecordTable](https://ticketsolutionsptyltd.github.io/roadie/components/record-table.md): A table of records to search, filter, sort, and page through
- [Sortable](https://ticketsolutionsptyltd.github.io/roadie/components/sortable.md): A drag-to-reorder wrapper for lists and rows, with a Move menu on each handle for keyboard and screen reader users
- [Table](https://ticketsolutionsptyltd.github.io/roadie/components/table.md): Styled table primitives for any screen

## Overlays

- [Dialog](https://ticketsolutionsptyltd.github.io/roadie/components/dialog.md): A modal overlay that interrupts the page for a focused task
- [Drawer](https://ticketsolutionsptyltd.github.io/roadie/components/drawer.md): A surface that slides in from an edge and swipes away
- [Menu](https://ticketsolutionsptyltd.github.io/roadie/components/menu.md): A dropdown list of actions that opens from a button
- [Popover](https://ticketsolutionsptyltd.github.io/roadie/components/popover.md): An anchored panel that floats beside its trigger
- [Toast](https://ticketsolutionsptyltd.github.io/roadie/components/toast.md): A brief message that confirms an action or reports its result
- [Tooltip](https://ticketsolutionsptyltd.github.io/roadie/components/tooltip.md): A short label that appears beside a control on hover or focus

## Status

- [Badge](https://ticketsolutionsptyltd.github.io/roadie/components/badge.md): A compact label for status, counts, or categories
- [Callout](https://ticketsolutionsptyltd.github.io/roadie/components/callout.md): An inline message that sits in the flow of the page
- [Delta](https://ticketsolutionsptyltd.github.io/roadie/charts/delta.md): A change with an arrow, coloured by whether it is good or bad
- [Empty state](https://ticketsolutionsptyltd.github.io/roadie/components/empty-state.md): Communicates that a section or page has no content, with optional media, message, and actions.
- [Meter](https://ticketsolutionsptyltd.github.io/roadie/charts/meter.md): Progress towards a maximum, with an optional target
- [Progress](https://ticketsolutionsptyltd.github.io/roadie/components/progress.md): A bar that shows how far a task has got while it runs
- [Skeleton](https://ticketsolutionsptyltd.github.io/roadie/components/skeleton.md): A placeholder that holds the space content will occupy while it loads
- [Sparkline](https://ticketsolutionsptyltd.github.io/roadie/charts/sparkline.md): A small line of recent history
- [StatTile](https://ticketsolutionsptyltd.github.io/roadie/charts/stat-tile.md): One number with its change, what it compares against, and its recent trend

## Media & brand

- [Avatar](https://ticketsolutionsptyltd.github.io/roadie/components/avatar.md): A person’s photo, with their initials or an icon when there is no photo
- [Icon Tile](https://ticketsolutionsptyltd.github.io/roadie/components/icon-tile.md): A tile that frames a single icon
- [Image](https://ticketsolutionsptyltd.github.io/roadie/components/image.md): A size-aware <img> that routes Oztix-CDN assets through the resize/transcode proxy
- [Logo](https://ticketsolutionsptyltd.github.io/roadie/components/logo.md): The Oztix logo, in its approved colours
- [Pattern](https://ticketsolutionsptyltd.github.io/roadie/components/pattern.md): The Oztix swirl pattern, cropped to fill a banner, panel, or strip in a fixed brand colour
- [QR code](https://ticketsolutionsptyltd.github.io/roadie/components/qr-code.md): A QR code for scanning tickets at the gate
- [SpotIllustration](https://ticketsolutionsptyltd.github.io/roadie/components/spot-illustration.md): Themed SVG illustrations that adapt to the design system color palette

## Text

- [Code](https://ticketsolutionsptyltd.github.io/roadie/components/code.md): Inline code snippet with emphasis and intent variants.
- [Highlight](https://ticketsolutionsptyltd.github.io/roadie/components/highlight.md): Query-based substring highlighting using Mark.
- [Kbd](https://ticketsolutionsptyltd.github.io/roadie/components/kbd.md): A keyboard key or shortcut, drawn as a keycap
- [Mark](https://ticketsolutionsptyltd.github.io/roadie/components/mark.md): Highlighted text using the HTML mark element with intent variants.
- [Prose](https://ticketsolutionsptyltd.github.io/roadie/components/prose.md): Typesets rich HTML from a CMS, Markdown, or user content.

Docs updated 9 Oct 2026.