Design Keyed State

Keyed state (key(...) / id(...))

gpui stores many pieces of UI state (cursor, selection, open menus, toggles, etc.) against an ElementId.

Yororen UI uses the convention:

• Any Component that owns internal state should expose key(...).
• key(...) is an alias of id(...).

When to use:

• Any repeated UI (lists/grids).
• Virtualized rows.
• Anything reorderable.

Guideline:

• Keys should come from your data model (id/uuid/path).
• Do not use call-site location as identity when virtualization can recycle rows.

Components requiring explicit IDs

Some components require an explicit id(...) call because they use gpui::Window::use_keyed_state internally:

• TextInput
• Select
• Checkbox
• Radio
• RadioGroup
• Switch
• Slider
• SearchInput
• PasswordInput
• TextArea
• NumberInput
• FilePathInput
• ComboBox
• KeybindingInput
• DropdownMenu
• ToggleButton
• SplitButton

These components will panic if rendered without an ID. Provide stable, unique IDs for proper state management.

Example

use gpui::ElementId;
use yororen_ui::component::{text_input, virtual_row};

let row = virtual_row(("settings", "username-row"))
    .child(
        text_input()
            .key(ElementId::from((ElementId::from("settings"), "username")))
            .placeholder("Username"),
    );