# Roving Focus Group
> Utility component that implements the roving tabindex method to manage focus between items.
RovingFocusGroup is used throughout Vera in components such as
[Tabs](/components/tabs) and [Menu](/components/menu).
## Import
```js
import {
RovingFocusGroup,
createRovingFocusGroupScope
} from '@gemini-suite/vera-react';
// you may also access RovingFocusGroup context via hook:
// import { useRovingFocusContext } from '@gemini-suite/vera-react';
```
## Examples
### Horizontal
```jsx
{'Button 1'}
{'Button 2'}
{'Button 3'}
{'Button 4'}
{'Button 5'}
```
### Vertical
When tabbing into below group, item 3 is initially focused because of
`active` prop.
```jsx
{'Item 1'}
{'Item 2'}
{'Item 3'}
{'Item 4'}
{'Item 5'}
```
### Loop
Use `loop` property to enable roving from last item to the first item, and vice versa.
```jsx
{'Button 1'}
{'Button 2'}
{'Button 3'}
```
### Unfocusable items
Use `focusable` property to control if `RovingFocusGroup.Item` can be focused.
```jsx
{'Button 1'}
{'Button 2'}
{'Button 3'}
```
### Right-to-left direction
Use `dir` property to change direction.
```jsx
{'Button 1'}
{'Button 2'}
{'Button 3'}
```
---
## Keyboard support
-
← moves focus to the previous item (if{' '}
orientation is horizontal).
-
→ moves focus to the next item (if{' '}
orientation is horizontal).
-
↑ moves focus to the previous item (if{' '}
orientation is vertical).
-
↓ moves focus to the previous item (if{' '}
orientation is vertical).
-
home moves focus to the first item.
-
end moves focus to the last item.
-
Space or Enter triggers click on the item.
---
## API Reference
### RovingFocusGroup.Root
| Name | Type | Default | Description | Required |
| ------------- | --------------------------------------------------------- | ------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- |
| `as` | `keyof JSX.IntrinsicElements \| React.ComponentType` | `span` | Change the component to a different HTML tag or custom component. This will merge the original component props with the props of the supplied element/component and change the underlying DOM node. For more details, read our [Composition](/get-started/composition#polymorphism) guide. | |
| `css` | `StitchesCss` | | Apply styles directly to a component in a similar way how you would define inline styles. Vera uses [Stitches](https://stitches.dev/) under the hood with a fully-typed API and support for features like tokens, media queries, or variants. | |
| `orientation` | `"horizontal" \| "vertical"` | | Defines orientation of the group. | |
| `dir` | `"ltr" \| "rtl"` | `ltr` | Defines reading direction of the group. | |
| `loop` | `boolean` | `false` | When `true` roving focus will loop from last item to the first item, and vice versa. | |
### RovingFocusGroup.Item
| Name | Type | Default | Description | Required |
| ----------- | --------------------------------------------------------- | ------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- |
| `as` | `keyof JSX.IntrinsicElements \| React.ComponentType` | `span` | Change the component to a different HTML tag or custom component. This will merge the original component props with the props of the supplied element/component and change the underlying DOM node. For more details, read our [Composition](/get-started/composition#polymorphism) guide. | |
| `css` | `StitchesCss` | | Apply styles directly to a component in a similar way how you would define inline styles. Vera uses [Stitches](https://stitches.dev/) under the hood with a fully-typed API and support for features like tokens, media queries, or variants. | |
| `focusable` | `boolean` | `true` | When `true` the item can be focused. | |
| `active` | `boolean` | `false` | When `true`, initial focus among the group is set to this particular item. | |