Focus Ring

Import

import { FocusRing } from '@marbleui/ui'

Props

<FocusRing>

Re-exported from React Aria FocusRing; see its documentation for props.

Usage notes

Adds a class only when focus should be visible (keyboard, not mouse), for your own custom focusable elements. Built-in Marble UI components already include focus styles.

<FocusRing focusRingClass="outline-2 outline-offset-2 outline-ring">
  <a href="#" className="outline-none">Link</a>
</FocusRing>

Re-exported from React Aria. within tracks focus on any descendant, and focusRingClass sets the class applied. Pass a single child element.
useFocusRing() returns isFocusVisible and focusProps for manual wiring.
focusRing (lowercase) is the Marble UI helper used inside className render props of React Aria components, taking { isFocusVisible }.
Remove the default outline (outline-none) only when you supply a visible replacement.

Example source · show

import { FocusRing } from './focus-ring'

export const styles = {
  Default: () => (
    <div className="flex flex-col items-center gap-3 text-sm text-fg-muted">
      <FocusRing focusRingClass="outline-(length:--focus-width) outline-offset-(--focus-offset) outline-ring">
        <a href="#" className="rounded-xs text-accent-ink outline-none">Tab to me: ring shows for keyboard only</a>
      </FocusRing>
      <FocusRing within focusRingClass="ring-3 ring-ring/30 border-ring">
        <div className="flex w-72 rounded-md border border-border-strong">
          <input aria-label="Focus within" placeholder="Ring wraps the whole group" className="flex-1 bg-transparent px-3 py-2 text-fg outline-none" />
        </div>
      </FocusRing>
    </div>
  ),
}

Source: packages/ui/src/focus-ring/focus-ring.tsx

Focus Ring

Preview: Default

Import

Props

<FocusRing>

Usage notes

Catalog