useFocusable

function useFocusable(options?): UseFocusableResult;

Hook to make any element focusable with keyboard support.

Parameters

Parameter	Type
options	UseFocusableOptions

Returns

UseFocusableResult

Example

function CustomPicker({ onSelect }) {
  const { ref, isFocused, focus } = useFocusable({
    onKeyPress: (key) => {
      if (key.name === "return") {
        onSelect();
        return true;
      }
      return false;
    },
  });

  return (
    <Box
      ref={ref}
      focusable
      style={{
        border: "round",
        borderColor: isFocused ? "cyan" : "gray"
      }}
    >
      <Text>Custom Picker</Text>
    </Box>
  );
}

---

UseFocusableOptions

Properties

Property	Type	Description
disabled?	boolean	Whether the element is currently disabled (skipped in tab order)
onBlur?	() => void	Called when the element loses focus
onFocus?	() => void	Called when the element receives focus
onKeyPress?	(key) => boolean | void	Key handler when focused. Return true to consume the key. This runs after priority handlers but before global handlers.

---

UseFocusableResult

Properties

Property	Type	Description
blur	() => void	Programmatically blur (unfocus) this element
focus	() => void	Programmatically request focus on this element
focusId	string | null	The focus ID (useful for conditional logic)
isFocused	boolean	Whether this element is currently focused
ref	(node) => void	Ref to attach to your focusable element