> Native Solid 2 fork. Original documentation and designs © WorkOS; historical posts retain their original context.

# Separator

Visually or semantically separates content.

## Features

- Supports horizontal and vertical orientations.

## Anatomy

Import all parts and piece them together.

```jsx
import { Separator } from "@radix-solid/primitives";

export default () => <Separator.Root />;
```

## API Reference

### Root

The separator.

| Prop                                                                                                                                                                    | Type      | Default        |
| ----------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------- | -------------- |
| `asChild`Render through a single-target factory, merging props and behavior with the chosen host. Read our [Composition](../guides/composition) guide for more details. | `boolean` | `false`        |
| `orientation`The orientation of the separator.                                                                                                                          | `enum`    | `"horizontal"` |
| `decorative`When `true`, signifies that it is purely visual, carries no semantic meaning, and ensures it is not present in the accessibility tree.                      | `boolean` | —              |

| Data attribute       | Values                       |
| -------------------- | ---------------------------- |
| `[data-orientation]` | `"vertical" \| "horizontal"` |

## Accessibility

Adheres to the [`separator` role requirements](https://www.w3.org/TR/wai-aria-1.2/#separator).