Component FocusRing

FocusRing

A focusable element that shows a focus-visible ring.

This is a wrapper container that makes an element focusable and applies a focus-visible border.

Example

use yororen_ui::component::focus_ring;

let view = focus_ring().child("Focusable");

When to use

• Making custom widgets keyboard-focusable
• Wrapping non-interactive content that should show focus

API

• focus_ring(): constructor
• id(...): stable identity
• color(Hsla): focus ring color (default: theme.border.focus)
• radius(AbsoluteLength): corner radius

Defaults

• id: defaults to a static "focus-ring" id if you don't provide one
• Ring color: theme.border.focus

Notes

• If you render many FocusRings without explicit ids, they will share the same id; prefer providing id(...) in repeated UIs.

• Use ClickableSurface.focusable(true) when you also want click/hover behavior.

Example: Custom radius + ring color

use gpui::{px, rgb};
use yororen_ui::component::focus_ring;

let view = focus_ring()
    .radius(px(10.).into())
    .color(rgb(0x2F63FF))
    .child("Focusable content");