Interactions

Interaction is a conversation. Details are the vocabulary. We build for the felt experience. We care about what feels right, not just what works.

Interaction utilities

Roadie provides CSS utilities that encode many of the guidelines on this page automatically. Apply them to elements that respond to user input.

is-interactive

For clickable elements, such as buttons, cards, links, and toggles. Provides cursor, transitions, active press, focus ring, and disabled state. Pair with an emphasis-* class for visual styling. Hover, press, and tab through these buttons to see transitions, active press, and focus rings.

{/* Strong */}
<Button emphasis='strong'>Buy tickets</Button>
{/* Normal */}
<Button emphasis='normal'>Buy tickets</Button>
{/* Subtle */}
<Button emphasis='subtle'>Buy tickets</Button>

--interactive-transition sets each property that animates, with its duration and its easing token.

1. background-color200msease-standard
2. border-color200msease-standard
3. color200msease-standard
4. box-shadow200msease-standard
5. outline-width150msease-standard
6. outline-color150msease-standard
7. transform150msease-spring

Roadie has one focus ring shape. It's 4px wide and sits flush against the element with no gap. The base styles draw it on a focused element without a Roadie class, such as a link in CMS content or a plain button, and is-interactive and is-focusable draw the same ring and animate it in. Its colour follows the nearest intent-* ancestor. Tab through these to see the ring change.

{/* Neutral */}
<Button emphasis='strong' intent='neutral'>Neutral</Button>
{/* Accent */}
<Button emphasis='strong' intent='accent'>Accent</Button>
{/* Danger */}
<Button emphasis='strong' intent='danger'>Danger</Button>

Fields use the same ring in accent, or danger when invalid.

The ring's width, and its opacity in light and dark mode, come from the focus ring tokens.

Width--focus-ring-width

4px

Opacity in light mode--focus-ring-opacity

30%

Opacity in dark mode--focus-ring-opacity-dark

20%

is-interactive-within

For a surface whose main link sits inside it, such as a card that also holds other links or buttons. Mark that link with data-interactive-target. Its overlay covers the surface, so a click anywhere follows it. Other controls sit above the overlay and stay clickable. The surface takes the same hover, press, and focus states as is-interactive while its main link is hovered, pressed, or focused. It does nothing until a target is present. Card applies it for you when it holds a Card.Link.

Surfaces can nest. A target belongs to the nearest surface around it, so a card around a grouped DataTable or RecordTable list rows stays still while one of those rows is hovered, pressed, or focused.

<Card emphasis='raised'>
  <Card.Content>
    <Card.Title>
      <Card.Link href='#is-interactive-within'>Scans by gate</Card.Link>
    </Card.Title>
    <DataTable

<Card emphasis='raised'>
  <Card.Content>
    <Card.Title>
      <Card.Link href='#is-interactive-within'>Midnight Frequency</Card.Link>
    </Card.Title>
    <Card.Description>Clockwork Wattle Brewery, Brisbane</Card.Description>

is-focusable

For an element that takes focus but isn't clicked, such as a scroll region or a tabIndex={-1} landing target. It gives the same focus ring as is-interactive, from the same tokens, with no pointer cursor, press, or disabled state. The docs' wide tables use it on their scroll region. Tab into tonight's program to see the ring.

<div
  className='is-focusable emphasis-sunken grid max-h-32 gap-2 overflow-y-auto rounded-xl p-4'
  tabIndex={0}
  role='region'
  aria-label="Tonight's program"
>

is-interactive-field

For form inputs, such as text fields, textareas, and selects. Provides state-based colour transitions: neutral at rest, accent on focus, and danger when invalid. Pair with emphasis-field for text fields, or emphasis-normal for select triggers. Focus each input to see the accent border and ring. The invalid field shows danger styling.

{/* Default */}
<Field>
  <Field.Label>Name</Field.Label>
  <Field.Input placeholder='e.g. Sam Okafor' />
</Field>
{/* Invalid */}

A disabled field takes opacity: 0.5, pointer-events: none, and grayscale(0.3).

is-interactive-field-group

For composite form controls where multiple inputs share a single visual container, like the Combobox input group (a text input and a trigger button). Provides the same state transitions as is-interactive-field, but scoped to the group wrapper instead of an individual input.

Use it on the wrapping element that contains the child inputs. Focus within any child triggers the accent transition on the group. Pair with emphasis-field, or emphasis-normal for a button-like trigger.

Selection

is-unselected and is-selected are for a set of choices, such as a toggle, a toggle group, or tabs. These utilities set the label colour in every state, with whichever intent applies, so a component never sets it itself. Apply each one only in its own state, as in not-data-[pressed]:is-unselected data-[pressed]:emphasis-subtle data-[pressed]:is-selected, so the resting and chosen utilities never meet. A subtler ToggleGroup uses them in every intent.

{/* Neutral */}
<ToggleGroup emphasis='subtler' intent='neutral' aria-label='Range' defaultValue={['week']}>
  <ToggleGroup.Item value='day'>Day</ToggleGroup.Item>
  <ToggleGroup.Item value='week'>Week</ToggleGroup.Item>
  <ToggleGroup.Item value='month'>Month</ToggleGroup.Item>
</ToggleGroup>

A browser test holds the pair in every intent, in light and dark, on the page and on a card:

• The chosen label reaches APCA Lc 75 on its fill, the minimum for body text.
• It beats a resting label on the same surface by at least Lc 15, so the label alone tells them apart.
• A resting label reaches Lc 45, the minimum for non-text UI such as an icon.
• The soft fill sits at least 0.075 OKLCH lightness from the surface. APCA reads two soft fills as Lc 0 in dark mode, so lightness measures them instead.

The soft fill alone doesn't mark the chosen item clearly enough, so it's for quiet controls whose icon or label carries the state too. Use emphasis-strong when the state must stand out.

Emphasis and interaction

Emphasis presets and interaction utilities compose together. The emphasis sets appearance and the hover and active colour shifts. The interaction utility adds mechanical behaviours. Together they form a complete interactive element. Hover each card to compare a static one with an interactive one. A Card with an href takes is-interactive.

{/* Static */}
<Card emphasis='normal'>
  <Card.Content>
    <Card.Title>Ochre Kite Weekender</Card.Title>
  </Card.Content>
</Card>

is-interactive-field provides its own hover, focus, and invalid logic. It doesn't use emphasis hover states. This is why form inputs use emphasis-field, which has no interactive states, paired with is-interactive-field, which provides all of them.

Component recipes

The classes the component library applies.

Guidelines

These guide how we handle interaction across Oztix applications. Follow them when building custom interactive UI.

• Never hand-roll hover or focus states. Use is-interactive, is-interactive-field, is-interactive-field-group, is-interactive-within, or is-focusable, so every control moves and focuses the same way.

Keyboard and focus

Hit targets and touch

Forms

Feedback and state

Quick reference