www.radix-ui.com/primitives/docs/

Public Link
Created by:
****ad@vlad.studio
Starting URLs:
https://www.radix-ui.com/primitives/docs/overview/introduction
CSS Selector:
section
Crawl Prefixes:
https://www.radix-ui.com/primitives/docs/
Exclude Patterns:
https://www.radix-ui.com/primitives/docs/overview/accessibility
https://www.radix-ui.com/primitives/docs/overview/releases
https://www.radix-ui.com/primitives/docs/utilities/direction-provider
## Page: https://www.radix-ui.com/primitives/docs/overview/introduction

Overview

# Introduction

An open-source UI component library for building high-quality, accessible design systems and web apps.

Radix Primitives is a low-level UI component library with a focus on accessibility, customization and developer experience. You can use these components either as the base layer of your design system, or adopt them incrementally.

## Vision

Most of us share similar definitions for common UI patterns like accordion, checkbox, combobox, dialog, dropdown, select, slider, and tooltip. These UI patterns are documented by WAI-ARIA and generally understood by the community.

However, the implementations provided to us by the web platform are inadequate. They're either non-existent, lacking in functionality, or cannot be customized sufficiently.

So, developers are forced to build custom components; an incredibly difficult task. As a result, most components on the web are inaccessible, non-performant, and lacking important features.

Our goal is to create a well-funded, open-source component library that the community can use to build accessible design systems.

## Key Features

### Accessible

Components adhere to the WAI-ARIA design patterns where possible. We handle many of the difficult implementation details related to accessibility, including aria and role attributes, focus management, and keyboard navigation. Learn more in our accessibility overview.

### Unstyled

Components ship without styles, giving you complete control over the look and feel. Components can be styled with any styling solution. Learn more in our styling guide.

### Opened

Radix Primitives are designed to be customized to suit your needs. Our open component architecture provides you granular access to each component part, so you can wrap them and add your own event listeners, props, or refs.

### Uncontrolled

Where applicable, components are uncontrolled by default but can also be controlled, alternatively. All of the behavior wiring is handled internally, so you can get up and running as smoothly as possible, without needing to create any local states.

### Developer experience

One of our main goals is to provide the best possible developer experience. Radix Primitives provides a fully-typed API. All components share a similar API, creating a consistent and predictable experience. We've also implemented an `asChild` prop, giving users full control over the rendered element.

### Incremental adoption

We recommend installing the `radix-ui` package and importing the primitives you need. This is the simplest way to get started, prevent version conflicts or duplication, and makes it easy to manage updates. The package is tree-shakeable, so you should only ship the components you use.

    npm install radix-ui 

    import { Dialog, DropdownMenu, Tooltip } from "radix-ui"; 

Alternatively, each primitive can be installed individually:

    npm install @radix-ui/react-dialog npm install @radix-ui/react-dropdown-menu npm install @radix-ui/react-tooltip 

    import * as Dialog from "@radix-ui/react-dialog"; import * as DropdownMenu from "@radix-ui/react-dropdown-menu"; import * as Tooltip from "@radix-ui/react-tooltip"; 

When installing separately, we recommend updating all Radix packages together to prevent duplication of shared dependencies and keep your bundle size down.

## Community

To get involved with the Radix community, ask questions and share tips, Join our Discord.

To receive updates on new primitives, announcements, blog posts, and general Radix tips, follow along on Bluesky or Twitter.

To file issues, request features, and contribute, check out our GitHub.

*   GitHub repo
*   Code of conduct

#### Quick nav

*   Vision
*   Key Features
*   Accessible
*   Unstyled
*   Opened
*   Uncontrolled
*   Developer experience
*   Incremental adoption
*   Community

NextGetting started

Edit this page on GitHub.

---

## Page: https://www.radix-ui.com/primitives/docs/overview/getting-started

Overview

# Getting started

A quick tutorial to get you up and running with Radix Primitives.

## Implementing a Popover

In this quick tutorial, we will install and style the Popover component.

### 1\. Install the primitive

Install Radix Primitives from your command line.

    npm install radix-ui@latest 

### 2\. Import the parts

Import and structure the parts.

    // index.jsx import * as React from "react"; import { Popover } from "radix-ui";  const PopoverDemo = () => ( 	<Popover.Root>  <Popover.Trigger>More info</Popover.Trigger>  <Popover.Portal>  <Popover.Content>  Some more info…  <Popover.Arrow />  </Popover.Content>  </Popover.Portal> 	</Popover.Root> );  export default PopoverDemo; 

### 3\. Add your styles

Add styles where desired.

    // index.jsx import * as React from "react"; import { Popover } from "radix-ui"; import "./styles.css";  const PopoverDemo = () => ( 	<Popover.Root>  <Popover.Trigger className="PopoverTrigger">Show info</Popover.Trigger>  <Popover.Portal>  <Popover.Content className="PopoverContent">  Some content  <Popover.Arrow className="PopoverArrow" />  </Popover.Content>  </Popover.Portal> 	</Popover.Root> );  export default PopoverDemo; 

    /* styles.css */ .PopoverTrigger { 	background-color: white; 	border-radius: 4px; }  .PopoverContent { 	border-radius: 4px; 	padding: 20px; 	width: 260px; 	background-color: white; }  .PopoverArrow { 	fill: white; } 

### Demo

Here's a complete demo.

More info

index.jsxindex.jsxstyles.cssstyles.css

    import * as React from "react"; import { Popover } from "radix-ui"; import "./styles.css";  const PopoverDemo = () => ( 	<Popover.Root>  <Popover.Trigger className="PopoverTrigger">More info</Popover.Trigger>  <Popover.Portal>  <Popover.Content className="PopoverContent" sideOffset={5}>  Some more info…  <Popover.Arrow className="PopoverArrow" />  </Popover.Content>  </Popover.Portal> 	</Popover.Root> );  export default PopoverDemo; 

## Summary

The steps above outline briefly what's involved in using a Radix Primitive in your application.

These components are low-level enough to give you control over how you want to wrap them. You're free to introduce your own high-level API to better suit the needs of your team and product.

In a few simple steps, we've implemented a fully accessible Popover component, without having to worry about many of its complexities.

*   Adheres to WAI-ARIA design pattern.
*   Can be controlled or uncontrolled.
*   Customize side, alignment, offsets, collision handling.
*   Optionally render a pointing arrow.
*   Focus is fully managed and customizable.
*   Dismissing and layering behavior is highly customizable.

#### Quick nav

*   Implementing a Popover
*   1\. Install the primitive
*   2\. Import the parts
*   3\. Add your styles
*   Demo
*   Summary

PreviousIntroduction

NextAccessibility

Edit this page on GitHub.

---

## Page: https://www.radix-ui.com/primitives/docs/guides/styling

Guides

# Styling

Radix Primitives are unstyled—and compatible with any styling solution—giving you complete control over styling.

## Styling overview

### Functional styles

You are in control of all aspects of styling, including functional styles. For example—by default—a Dialog Overlay won't cover the entire viewport. You're responsible for adding those styles, plus any presentation styles.

### Classes

All components and their parts accept a `className` prop. This class will be passed through to the DOM element. You can use it in CSS as expected.

### Data attributes

When components are stateful, their state will be exposed in a `data-state` attribute. For example, when an Accordion Item is opened, it includes a `data-state="open"` attribute.

## Styling with CSS

### Styling a part

You can style a component part by targeting the `className` that you provide.

    import * as React from "react"; import { Accordion } from "radix-ui"; import "./styles.css";  const AccordionDemo = () => ( 	<Accordion.Root>  <Accordion.Item className="AccordionItem" value="item-1" />  {/* … */} 	</Accordion.Root> );  export default AccordionDemo; 

### Styling a state

You can style a component state by targeting its `data-state` attribute.

    .AccordionItem { 	border-bottom: 1px solid gainsboro; }  .AccordionItem[data-state="open"] { 	border-bottom-width: 2px; } 

## Styling with CSS-in-JS

The examples below are using styled-components, but you can use any CSS-in-JS library of your choice.

### Styling a part

Most CSS-in-JS libraries export a function for passing components and their styles. You can provide the Radix primitive component directly.

    import * as React from "react"; import { Accordion } from "radix-ui"; import styled from "styled-components";  const StyledItem = styled(Accordion.Item)`  border-bottom: 1px solid gainsboro; `;  const AccordionDemo = () => ( 	<Accordion.Root>  <StyledItem value="item-1" />  {/* … */} 	</Accordion.Root> );  export default AccordionDemo; 

### Styling a state

You can style a component state by targeting its `data-state` attribute.

    import { Accordion } from "radix-ui"; import styled from "styled-components";  const StyledItem = styled(Accordion.Item)` border-bottom: 1px solid gainsboro; &[data-state="open"] { border-bottom-width: 2px; } `; 

## Extending a primitive

Extending a primitive is done the same way you extend any React component.

    import * as React from "react"; import { Accordion as AccordionPrimitive } from "radix-ui";  const AccordionItem = React.forwardRef< 	React.ElementRef<typeof AccordionPrimitive.Item>, 	React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item> >((props, forwardedRef) => ( 	<AccordionPrimitive.Item {...props} ref={forwardedRef} /> )); AccordionItem.displayName = "AccordionItem"; 

## Summary

Radix Primitives were designed to encapsulate accessibility concerns and other complex functionalities, while ensuring you retain complete control over styling.

For convenience, stateful components include a `data-state` attribute.

#### Quick nav

*   Styling overview
*   Functional styles
*   Classes
*   Data attributes
*   Styling with CSS
*   Styling a part
*   Styling a state
*   Styling with CSS-in-JS
*   Styling a part
*   Styling a state
*   Extending a primitive
*   Summary

PreviousReleases

NextAnimation

Edit this page on GitHub.

---

## Page: https://www.radix-ui.com/primitives/docs/guides/animation

Guides

# Animation

Animate Radix Primitives with CSS keyframes or the JavaScript animation library of your choice.

Adding animation to Radix Primitives should feel similar to any other component, but there are some caveats noted here in regards to exiting animations with JS animation libraries.

## Animating with CSS animation

The simplest way to animate Primitives is with CSS.

You can use CSS animation to animate both mount and unmount phases. The latter is possible because the Radix Primitives will suspend unmount while your animation plays out.

    @keyframes fadeIn { 	from {  opacity: 0; 	} 	to {  opacity: 1; 	} }  @keyframes fadeOut { 	from {  opacity: 1; 	} 	to {  opacity: 0; 	} }  .DialogOverlay[data-state="open"], .DialogContent[data-state="open"] { 	animation: fadeIn 300ms ease-out; }  .DialogOverlay[data-state="closed"], .DialogContent[data-state="closed"] { 	animation: fadeOut 300ms ease-in; } 

## Delegating unmounting for JavaScript Animation

When many stateful Primitives are hidden from view, they are actually removed from the React Tree, and their elements removed from the DOM. JavaScript animation libraries need control of the unmounting phase, so we provide the `forceMount` prop on many components to allow consumers to delegate the mounting and unmounting of children based on the animation state determined by those libraries.

For example, if you want to use React Spring to animate a `Dialog`, you would do so by conditionally rendering the dialog `Overlay` and `Content` parts based on the animation state from one of its hooks like `useTransition`:

    import { Dialog } from "radix-ui"; import { useTransition, animated, config } from "react-spring";  function Example() { 	const [open, setOpen] = React.useState(false); 	const transitions = useTransition(open, {  from: { opacity: 0, y: -10 },  enter: { opacity: 1, y: 0 },  leave: { opacity: 0, y: 10 },  config: config.stiff, 	}); 	return (  <Dialog.Root open={open} onOpenChange={setOpen}>  <Dialog.Trigger>Open Dialog</Dialog.Trigger>  {transitions((styles, item) =>  item ? (  <>  <Dialog.Overlay forceMount asChild>  <animated.div style={{ opacity: styles.opacity, }} />  </Dialog.Overlay>  <Dialog.Content forceMount asChild>  <animated.div style={styles}>  <h1>Hello from inside the Dialog!</h1>  <Dialog.Close>close</Dialog.Close>  </animated.div>  </Dialog.Content>  </>  ) : null,  )}  </Dialog.Root> 	); } 

#### Quick nav

*   Animating with CSS animation
*   Delegating unmounting for JavaScript Animation

PreviousStyling

NextComposition

Edit this page on GitHub.

---

## Page: https://www.radix-ui.com/primitives/docs/guides/composition

Guides

# Composition

Use the `asChild` prop to compose Radix's functionality onto alternative element types or your own React components.

All Radix primitive parts that render a DOM element accept an `asChild` prop. When `asChild` is set to `true`, Radix will not render a default DOM element, instead cloning the part's child and passing it the props and behavior required to make it functional.

## Changing the element type

In the majority of cases you shouldn’t need to modify the element type as Radix has been designed to provide the most appropriate defaults. However, there are cases where it is helpful to do so.

A good example is with `Tooltip.Trigger`. By default this part is rendered as a `button`, though you may want to add a tooltip to a link (`a` tag) as well. Let's see how you can achieve this using `asChild`:

    import * as React from "react"; import { Tooltip } from "radix-ui";  export default () => ( 	<Tooltip.Root>  <Tooltip.Trigger asChild>  <a href="https://www.radix-ui.com/">Radix UI</a>  </Tooltip.Trigger>  <Tooltip.Portal>…</Tooltip.Portal> 	</Tooltip.Root> ); 

> If you do decide to change the underlying element type, it is your responsibility to ensure it remains accessible and functional. In the case of `Tooltip.Trigger` for example, it must be a focusable element that can respond to pointer and keyboard events. If you were to switch it to a `div`, it would no longer be accessible.

In reality, you will rarely modify the underlying DOM element like we've seen above. Instead it's more common to use your own React components. This is especially true for most `Trigger` parts, as you usually want to compose the functionality with the custom buttons and links in your design system.

## Composing with your own React components

This works exactly the same as above, you pass `asChild` to the part and then wrap your own component with it. However, there are a few gotchas to be aware of.

### Your component must spread props

When Radix clones your component, it will pass its own props and event handlers to make it functional and accessible. If your component doesn't support those props, it will break.

This is done by spreading all of the props onto the underlying DOM node.

    // before const MyButton = () => <button />;  // after const MyButton = (props) => <button {...props} />; 

We recommend always doing this so that you are not concerned with implementation details (ie. which props/events to accept). We find this is good practice for "leaf" components in general.

> Similarly to when changing the element type directly, it is your responsibility to ensure the element type rendered by your custom component remains accessible and functional.

### Your component must forward ref

Additionally, Radix will sometimes need to attach a `ref` to your component (for example to measure its size). If your component doesn't accept a `ref`, then it will break.

This is done using `React.forwardRef` (read more on react.dev).

    // before const MyButton = (props) => <button {...props} />;  // after const MyButton = React.forwardRef((props, forwardedRef) => ( 	<button {...props} ref={forwardedRef} /> )); 

Whilst this isn't necessary for **all** parts, we recommend always doing it so that you are not concerned with implementation details. This is also generally good practice anyway for leaf components.

## Composing multiple primitives

`asChild` can be used as deeply as you need to. This means it is a great way to compose multiple primitive's behavior together. Here is an example of how you can compose `Tooltip.Trigger` and `Dialog.Trigger` together with your own button:

    import * as React from "react"; import { Dialog, Tooltip } from "radix-ui";  const MyButton = React.forwardRef((props, forwardedRef) => ( 	<button {...props} ref={forwardedRef} /> ));  export default () => { 	return (  <Dialog.Root>  <Tooltip.Root>  <Tooltip.Trigger asChild>  <Dialog.Trigger asChild>  <MyButton>Open dialog</MyButton>  </Dialog.Trigger>  </Tooltip.Trigger>  <Tooltip.Portal>…</Tooltip.Portal>  </Tooltip.Root>   <Dialog.Portal>...</Dialog.Portal>  </Dialog.Root> 	); }; 

#### Quick nav

*   Changing the element type
*   Composing with your own React components
*   Your component must spread props
*   Your component must forward ref
*   Composing multiple primitives

PreviousAnimation

NextServer-side rendering

Edit this page on GitHub.

---

## Page: https://www.radix-ui.com/primitives/docs/guides/server-side-rendering

Guides

# Server-side rendering

Radix Primitives can be rendered on the server. However, Primitives in React versions less than 18 rely on hydration for ids.

## Overview

Server-side rendering or `SSR`, is a technique used to render components to HTML on the server, as opposed to rendering them only on the client.

Static rendering is another similar approach. Instead it pre-renders pages to HTML at build time rather than on each request.

You should be able to use all of our primitives with both approaches, for example with Next.js, Remix, or Gatsby.

## Gotcha

Primitives in React versions less than 18 rely on hydration for ids (used in aria attributes) to avoid server/client mismatch errors.

In other words, the equivalent of Time to Interactive for screen reader users will depend on the download speed of the JS bundle. If you'd like to generate ids server-side to improve this experience, we suggest upgrading to React 18.

#### Quick nav

*   Overview
*   Gotcha

PreviousComposition

NextAccordion

Edit this page on GitHub.

---

## Page: https://www.radix-ui.com/primitives/docs/components/accordion

Components

# Accordion

A vertically stacked set of interactive headings that each reveal an associated section of content.

### Is it accessible?

Yes. It adheres to the WAI-ARIA design pattern.

### Is it unstyled?

### Can it be animated?

index.jsxindex.jsxstyles.cssstyles.css

CSS

    import * as React from "react"; import { Accordion } from "radix-ui"; import classNames from "classnames"; import { ChevronDownIcon } from "@radix-ui/react-icons"; import "./styles.css";  const AccordionDemo = () => ( 	<Accordion.Root className="AccordionRoot" type="single" defaultValue="item-1" collapsible >  <Accordion.Item className="AccordionItem" value="item-1">  <AccordionTrigger>Is it accessible?</AccordionTrigger>  <AccordionContent>  Yes. It adheres to the WAI-ARIA design pattern.  </AccordionContent>  </Accordion.Item>   <Accordion.Item className="AccordionItem" value="item-2">  <AccordionTrigger>Is it unstyled?</AccordionTrigger>  <AccordionContent>  Yes. It's unstyled by default, giving you freedom over the look and  feel.  </AccordionContent>  </Accordion.Item>   <Accordion.Item className="AccordionItem" value="item-3">  <AccordionTrigger>Can it be animated?</AccordionTrigger>  <Accordion.Content className="AccordionContent">  <div className="AccordionContentText">  Yes! You can animate the Accordion with CSS or JavaScript.  </div>  </Accordion.Content>  </Accordion.Item> 	</Accordion.Root> );  const AccordionTrigger = React.forwardRef( 	({ children, className, ...props }, forwardedRef) => (  <Accordion.Header className="AccordionHeader">  <Accordion.Trigger className={classNames("AccordionTrigger", className)} {...props} ref={forwardedRef} >  {children}  <ChevronDownIcon className="AccordionChevron" aria-hidden />  </Accordion.Trigger>  </Accordion.Header> 	), );  const AccordionContent = React.forwardRef( 	({ children, className, ...props }, forwardedRef) => (  <Accordion.Content className={classNames("AccordionContent", className)} {...props} ref={forwardedRef} >  <div className="AccordionContentText">{children}</div>  </Accordion.Content> 	), );  export default AccordionDemo; 

## Features

Full keyboard navigation.

Supports horizontal/vertical orientation.

Supports Right to Left direction.

Can expand one or multiple items.

Can be controlled or uncontrolled.

## Component Reference Links

Version: 1.2.11

Size: 9.01 kB

View source

Report an issue

ARIA design pattern

## Installation

Install the component from your command line.

    npm install @radix-ui/react-accordion 

## Anatomy

Import all parts and piece them together.

    import { Accordion } from "radix-ui";  export default () => ( 	<Accordion.Root>  <Accordion.Item>  <Accordion.Header>  <Accordion.Trigger />  </Accordion.Header>  <Accordion.Content />  </Accordion.Item> 	</Accordion.Root> ); 

## API Reference

### Root

Contains all the parts of an accordion.

| Prop | Type | Default |
| --- | --- | --- |
| 
`asChild`

Prop description

 | 

`boolean`



 | `false` |
| 

`type*`

Prop description

 | 

`enum`

See full type

 | No default value |
| 

`value`

Prop description

 | 

`string`



 | No default value |
| 

`defaultValue`

Prop description

 | 

`string`



 | No default value |
| 

`onValueChange`

Prop description

 | 

`function`

See full type

 | No default value |
| 

`value`

Prop description

 | 

`string[]`



 | `[]` |
| 

`defaultValue`

Prop description

 | 

`string[]`



 | `[]` |
| 

`onValueChange`

Prop description

 | 

`function`

See full type

 | No default value |
| 

`collapsible`

Prop description

 | 

`boolean`



 | `false` |
| 

`disabled`

Prop description

 | 

`boolean`



 | `false` |
| 

`dir`

Prop description

 | 

`enum`

See full type

 | `"ltr"` |
| 

`orientation`

Prop description

 | 

`enum`

See full type

 | `"vertical"` |

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

### Item

Contains all the parts of a collapsible section.

| Prop | Type | Default |
| --- | --- | --- |
| 
`asChild`

Prop description

 | 

`boolean`



 | `false` |
| 

`disabled`

Prop description

 | 

`boolean`



 | `false` |
| 

`value*`

Prop description

 | 

`string`



 | No default value |

| Data attribute | Values |
| --- | --- |
| `[data-state]` | `"open" | "closed"` |
| `[data-disabled]` | 
Present when disabled

 |
| `[data-orientation]` | `"vertical" | "horizontal"` |

### Header

Wraps an `Accordion.Trigger`. Use the `asChild` prop to update it to the appropriate heading level for your page.

| Prop | Type | Default |
| --- | --- | --- |
| 
`asChild`

Prop description

 | 

`boolean`



 | `false` |

| Data attribute | Values |
| --- | --- |
| `[data-state]` | `"open" | "closed"` |
| `[data-disabled]` | 
Present when disabled

 |
| `[data-orientation]` | `"vertical" | "horizontal"` |

### Trigger

Toggles the collapsed state of its associated item. It should be nested inside of an `Accordion.Header`.

| Prop | Type | Default |
| --- | --- | --- |
| 
`asChild`

Prop description

 | 

`boolean`



 | `false` |

| Data attribute | Values |
| --- | --- |
| `[data-state]` | `"open" | "closed"` |
| `[data-disabled]` | 
Present when disabled

 |
| `[data-orientation]` | `"vertical" | "horizontal"` |

### Content

Contains the collapsible content for an item.

| Prop | Type | Default |
| --- | --- | --- |
| 
`asChild`

Prop description

 | 

`boolean`



 | `false` |
| 

`forceMount`

Prop description

 | 

`boolean`



 | No default value |

| Data attribute | Values |
| --- | --- |
| `[data-state]` | `"open" | "closed"` |
| `[data-disabled]` | 
Present when disabled

 |
| `[data-orientation]` | `"vertical" | "horizontal"` |

| CSS Variable | Description |
| --- | --- |
| `--radix-accordion-content-width` | The width of the content when it opens/closes |
| `--radix-accordion-content-height` | The height of the content when it opens/closes |

## Examples

### Expanded by default

Use the `defaultValue` prop to define the open item by default.

    <Accordion.Root type="single" defaultValue="item-2"> 	<Accordion.Item value="item-1">…</Accordion.Item> 	<Accordion.Item value="item-2">…</Accordion.Item> </Accordion.Root> 

### Allow collapsing all items

Use the `collapsible` prop to allow all items to close.

    <Accordion.Root type="single" collapsible> 	<Accordion.Item value="item-1">…</Accordion.Item> 	<Accordion.Item value="item-2">…</Accordion.Item> </Accordion.Root> 

### Multiple items open at the same time

Set the `type` prop to `multiple` to enable opening multiple items at once.

    <Accordion.Root type="multiple"> 	<Accordion.Item value="item-1">…</Accordion.Item> 	<Accordion.Item value="item-2">…</Accordion.Item> </Accordion.Root> 

### Rotated icon when open

You can add extra decorative elements, such as chevrons, and rotate it when the item is open.

    // index.jsx import { Accordion } from "radix-ui"; import { ChevronDownIcon } from "@radix-ui/react-icons"; import "./styles.css";  export default () => ( 	<Accordion.Root type="single">  <Accordion.Item value="item-1">  <Accordion.Header>  <Accordion.Trigger className="AccordionTrigger">  <span>Trigger text</span>  <ChevronDownIcon className="AccordionChevron" aria-hidden />  </Accordion.Trigger>  </Accordion.Header>  <Accordion.Content>…</Accordion.Content>  </Accordion.Item> 	</Accordion.Root> ); 

    /* styles.css */ .AccordionChevron { 	transition: transform 300ms; } .AccordionTrigger[data-state="open"] > .AccordionChevron { 	transform: rotate(180deg); } 

### Horizontal orientation

Use the `orientation` prop to create a horizontal accordion.

    <Accordion.Root orientation="horizontal"> 	<Accordion.Item value="item-1">…</Accordion.Item> 	<Accordion.Item value="item-2">…</Accordion.Item> </Accordion.Root> 

### Animating content size

Use the `--radix-accordion-content-width` and/or `--radix-accordion-content-height` CSS variables to animate the size of the content when it opens/closes:

    // index.jsx import { Accordion } from "radix-ui"; import "./styles.css";  export default () => ( 	<Accordion.Root type="single">  <Accordion.Item value="item-1">  <Accordion.Header>…</Accordion.Header>  <Accordion.Content className="AccordionContent">…</Accordion.Content>  </Accordion.Item> 	</Accordion.Root> ); 

    /* styles.css */ .AccordionContent { 	overflow: hidden; } .AccordionContent[data-state="open"] { 	animation: slideDown 300ms ease-out; } .AccordionContent[data-state="closed"] { 	animation: slideUp 300ms ease-out; }  @keyframes slideDown { 	from {  height: 0; 	} 	to {  height: var(--radix-accordion-content-height); 	} }  @keyframes slideUp { 	from {  height: var(--radix-accordion-content-height); 	} 	to {  height: 0; 	} } 

## Accessibility

Adheres to the Accordion WAI-ARIA design pattern.

### Keyboard Interactions

| Key | Description |
| --- | --- |
| 
Space

 | When focus is on an `Accordion.Trigger` of a collapsed section, expands the section. |
| 

Enter

 | When focus is on an `Accordion.Trigger` of a collapsed section, expands the section. |
| 

Tab

 | Moves focus to the next focusable element. |
| 

Shift + Tab

 | Moves focus to the previous focusable element. |
| 

ArrowDown

 | Moves focus to the next `Accordion.Trigger` when `orientation` is `vertical`. |
| 

ArrowUp

 | Moves focus to the previous `Accordion.Trigger` when `orientation` is `vertical`. |
| 

ArrowRight

 | Moves focus to the next `Accordion.Trigger` when `orientation` is `horizontal`. |
| 

ArrowLeft

 | Moves focus to the previous `Accordion.Trigger` when `orientation` is `horizontal`. |
| 

Home

 | When focus is on an `Accordion.Trigger`, moves focus to the first `Accordion.Trigger`. |
| 

End

 | When focus is on an `Accordion.Trigger`, moves focus to the last `Accordion.Trigger`. |

#### Quick nav

*   Installation
*   Anatomy
*   API Reference
*   Root
*   Item
*   Header
*   Trigger
*   Content
*   Examples
*   Expanded by default
*   Allow collapsing all items
*   Multiple items open at the same time
*   Rotated icon when open
*   Horizontal orientation
*   Animating content size
*   Accessibility
*   Keyboard Interactions

PreviousServer-side rendering

NextAlert Dialog

Edit this page on GitHub.

---

## Page: https://www.radix-ui.com/primitives/docs/components/alert-dialog

Components

# Alert Dialog

A modal dialog that interrupts the user with important content and expects a response.

Delete account

index.jsxindex.jsxstyles.cssstyles.css

CSS

    import * as React from "react"; import { AlertDialog } from "radix-ui"; import "./styles.css";  const AlertDialogDemo = () => ( 	<AlertDialog.Root>  <AlertDialog.Trigger asChild>  <button className="Button violet">Delete account</button>  </AlertDialog.Trigger>  <AlertDialog.Portal>  <AlertDialog.Overlay className="AlertDialogOverlay" />  <AlertDialog.Content className="AlertDialogContent">  <AlertDialog.Title className="AlertDialogTitle">  Are you absolutely sure?  </AlertDialog.Title>  <AlertDialog.Description className="AlertDialogDescription">  This action cannot be undone. This will permanently delete your  account and remove your data from our servers.  </AlertDialog.Description>  <div style={{ display: "flex", gap: 25, justifyContent: "flex-end" }}>  <AlertDialog.Cancel asChild>  <button className="Button mauve">Cancel</button>  </AlertDialog.Cancel>  <AlertDialog.Action asChild>  <button className="Button red">Yes, delete account</button>  </AlertDialog.Action>  </div>  </AlertDialog.Content>  </AlertDialog.Portal> 	</AlertDialog.Root> );  export default AlertDialogDemo; 

## Features

Focus is automatically trapped.

Can be controlled or uncontrolled.

Manages screen reader announcements with `Title` and `Description` components.

Esc closes the component automatically.

## Component Reference Links

Version: 1.1.14

Size: 13.53 kB

View source

Report an issue

ARIA design pattern

## Installation

Install the component from your command line.

    npm install @radix-ui/react-alert-dialog 

## Anatomy

Import all parts and piece them together.

    import { AlertDialog } from "radix-ui";  export default () => ( 	<AlertDialog.Root>  <AlertDialog.Trigger />  <AlertDialog.Portal>  <AlertDialog.Overlay />  <AlertDialog.Content>  <AlertDialog.Title />  <AlertDialog.Description />  <AlertDialog.Cancel />  <AlertDialog.Action />  </AlertDialog.Content>  </AlertDialog.Portal> 	</AlertDialog.Root> ); 

## API Reference

### Root

Contains all the parts of an alert dialog.

| Prop | Type | Default |
| --- | --- | --- |
| 
`defaultOpen`

Prop description

 | 

`boolean`



 | No default value |
| 

`open`

Prop description

 | 

`boolean`



 | No default value |
| 

`onOpenChange`

Prop description

 | 

`function`

See full type

 | No default value |

### Trigger

A button that opens the dialog.

| Prop | Type | Default |
| --- | --- | --- |
| 
`asChild`

Prop description

 | 

`boolean`



 | `false` |

| Data attribute | Values |
| --- | --- |
| `[data-state]` | `"open" | "closed"` |

### Portal

When used, portals your overlay and content parts into the `body`.

| Prop | Type | Default |
| --- | --- | --- |
| 
`forceMount`

Prop description

 | 

`boolean`



 | No default value |
| 

`container`

Prop description

 | 

`HTMLElement`



 | `document.body` |

### Overlay

A layer that covers the inert portion of the view when the dialog is open.

| Prop | Type | Default |
| --- | --- | --- |
| 
`asChild`

Prop description

 | 

`boolean`



 | `false` |
| 

`forceMount`

Prop description

 | 

`boolean`



 | No default value |

| Data attribute | Values |
| --- | --- |
| `[data-state]` | `"open" | "closed"` |

### Content

Contains content to be rendered when the dialog is open.

| Prop | Type | Default |
| --- | --- | --- |
| 
`asChild`

Prop description

 | 

`boolean`



 | `false` |
| 

`forceMount`

Prop description

 | 

`boolean`



 | No default value |
| 

`onOpenAutoFocus`

Prop description

 | 

`function`

See full type

 | No default value |
| 

`onCloseAutoFocus`

Prop description

 | 

`function`

See full type

 | No default value |
| 

`onEscapeKeyDown`

Prop description

 | 

`function`

See full type

 | No default value |

| Data attribute | Values |
| --- | --- |
| `[data-state]` | `"open" | "closed"` |

### Cancel

A button that closes the dialog. This button should be distinguished visually from `AlertDialog.Action` buttons.

| Prop | Type | Default |
| --- | --- | --- |
| 
`asChild`

Prop description

 | 

`boolean`



 | `false` |

### Action

A button that closes the dialog. These buttons should be distinguished visually from the `AlertDialog.Cancel` button.

| Prop | Type | Default |
| --- | --- | --- |
| 
`asChild`

Prop description

 | 

`boolean`



 | `false` |

### Title

An accessible name to be announced when the dialog is opened. Alternatively, you can provide `aria-label` or `aria-labelledby` to `AlertDialog.Content` and exclude this component.

| Prop | Type | Default |
| --- | --- | --- |
| 
`asChild`

Prop description

 | 

`boolean`



 | `false` |

### Description

An accessible description to be announced when the dialog is opened. Alternatively, you can provide `aria-describedby` to `AlertDialog.Content` and exclude this component.

| Prop | Type | Default |
| --- | --- | --- |
| 
`asChild`

Prop description

 | 

`boolean`



 | `false` |

## Examples

### Close after asynchronous form submission

Use the controlled props to programmatically close the Alert Dialog after an async operation has completed.

    import * as React from "react"; import { AlertDialog } from "radix-ui";  const wait = () => new Promise((resolve) => setTimeout(resolve, 1000));  export default () => { 	const [open, setOpen] = React.useState(false);  	return (  <AlertDialog.Root open={open} onOpenChange={setOpen}>  <AlertDialog.Trigger>Open</AlertDialog.Trigger>  <AlertDialog.Portal>  <AlertDialog.Overlay />  <AlertDialog.Content>  <form onSubmit={(event) => { wait().then(() => setOpen(false)); event.preventDefault(); }} >  {/** some inputs */}  <button type="submit">Submit</button>  </form>  </AlertDialog.Content>  </AlertDialog.Portal>  </AlertDialog.Root> 	); }; 

### Custom portal container

Customise the element that your alert dialog portals into.

    export default () => { 	const [container, setContainer] = React.useState(null); 	return (  <div>  <AlertDialog.Root>  <AlertDialog.Trigger />  <AlertDialog.Portal container={container}>  <AlertDialog.Overlay />  <AlertDialog.Content>...</AlertDialog.Content>  </AlertDialog.Portal>  </AlertDialog.Root>   <div ref={setContainer} />  </div> 	); }; 

## Accessibility

Adheres to the Alert and Message Dialogs WAI-ARIA design pattern.

### Keyboard Interactions

| Key | Description |
| --- | --- |
| 
Space

 | Opens/closes the dialog. |
| 

Enter

 | Opens/closes the dialog. |
| 

Tab

 | Moves focus to the next focusable element. |
| 

Shift + Tab

 | Moves focus to the previous focusable element. |
| 

Esc

 | Closes the dialog and moves focus to `AlertDialog.Trigger`. |

#### Quick nav

*   Installation
*   Anatomy
*   API Reference
*   Root
*   Trigger
*   Portal
*   Overlay
*   Content
*   Cancel
*   Action
*   Title
*   Description
*   Examples
*   Close after asynchronous form submission
*   Custom portal container
*   Accessibility
*   Keyboard Interactions

PreviousAccordion

NextAspect Ratio

Edit this page on GitHub.

---

## Page: https://www.radix-ui.com/primitives/docs/components/aspect-ratio

Components

# Aspect Ratio

Displays content within a desired ratio.

index.jsxindex.jsxstyles.cssstyles.css

CSS

    import * as React from "react"; import { AspectRatio } from "radix-ui"; import "./styles.css";  const AspectRatioDemo = () => ( 	<div className="Container">  <AspectRatio.Root ratio={16 / 9}>  <img className="Image" src="https://images.unsplash.com/photo-1535025183041-0991a977e25b?w=300&dpr=2&q=80" alt="Landscape photograph by Tobias Tullius" />  </AspectRatio.Root> 	</div> );  export default AspectRatioDemo; 

## Features

Accepts any custom ratio.

## Component Reference Links

Version: 1.1.7

Size: 1.71 kB

View source

Report an issue

## Installation

Install the component from your command line.

    npm install @radix-ui/react-aspect-ratio 

## Anatomy

Import the component.

    import { AspectRatio } from "radix-ui";  export default () => <AspectRatio.Root />; 

## API Reference

### Root

Contains the content you want to constrain to a given ratio.

| Prop | Type | Default |
| --- | --- | --- |
| 
`asChild`

Prop description

 | 

`boolean`



 | `false` |
| 

`ratio`

Prop description

 | 

`number`



 | `1` |

#### Quick nav

*   Installation
*   Anatomy
*   API Reference
*   Root

PreviousAlert Dialog

NextAvatar

Edit this page on GitHub.

---

## Page: https://www.radix-ui.com/primitives/docs/components/avatar

Components

# Avatar

An image element with a fallback for representing the user.

PD

index.jsxindex.jsxstyles.cssstyles.css

CSS

    import * as React from "react"; import { Avatar } from "radix-ui"; import "./styles.css";  const AvatarDemo = () => ( 	<div style={{ display: "flex", gap: 20 }}>  <Avatar.Root className="AvatarRoot">  <Avatar.Image className="AvatarImage" src="https://images.unsplash.com/photo-1492633423870-43d1cd2775eb?&w=128&h=128&dpr=2&q=80" alt="Colm Tuite" />  <Avatar.Fallback className="AvatarFallback" delayMs={600}>  CT  </Avatar.Fallback>  </Avatar.Root>  <Avatar.Root className="AvatarRoot">  <Avatar.Image className="AvatarImage" src="https://images.unsplash.com/photo-1511485977113-f34c92461ad9?ixlib=rb-1.2.1&w=128&h=128&dpr=2&q=80" alt="Pedro Duarte" />  <Avatar.Fallback className="AvatarFallback" delayMs={600}>  JD  </Avatar.Fallback>  </Avatar.Root>  <Avatar.Root className="AvatarRoot">  <Avatar.Fallback className="AvatarFallback">PD</Avatar.Fallback>  </Avatar.Root> 	</div> );  export default AvatarDemo; 

## Features

Automatic and manual control over when the image renders.

Fallback part accepts any children.

Optionally delay fallback rendering to avoid content flashing.

## Component Reference Links

Version: 1.1.10

Size: 3.11 kB

View source

Report an issue

## Installation

Install the component from your command line.

    npm install @radix-ui/react-avatar 

## Anatomy

Import all parts and piece them together.

    import { Avatar } from "radix-ui";  export default () => ( 	<Avatar.Root>  <Avatar.Image />  <Avatar.Fallback /> 	</Avatar.Root> ); 

## API Reference

### Root

Contains all the parts of an avatar.

| Prop | Type | Default |
| --- | --- | --- |
| 
`asChild`

Prop description

 | 

`boolean`



 | `false` |

### Image

The image to render. By default it will only render when it has loaded. You can use the `onLoadingStatusChange` handler if you need more control.

| Prop | Type | Default |
| --- | --- | --- |
| 
`asChild`

Prop description

 | 

`boolean`



 | `false` |
| 

`onLoadingStatusChange`

Prop description

 | 

`function`

See full type

 | No default value |

### Fallback

An element that renders when the image hasn't loaded. This means whilst it's loading, or if there was an error. If you notice a flash during loading, you can provide a `delayMs` prop to delay its rendering so it only renders for those with slower connections. For more control, use the `onLoadingStatusChange` handler on `Avatar.Image`.

| Prop | Type | Default |
| --- | --- | --- |
| 
`asChild`

Prop description

 | 

`boolean`



 | `false` |
| 

`delayMs`

Prop description

 | 

`number`



 | No default value |

## Examples

### Clickable Avatar with tooltip

You can compose the Avatar with a Tooltip to display extra information.

    import { Avatar, Tooltip } from "radix-ui";  export default () => ( 	<Tooltip.Root>  <Tooltip.Trigger>  <Avatar.Root>…</Avatar.Root>  </Tooltip.Trigger>   <Tooltip.Content side="top">  Tooltip content  <Tooltip.Arrow />  </Tooltip.Content> 	</Tooltip.Root> ); 

#### Quick nav

*   Installation
*   Anatomy
*   API Reference
*   Root
*   Image
*   Fallback
*   Examples
*   Clickable Avatar with tooltip

PreviousAspect Ratio

NextCheckbox

Edit this page on GitHub.

---

## Page: https://www.radix-ui.com/primitives/docs/components/checkbox

Components

# Checkbox

A control that allows the user to toggle between checked and not checked.

Accept terms and conditions.

index.jsxindex.jsxstyles.cssstyles.css

CSS

    import * as React from "react"; import { Checkbox } from "radix-ui"; import { CheckIcon } from "@radix-ui/react-icons"; import "./styles.css";  const CheckboxDemo = () => ( 	<form>  <div style={{ display: "flex", alignItems: "center" }}>  <Checkbox.Root className="CheckboxRoot" defaultChecked id="c1">  <Checkbox.Indicator className="CheckboxIndicator">  <CheckIcon />  </Checkbox.Indicator>  </Checkbox.Root>  <label className="Label" htmlFor="c1">  Accept terms and conditions.  </label>  </div> 	</form> );  export default CheckboxDemo; 

## Features

Supports indeterminate state.

Full keyboard navigation.

Can be controlled or uncontrolled.

## Component Reference Links

Version: 1.3.2

Size: 5.23 kB

View source

Report an issue

ARIA design pattern

## Installation

Install the component from your command line.

    npm install @radix-ui/react-checkbox 

## Anatomy

Import all parts and piece them together.

    import { Checkbox } from "radix-ui";  export default () => ( 	<Checkbox.Root>  <Checkbox.Indicator /> 	</Checkbox.Root> ); 

## API Reference

### Root

Contains all the parts of a checkbox. An `input` will also render when used within a `form` to ensure events propagate correctly.

| Prop | Type | Default |
| --- | --- | --- |
| 
`asChild`

Prop description

 | 

`boolean`



 | `false` |
| 

`defaultChecked`

Prop description

 | 

`boolean | 'indeterminate'`



 | No default value |
| 

`checked`

Prop description

 | 

`boolean | 'indeterminate'`



 | No default value |
| 

`onCheckedChange`

Prop description

 | 

`function`

See full type

 | No default value |
| 

`disabled`

Prop description

 | 

`boolean`



 | No default value |
| 

`required`

Prop description

 | 

`boolean`



 | No default value |
| 

`name`

Prop description

 | 

`string`



 | No default value |
| 

`value`

Prop description

 | 

`string`



 | `on` |

| Data attribute | Values |
| --- | --- |
| `[data-state]` | `"checked" | "unchecked" | "indeterminate"` |
| `[data-disabled]` | 
Present when disabled

 |

### Indicator

Renders when the checkbox is in a checked or indeterminate state. You can style this element directly, or you can use it as a wrapper to put an icon into, or both.

| Prop | Type | Default |
| --- | --- | --- |
| 
`asChild`

Prop description

 | 

`boolean`



 | `false` |
| 

`forceMount`

Prop description

 | 

`boolean`



 | No default value |

| Data attribute | Values |
| --- | --- |
| `[data-state]` | `"checked" | "unchecked" | "indeterminate"` |
| `[data-disabled]` | 
Present when disabled

 |

## Examples

### Indeterminate

You can set the checkbox to `indeterminate` by taking control of its state.

    import { DividerHorizontalIcon, CheckIcon } from "@radix-ui/react-icons"; import { Checkbox } from "radix-ui";  export default () => { 	const [checked, setChecked] = React.useState("indeterminate");  	return (  <>  <StyledCheckbox checked={checked} onCheckedChange={setChecked}>  <Checkbox.Indicator>  {checked === "indeterminate" && <DividerHorizontalIcon />}  {checked === true && <CheckIcon />}  </Checkbox.Indicator>  </StyledCheckbox>   <button type="button" onClick={() => setChecked((prevIsChecked) => prevIsChecked === "indeterminate" ? false : "indeterminate", ) } >  Toggle indeterminate  </button>  </> 	); }; 

## Accessibility

Adheres to the tri-state Checkbox WAI-ARIA design pattern.

### Keyboard Interactions

| Key | Description |
| --- | --- |
| 
Space

 | Checks/unchecks the checkbox. |

#### Quick nav

*   Installation
*   Anatomy
*   API Reference
*   Root
*   Indicator
*   Examples
*   Indeterminate
*   Accessibility
*   Keyboard Interactions

PreviousAvatar

NextCollapsible

Edit this page on GitHub.

---

## Page: https://www.radix-ui.com/primitives/docs/components/collapsible

Components

# Collapsible

An interactive component which expands/collapses a panel.

@peduarte starred 3 repositories

@radix-ui/primitives

index.jsxindex.jsxstyles.cssstyles.css

CSS

    import * as React from "react"; import { Collapsible } from "radix-ui"; import { RowSpacingIcon, Cross2Icon } from "@radix-ui/react-icons"; import "./styles.css";  const CollapsibleDemo = () => { 	const [open, setOpen] = React.useState(false); 	return (  <Collapsible.Root className="CollapsibleRoot" open={open} onOpenChange={setOpen} >  <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", }} >  <span className="Text" style={{ color: "white" }}>  @peduarte starred 3 repositories  </span>  <Collapsible.Trigger asChild>  <button className="IconButton">  {open ? <Cross2Icon /> : <RowSpacingIcon />}  </button>  </Collapsible.Trigger>  </div>   <div className="Repository">  <span className="Text">@radix-ui/primitives</span>  </div>   <Collapsible.Content>  <div className="Repository">  <span className="Text">@radix-ui/colors</span>  </div>  <div className="Repository">  <span className="Text">@radix-ui/themes</span>  </div>  </Collapsible.Content>  </Collapsible.Root> 	); };  export default CollapsibleDemo; 

## Features

Full keyboard navigation.

Can be controlled or uncontrolled.

## Component Reference Links

Version: 1.1.11

Size: 4.57 kB

View source

Report an issue

ARIA design pattern

## Installation

Install the component from your command line.

    npm install @radix-ui/react-collapsible 

## Anatomy

Import the components and piece the parts together.

    import { Collapsible } from "radix-ui";  export default () => ( 	<Collapsible.Root>  <Collapsible.Trigger />  <Collapsible.Content /> 	</Collapsible.Root> ); 

## API Reference

### Root

Contains all the parts of a collapsible.

| Prop | Type | Default |
| --- | --- | --- |
| 
`asChild`

Prop description

 | 

`boolean`



 | `false` |
| 

`defaultOpen`

Prop description

 | 

`boolean`



 | No default value |
| 

`open`

Prop description

 | 

`boolean`



 | No default value |
| 

`onOpenChange`

Prop description

 | 

`function`

See full type

 | No default value |
| 

`disabled`

Prop description

 | 

`boolean`



 | No default value |

| Data attribute | Values |
| --- | --- |
| `[data-state]` | `"open" | "closed"` |
| `[data-disabled]` | 
Present when disabled

 |

### Trigger

The button that toggles the collapsible.

| Prop | Type | Default |
| --- | --- | --- |
| 
`asChild`

Prop description

 | 

`boolean`



 | `false` |

| Data attribute | Values |
| --- | --- |
| `[data-state]` | `"open" | "closed"` |
| `[data-disabled]` | 
Present when disabled

 |

### Content

The component that contains the collapsible content.

| Prop | Type | Default |
| --- | --- | --- |
| 
`asChild`

Prop description

 | 

`boolean`



 | `false` |
| 

`forceMount`

Prop description

 | 

`boolean`



 | No default value |

| Data attribute | Values |
| --- | --- |
| `[data-state]` | `"open" | "closed"` |
| `[data-disabled]` | 
Present when disabled

 |

| CSS Variable | Description |
| --- | --- |
| `--radix-collapsible-content-width` | The width of the content when it opens/closes |
| `--radix-collapsible-content-height` | The height of the content when it opens/closes |

## Examples

### Animating content size

Use the `--radix-collapsible-content-width` and/or `--radix-collapsible-content-height` CSS variables to animate the size of the content when it opens/closes. Here's a demo:

    // index.jsx import { Collapsible } from "radix-ui"; import "./styles.css";  export default () => ( 	<Collapsible.Root>  <Collapsible.Trigger>…</Collapsible.Trigger>  <Collapsible.Content className="CollapsibleContent">  …  </Collapsible.Content> 	</Collapsible.Root> ); 

    /* styles.css */ .CollapsibleContent { 	overflow: hidden; } .CollapsibleContent[data-state="open"] { 	animation: slideDown 300ms ease-out; } .CollapsibleContent[data-state="closed"] { 	animation: slideUp 300ms ease-out; }  @keyframes slideDown { 	from {  height: 0; 	} 	to {  height: var(--radix-collapsible-content-height); 	} }  @keyframes slideUp { 	from {  height: var(--radix-collapsible-content-height); 	} 	to {  height: 0; 	} } 

## Accessibility

Adheres to the Disclosure WAI-ARIA design pattern.

### Keyboard Interactions

| Key | Description |
| --- | --- |
| 
Space

 | Opens/closes the collapsible. |
| 

Enter

 | Opens/closes the collapsible. |

#### Quick nav

*   Installation
*   Anatomy
*   API Reference
*   Root
*   Trigger
*   Content
*   Examples
*   Animating content size
*   Accessibility
*   Keyboard Interactions

PreviousCheckbox

NextContext Menu

Edit this page on GitHub.

---

## Page: https://www.radix-ui.com/primitives/docs/components/context-menu

Components

# Context Menu

Displays a menu located at the pointer, triggered by a right click or a long press.

Right-click here.

index.jsxindex.jsxstyles.cssstyles.css

CSS

    import * as React from "react"; import { ContextMenu } from "radix-ui"; import { DotFilledIcon, CheckIcon, ChevronRightIcon, } from "@radix-ui/react-icons"; import "./styles.css";  const ContextMenuDemo = () => { 	const [bookmarksChecked, setBookmarksChecked] = React.useState(true); 	const [urlsChecked, setUrlsChecked] = React.useState(false); 	const [person, setPerson] = React.useState("pedro");  	return (  <ContextMenu.Root>  <ContextMenu.Trigger className="ContextMenuTrigger">  Right-click here.  </ContextMenu.Trigger>  <ContextMenu.Portal>  <ContextMenu.Content className="ContextMenuContent" sideOffset={5} align="end" >  <ContextMenu.Item className="ContextMenuItem">  Back <div className="RightSlot">⌘+[</div>  </ContextMenu.Item>  <ContextMenu.Item className="ContextMenuItem" disabled>  Forward <div className="RightSlot">⌘+]</div>  </ContextMenu.Item>  <ContextMenu.Item className="ContextMenuItem">  Reload <div className="RightSlot">⌘+R</div>  </ContextMenu.Item>  <ContextMenu.Sub>  <ContextMenu.SubTrigger className="ContextMenuSubTrigger">  More Tools  <div className="RightSlot">  <ChevronRightIcon />  </div>  </ContextMenu.SubTrigger>  <ContextMenu.Portal>  <ContextMenu.SubContent className="ContextMenuSubContent" sideOffset={2} alignOffset={-5} >  <ContextMenu.Item className="ContextMenuItem">  Save Page As… <div className="RightSlot">⌘+S</div>  </ContextMenu.Item>  <ContextMenu.Item className="ContextMenuItem">  Create Shortcut…  </ContextMenu.Item>  <ContextMenu.Item className="ContextMenuItem">  Name Window…  </ContextMenu.Item>  <ContextMenu.Separator className="ContextMenuSeparator" />  <ContextMenu.Item className="ContextMenuItem">  Developer Tools  </ContextMenu.Item>  </ContextMenu.SubContent>  </ContextMenu.Portal>  </ContextMenu.Sub>   <ContextMenu.Separator className="ContextMenuSeparator" />   <ContextMenu.CheckboxItem className="ContextMenuCheckboxItem" checked={bookmarksChecked} onCheckedChange={setBookmarksChecked} >  <ContextMenu.ItemIndicator className="ContextMenuItemIndicator">  <CheckIcon />  </ContextMenu.ItemIndicator>  Show Bookmarks <div className="RightSlot">⌘+B</div>  </ContextMenu.CheckboxItem>  <ContextMenu.CheckboxItem className="ContextMenuCheckboxItem" checked={urlsChecked} onCheckedChange={setUrlsChecked} >  <ContextMenu.ItemIndicator className="ContextMenuItemIndicator">  <CheckIcon />  </ContextMenu.ItemIndicator>  Show Full URLs  </ContextMenu.CheckboxItem>   <ContextMenu.Separator className="ContextMenuSeparator" />   <ContextMenu.Label className="ContextMenuLabel">  People  </ContextMenu.Label>  <ContextMenu.RadioGroup value={person} onValueChange={setPerson}>  <ContextMenu.RadioItem className="ContextMenuRadioItem" value="pedro" >  <ContextMenu.ItemIndicator className="ContextMenuItemIndicator">  <DotFilledIcon />  </ContextMenu.ItemIndicator>  Pedro Duarte  </ContextMenu.RadioItem>  <ContextMenu.RadioItem className="ContextMenuRadioItem" value="colm" >  <ContextMenu.ItemIndicator className="ContextMenuItemIndicator">  <DotFilledIcon />  </ContextMenu.ItemIndicator>  Colm Tuite  </ContextMenu.RadioItem>  </ContextMenu.RadioGroup>  </ContextMenu.Content>  </ContextMenu.Portal>  </ContextMenu.Root> 	); };  export default ContextMenuDemo; 

## Features

Supports submenus with configurable reading direction.

Supports items, labels, groups of items.

Supports checkable items (single or multiple) with optional indeterminate state.

Supports modal and non-modal modes.

Customize side, alignment, offsets, collision handling.

Focus is fully managed.

Full keyboard navigation.

Typeahead support.

Dismissing and layering behavior is highly customizable.

Triggers with a long press on touch devices

## Component Reference Links

Version: 2.2.15

Size: 31.42 kB

View source

Report an issue

ARIA design pattern

## Installation

Install the component from your command line.

    npm install @radix-ui/react-context-menu 

## Anatomy

Import all parts and piece them together.

    import { ContextMenu } from "radix-ui";  export default () => ( 	<ContextMenu.Root>  <ContextMenu.Trigger />   <ContextMenu.Portal>  <ContextMenu.Content>  <ContextMenu.Label />  <ContextMenu.Item />   <ContextMenu.Group>  <ContextMenu.Item />  </ContextMenu.Group>   <ContextMenu.CheckboxItem>  <ContextMenu.ItemIndicator />  </ContextMenu.CheckboxItem>   <ContextMenu.RadioGroup>  <ContextMenu.RadioItem>  <ContextMenu.ItemIndicator />  </ContextMenu.RadioItem>  </ContextMenu.RadioGroup>   <ContextMenu.Sub>  <ContextMenu.SubTrigger />  <ContextMenu.Portal>  <ContextMenu.SubContent />  </ContextMenu.Portal>  </ContextMenu.Sub>   <ContextMenu.Separator />  </ContextMenu.Content>  </ContextMenu.Portal> 	</ContextMenu.Root> ); 

## API Reference

Adheres to the Menu WAI-ARIA design pattern and uses roving tabindex to manage focus movement among menu items.

### Root

Contains all the parts of a context menu.

| Prop | Type | Default |
| --- | --- | --- |
| 
`dir`

Prop description

 | 

`enum`

See full type

 | No default value |
| 

`onOpenChange`

Prop description

 | 

`function`

See full type

 | No default value |
| 

`modal`

Prop description

 | 

`boolean`



 | `true` |

### Trigger

The area that opens the context menu. Wrap it around the target you want the context menu to open from when right-clicking (or using the relevant keyboard shortcuts).

| Prop | Type | Default |
| --- | --- | --- |
| 
`asChild`

Prop description

 | 

`boolean`



 | `false` |
| 

`disabled`

Prop description

 | 

`boolean`



 | `false` |

| Data attribute | Values |
| --- | --- |
| `[data-state]` | `"open" | "closed"` |

### Portal

When used, portals the content part into the `body`.

| Prop | Type | Default |
| --- | --- | --- |
| 
`forceMount`

Prop description

 | 

`boolean`



 | No default value |
| 

`container`

Prop description

 | 

`HTMLElement`



 | `document.body` |

### Content

The component that pops out in an open context menu.

| Prop | Type | Default |
| --- | --- | --- |
| 
`asChild`

Prop description

 | 

`boolean`



 | `false` |
| 

`loop`

Prop description

 | 

`boolean`



 | `false` |
| 

`onCloseAutoFocus`

Prop description

 | 

`function`

See full type

 | No default value |
| 

`onEscapeKeyDown`

Prop description

 | 

`function`

See full type

 | No default value |
| 

`onPointerDownOutside`

Prop description

 | 

`function`

See full type

 | No default value |
| 

`onFocusOutside`

Prop description

 | 

`function`

See full type

 | No default value |
| 

`onInteractOutside`

Prop description

 | 

`function`

See full type

 | No default value |
| 

`forceMount`

Prop description

 | 

`boolean`



 | No default value |
| 

`alignOffset`

Prop description

 | 

`number`



 | `0` |
| 

`avoidCollisions`

Prop description

 | 

`boolean`



 | `true` |
| 

`collisionBoundary`

Prop description

 | 

`Boundary`

See full type

 | `[]` |
| 

`collisionPadding`

Prop description

 | 

`number | Padding`

See full type

 | `0` |
| 

`sticky`

Prop description

 | 

`enum`

See full type

 | `"partial"` |
| 

`hideWhenDetached`

Prop description

 | 

`boolean`



 | `false` |

| Data attribute | Values |
| --- | --- |
| `[data-state]` | `"open" | "closed"` |
| `[data-side]` | `"left" | "right" | "bottom" | "top"` |
| `[data-align]` | `"start" | "end" | "center"` |

| CSS Variable | Description |
| --- | --- |
| `--radix-context-menu-content-transform-origin` | The `transform-origin` computed from the content and arrow positions/offsets |
| `--radix-context-menu-content-available-width` | The remaining width between the trigger and the boundary edge |
| `--radix-context-menu-content-available-height` | The remaining height between the trigger and the boundary edge |
| `--radix-context-menu-trigger-width` | The width of the trigger |
| `--radix-context-menu-trigger-height` | The height of the trigger |

### Arrow

An optional arrow element to render alongside a submenu. This can be used to help visually link the trigger item with the `ContextMenu.Content`. Must be rendered inside `ContextMenu.Content`.

| Prop | Type | Default |
| --- | --- | --- |
| 
`asChild`

Prop description

 | 

`boolean`



 | `false` |
| 

`width`

Prop description

 | 

`number`



 | `10` |
| 

`height`

Prop description

 | 

`number`



 | `5` |

### Item

The component that contains the context menu items.

| Prop | Type | Default |
| --- | --- | --- |
| 
`asChild`

Prop description

 | 

`boolean`



 | `false` |
| 

`disabled`

Prop description

 | 

`boolean`



 | No default value |
| 

`onSelect`

Prop description

 | 

`function`

See full type

 | No default value |
| 

`textValue`

Prop description

 | 

`string`



 | No default value |

| Data attribute | Values |
| --- | --- |
| `[data-highlighted]` | 
Present when highlighted

 |
| `[data-disabled]` | 

Present when disabled

 |

### Group

Used to group multiple `ContextMenu.Item`s.

| Prop | Type | Default |
| --- | --- | --- |
| 
`asChild`

Prop description

 | 

`boolean`



 | `false` |

### Label

Used to render a label. It won't be focusable using arrow keys.

| Prop | Type | Default |
| --- | --- | --- |
| 
`asChild`

Prop description

 | 

`boolean`



 | `false` |

### CheckboxItem

An item that can be controlled and rendered like a checkbox.

| Prop | Type | Default |
| --- | --- | --- |
| 
`asChild`

Prop description

 | 

`boolean`



 | `false` |
| 

`checked`

Prop description

 | 

`boolean | 'indeterminate'`



 | No default value |
| 

`onCheckedChange`

Prop description

 | 

`function`

See full type

 | No default value |
| 

`disabled`

Prop description

 | 

`boolean`



 | No default value |
| 

`onSelect`

Prop description

 | 

`function`

See full type

 | No default value |
| 

`textValue`

Prop description

 | 

`string`



 | No default value |

| Data attribute | Values |
| --- | --- |
| `[data-state]` | `"checked" | "unchecked" | "indeterminate"` |
| `[data-highlighted]` | 
Present when highlighted

 |
| `[data-disabled]` | 

Present when disabled

 |

### RadioGroup

Used to group multiple `ContextMenu.RadioItem`s.

| Prop | Type | Default |
| --- | --- | --- |
| 
`asChild`

Prop description

 | 

`boolean`



 | `false` |
| 

`value`

Prop description

 | 

`string`



 | No default value |
| 

`onValueChange`

Prop description

 | 

`function`

See full type

 | No default value |

### RadioItem

An item that can be controlled and rendered like a radio.

| Prop | Type | Default |
| --- | --- | --- |
| 
`asChild`

Prop description

 | 

`boolean`



 | `false` |
| 

`value*`

Prop description

 | 

`string`



 | No default value |
| 

`disabled`

Prop description

 | 

`boolean`



 | No default value |
| 

`onSelect`

Prop description

 | 

`function`

See full type

 | No default value |
| 

`textValue`

Prop description

 | 

`string`



 | No default value |

| Data attribute | Values |
| --- | --- |
| `[data-state]` | `"checked" | "unchecked" | "indeterminate"` |
| `[data-highlighted]` | 
Present when highlighted

 |
| `[data-disabled]` | 

Present when disabled

 |

### ItemIndicator

Renders when the parent `ContextMenu.CheckboxItem` or `ContextMenu.RadioItem` is checked. You can style this element directly, or you can use it as a wrapper to put an icon into, or both.

| Prop | Type | Default |
| --- | --- | --- |
| 
`asChild`

Prop description

 | 

`boolean`



 | `false` |
| 

`forceMount`

Prop description

 | 

`boolean`



 | No default value |

| Data attribute | Values |
| --- | --- |
| `[data-state]` | `"checked" | "unchecked" | "indeterminate"` |

### Separator

Used to visually separate items in the context menu.

| Prop | Type | Default |
| --- | --- | --- |
| 
`asChild`

Prop description

 | 

`boolean`



 | `false` |

### Sub

Contains all the parts of a submenu.

| Prop | Type | Default |
| --- | --- | --- |
| 
`defaultOpen`

Prop description

 | 

`boolean`



 | No default value |
| 

`open`

Prop description

 | 

`boolean`



 | No default value |
| 

`onOpenChange`

Prop description

 | 

`function`

See full type

 | No default value |

### SubTrigger

An item that opens a submenu. Must be rendered inside `ContextMenu.Sub`.

| Prop | Type | Default |
| --- | --- | --- |
| 
`asChild`

Prop description

 | 

`boolean`



 | `false` |
| 

`disabled`

Prop description

 | 

`boolean`



 | No default value |
| 

`textValue`

Prop description

 | 

`string`



 | No default value |

| Data attribute | Values |
| --- | --- |
| `[data-state]` | `"open" | "closed"` |
| `[data-highlighted]` | 
Present when highlighted

 |
| `[data-disabled]` | 

Present when disabled

 |

### SubContent

The component that pops out when a submenu is open. Must be rendered inside `ContextMenu.Sub`.

| Prop | Type | Default |
| --- | --- | --- |
| 
`asChild`

Prop description

 | 

`boolean`



 | `false` |
| 

`loop`

Prop description

 | 

`boolean`



 | `false` |
| 

`onEscapeKeyDown`

Prop description

 | 

`function`

See full type

 | No default value |
| 

`onPointerDownOutside`

Prop description

 | 

`function`

See full type

 | No default value |
| 

`onFocusOutside`

Prop description

 | 

`function`

See full type

 | No default value |
| 

`onInteractOutside`

Prop description

 | 

`function`

See full type

 | No default value |
| 

`forceMount`

Prop description

 | 

`boolean`



 | No default value |
| 

`sideOffset`

Prop description

 | 

`number`



 | `0` |
| 

`alignOffset`

Prop description

 | 

`number`



 | `0` |
| 

`avoidCollisions`

Prop description

 | 

`boolean`



 | `true` |
| 

`collisionBoundary`

Prop description

 | 

`Boundary`

See full type

 | `[]` |
| 

`collisionPadding`

Prop description

 | 

`number | Padding`

See full type

 | `0` |
| 

`arrowPadding`

Prop description

 | 

`number`



 | `0` |
| 

`sticky`

Prop description

 | 

`enum`

See full type

 | `"partial"` |
| 

`hideWhenDetached`

Prop description

 | 

`boolean`



 | `false` |

| Data attribute | Values |
| --- | --- |
| `[data-state]` | `"open" | "closed"` |
| `[data-side]` | `"left" | "right" | "bottom" | "top"` |
| `[data-align]` | `"start" | "end" | "center"` |

| CSS Variable | Description |
| --- | --- |
| `--radix-context-menu-content-transform-origin` | The `transform-origin` computed from the content and arrow positions/offsets |
| `--radix-context-menu-content-available-width` | The remaining width between the trigger and the boundary edge |
| `--radix-context-menu-content-available-height` | The remaining height between the trigger and the boundary edge |
| `--radix-context-menu-trigger-width` | The width of the trigger |
| `--radix-context-menu-trigger-height` | The height of the trigger |

## Examples

### With submenus

You can create submenus by using `ContextMenu.Sub` in combination with its parts.

    <ContextMenu.Root> 	<ContextMenu.Trigger>…</ContextMenu.Trigger> 	<ContextMenu.Portal>  <ContextMenu.Content>  <ContextMenu.Item>…</ContextMenu.Item>  <ContextMenu.Item>…</ContextMenu.Item>  <ContextMenu.Separator />  <ContextMenu.Sub>  <ContextMenu.SubTrigger>Sub menu →</ContextMenu.SubTrigger>  <ContextMenu.Portal>  <ContextMenu.SubContent>  <ContextMenu.Item>Sub menu item</ContextMenu.Item>  <ContextMenu.Item>Sub menu item</ContextMenu.Item>  <ContextMenu.Arrow />  </ContextMenu.SubContent>  </ContextMenu.Portal>  </ContextMenu.Sub>  <ContextMenu.Separator />  <ContextMenu.Item>…</ContextMenu.Item>  </ContextMenu.Content> 	</ContextMenu.Portal> </ContextMenu.Root> 

### With disabled items

You can add special styles to disabled items via the `data-disabled` attribute.

    // index.jsx import { ContextMenu } from "radix-ui"; import "./styles.css";  export default () => ( 	<ContextMenu.Root>  <ContextMenu.Trigger>…</ContextMenu.Trigger>  <ContextMenu.Portal>  <ContextMenu.Content>  <ContextMenu.Item className="ContextMenuItem" disabled>  …  </ContextMenu.Item>  <ContextMenu.Item className="ContextMenuItem">…</ContextMenu.Item>  </ContextMenu.Content>  </ContextMenu.Portal> 	</ContextMenu.Root> ); 

    /* styles.css */ .ContextMenuItem[data-disabled] { 	color: gainsboro; } 

### With separators

Use the `Separator` part to add a separator between items.

    <ContextMenu.Root> 	<ContextMenu.Trigger>…</ContextMenu.Trigger> 	<ContextMenu.Portal>  <ContextMenu.Content>  <ContextMenu.Item>…</ContextMenu.Item>  <ContextMenu.Separator />  <ContextMenu.Item>…</ContextMenu.Item>  <ContextMenu.Separator />  <ContextMenu.Item>…</ContextMenu.Item>  </ContextMenu.Content> 	</ContextMenu.Portal> </ContextMenu.Root> 

### With labels

Use the `Label` part to help label a section.

    <ContextMenu.Root> 	<ContextMenu.Trigger>…</ContextMenu.Trigger> 	<ContextMenu.Portal>  <ContextMenu.Content>  <ContextMenu.Label>Label</ContextMenu.Label>  <ContextMenu.Item>…</ContextMenu.Item>  <ContextMenu.Item>…</ContextMenu.Item>  <ContextMenu.Item>…</ContextMenu.Item>  </ContextMenu.Content> 	</ContextMenu.Portal> </ContextMenu.Root> 

### With checkbox items

Use the `CheckboxItem` part to add an item that can be checked.

    import * as React from "react"; import { CheckIcon } from "@radix-ui/react-icons"; import { ContextMenu } from "radix-ui";  export default () => { 	const [checked, setChecked] = React.useState(true);  	return (  <ContextMenu.Root>  <ContextMenu.Trigger>…</ContextMenu.Trigger>  <ContextMenu.Portal>  <ContextMenu.Content>  <ContextMenu.Item>…</ContextMenu.Item>  <ContextMenu.Item>…</ContextMenu.Item>  <ContextMenu.Separator />  <ContextMenu.CheckboxItem checked={checked} onCheckedChange={setChecked} >  <ContextMenu.ItemIndicator>  <CheckIcon />  </ContextMenu.ItemIndicator>  Checkbox item  </ContextMenu.CheckboxItem>  </ContextMenu.Content>  </ContextMenu.Portal>  </ContextMenu.Root> 	); }; 

### With radio items

Use the `RadioGroup` and `RadioItem` parts to add an item that can be checked amongst others.

    import * as React from "react"; import { CheckIcon } from "@radix-ui/react-icons"; import { ContextMenu } from "radix-ui";  export default () => { 	const [color, setColor] = React.useState("blue");  	return (  <ContextMenu.Root>  <ContextMenu.Trigger>…</ContextMenu.Trigger>  <ContextMenu.Portal>  <ContextMenu.Content>  <ContextMenu.RadioGroup value={color} onValueChange={setColor}>  <ContextMenu.RadioItem value="red">  <ContextMenu.ItemIndicator>  <CheckIcon />  </ContextMenu.ItemIndicator>  Red  </ContextMenu.RadioItem>  <ContextMenu.RadioItem value="blue">  <ContextMenu.ItemIndicator>  <CheckIcon />  </ContextMenu.ItemIndicator>  Blue  </ContextMenu.RadioItem>  <ContextMenu.RadioItem value="green">  <ContextMenu.ItemIndicator>  <CheckIcon />  </ContextMenu.ItemIndicator>  Green  </ContextMenu.RadioItem>  </ContextMenu.RadioGroup>  </ContextMenu.Content>  </ContextMenu.Portal>  </ContextMenu.Root> 	); }; 

### With complex items

You can add extra decorative elements in the `Item` parts, such as images.

    import { ContextMenu } from "radix-ui";  export default () => ( 	<ContextMenu.Root>  <ContextMenu.Trigger>…</ContextMenu.Trigger>  <ContextMenu.Portal>  <ContextMenu.Content>  <ContextMenu.Item>  <img src="…" />  Adolfo Hess  </ContextMenu.Item>  <ContextMenu.Item>  <img src="…" />  Miyah Myles  </ContextMenu.Item>  </ContextMenu.Content>  </ContextMenu.Portal> 	</ContextMenu.Root> ); 

### Constrain the content/sub-content size

You may want to constrain the width of the content (or sub-content) so that it matches the trigger (or sub-trigger) width. You may also want to constrain its height to not exceed the viewport.

We expose several CSS custom properties such as `--radix-context-menu-trigger-width` and `--radix-context-menu-content-available-height` to support this. Use them to constrain the content dimensions.

    // index.jsx import { ContextMenu } from "radix-ui"; import "./styles.css";  export default () => ( 	<ContextMenu.Root>  <ContextMenu.Trigger>…</ContextMenu.Trigger>  <ContextMenu.Portal>  <ContextMenu.Content className="ContextMenuContent">  …  </ContextMenu.Content>  </ContextMenu.Portal> 	</ContextMenu.Root> ); 

    /* styles.css */ .ContextMenuContent { 	width: var(--radix-context-menu-trigger-width); 	max-height: var(--radix-context-menu-content-available-height); } 

### Origin-aware animations

We expose a CSS custom property `--radix-context-menu-content-transform-origin`. Use it to animate the content from its computed origin based on `side`, `sideOffset`, `align`, `alignOffset` and any collisions.

    // index.jsx import { ContextMenu } from "radix-ui"; import "./styles.css";  export default () => ( 	<ContextMenu.Root>  <ContextMenu.Trigger>…</ContextMenu.Trigger>  <ContextMenu.Portal>  <ContextMenu.Content className="ContextMenuContent">  …  </ContextMenu.Content>  </ContextMenu.Portal> 	</ContextMenu.Root> ); 

    /* styles.css */ .ContextMenuContent { 	transform-origin: var(--radix-context-menu-content-transform-origin); 	animation: scaleIn 0.5s ease-out; }  @keyframes scaleIn { 	from {  opacity: 0;  transform: scale(0); 	} 	to {  opacity: 1;  transform: scale(1); 	} } 

### Collision-aware animations

We expose `data-side` and `data-align` attributes. Their values will change at runtime to reflect collisions. Use them to create collision and direction-aware animations.

    // index.jsx import { ContextMenu } from "radix-ui"; import "./styles.css";  export default () => ( 	<ContextMenu.Root>  <ContextMenu.Trigger>…</ContextMenu.Trigger>  <ContextMenu.Portal>  <ContextMenu.Content className="ContextMenuContent">  …  </ContextMenu.Content>  </ContextMenu.Portal> 	</ContextMenu.Root> ); 

    /* styles.css */ .ContextMenuContent { 	animation-duration: 0.6s; 	animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1); } .ContextMenuContent[data-side="top"] { 	animation-name: slideUp; } .ContextMenuContent[data-side="bottom"] { 	animation-name: slideDown; }  @keyframes slideUp { 	from {  opacity: 0;  transform: translateY(10px); 	} 	to {  opacity: 1;  transform: translateY(0); 	} }  @keyframes slideDown { 	from {  opacity: 0;  transform: translateY(-10px); 	} 	to {  opacity: 1;  transform: translateY(0); 	} } 

## Accessibility

Uses roving tabindex to manage focus movement among menu items.

### Keyboard Interactions

| Key | Description |
| --- | --- |
| 
Space

 | Activates the focused item. |
| 

Enter

 | Activates the focused item. |
| 

ArrowDown

 | Moves focus to the next item. |
| 

ArrowUp

 | Moves focus to the previous item. |
| 

ArrowRightArrowLeft

 | When focus is on `ContextMenu.SubTrigger`, opens or closes the submenu depending on reading direction. |
| 

Esc

 | Closes the context menu |

#### Quick nav

*   Installation
*   Anatomy
*   API Reference
*   Root
*   Trigger
*   Portal
*   Content
*   Arrow
*   Item
*   Group
*   Label
*   CheckboxItem
*   RadioGroup
*   RadioItem
*   ItemIndicator
*   Separator
*   Sub
*   SubTrigger
*   SubContent
*   Examples
*   With submenus
*   With disabled items
*   With separators
*   With labels
*   With checkbox items
*   With radio items
*   With complex items
*   Constrain the content/sub-content size
*   Origin-aware animations
*   Collision-aware animations
*   Accessibility
*   Keyboard Interactions

PreviousCollapsible

NextDialog

Edit this page on GitHub.

---

## Page: https://www.radix-ui.com/primitives/docs/components/dialog

Components

# Dialog

A window overlaid on either the primary window or another dialog window, rendering the content underneath inert.

Edit profile

index.jsxindex.jsxstyles.cssstyles.css

CSS

    import * as React from "react"; import { Dialog } from "radix-ui"; import { Cross2Icon } from "@radix-ui/react-icons"; import "./styles.css";  const DialogDemo = () => ( 	<Dialog.Root>  <Dialog.Trigger asChild>  <button className="Button violet">Edit profile</button>  </Dialog.Trigger>  <Dialog.Portal>  <Dialog.Overlay className="DialogOverlay" />  <Dialog.Content className="DialogContent">  <Dialog.Title className="DialogTitle">Edit profile</Dialog.Title>  <Dialog.Description className="DialogDescription">  Make changes to your profile here. Click save when you're done.  </Dialog.Description>  <fieldset className="Fieldset">  <label className="Label" htmlFor="name">  Name  </label>  <input className="Input" id="name" defaultValue="Pedro Duarte" />  </fieldset>  <fieldset className="Fieldset">  <label className="Label" htmlFor="username">  Username  </label>  <input className="Input" id="username" defaultValue="@peduarte" />  </fieldset>  <div style={{ display: "flex", marginTop: 25, justifyContent: "flex-end" }} >  <Dialog.Close asChild>  <button className="Button green">Save changes</button>  </Dialog.Close>  </div>  <Dialog.Close asChild>  <button className="IconButton" aria-label="Close">  <Cross2Icon />  </button>  </Dialog.Close>  </Dialog.Content>  </Dialog.Portal> 	</Dialog.Root> );  export default DialogDemo; 

## Features

Supports modal and non-modal modes.

Focus is automatically trapped within modal.

Can be controlled or uncontrolled.

Manages screen reader announcements with `Title` and `Description` components.

Esc closes the component automatically.

## Component Reference Links

Version: 1.1.14

Size: 17.46 kB

View source

Report an issue

ARIA design pattern

## Installation

Install the component from your command line.

    npm install @radix-ui/react-dialog 

## Anatomy

Import all parts and piece them together.

    import { Dialog } from "radix-ui";  export default () => ( 	<Dialog.Root>  <Dialog.Trigger />  <Dialog.Portal>  <Dialog.Overlay />  <Dialog.Content>  <Dialog.Title />  <Dialog.Description />  <Dialog.Close />  </Dialog.Content>  </Dialog.Portal> 	</Dialog.Root> ); 

## API Reference

### Root

Contains all the parts of a dialog.

| Prop | Type | Default |
| --- | --- | --- |
| 
`defaultOpen`

Prop description

 | 

`boolean`



 | No default value |
| 

`open`

Prop description

 | 

`boolean`



 | No default value |
| 

`onOpenChange`

Prop description

 | 

`function`

See full type

 | No default value |
| 

`modal`

Prop description

 | 

`boolean`



 | `true` |

### Trigger

The button that opens the dialog.

| Prop | Type | Default |
| --- | --- | --- |
| 
`asChild`

Prop description

 | 

`boolean`



 | `false` |

| Data attribute | Values |
| --- | --- |
| `[data-state]` | `"open" | "closed"` |

### Portal

When used, portals your overlay and content parts into the `body`.

| Prop | Type | Default |
| --- | --- | --- |
| 
`forceMount`

Prop description

 | 

`boolean`



 | No default value |
| 

`container`

Prop description

 | 

`HTMLElement`



 | `document.body` |

### Overlay

A layer that covers the inert portion of the view when the dialog is open.

| Prop | Type | Default |
| --- | --- | --- |
| 
`asChild`

Prop description

 | 

`boolean`



 | `false` |
| 

`forceMount`

Prop description

 | 

`boolean`



 | No default value |

| Data attribute | Values |
| --- | --- |
| `[data-state]` | `"open" | "closed"` |

### Content

Contains content to be rendered in the open dialog.

| Prop | Type | Default |
| --- | --- | --- |
| 
`asChild`

Prop description

 | 

`boolean`



 | `false` |
| 

`forceMount`

Prop description

 | 

`boolean`



 | No default value |
| 

`onOpenAutoFocus`

Prop description

 | 

`function`

See full type

 | No default value |
| 

`onCloseAutoFocus`

Prop description

 | 

`function`

See full type

 | No default value |
| 

`onEscapeKeyDown`

Prop description

 | 

`function`

See full type

 | No default value |
| 

`onPointerDownOutside`

Prop description

 | 

`function`

See full type

 | No default value |
| 

`onInteractOutside`

Prop description

 | 

`function`

See full type

 | No default value |

| Data attribute | Values |
| --- | --- |
| `[data-state]` | `"open" | "closed"` |

### Close

The button that closes the dialog.

| Prop | Type | Default |
| --- | --- | --- |
| 
`asChild`

Prop description

 | 

`boolean`



 | `false` |

### Title

An accessible title to be announced when the dialog is opened.

If you want to hide the title, wrap it inside our Visually Hidden utility like this `<VisuallyHidden asChild>`.

| Prop | Type | Default |
| --- | --- | --- |
| 
`asChild`

Prop description

 | 

`boolean`



 | `false` |

### Description

An optional accessible description to be announced when the dialog is opened.

If you want to hide the description, wrap it inside our Visually Hidden utility like this `<VisuallyHidden asChild>`. If you want to remove the description entirely, remove this part and pass `aria-describedby={undefined}` to `Dialog.Content`.

| Prop | Type | Default |
| --- | --- | --- |
| 
`asChild`

Prop description

 | 

`boolean`



 | `false` |

## Examples

### Close after asynchronous form submission

Use the controlled props to programmatically close the Dialog after an async operation has completed.

    import * as React from "react"; import { Dialog } from "radix-ui";  const wait = () => new Promise((resolve) => setTimeout(resolve, 1000));  export default () => { 	const [open, setOpen] = React.useState(false);  	return (  <Dialog.Root open={open} onOpenChange={setOpen}>  <Dialog.Trigger>Open</Dialog.Trigger>  <Dialog.Portal>  <Dialog.Overlay />  <Dialog.Content>  <form onSubmit={(event) => { wait().then(() => setOpen(false)); event.preventDefault(); }} >  {/** some inputs */}  <button type="submit">Submit</button>  </form>  </Dialog.Content>  </Dialog.Portal>  </Dialog.Root> 	); }; 

### Scrollable overlay

Move the content inside the overlay to render a dialog with overflow.

    // index.jsx import { Dialog } from "radix-ui"; import "./styles.css";  export default () => { 	return (  <Dialog.Root>  <Dialog.Trigger />  <Dialog.Portal>  <Dialog.Overlay className="DialogOverlay">  <Dialog.Content className="DialogContent">...</Dialog.Content>  </Dialog.Overlay>  </Dialog.Portal>  </Dialog.Root> 	); }; 

    /* styles.css */ .DialogOverlay { 	background: rgba(0 0 0 / 0.5); 	position: fixed; 	top: 0; 	left: 0; 	right: 0; 	bottom: 0; 	display: grid; 	place-items: center; 	overflow-y: auto; }  .DialogContent { 	min-width: 300px; 	background: white; 	padding: 30px; 	border-radius: 4px; } 

### Custom portal container

Customise the element that your dialog portals into.

    import * as React from "react"; import { Dialog } from "radix-ui";  export default () => { 	const [container, setContainer] = React.useState(null); 	return (  <div>  <Dialog.Root>  <Dialog.Trigger />  <Dialog.Portal container={container}>  <Dialog.Overlay />  <Dialog.Content>...</Dialog.Content>  </Dialog.Portal>  </Dialog.Root>   <div ref={setContainer} />  </div> 	); }; 

## Accessibility

Adheres to the Dialog WAI-ARIA design pattern.

### Keyboard Interactions

| Key | Description |
| --- | --- |
| 
Space

 | Opens/closes the dialog. |
| 

Enter

 | Opens/closes the dialog. |
| 

Tab

 | Moves focus to the next focusable element. |
| 

Shift + Tab

 | Moves focus to the previous focusable element. |
| 

Esc

 | Closes the dialog and moves focus to `Dialog.Trigger`. |

## Custom APIs

Create your own API by abstracting the primitive parts into your own component.

### Abstract the overlay and the close button

This example abstracts the `Dialog.Overlay` and `Dialog.Close` parts.

#### Usage

    import { Dialog, DialogTrigger, DialogContent } from "./your-dialog";  export default () => ( 	<Dialog>  <DialogTrigger>Dialog trigger</DialogTrigger>  <DialogContent>Dialog Content</DialogContent> 	</Dialog> ); 

#### Implementation

    // your-dialog.jsx import * as React from "react"; import { Dialog as DialogPrimitive } from "radix-ui"; import { Cross1Icon } from "@radix-ui/react-icons";  export const DialogContent = React.forwardRef( 	({ children, ...props }, forwardedRef) => (  <DialogPrimitive.Portal>  <DialogPrimitive.Overlay />  <DialogPrimitive.Content {...props} ref={forwardedRef}>  {children}  <DialogPrimitive.Close aria-label="Close">  <Cross1Icon />  </DialogPrimitive.Close>  </DialogPrimitive.Content>  </DialogPrimitive.Portal> 	), );  export const Dialog = DialogPrimitive.Root; export const DialogTrigger = DialogPrimitive.Trigger; 

#### Quick nav

*   Installation
*   Anatomy
*   API Reference
*   Root
*   Trigger
*   Portal
*   Overlay
*   Content
*   Close
*   Title
*   Description
*   Examples
*   Close after asynchronous form submission
*   Scrollable overlay
*   Custom portal container
*   Accessibility
*   Keyboard Interactions
*   Custom APIs
*   Abstract the overlay and the close button

PreviousContext Menu

NextDropdown Menu

Edit this page on GitHub.

---

## Page: https://www.radix-ui.com/primitives/docs/components/dropdown-menu

Components

# Dropdown Menu

Displays a menu to the user—such as a set of actions or functions—triggered by a button.

index.jsxindex.jsxstyles.cssstyles.css

CSS

    import * as React from "react"; import { DropdownMenu } from "radix-ui"; import { HamburgerMenuIcon, DotFilledIcon, CheckIcon, ChevronRightIcon, } from "@radix-ui/react-icons"; import "./styles.css";  const DropdownMenuDemo = () => { 	const [bookmarksChecked, setBookmarksChecked] = React.useState(true); 	const [urlsChecked, setUrlsChecked] = React.useState(false); 	const [person, setPerson] = React.useState("pedro");  	return (  <DropdownMenu.Root>  <DropdownMenu.Trigger asChild>  <button className="IconButton" aria-label="Customise options">  <HamburgerMenuIcon />  </button>  </DropdownMenu.Trigger>   <DropdownMenu.Portal>  <DropdownMenu.Content className="DropdownMenuContent" sideOffset={5}>  <DropdownMenu.Item className="DropdownMenuItem">  New Tab <div className="RightSlot">⌘+T</div>  </DropdownMenu.Item>  <DropdownMenu.Item className="DropdownMenuItem">  New Window <div className="RightSlot">⌘+N</div>  </DropdownMenu.Item>  <DropdownMenu.Item className="DropdownMenuItem" disabled>  New Private Window <div className="RightSlot">⇧+⌘+N</div>  </DropdownMenu.Item>  <DropdownMenu.Sub>  <DropdownMenu.SubTrigger className="DropdownMenuSubTrigger">  More Tools  <div className="RightSlot">  <ChevronRightIcon />  </div>  </DropdownMenu.SubTrigger>  <DropdownMenu.Portal>  <DropdownMenu.SubContent className="DropdownMenuSubContent" sideOffset={2} alignOffset={-5} >  <DropdownMenu.Item className="DropdownMenuItem">  Save Page As… <div className="RightSlot">⌘+S</div>  </DropdownMenu.Item>  <DropdownMenu.Item className="DropdownMenuItem">  Create Shortcut…  </DropdownMenu.Item>  <DropdownMenu.Item className="DropdownMenuItem">  Name Window…  </DropdownMenu.Item>  <DropdownMenu.Separator className="DropdownMenu.Separator" />  <DropdownMenu.Item className="DropdownMenuItem">  Developer Tools  </DropdownMenu.Item>  </DropdownMenu.SubContent>  </DropdownMenu.Portal>  </DropdownMenu.Sub>   <DropdownMenu.Separator className="DropdownMenuSeparator" />   <DropdownMenu.CheckboxItem className="DropdownMenuCheckboxItem" checked={bookmarksChecked} onCheckedChange={setBookmarksChecked} >  <DropdownMenu.ItemIndicator className="DropdownMenuItemIndicator">  <CheckIcon />  </DropdownMenu.ItemIndicator>  Show Bookmarks <div className="RightSlot">⌘+B</div>  </DropdownMenu.CheckboxItem>  <DropdownMenu.CheckboxItem className="DropdownMenuCheckboxItem" checked={urlsChecked} onCheckedChange={setUrlsChecked} >  <DropdownMenu.ItemIndicator className="DropdownMenuItemIndicator">  <CheckIcon />  </DropdownMenu.ItemIndicator>  Show Full URLs  </DropdownMenu.CheckboxItem>   <DropdownMenu.Separator className="DropdownMenuSeparator" />   <DropdownMenu.Label className="DropdownMenuLabel">  People  </DropdownMenu.Label>  <DropdownMenu.RadioGroup value={person} onValueChange={setPerson}>  <DropdownMenu.RadioItem className="DropdownMenuRadioItem" value="pedro" >  <DropdownMenu.ItemIndicator className="DropdownMenuItemIndicator">  <DotFilledIcon />  </DropdownMenu.ItemIndicator>  Pedro Duarte  </DropdownMenu.RadioItem>  <DropdownMenu.RadioItem className="DropdownMenuRadioItem" value="colm" >  <DropdownMenu.ItemIndicator className="DropdownMenuItemIndicator">  <DotFilledIcon />  </DropdownMenu.ItemIndicator>  Colm Tuite  </DropdownMenu.RadioItem>  </DropdownMenu.RadioGroup>   <DropdownMenu.Arrow className="DropdownMenuArrow" />  </DropdownMenu.Content>  </DropdownMenu.Portal>  </DropdownMenu.Root> 	); };  export default DropdownMenuDemo; 

## Features

Can be controlled or uncontrolled.

Supports submenus with configurable reading direction.

Supports items, labels, groups of items.

Supports checkable items (single or multiple) with optional indeterminate state.

Supports modal and non-modal modes.

Customize side, alignment, offsets, collision handling.

Optionally render a pointing arrow.

Focus is fully managed.

Full keyboard navigation.

Typeahead support.

Dismissing and layering behavior is highly customizable.

## Component Reference Links

Version: 2.1.15

Size: 31.46 kB

View source

Report an issue

ARIA design pattern

## Installation

Install the component from your command line.

    npm install @radix-ui/react-dropdown-menu 

## Anatomy

Import all parts and piece them together.

    import { DropdownMenu } from "radix-ui";  export default () => ( 	<DropdownMenu.Root>  <DropdownMenu.Trigger />   <DropdownMenu.Portal>  <DropdownMenu.Content>  <DropdownMenu.Label />  <DropdownMenu.Item />   <DropdownMenu.Group>  <DropdownMenu.Item />  </DropdownMenu.Group>   <DropdownMenu.CheckboxItem>  <DropdownMenu.ItemIndicator />  </DropdownMenu.CheckboxItem>   <DropdownMenu.RadioGroup>  <DropdownMenu.RadioItem>  <DropdownMenu.ItemIndicator />  </DropdownMenu.RadioItem>  </DropdownMenu.RadioGroup>   <DropdownMenu.Sub>  <DropdownMenu.SubTrigger />  <DropdownMenu.Portal>  <DropdownMenu.SubContent />  </DropdownMenu.Portal>  </DropdownMenu.Sub>   <DropdownMenu.Separator />  <DropdownMenu.Arrow />  </DropdownMenu.Content>  </DropdownMenu.Portal> 	</DropdownMenu.Root> ); 

## API Reference

### Root

Contains all the parts of a dropdown menu.

| Prop | Type | Default |
| --- | --- | --- |
| 
`defaultOpen`

Prop description

 | 

`boolean`



 | No default value |
| 

`open`

Prop description

 | 

`boolean`



 | No default value |
| 

`onOpenChange`

Prop description

 | 

`function`

See full type

 | No default value |
| 

`modal`

Prop description

 | 

`boolean`



 | `true` |
| 

`dir`

Prop description

 | 

`enum`

See full type

 | No default value |

### Trigger

The button that toggles the dropdown menu. By default, the `DropdownMenu.Content` will position itself against the trigger.

| Prop | Type | Default |
| --- | --- | --- |
| 
`asChild`

Prop description

 | 

`boolean`



 | `false` |

| Data attribute | Values |
| --- | --- |
| `[data-state]` | `"open" | "closed"` |
| `[data-disabled]` | 
Present when disabled

 |

### Portal

When used, portals the content part into the `body`.

| Prop | Type | Default |
| --- | --- | --- |
| 
`forceMount`

Prop description

 | 

`boolean`



 | No default value |
| 

`container`

Prop description

 | 

`HTMLElement`



 | `document.body` |

### Content

The component that pops out when the dropdown menu is open.

| Prop | Type | Default |
| --- | --- | --- |
| 
`asChild`

Prop description

 | 

`boolean`



 | `false` |
| 

`loop`

Prop description

 | 

`boolean`



 | `false` |
| 

`onCloseAutoFocus`

Prop description

 | 

`function`

See full type

 | No default value |
| 

`onEscapeKeyDown`

Prop description

 | 

`function`

See full type

 | No default value |
| 

`onPointerDownOutside`

Prop description

 | 

`function`

See full type

 | No default value |
| 

`onFocusOutside`

Prop description

 | 

`function`

See full type

 | No default value |
| 

`onInteractOutside`

Prop description

 | 

`function`

See full type

 | No default value |
| 

`forceMount`

Prop description

 | 

`boolean`



 | No default value |
| 

`side`

Prop description

 | 

`enum`

See full type

 | `"bottom"` |
| 

`sideOffset`

Prop description

 | 

`number`



 | `0` |
| 

`align`

Prop description

 | 

`enum`

See full type

 | `"center"` |
| 

`alignOffset`

Prop description

 | 

`number`



 | `0` |
| 

`avoidCollisions`

Prop description

 | 

`boolean`



 | `true` |
| 

`collisionBoundary`

Prop description

 | 

`Boundary`

See full type

 | `[]` |
| 

`collisionPadding`

Prop description

 | 

`number | Padding`

See full type

 | `0` |
| 

`arrowPadding`

Prop description

 | 

`number`



 | `0` |
| 

`sticky`

Prop description

 | 

`enum`

See full type

 | `"partial"` |
| 

`hideWhenDetached`

Prop description

 | 

`boolean`



 | `false` |

| Data attribute | Values |
| --- | --- |
| `[data-state]` | `"open" | "closed"` |
| `[data-side]` | `"left" | "right" | "bottom" | "top"` |
| `[data-align]` | `"start" | "end" | "center"` |
| `[data-orientation]` | `"vertical" | "horizontal"` |

| CSS Variable | Description |
| --- | --- |
| `--radix-dropdown-menu-content-transform-origin` | The `transform-origin` computed from the content and arrow positions/offsets |
| `--radix-dropdown-menu-content-available-width` | The remaining width between the trigger and the boundary edge |
| `--radix-dropdown-menu-content-available-height` | The remaining height between the trigger and the boundary edge |
| `--radix-dropdown-menu-trigger-width` | The width of the trigger |
| `--radix-dropdown-menu-trigger-height` | The height of the trigger |

### Arrow

An optional arrow element to render alongside the dropdown menu. This can be used to help visually link the trigger with the `DropdownMenu.Content`. Must be rendered inside `DropdownMenu.Content`.

| Prop | Type | Default |
| --- | --- | --- |
| 
`asChild`

Prop description

 | 

`boolean`



 | `false` |
| 

`width`

Prop description

 | 

`number`



 | `10` |
| 

`height`

Prop description

 | 

`number`



 | `5` |

### Item

The component that contains the dropdown menu items.

| Prop | Type | Default |
| --- | --- | --- |
| 
`asChild`

Prop description

 | 

`boolean`



 | `false` |
| 

`disabled`

Prop description

 | 

`boolean`



 | No default value |
| 

`onSelect`

Prop description

 | 

`function`

See full type

 | No default value |
| 

`textValue`

Prop description

 | 

`string`



 | No default value |

| Data attribute | Values |
| --- | --- |
| `[data-orientation]` | `"vertical" | "horizontal"` |
| `[data-highlighted]` | 
Present when highlighted

 |
| `[data-disabled]` | 

Present when disabled

 |

### Group

Used to group multiple `DropdownMenu.Item`s.

| Prop | Type | Default |
| --- | --- | --- |
| 
`asChild`

Prop description

 | 

`boolean`



 | `false` |

### Label

Used to render a label. It won't be focusable using arrow keys.

| Prop | Type | Default |
| --- | --- | --- |
| 
`asChild`

Prop description

 | 

`boolean`



 | `false` |

### CheckboxItem

An item that can be controlled and rendered like a checkbox.

| Prop | Type | Default |
| --- | --- | --- |
| 
`asChild`

Prop description

 | 

`boolean`



 | `false` |
| 

`checked`

Prop description

 | 

`boolean | 'indeterminate'`



 | No default value |
| 

`onCheckedChange`

Prop description

 | 

`function`

See full type

 | No default value |
| 

`disabled`

Prop description

 | 

`boolean`



 | No default value |
| 

`onSelect`

Prop description

 | 

`function`

See full type

 | No default value |
| 

`textValue`

Prop description

 | 

`string`



 | No default value |

| Data attribute | Values |
| --- | --- |
| `[data-state]` | `"checked" | "unchecked" | "indeterminate"` |
| `[data-highlighted]` | 
Present when highlighted

 |
| `[data-disabled]` | 

Present when disabled

 |

### RadioGroup

Used to group multiple `DropdownMenu.RadioItem`s.

| Prop | Type | Default |
| --- | --- | --- |
| 
`asChild`

Prop description

 | 

`boolean`



 | `false` |
| 

`value`

Prop description

 | 

`string`



 | No default value |
| 

`onValueChange`

Prop description

 | 

`function`

See full type

 | No default value |

### RadioItem

An item that can be controlled and rendered like a radio.

| Prop | Type | Default |
| --- | --- | --- |
| 
`asChild`

Prop description

 | 

`boolean`



 | `false` |
| 

`value*`

Prop description

 | 

`string`



 | No default value |
| 

`disabled`

Prop description

 | 

`boolean`



 | No default value |
| 

`onSelect`

Prop description

 | 

`function`

See full type

 | No default value |
| 

`textValue`

Prop description

 | 

`string`



 | No default value |

| Data attribute | Values |
| --- | --- |
| `[data-state]` | `"checked" | "unchecked" | "indeterminate"` |
| `[data-highlighted]` | 
Present when highlighted

 |
| `[data-disabled]` | 

Present when disabled

 |

### ItemIndicator

Renders when the parent `DropdownMenu.CheckboxItem` or `DropdownMenu.RadioItem` is checked. You can style this element directly, or you can use it as a wrapper to put an icon into, or both.

| Prop | Type | Default |
| --- | --- | --- |
| 
`asChild`

Prop description

 | 

`boolean`



 | `false` |
| 

`forceMount`

Prop description

 | 

`boolean`



 | No default value |

| Data attribute | Values |
| --- | --- |
| `[data-state]` | `"checked" | "unchecked" | "indeterminate"` |

### Separator

Used to visually separate items in the dropdown menu.

| Prop | Type | Default |
| --- | --- | --- |
| 
`asChild`

Prop description

 | 

`boolean`



 | `false` |

### Sub

Contains all the parts of a submenu.

| Prop | Type | Default |
| --- | --- | --- |
| 
`defaultOpen`

Prop description

 | 

`boolean`



 | No default value |
| 

`open`

Prop description

 | 

`boolean`



 | No default value |
| 

`onOpenChange`

Prop description

 | 

`function`

See full type

 | No default value |

### SubTrigger

An item that opens a submenu. Must be rendered inside `DropdownMenu.Sub`.

| Prop | Type | Default |
| --- | --- | --- |
| 
`asChild`

Prop description

 | 

`boolean`



 | `false` |
| 

`disabled`

Prop description

 | 

`boolean`



 | No default value |
| 

`textValue`

Prop description

 | 

`string`



 | No default value |

| Data attribute | Values |
| --- | --- |
| `[data-state]` | `"open" | "closed"` |
| `[data-highlighted]` | 
Present when highlighted

 |
| `[data-disabled]` | 

Present when disabled

 |

| CSS Variable | Description |
| --- | --- |
| `--radix-dropdown-menu-content-transform-origin` | The `transform-origin` computed from the content and arrow positions/offsets |
| `--radix-dropdown-menu-content-available-width` | The remaining width between the trigger and the boundary edge |
| `--radix-dropdown-menu-content-available-height` | The remaining height between the trigger and the boundary edge |
| `--radix-dropdown-menu-trigger-width` | The width of the trigger |
| `--radix-dropdown-menu-trigger-height` | The height of the trigger |

### SubContent

The component that pops out when a submenu is open. Must be rendered inside `DropdownMenu.Sub`.

| Prop | Type | Default |
| --- | --- | --- |
| 
`asChild`

Prop description

 | 

`boolean`



 | `false` |
| 

`loop`

Prop description

 | 

`boolean`



 | `false` |
| 

`onEscapeKeyDown`

Prop description

 | 

`function`

See full type

 | No default value |
| 

`onPointerDownOutside`

Prop description

 | 

`function`

See full type

 | No default value |
| 

`onFocusOutside`

Prop description

 | 

`function`

See full type

 | No default value |
| 

`onInteractOutside`

Prop description

 | 

`function`

See full type

 | No default value |
| 

`forceMount`

Prop description

 | 

`boolean`



 | No default value |
| 

`sideOffset`

Prop description

 | 

`number`



 | `0` |
| 

`alignOffset`

Prop description

 | 

`number`



 | `0` |
| 

`avoidCollisions`

Prop description

 | 

`boolean`



 | `true` |
| 

`collisionBoundary`

Prop description

 | 

`Boundary`

See full type

 | `[]` |
| 

`collisionPadding`

Prop description

 | 

`number | Padding`

See full type

 | `0` |
| 

`arrowPadding`

Prop description

 | 

`number`



 | `0` |
| 

`sticky`

Prop description

 | 

`enum`

See full type

 | `"partial"` |
| 

`hideWhenDetached`

Prop description

 | 

`boolean`



 | `false` |

| Data attribute | Values |
| --- | --- |
| `[data-state]` | `"open" | "closed"` |
| `[data-side]` | `"left" | "right" | "bottom" | "top"` |
| `[data-align]` | `"start" | "end" | "center"` |
| `[data-orientation]` | `"vertical" | "horizontal"` |

## Examples

### With submenus

You can create submenus by using `DropdownMenu.Sub` in combination with its parts.

    <DropdownMenu.Root> 	<DropdownMenu.Trigger>…</DropdownMenu.Trigger> 	<DropdownMenu.Portal>  <DropdownMenu.Content>  <DropdownMenu.Item>…</DropdownMenu.Item>  <DropdownMenu.Item>…</DropdownMenu.Item>  <DropdownMenu.Separator />  <DropdownMenu.Sub>  <DropdownMenu.SubTrigger>Sub menu →</DropdownMenu.SubTrigger>  <DropdownMenu.Portal>  <DropdownMenu.SubContent>  <DropdownMenu.Item>Sub menu item</DropdownMenu.Item>  <DropdownMenu.Item>Sub menu item</DropdownMenu.Item>  <DropdownMenu.Arrow />  </DropdownMenu.SubContent>  </DropdownMenu.Portal>  </DropdownMenu.Sub>  <DropdownMenu.Separator />  <DropdownMenu.Item>…</DropdownMenu.Item>  </DropdownMenu.Content> 	</DropdownMenu.Portal> </DropdownMenu.Root> 

### With disabled items

You can add special styles to disabled items via the `data-disabled` attribute.

    // index.jsx import { DropdownMenu } from "radix-ui"; import "./styles.css";  export default () => ( 	<DropdownMenu.Root>  <DropdownMenu.Trigger>…</DropdownMenu.Trigger>  <DropdownMenu.Portal>  <DropdownMenu.Content>  <DropdownMenu.Item className="DropdownMenuItem" disabled>  …  </DropdownMenu.Item>  <DropdownMenu.Item className="DropdownMenuItem">…</DropdownMenu.Item>  </DropdownMenu.Content>  </DropdownMenu.Portal> 	</DropdownMenu.Root> ); 

    /* styles.css */ .DropdownMenuItem[data-disabled] { 	color: gainsboro; } 

### With separators

Use the `Separator` part to add a separator between items.

    <DropdownMenu.Root> 	<DropdownMenu.Trigger>…</DropdownMenu.Trigger> 	<DropdownMenu.Portal>  <DropdownMenu.Content>  <DropdownMenu.Item>…</DropdownMenu.Item>  <DropdownMenu.Separator />  <DropdownMenu.Item>…</DropdownMenu.Item>  <DropdownMenu.Separator />  <DropdownMenu.Item>…</DropdownMenu.Item>  </DropdownMenu.Content> 	</DropdownMenu.Portal> </DropdownMenu.Root> 

### With labels

Use the `Label` part to help label a section.

    <DropdownMenu.Root> 	<DropdownMenu.Trigger>…</DropdownMenu.Trigger> 	<DropdownMenu.Portal>  <DropdownMenu.Content>  <DropdownMenu.Label>Label</DropdownMenu.Label>  <DropdownMenu.Item>…</DropdownMenu.Item>  <DropdownMenu.Item>…</DropdownMenu.Item>  <DropdownMenu.Item>…</DropdownMenu.Item>  </DropdownMenu.Content> 	</DropdownMenu.Portal> </DropdownMenu.Root> 

### With checkbox items

Use the `CheckboxItem` part to add an item that can be checked.

    import * as React from "react"; import { CheckIcon } from "@radix-ui/react-icons"; import { DropdownMenu } from "radix-ui";  export default () => { 	const [checked, setChecked] = React.useState(true);  	return (  <DropdownMenu.Root>  <DropdownMenu.Trigger>…</DropdownMenu.Trigger>  <DropdownMenu.Portal>  <DropdownMenu.Content>  <DropdownMenu.Item>…</DropdownMenu.Item>  <DropdownMenu.Item>…</DropdownMenu.Item>  <DropdownMenu.Separator />  <DropdownMenu.CheckboxItem checked={checked} onCheckedChange={setChecked} >  <DropdownMenu.ItemIndicator>  <CheckIcon />  </DropdownMenu.ItemIndicator>  Checkbox item  </DropdownMenu.CheckboxItem>  </DropdownMenu.Content>  </DropdownMenu.Portal>  </DropdownMenu.Root> 	); }; 

### With radio items

Use the `RadioGroup` and `RadioItem` parts to add an item that can be checked amongst others.

    import * as React from "react"; import { CheckIcon } from "@radix-ui/react-icons"; import { DropdownMenu } from "radix-ui";  export default () => { 	const [color, setColor] = React.useState("blue");  	return (  <DropdownMenu.Root>  <DropdownMenu.Trigger>…</DropdownMenu.Trigger>  <DropdownMenu.Portal>  <DropdownMenu.Content>  <DropdownMenu.RadioGroup value={color} onValueChange={setColor}>  <DropdownMenu.RadioItem value="red">  <DropdownMenu.ItemIndicator>  <CheckIcon />  </DropdownMenu.ItemIndicator>  Red  </DropdownMenu.RadioItem>  <DropdownMenu.RadioItem value="blue">  <DropdownMenu.ItemIndicator>  <CheckIcon />  </DropdownMenu.ItemIndicator>  Blue  </DropdownMenu.RadioItem>  <DropdownMenu.RadioItem value="green">  <DropdownMenu.ItemIndicator>  <CheckIcon />  </DropdownMenu.ItemIndicator>  Green  </DropdownMenu.RadioItem>  </DropdownMenu.RadioGroup>  </DropdownMenu.Content>  </DropdownMenu.Portal>  </DropdownMenu.Root> 	); }; 

### With complex items

You can add extra decorative elements in the `Item` parts, such as images.

    import { DropdownMenu } from "radix-ui";  export default () => ( 	<DropdownMenu.Root>  <DropdownMenu.Trigger>…</DropdownMenu.Trigger>  <DropdownMenu.Portal>  <DropdownMenu.Content>  <DropdownMenu.Item>  <img src="…" />  Adolfo Hess  </DropdownMenu.Item>  <DropdownMenu.Item>  <img src="…" />  Miyah Myles  </DropdownMenu.Item>  </DropdownMenu.Content>  </DropdownMenu.Portal> 	</DropdownMenu.Root> ); 

### Constrain the content/sub-content size

You may want to constrain the width of the content (or sub-content) so that it matches the trigger (or sub-trigger) width. You may also want to constrain its height to not exceed the viewport.

We expose several CSS custom properties such as `--radix-dropdown-menu-trigger-width` and `--radix-dropdown-menu-content-available-height` to support this. Use them to constrain the content dimensions.

    // index.jsx import { DropdownMenu } from "radix-ui"; import "./styles.css";  export default () => ( 	<DropdownMenu.Root>  <DropdownMenu.Trigger>…</DropdownMenu.Trigger>  <DropdownMenu.Portal>  <DropdownMenu.Content className="DropdownMenuContent" sideOffset={5}>  …  </DropdownMenu.Content>  </DropdownMenu.Portal> 	</DropdownMenu.Root> ); 

    /* styles.css */ .DropdownMenuContent { 	width: var(--radix-dropdown-menu-trigger-width); 	max-height: var(--radix-dropdown-menu-content-available-height); } 

### Origin-aware animations

We expose a CSS custom property `--radix-dropdown-menu-content-transform-origin`. Use it to animate the content from its computed origin based on `side`, `sideOffset`, `align`, `alignOffset` and any collisions.

    // index.jsx import { DropdownMenu } from "radix-ui"; import "./styles.css";  export default () => ( 	<DropdownMenu.Root>  <DropdownMenu.Trigger>…</DropdownMenu.Trigger>  <DropdownMenu.Portal>  <DropdownMenu.Content className="DropdownMenuContent">  …  </DropdownMenu.Content>  </DropdownMenu.Portal> 	</DropdownMenu.Root> ); 

    /* styles.css */ .DropdownMenuContent { 	transform-origin: var(--radix-dropdown-menu-content-transform-origin); 	animation: scaleIn 0.5s ease-out; }  @keyframes scaleIn { 	from {  opacity: 0;  transform: scale(0); 	} 	to {  opacity: 1;  transform: scale(1); 	} } 

### Collision-aware animations

We expose `data-side` and `data-align` attributes. Their values will change at runtime to reflect collisions. Use them to create collision and direction-aware animations.

    // index.jsx import { DropdownMenu } from "radix-ui"; import "./styles.css";  export default () => ( 	<DropdownMenu.Root>  <DropdownMenu.Trigger>…</DropdownMenu.Trigger>  <DropdownMenu.Portal>  <DropdownMenu.Content className="DropdownMenuContent">  …  </DropdownMenu.Content>  </DropdownMenu.Portal> 	</DropdownMenu.Root> ); 

    /* styles.css */ .DropdownMenuContent { 	animation-duration: 0.6s; 	animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1); } .DropdownMenuContent[data-side="top"] { 	animation-name: slideUp; } .DropdownMenuContent[data-side="bottom"] { 	animation-name: slideDown; }  @keyframes slideUp { 	from {  opacity: 0;  transform: translateY(10px); 	} 	to {  opacity: 1;  transform: translateY(0); 	} }  @keyframes slideDown { 	from {  opacity: 0;  transform: translateY(-10px); 	} 	to {  opacity: 1;  transform: translateY(0); 	} } 

## Accessibility

Adheres to the Menu Button WAI-ARIA design pattern and uses roving tabindex to manage focus movement among menu items.

### Keyboard Interactions

| Key | Description |
| --- | --- |
| 
Space

 | When focus is on `DropdownMenu.Trigger`, opens the dropdown menu and focuses the first item.  
When focus is on an item, activates the focused item. |
| 

Enter

 | When focus is on `DropdownMenu.Trigger`, opens the dropdown menu and focuses the first item.  
When focus is on an item, activates the focused item. |
| 

ArrowDown

 | When focus is on `DropdownMenu.Trigger`, opens the dropdown menu.  
When focus is on an item, moves focus to the next item. |
| 

ArrowUp

 | When focus is on an item, moves focus to the previous item. |
| 

ArrowRightArrowLeft

 | When focus is on `DropdownMenu.SubTrigger`, opens or closes the submenu depending on reading direction. |
| 

Esc

 | Closes the dropdown menu and moves focus to `DropdownMenu.Trigger`. |

## Custom APIs

Create your own API by abstracting the primitive parts into your own component.

### Abstract the arrow and item indicators

This example abstracts the `DropdownMenu.Arrow` and `DropdownMenu.ItemIndicator` parts. It also wraps implementation details for `CheckboxItem` and `RadioItem`.

#### Usage

    import { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuLabel, DropdownMenuItem, DropdownMenuGroup, DropdownMenuCheckboxItem, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, } from "./your-dropdown-menu";  export default () => ( 	<DropdownMenu>  <DropdownMenuTrigger>DropdownMenu trigger</DropdownMenuTrigger>  <DropdownMenuContent>  <DropdownMenuItem>Item</DropdownMenuItem>  <DropdownMenuLabel>Label</DropdownMenuLabel>  <DropdownMenuGroup>Group</DropdownMenuGroup>  <DropdownMenuCheckboxItem>CheckboxItem</DropdownMenuCheckboxItem>  <DropdownMenuSeparator>Separator</DropdownMenuSeparator>  <DropdownMenuRadioGroup>  <DropdownMenuRadioItem>RadioItem</DropdownMenuRadioItem>  <DropdownMenuRadioItem>RadioItem</DropdownMenuRadioItem>  </DropdownMenuRadioGroup>  </DropdownMenuContent> 	</DropdownMenu> ); 

#### Implementation

    // your-dropdown-menu.jsx import * as React from "react"; import { DropdownMenu as DropdownMenuPrimitive } from "radix-ui"; import { CheckIcon, DividerHorizontalIcon } from "@radix-ui/react-icons";  export const DropdownMenu = DropdownMenuPrimitive.Root; export const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;  export const DropdownMenuContent = React.forwardRef( 	({ children, ...props }, forwardedRef) => {  return (  <DropdownMenuPrimitive.Portal>  <DropdownMenuPrimitive.Content {...props} ref={forwardedRef}>  {children}  <DropdownMenuPrimitive.Arrow />  </DropdownMenuPrimitive.Content>  </DropdownMenuPrimitive.Portal>  ); 	}, );  export const DropdownMenuLabel = DropdownMenuPrimitive.Label; export const DropdownMenuItem = DropdownMenuPrimitive.Item; export const DropdownMenuGroup = DropdownMenuPrimitive.Group;  export const DropdownMenuCheckboxItem = React.forwardRef( 	({ children, ...props }, forwardedRef) => {  return (  <DropdownMenuPrimitive.CheckboxItem {...props} ref={forwardedRef}>  {children}  <DropdownMenuPrimitive.ItemIndicator>  {props.checked === "indeterminate" && <DividerHorizontalIcon />}  {props.checked === true && <CheckIcon />}  </DropdownMenuPrimitive.ItemIndicator>  </DropdownMenuPrimitive.CheckboxItem>  ); 	}, );  export const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup;  export const DropdownMenuRadioItem = React.forwardRef( 	({ children, ...props }, forwardedRef) => {  return (  <DropdownMenuPrimitive.RadioItem {...props} ref={forwardedRef}>  {children}  <DropdownMenuPrimitive.ItemIndicator>  <CheckIcon />  </DropdownMenuPrimitive.ItemIndicator>  </DropdownMenuPrimitive.RadioItem>  ); 	}, );  export const DropdownMenuSeparator = DropdownMenuPrimitive.Separator; 

#### Quick nav

*   Installation
*   Anatomy
*   API Reference
*   Root
*   Trigger
*   Portal
*   Content
*   Arrow
*   Item
*   Group
*   Label
*   CheckboxItem
*   RadioGroup
*   RadioItem
*   ItemIndicator
*   Separator
*   Sub
*   SubTrigger
*   SubContent
*   Examples
*   With submenus
*   With disabled items
*   With separators
*   With labels
*   With checkbox items
*   With radio items
*   With complex items
*   Constrain the content/sub-content size
*   Origin-aware animations
*   Collision-aware animations
*   Accessibility
*   Keyboard Interactions
*   Custom APIs
*   Abstract the arrow and item indicators

PreviousDialog

NextForm

Edit this page on GitHub.

---

## Page: https://www.radix-ui.com/primitives/docs/components/form

Components

# Form

Collect information from your users using validation rules.

Email

Question

Post question

index.jsxindex.jsxstyles.cssstyles.css

CSS

    import * as React from "react"; import { Form } from "radix-ui"; import "./styles.css";  const FormDemo = () => ( 	<Form.Root className="FormRoot">  <Form.Field className="FormField" name="email">  <div style={{ display: "flex", alignItems: "baseline", justifyContent: "space-between", }} >  <Form.Label className="FormLabel">Email</Form.Label>  <Form.Message className="FormMessage" match="valueMissing">  Please enter your email  </Form.Message>  <Form.Message className="FormMessage" match="typeMismatch">  Please provide a valid email  </Form.Message>  </div>  <Form.Control asChild>  <input className="Input" type="email" required />  </Form.Control>  </Form.Field>  <Form.Field className="FormField" name="question">  <div style={{ display: "flex", alignItems: "baseline", justifyContent: "space-between", }} >  <Form.Label className="FormLabel">Question</Form.Label>  <Form.Message className="FormMessage" match="valueMissing">  Please enter a question  </Form.Message>  </div>  <Form.Control asChild>  <textarea className="Textarea" required />  </Form.Control>  </Form.Field>  <Form.Submit asChild>  <button className="Button" style={{ marginTop: 10 }}>  Post question  </button>  </Form.Submit> 	</Form.Root> );  export default FormDemo; 

## Features

Built on top of the native browser constraint validation API.

Supports built-in validation.

Supports custom validation.

Full customization of validation messages.

Accessible validation messages.

Supports client-side and server-side scenarios.

Focus is fully managed.

## Component Reference Links

Version: 0.1.7

Size: 4.97 kB

View source

Report an issue

## Installation

Install the component from your command line.

    npm install @radix-ui/react-form 

## Anatomy

Import all parts and piece them together.

    import { Form } from "radix-ui";  export default () => ( 	<Form.Root>  <Form.Field>  <Form.Label />  <Form.Control />  <Form.Message />  <Form.ValidityState />  </Form.Field>   <Form.Message />  <Form.ValidityState />   <Form.Submit /> 	</Form.Root> ); 

## API Reference

### Root

Contains all the parts of a form.

| Prop | Type | Default |
| --- | --- | --- |
| 
`asChild`

Prop description

 | 

`boolean`



 | `false` |
| 

`onClearServerErrors`

Prop description

 | 

`function`

See full type

 | No default value |

### Field

The wrapper for a field. It handles id/name and label accessibility automatically.

| Prop | Type | Default |
| --- | --- | --- |
| 
`asChild`

Prop description

 | 

`boolean`



 | `false` |
| 

`name*`

Prop description

 | 

`string`



 | No default value |
| 

`serverInvalid`

Prop description

 | 

`boolean`



 | No default value |

| Data attribute | Values |
| --- | --- |
| `[data-invalid]` | 
Present when the field is invalid

 |
| `[data-valid]` | 

Present when the field is valid

 |

### Label

A label element which is automatically wired when nested inside a `Field` part.

| Prop | Type | Default |
| --- | --- | --- |
| 
`asChild`

Prop description

 | 

`boolean`



 | `false` |

| Data attribute | Values |
| --- | --- |
| `[data-invalid]` | 
Present when the field is invalid

 |
| `[data-valid]` | 

Present when the field is valid

 |

### Control

A control element (by default an `input`) which is automatically wired when nested inside a `Field` part.

| Prop | Type | Default |
| --- | --- | --- |
| 
`asChild`

Prop description

 | 

`boolean`



 | `false` |

| Data attribute | Values |
| --- | --- |
| `[data-invalid]` | 
Present when the field is invalid

 |
| `[data-valid]` | 

Present when the field is valid

 |

### Message

A validation message which is automatically wired (functionality and accessibility) to a given control when nested inside a `Field` part. It can be used for built-in and custom client-side validation, as well as server-side validation. When used outside a `Field` you must pass a `name` prop matching a field.

`Form.Message` accepts a `match` prop which is used to determine when the message should show. It matches the native HTML validity state (`ValidityState` on MDN) which validates against attributes such as `required`, `min`, `max`. The message will show if the given `match` is `true` on the control’s validity state.

You can also pass a function to `match` to provide custom validation rules.

| Prop | Type | Default |
| --- | --- | --- |
| 
`asChild`

Prop description

 | 

`boolean`



 | `false` |
| 

`match`

Prop description

 | 

`Matcher`

See full type

 | No default value |
| 

`forceMatch`

Prop description

 | 

`boolean`



 | `false` |
| 

`name`

Prop description

 | 

`string`



 | No default value |

### ValidityState

Use this render-prop component to access a given field’s validity state in render (see `ValidityState` on MDN). A field's validity is available automatically when nested inside a `Field` part, otherwise you must pass a `name` prop to associate it.

| Prop | Type | Default |
| --- | --- | --- |
| 
`children`

Prop description

 | 

`function`

See full type

 | No default value |
| 

`name`

Prop description

 | 

`string`



 | No default value |

### Submit

The submit button.

| Prop | Type | Default |
| --- | --- | --- |
| 
`asChild`

Prop description

 | 

`boolean`



 | `false` |

## Examples

### Composing with your own components

Using `asChild` you can compose the `Form` primitive parts with your own components.

    <Form.Field name="name"> 	<Form.Label>Full name</Form.Label> 	<Form.Control asChild>  <TextField.Input variant="primary" /> 	</Form.Control> </Form.Field> 

It can also be used to compose other types of controls, such as a `select`:

    <Form.Field name="country"> 	<Form.Label>Country</Form.Label> 	<Form.Control asChild>  <select>  <option value="uk">United Kingdom</option>…  </select> 	</Form.Control> </Form.Field> 

> Note: At the moment, it is not possible to compose `Form` with Radix's other form primitives such as `Checkbox`, `Select`, etc. We are working on a solution for this.

### Providing your own validation messages

When no `children` are provided, `Form.Message` will render a default error message for the given `match`.

    // will yield "This value is missing" <Form.Message match="valueMissing" /> 

You can provide a more meaningful message by passing your own `children`. This is also useful for internationalization.

    // will yield "Please provide a name" <Form.Message match="valueMissing">Please provide a name</Form.Message> 

### Custom validation

On top of all the built-in client-side validation matches described above you can also provide your own custom validation whilst still making use of the platform's validation abilities. It uses the `customError` type present in the constraint validition API.

You can pass your own validation function into the `match` prop on `Form.Message`. Here's an example:

    <Form.Field name="name"> 	<Form.Label>Full name</Form.Label> 	<Form.Control /> 	<Form.Message match={(value, formData) => value !== "John"}>  Only John is allowed. 	</Form.Message> </Form.Field> 

> `match` will be called with the current value of the control as first argument and the entire `FormData` as second argument. `match` can also be an `async` function (or return a promise) to perform async validation.

### Styling based on validity

We add `data-valid` and `data-invalid` attributes to the relevant parts. Use it to style your components accordingly. Here is an example styling the `Label` part.

    //index.jsx import * as React from "react"; import { Form } from "radix-ui";  export default () => ( 	<Form.Root>  <Form.Field name="email">  <Form.Label className="FormLabel">Email</Form.Label>  <Form.Control type="email" />  </Form.Field> 	</Form.Root> ); 

    /* styles.css */ .FormLabel[data-invalid] { 	color: red; } .FormLabel[data-valid] { 	color: green; } 

### Accessing the validity state for more control

You may need to access the raw validity state of a field in order to display your own icons, or interface with a component library via it's defined props. You can do this by using the `Form.ValidityState` part:

    <Form.Field name="name"> 	<Form.Label>Full name</Form.Label> 	<Form.ValidityState>  {(validity) => (  <Form.Control asChild>  <TextField.Input variant="primary" state={getTextFieldInputState(validity)} />  </Form.Control>  )} 	</Form.ValidityState> </Form.Field> 

### Server-side validation

The component also supports server-side validation using the same `Form.Message` component. You can re-use the same messages you defined for client-side errors by passing a `forceMatch` prop which will force the message to show regardless of the client-side matching logic.

If the message doesn't exist on the client-side, you can render a `Form.Message` without a `match` too. The field is marked as invalid by passing a `serverInvalid` boolean prop to the `Form.Field` part.

Here's an example with server-side error handling:

    import * as React from "react"; import { Form } from "radix-ui";  function Page() { 	const [serverErrors, setServerErrors] = React.useState({  email: false,  password: false, 	});  	return (  <Form.Root // `onSubmit` only triggered if it passes client-side validation onSubmit={(event) => { const data = Object.fromEntries(new FormData(event.currentTarget)); // Submit form data and catch errors in the response submitForm(data) .then(() => {}) /**  * Map errors from your server response into a structure you'd like to work with.  * In this case resulting in this object: `{ email: false, password: true }`  */ .catch((errors) => setServerErrors(mapServerErrors(errors))); // prevent default form submission event.preventDefault(); }} onClearServerErrors={() => setServerErrors({ email: false, password: false }) } >  <Form.Field name="email" serverInvalid={serverErrors.email}>  <Form.Label>Email address</Form.Label>  <Form.Control type="email" required />  <Form.Message match="valueMissing">  Please enter your email.  </Form.Message>  <Form.Message match="typeMismatch" forceMatch={serverErrors.email}>  Please provide a valid email.  </Form.Message>  </Form.Field>   <Form.Field name="password" serverInvalid={serverErrors.password}>  <Form.Label>Password</Form.Label>  <Form.Control type="password" required />  <Form.Message match="valueMissing">  Please enter a password.  </Form.Message>  {serverErrors.password && (  <Form.Message>  Please provide a valid password. It should contain at least 1 number  and 1 special character.  </Form.Message>  )}  </Form.Field>   <Form.Submit>Submit</Form.Submit>  </Form.Root> 	); } 

You should clear the server errors using the `onClearServerErrors` callback prop on the `Form.Root` part. It will clear the server errors before the form is re-submitted, and when the form is reset.

In addition, this provides control over when to reset single server errors. For example you could reset the email server error as soon as the user edits it:

    <Form.Field name="email" serverInvalid={serverErrors.email}> 	<Form.Label>Email address</Form.Label> 	<Form.Control type="email" onChange={() => setServerErrors((prev) => ({ ...prev, email: false }))} /> 	<Form.Message match="valueMissing">Please enter your email.</Form.Message> 	<Form.Message match="typeMismatch" forceMatch={serverErrors.email}>  Please provide a valid email. 	</Form.Message> </Form.Field> 

## Accessibility

The component follows the "inline errors" pattern for validation:

*   Label and control are associated using the `name` provided on `Form.Field`
*   When one or more client-side error messages display, they are automatically associated with their matching control and announced accordingly
*   Focus is moved to the first invalid control

#### Quick nav

*   Installation
*   Anatomy
*   API Reference
*   Root
*   Field
*   Label
*   Control
*   Message
*   ValidityState
*   Submit
*   Examples
*   Composing with your own components
*   Providing your own validation messages
*   Custom validation
*   Styling based on validity
*   Accessing the validity state for more control
*   Server-side validation
*   Accessibility

PreviousDropdown Menu

NextHover Card

Edit this page on GitHub.

---

## Page: https://www.radix-ui.com/primitives/docs/components/hover-card

Components

# Hover Card

For sighted users to preview content available behind a link.

index.jsxindex.jsxstyles.cssstyles.css

CSS

    import * as React from "react"; import { HoverCard } from "radix-ui"; import "./styles.css";  const HoverCardDemo = () => ( 	<HoverCard.Root>  <HoverCard.Trigger asChild>  <a className="ImageTrigger" href="https://twitter.com/radix_ui" target="_blank" rel="noreferrer noopener" >  <img className="Image normal" src="https://pbs.twimg.com/profile_images/1337055608613253126/r_eiMp2H_400x400.png" alt="Radix UI" />  </a>  </HoverCard.Trigger>  <HoverCard.Portal>  <HoverCard.Content className="HoverCardContent" sideOffset={5}>  <div style={{ display: "flex", flexDirection: "column", gap: 7 }}>  <img className="Image large" src="https://pbs.twimg.com/profile_images/1337055608613253126/r_eiMp2H_400x400.png" alt="Radix UI" />  <div style={{ display: "flex", flexDirection: "column", gap: 15 }}>  <div>  <div className="Text bold">Radix</div>  <div className="Text faded">@radix_ui</div>  </div>  <div className="Text">  Components, icons, colors, and templates for building  high-quality, accessible UI. Free and open-source.  </div>  <div style={{ display: "flex", gap: 15 }}>  <div style={{ display: "flex", gap: 5 }}>  <div className="Text bold">0</div>{" "}  <div className="Text faded">Following</div>  </div>  <div style={{ display: "flex", gap: 5 }}>  <div className="Text bold">2,900</div>{" "}  <div className="Text faded">Followers</div>  </div>  </div>  </div>  </div>   <HoverCard.Arrow className="HoverCardArrow" />  </HoverCard.Content>  </HoverCard.Portal> 	</HoverCard.Root> );  export default HoverCardDemo; 

## Features

Can be controlled or uncontrolled.

Customize side, alignment, offsets, collision handling.

Optionally render a pointing arrow.

Supports custom open and close delays.

Ignored by screen readers.

## Component Reference Links

Version: 1.1.14

Size: 17.53 kB

View source

Report an issue

## Installation

Install the component from your command line.

    npm install @radix-ui/react-hover-card 

## Anatomy

Import all parts and piece them together.

    import { HoverCard } from "radix-ui";  export default () => ( 	<HoverCard.Root>  <HoverCard.Trigger />  <HoverCard.Portal>  <HoverCard.Content>  <HoverCard.Arrow />  </HoverCard.Content>  </HoverCard.Portal> 	</HoverCard.Root> ); 

## API Reference

### Root

Contains all the parts of a hover card.

| Prop | Type | Default |
| --- | --- | --- |
| 
`defaultOpen`

Prop description

 | 

`boolean`



 | No default value |
| 

`open`

Prop description

 | 

`boolean`



 | No default value |
| 

`onOpenChange`

Prop description

 | 

`function`

See full type

 | No default value |
| 

`openDelay`

Prop description

 | 

`number`



 | `700` |
| 

`closeDelay`

Prop description

 | 

`number`



 | `300` |

### Trigger

The link that opens the hover card when hovered.

| Prop | Type | Default |
| --- | --- | --- |
| 
`asChild`

Prop description

 | 

`boolean`



 | `false` |

| Data attribute | Values |
| --- | --- |
| `[data-state]` | `"open" | "closed"` |

### Portal

When used, portals the content part into the `body`.

| Prop | Type | Default |
| --- | --- | --- |
| 
`forceMount`

Prop description

 | 

`boolean`



 | No default value |
| 

`container`

Prop description

 | 

`HTMLElement`



 | `document.body` |

### Content

The component that pops out when the hover card is open.

| Prop | Type | Default |
| --- | --- | --- |
| 
`asChild`

Prop description

 | 

`boolean`



 | `false` |
| 

`forceMount`

Prop description

 | 

`boolean`



 | No default value |
| 

`side`

Prop description

 | 

`enum`

See full type

 | `"bottom"` |
| 

`sideOffset`

Prop description

 | 

`number`



 | `0` |
| 

`align`

Prop description

 | 

`enum`

See full type

 | `"center"` |
| 

`alignOffset`

Prop description

 | 

`number`



 | `0` |
| 

`avoidCollisions`

Prop description

 | 

`boolean`



 | `true` |
| 

`collisionBoundary`

Prop description

 | 

`Boundary`

See full type

 | `[]` |
| 

`collisionPadding`

Prop description

 | 

`number | Padding`

See full type

 | `0` |
| 

`arrowPadding`

Prop description

 | 

`number`



 | `0` |
| 

`sticky`

Prop description

 | 

`enum`

See full type

 | `"partial"` |
| 

`hideWhenDetached`

Prop description

 | 

`boolean`



 | `false` |

| Data attribute | Values |
| --- | --- |
| `[data-state]` | `"open" | "closed"` |
| `[data-side]` | `"left" | "right" | "bottom" | "top"` |
| `[data-align]` | `"start" | "end" | "center"` |

| CSS Variable | Description |
| --- | --- |
| `--radix-hover-card-content-transform-origin` | The `transform-origin` computed from the content and arrow positions/offsets |
| `--radix-hover-card-content-available-width` | The remaining width between the trigger and the boundary edge |
| `--radix-hover-card-content-available-height` | The remaining height between the trigger and the boundary edge |
| `--radix-hover-card-trigger-width` | The width of the trigger |
| `--radix-hover-card-trigger-height` | The height of the trigger |

### Arrow

An optional arrow element to render alongside the hover card. This can be used to help visually link the trigger with the `HoverCard.Content`. Must be rendered inside `HoverCard.Content`.

| Prop | Type | Default |
| --- | --- | --- |
| 
`asChild`

Prop description

 | 

`boolean`



 | `false` |
| 

`width`

Prop description

 | 

`number`



 | `10` |
| 

`height`

Prop description

 | 

`number`



 | `5` |

## Examples

### Show instantly

Use the `openDelay` prop to control the time it takes for the hover card to open.

    import { HoverCard } from "radix-ui";  export default () => ( 	<HoverCard.Root openDelay={0}>  <HoverCard.Trigger>…</HoverCard.Trigger>  <HoverCard.Content>…</HoverCard.Content> 	</HoverCard.Root> ); 

### Constrain the content size

You may want to constrain the width of the content so that it matches the trigger width. You may also want to constrain its height to not exceed the viewport.

We expose several CSS custom properties such as `--radix-hover-card-trigger-width` and `--radix-hover-card-content-available-height` to support this. Use them to constrain the content dimensions.

    // index.jsx import { HoverCard } from "radix-ui"; import "./styles.css";  export default () => ( 	<HoverCard.Root>  <HoverCard.Trigger>…</HoverCard.Trigger>  <HoverCard.Portal>  <HoverCard.Content className="HoverCardContent" sideOffset={5}>  …  </HoverCard.Content>  </HoverCard.Portal> 	</HoverCard.Root> ); 

    /* styles.css */ .HoverCardContent { 	width: var(--radix-hover-card-trigger-width); 	max-height: var(--radix-hover-card-content-available-height); } 

### Origin-aware animations

We expose a CSS custom property `--radix-hover-card-content-transform-origin`. Use it to animate the content from its computed origin based on `side`, `sideOffset`, `align`, `alignOffset` and any collisions.

    // index.jsx import { HoverCard } from "radix-ui"; import "./styles.css";  export default () => ( 	<HoverCard.Root>  <HoverCard.Trigger>…</HoverCard.Trigger>  <HoverCard.Content className="HoverCardContent">…</HoverCard.Content> 	</HoverCard.Root> ); 

    /* styles.css */ .HoverCardContent { 	transform-origin: var(--radix-hover-card-content-transform-origin); 	animation: scaleIn 0.5s ease-out; }  @keyframes scaleIn { 	from {  opacity: 0;  transform: scale(0); 	} 	to {  opacity: 1;  transform: scale(1); 	} } 

### Collision-aware animations

We expose `data-side` and `data-align` attributes. Their values will change at runtime to reflect collisions. Use them to create collision and direction-aware animations.

    // index.jsx import { HoverCard } from "radix-ui"; import "./styles.css";  export default () => ( 	<HoverCard.Root>  <HoverCard.Trigger>…</HoverCard.Trigger>  <HoverCard.Content className="HoverCardContent">…</HoverCard.Content> 	</HoverCard.Root> ); 

    /* styles.css */ .HoverCardContent { 	animation-duration: 0.6s; 	animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1); } .HoverCardContent[data-side="top"] { 	animation-name: slideUp; } .HoverCardContent[data-side="bottom"] { 	animation-name: slideDown; }  @keyframes slideUp { 	from {  opacity: 0;  transform: translateY(10px); 	} 	to {  opacity: 1;  transform: translateY(0); 	} }  @keyframes slideDown { 	from {  opacity: 0;  transform: translateY(-10px); 	} 	to {  opacity: 1;  transform: translateY(0); 	} } 

## Accessibility

The hover card is intended for sighted users only, the content will be inaccessible to keyboard users.

### Keyboard Interactions

| Key | Description |
| --- | --- |
| 
Tab

 | Opens/closes the hover card. |
| 

Enter

 | Opens the hover card link |

#### Quick nav

*   Installation
*   Anatomy
*   API Reference
*   Root
*   Trigger
*   Portal
*   Content
*   Arrow
*   Examples
*   Show instantly
*   Constrain the content size
*   Origin-aware animations
*   Collision-aware animations
*   Accessibility
*   Keyboard Interactions

PreviousForm

NextLabel

Edit this page on GitHub.

---

## Page: https://www.radix-ui.com/primitives/docs/components/label

Components

# Label

Renders an accessible label associated with controls.

First name

index.jsxindex.jsxstyles.cssstyles.css

CSS

    import * as React from "react"; import { Label } from "radix-ui"; import "./styles.css";  const LabelDemo = () => ( 	<div style={{ display: "flex", padding: "0 20px", flexWrap: "wrap", gap: 15, alignItems: "center", }} >  <Label.Root className="LabelRoot" htmlFor="firstName">  First name  </Label.Root>  <input className="Input" type="text" id="firstName" defaultValue="Pedro Duarte" /> 	</div> );  export default LabelDemo; 

## Features

Text selection is prevented when double clicking label.

Supports nested controls.

## Component Reference Links

Version: 2.1.7

Size: 1.66 kB

View source

Report an issue

## Installation

Install the component from your command line.

    npm install @radix-ui/react-label 

## Anatomy

Import the component.

    import { Label } from "radix-ui";  export default () => <Label.Root />; 

## API Reference

### Root

Contains the content for the label.

| Prop | Type | Default |
| --- | --- | --- |
| 
`asChild`

Prop description

 | 

`boolean`



 | `false` |
| 

`htmlFor`

Prop description

 | 

`string`



 | No default value |

## Accessibility

This component is based on the native `label` element, it will automatically apply the correct labelling when wrapping controls or using the `htmlFor` attribute. For your own custom controls to work correctly, ensure they use native elements such as `button` or `input` as a base.

#### Quick nav

*   Installation
*   Anatomy
*   API Reference
*   Root
*   Accessibility

PreviousHover Card

NextMenubar

Edit this page on GitHub.

---

## Page: https://www.radix-ui.com/primitives/docs/components/menubar

Components

# Menu Bar

A visually persistent menu common in desktop applications that provides quick access to a consistent set of commands.

FileEditViewProfiles

index.jsxindex.jsxstyles.cssstyles.css

CSS

    import * as React from "react"; import { Menubar } from "radix-ui"; import { CheckIcon, ChevronRightIcon, DotFilledIcon, } from "@radix-ui/react-icons"; import "./styles.css";  const RADIO_ITEMS = ["Andy", "Benoît", "Luis"]; const CHECK_ITEMS = ["Always Show Bookmarks Bar", "Always Show Full URLs"];  const MenubarDemo = () => { 	const [checkedSelection, setCheckedSelection] = React.useState([  CHECK_ITEMS[1], 	]); 	const [radioSelection, setRadioSelection] = React.useState(RADIO_ITEMS[2]);  	return (  <Menubar.Root className="MenubarRoot">  <Menubar.Menu>  <Menubar.Trigger className="MenubarTrigger">File</Menubar.Trigger>  <Menubar.Portal>  <Menubar.Content className="MenubarContent" align="start" sideOffset={5} alignOffset={-3} >  <Menubar.Item className="MenubarItem">  New Tab <div className="RightSlot">⌘ T</div>  </Menubar.Item>  <Menubar.Item className="MenubarItem">  New Window <div className="RightSlot">⌘ N</div>  </Menubar.Item>  <Menubar.Item className="MenubarItem" disabled>  New Incognito Window  </Menubar.Item>  <Menubar.Separator className="MenubarSeparator" />  <Menubar.Sub>  <Menubar.SubTrigger className="MenubarSubTrigger">  Share  <div className="RightSlot">  <ChevronRightIcon />  </div>  </Menubar.SubTrigger>  <Menubar.Portal>  <Menubar.SubContent className="MenubarSubContent" alignOffset={-5} >  <Menubar.Item className="MenubarItem">  Email Link  </Menubar.Item>  <Menubar.Item className="MenubarItem">Messages</Menubar.Item>  <Menubar.Item className="MenubarItem">Notes</Menubar.Item>  </Menubar.SubContent>  </Menubar.Portal>  </Menubar.Sub>  <Menubar.Separator className="MenubarSeparator" />  <Menubar.Item className="MenubarItem">  Print… <div className="RightSlot">⌘ P</div>  </Menubar.Item>  </Menubar.Content>  </Menubar.Portal>  </Menubar.Menu>   <Menubar.Menu>  <Menubar.Trigger className="MenubarTrigger">Edit</Menubar.Trigger>  <Menubar.Portal>  <Menubar.Content className="MenubarContent" align="start" sideOffset={5} alignOffset={-3} >  <Menubar.Item className="MenubarItem">  Undo <div className="RightSlot">⌘ Z</div>  </Menubar.Item>  <Menubar.Item className="MenubarItem">  Redo <div className="RightSlot">⇧ ⌘ Z</div>  </Menubar.Item>  <Menubar.Separator className="MenubarSeparator" />  <Menubar.Sub>  <Menubar.SubTrigger className="MenubarSubTrigger">  Find  <div className="RightSlot">  <ChevronRightIcon />  </div>  </Menubar.SubTrigger>   <Menubar.Portal>  <Menubar.SubContent className="MenubarSubContent" alignOffset={-5} >  <Menubar.Item className="MenubarItem">  Search the web…  </Menubar.Item>  <Menubar.Separator className="MenubarSeparator" />  <Menubar.Item className="MenubarItem">Find…</Menubar.Item>  <Menubar.Item className="MenubarItem">Find Next</Menubar.Item>  <Menubar.Item className="MenubarItem">  Find Previous  </Menubar.Item>  </Menubar.SubContent>  </Menubar.Portal>  </Menubar.Sub>  <Menubar.Separator className="MenubarSeparator" />  <Menubar.Item className="MenubarItem">Cut</Menubar.Item>  <Menubar.Item className="MenubarItem">Copy</Menubar.Item>  <Menubar.Item className="MenubarItem">Paste</Menubar.Item>  </Menubar.Content>  </Menubar.Portal>  </Menubar.Menu>   <Menubar.Menu>  <Menubar.Trigger className="MenubarTrigger">View</Menubar.Trigger>  <Menubar.Portal>  <Menubar.Content className="MenubarContent" align="start" sideOffset={5} alignOffset={-14} >  {CHECK_ITEMS.map((item) => (  <Menubar.CheckboxItem className="MenubarCheckboxItem inset" key={item} checked={checkedSelection.includes(item)} onCheckedChange={() => setCheckedSelection((current) => current.includes(item) ? current.filter((el) => el !== item) : current.concat(item), ) } >  <Menubar.ItemIndicator className="MenubarItemIndicator">  <CheckIcon />  </Menubar.ItemIndicator>  {item}  </Menubar.CheckboxItem>  ))}  <Menubar.Separator className="MenubarSeparator" />  <Menubar.Item className="MenubarItem inset">  Reload <div className="RightSlot">⌘ R</div>  </Menubar.Item>  <Menubar.Item className="MenubarItem inset" disabled>  Force Reload <div className="RightSlot">⇧ ⌘ R</div>  </Menubar.Item>  <Menubar.Separator className="MenubarSeparator" />  <Menubar.Item className="MenubarItem inset">  Toggle Fullscreen  </Menubar.Item>  <Menubar.Separator className="MenubarSeparator" />  <Menubar.Item className="MenubarItem inset">  Hide Sidebar  </Menubar.Item>  </Menubar.Content>  </Menubar.Portal>  </Menubar.Menu>   <Menubar.Menu>  <Menubar.Trigger className="MenubarTrigger">Profiles</Menubar.Trigger>  <Menubar.Portal>  <Menubar.Content className="MenubarContent" align="start" sideOffset={5} alignOffset={-14} >  <Menubar.RadioGroup value={radioSelection} onValueChange={setRadioSelection} >  {RADIO_ITEMS.map((item) => (  <Menubar.RadioItem className="MenubarRadioItem inset" key={item} value={item} >  <Menubar.ItemIndicator className="MenubarItemIndicator">  <DotFilledIcon />  </Menubar.ItemIndicator>  {item}  </Menubar.RadioItem>  ))}  <Menubar.Separator className="MenubarSeparator" />  <Menubar.Item className="MenubarItem inset">Edit…</Menubar.Item>  <Menubar.Separator className="MenubarSeparator" />  <Menubar.Item className="MenubarItem inset">  Add Profile…  </Menubar.Item>  </Menubar.RadioGroup>  </Menubar.Content>  </Menubar.Portal>  </Menubar.Menu>  </Menubar.Root> 	); };  export default MenubarDemo; 

## Features

Can be controlled or uncontrolled.

Supports submenus with configurable reading direction.

Supports items, labels, groups of items.

Supports checkable items (single or multiple).

Customize side, alignment, offsets, collision handling.

Optionally render a pointing arrow.

Focus is fully managed.

Full keyboard navigation.

Typeahead support.

## Component Reference Links

Version: 1.1.15

Size: 33.81 kB

View source

Report an issue

ARIA design pattern

## Installation

Install the component from your command line.

    npm install @radix-ui/react-menubar 

## Anatomy

Import all parts and piece them together.

    import { Menubar } from "radix-ui";  export default () => ( 	<Menubar.Root>  <Menubar.Menu>  <Menubar.Trigger />  <Menubar.Portal>  <Menubar.Content>  <Menubar.Label />  <Menubar.Item />   <Menubar.Group>  <Menubar.Item />  </Menubar.Group>   <Menubar.CheckboxItem>  <Menubar.ItemIndicator />  </Menubar.CheckboxItem>   <Menubar.RadioGroup>  <Menubar.RadioItem>  <Menubar.ItemIndicator />  </Menubar.RadioItem>  </Menubar.RadioGroup>   <Menubar.Sub>  <Menubar.SubTrigger />  <Menubar.Portal>  <Menubar.SubContent />  </Menubar.Portal>  </Menubar.Sub>   <Menubar.Separator />  <Menubar.Arrow />  </Menubar.Content>  </Menubar.Portal>  </Menubar.Menu> 	</Menubar.Root> ); 

## API Reference

### Root

Contains all the parts of a menubar.

| Prop | Type | Default |
| --- | --- | --- |
| 
`asChild`

Prop description

 | 

`boolean`



 | `false` |
| 

`defaultValue`

Prop description

 | 

`string`



 | No default value |
| 

`value`

Prop description

 | 

`string`



 | No default value |
| 

`onValueChange`

Prop description

 | 

`function`

See full type

 | No default value |
| 

`dir`

Prop description

 | 

`enum`

See full type

 | No default value |
| 

`loop`

Prop description

 | 

`boolean`



 | `false` |

### Menu

A top level menu item, contains a trigger with content combination.

| Prop | Type | Default |
| --- | --- | --- |
| 
`asChild`

Prop description

 | 

`boolean`



 | `false` |
| 

`value`

Prop description

 | 

`string`



 | No default value |

### Trigger

The button that toggles the content. By default, the `Menubar.Content` will position itself against the trigger.

| Prop | Type | Default |
| --- | --- | --- |
| 
`asChild`

Prop description

 | 

`boolean`



 | `false` |

| Data attribute | Values |
| --- | --- |
| `[data-state]` | `"open" | "closed"` |
| `[data-highlighted]` | 
Present when highlighted

 |
| `[data-disabled]` | 

Present when disabled

 |

### Portal

When used, portals the content part into the `body`.

| Prop | Type | Default |
| --- | --- | --- |
| 
`forceMount`

Prop description

 | 

`boolean`



 | No default value |
| 

`container`

Prop description

 | 

`HTMLElement`



 | `document.body` |

### Content

The component that pops out when a menu is open.

| Prop | Type | Default |
| --- | --- | --- |
| 
`asChild`

Prop description

 | 

`boolean`



 | `false` |
| 

`loop`

Prop description

 | 

`boolean`



 | `false` |
| 

`onCloseAutoFocus`

Prop description

 | 

`function`

See full type

 | No default value |
| 

`onEscapeKeyDown`

Prop description

 | 

`function`

See full type

 | No default value |
| 

`onPointerDownOutside`

Prop description

 | 

`function`

See full type

 | No default value |
| 

`onFocusOutside`

Prop description

 | 

`function`

See full type

 | No default value |
| 

`onInteractOutside`

Prop description

 | 

`function`

See full type

 | No default value |
| 

`forceMount`

Prop description

 | 

`boolean`



 | No default value |
| 

`side`

Prop description

 | 

`enum`

See full type

 | `"bottom"` |
| 

`sideOffset`

Prop description

 | 

`number`



 | `0` |
| 

`align`

Prop description

 | 

`enum`

See full type

 | `"center"` |
| 

`alignOffset`

Prop description

 | 

`number`



 | `0` |
| 

`avoidCollisions`

Prop description

 | 

`boolean`



 | `true` |
| 

`collisionBoundary`

Prop description

 | 

`Boundary`

See full type

 | `[]` |
| 

`collisionPadding`

Prop description

 | 

`number | Padding`

See full type

 | `0` |
| 

`arrowPadding`

Prop description

 | 

`number`



 | `0` |
| 

`sticky`

Prop description

 | 

`enum`

See full type

 | `"partial"` |
| 

`hideWhenDetached`

Prop description

 | 

`boolean`



 | `false` |

| Data attribute | Values |
| --- | --- |
| `[data-state]` | `"open" | "closed"` |
| `[data-side]` | `"left" | "right" | "bottom" | "top"` |
| `[data-align]` | `"start" | "end" | "center"` |

| CSS Variable | Description |
| --- | --- |
| `--radix-menubar-content-transform-origin` | The `transform-origin` computed from the content and arrow positions/offsets |
| `--radix-menubar-content-available-width` | The remaining width between the trigger and the boundary edge |
| `--radix-menubar-content-available-height` | The remaining height between the trigger and the boundary edge |
| `--radix-menubar-trigger-width` | The width of the trigger |
| `--radix-menubar-trigger-height` | The height of the trigger |

### Arrow

An optional arrow element to render alongside a menubar menu. This can be used to help visually link the trigger with the `Menubar.Content`. Must be rendered inside `Menubar.Content`.

| Prop | Type | Default |
| --- | --- | --- |
| 
`asChild`

Prop description

 | 

`boolean`



 | `false` |
| 

`width`

Prop description

 | 

`number`



 | `10` |
| 

`height`

Prop description

 | 

`number`



 | `5` |

### Item

The component that contains the menubar items.

| Prop | Type | Default |
| --- | --- | --- |
| 
`asChild`

Prop description

 | 

`boolean`



 | `false` |
| 

`disabled`

Prop description

 | 

`boolean`



 | No default value |
| 

`onSelect`

Prop description

 | 

`function`

See full type

 | No default value |
| 

`textValue`

Prop description

 | 

`string`



 | No default value |

| Data attribute | Values |
| --- | --- |
| `[data-highlighted]` | 
Present when highlighted

 |
| `[data-disabled]` | 

Present when disabled

 |

### Group

Used to group multiple `Menubar.Item`s.

| Prop | Type | Default |
| --- | --- | --- |
| 
`asChild`

Prop description

 | 

`boolean`



 | `false` |

### Label

Used to render a label. It won't be focusable using arrow keys.

| Prop | Type | Default |
| --- | --- | --- |
| 
`asChild`

Prop description

 | 

`boolean`



 | `false` |

### CheckboxItem

An item that can be controlled and rendered like a checkbox.

| Prop | Type | Default |
| --- | --- | --- |
| 
`asChild`

Prop description

 | 

`boolean`



 | `false` |
| 

`checked`

Prop description

 | 

`boolean | 'indeterminate'`



 | No default value |
| 

`onCheckedChange`

Prop description

 | 

`function`

See full type

 | No default value |
| 

`disabled`

Prop description

 | 

`boolean`



 | No default value |
| 

`onSelect`

Prop description

 | 

`function`

See full type

 | No default value |
| 

`textValue`

Prop description

 | 

`string`



 | No default value |

| Data attribute | Values |
| --- | --- |
| `[data-state]` | `"checked" | "unchecked"` |
| `[data-highlighted]` | 
Present when highlighted

 |
| `[data-disabled]` | 

Present when disabled

 |

### RadioGroup

Used to group multiple `Menubar.RadioItem`s.

| Prop | Type | Default |
| --- | --- | --- |
| 
`asChild`

Prop description

 | 

`boolean`



 | `false` |
| 

`value`

Prop description

 | 

`string`



 | No default value |
| 

`onValueChange`

Prop description

 | 

`function`

See full type

 | No default value |

### RadioItem

An item that can be controlled and rendered like a radio.

| Prop | Type | Default |
| --- | --- | --- |
| 
`asChild`

Prop description

 | 

`boolean`



 | `false` |
| 

`value*`

Prop description

 | 

`string`



 | No default value |
| 

`disabled`

Prop description

 | 

`boolean`



 | No default value |
| 

`onSelect`

Prop description

 | 

`function`

See full type

 | No default value |
| 

`textValue`

Prop description

 | 

`string`



 | No default value |

| Data attribute | Values |
| --- | --- |
| `[data-state]` | `"checked" | "unchecked"` |
| `[data-highlighted]` | 
Present when highlighted

 |
| `[data-disabled]` | 

Present when disabled

 |

### ItemIndicator

Renders when the parent `Menubar.CheckboxItem` or `Menubar.RadioItem` is checked. You can style this element directly, or you can use it as a wrapper to put an icon into, or both.

| Prop | Type | Default |
| --- | --- | --- |
| 
`asChild`

Prop description

 | 

`boolean`



 | `false` |
| 

`forceMount`

Prop description

 | 

`boolean`



 | No default value |

| Data attribute | Values |
| --- | --- |
| `[data-state]` | `"checked" | "unchecked"` |

### Separator

Used to visually separate items in a menubar menu.

| Prop | Type | Default |
| --- | --- | --- |
| 
`asChild`

Prop description

 | 

`boolean`



 | `false` |

### Sub

Contains all the parts of a submenu.

| Prop | Type | Default |
| --- | --- | --- |
| 
`defaultOpen`

Prop description

 | 

`boolean`



 | No default value |
| 

`open`

Prop description

 | 

`boolean`



 | No default value |
| 

`onOpenChange`

Prop description

 | 

`function`

See full type

 | No default value |

### SubTrigger

An item that opens a submenu. Must be rendered inside `Menubar.Sub`.

| Prop | Type | Default |
| --- | --- | --- |
| 
`asChild`

Prop description

 | 

`boolean`



 | `false` |
| 

`disabled`

Prop description

 | 

`boolean`



 | No default value |
| 

`textValue`

Prop description

 | 

`string`



 | No default value |

| Data attribute | Values |
| --- | --- |
| `[data-state]` | `"open" | "closed"` |
| `[data-highlighted]` | 
Present when highlighted

 |
| `[data-disabled]` | 

Present when disabled

 |

### SubContent

The component that pops out when a submenu is open. Must be rendered inside `Menubar.Sub`.

| Prop | Type | Default |
| --- | --- | --- |
| 
`asChild`

Prop description

 | 

`boolean`



 | `false` |
| 

`loop`

Prop description

 | 

`boolean`



 | `false` |
| 

`onEscapeKeyDown`

Prop description

 | 

`function`

See full type

 | No default value |
| 

`onPointerDownOutside`

Prop description

 | 

`function`

See full type

 | No default value |
| 

`onFocusOutside`

Prop description

 | 

`function`

See full type

 | No default value |
| 

`onInteractOutside`

Prop description

 | 

`function`

See full type

 | No default value |
| 

`forceMount`

Prop description

 | 

`boolean`



 | No default value |
| 

`sideOffset`

Prop description

 | 

`number`



 | `0` |
| 

`alignOffset`

Prop description

 | 

`number`



 | `0` |
| 

`avoidCollisions`

Prop description

 | 

`boolean`



 | `true` |
| 

`collisionBoundary`

Prop description

 | 

`Boundary`

See full type

 | `[]` |
| 

`collisionPadding`

Prop description

 | 

`number | Padding`

See full type

 | `0` |
| 

`arrowPadding`

Prop description

 | 

`number`



 | `0` |
| 

`sticky`

Prop description

 | 

`enum`

See full type

 | `"partial"` |
| 

`hideWhenDetached`

Prop description

 | 

`boolean`



 | `false` |

| Data attribute | Values |
| --- | --- |
| `[data-state]` | `"open" | "closed"` |
| `[data-side]` | `"left" | "right" | "bottom" | "top"` |
| `[data-align]` | `"start" | "end" | "center"` |
| `[data-orientation]` | `"vertical" | "horizontal"` |

| CSS Variable | Description |
| --- | --- |
| `--radix-menubar-content-transform-origin` | The `transform-origin` computed from the content and arrow positions/offsets |
| `--radix-menubar-content-available-width` | The remaining width between the trigger and the boundary edge |
| `--radix-menubar-content-available-height` | The remaining height between the trigger and the boundary edge |
| `--radix-menubar-trigger-width` | The width of the trigger |
| `--radix-menubar-trigger-height` | The height of the trigger |

## Examples

### With submenus

You can create submenus by using `Menubar.Sub` in combination with its parts.

    <Menubar.Root> 	<Menubar.Menu>  <Menubar.Trigger>…</Menubar.Trigger>  <Menubar.Portal>  <Menubar.Content>  <Menubar.Item>…</Menubar.Item>  <Menubar.Item>…</Menubar.Item>  <Menubar.Separator />  <Menubar.Sub>  <Menubar.SubTrigger>Sub menu →</Menubar.SubTrigger>  <Menubar.Portal>  <Menubar.SubContent>  <Menubar.Item>Sub menu item</Menubar.Item>  <Menubar.Item>Sub menu item</Menubar.Item>  <Menubar.Arrow />  </Menubar.SubContent>  </Menubar.Portal>  </Menubar.Sub>  <Menubar.Separator />  <Menubar.Item>…</Menubar.Item>  </Menubar.Content>  </Menubar.Portal> 	</Menubar.Menu> </Menubar.Root> 

### With disabled items

You can add special styles to disabled items via the `data-disabled` attribute.

    // index.jsx import { Menubar } from "radix-ui"; import "./styles.css";  export default () => ( 	<Menubar.Root>  <Menubar.Menu>  <Menubar.Trigger>…</Menubar.Trigger>  <Menubar.Portal>  <Menubar.Content>  <Menubar.Item className="MenubarItem" disabled>  …  </Menubar.Item>  <Menubar.Item className="MenubarItem">…</Menubar.Item>  </Menubar.Content>  </Menubar.Portal>  </Menubar.Menu> 	</Menubar.Root> ); 

    /* styles.css */ .MenubarItem[data-disabled] { 	color: gainsboro; } 

### With separators

Use the `Separator` part to add a separator between items.

    <Menubar.Root> 	<Menubar.Menu>  <Menubar.Trigger>…</Menubar.Trigger>  <Menubar.Portal>  <Menubar.Content>  <Menubar.Item>…</Menubar.Item>  <Menubar.Separator />  <Menubar.Item>…</Menubar.Item>  <Menubar.Separator />  <Menubar.Item>…</Menubar.Item>  </Menubar.Content>  </Menubar.Portal> 	</Menubar.Menu> </Menubar.Root> 

### With labels

Use the `Label` part to help label a section.

    <Menubar.Root> 	<Menubar.Menu>  <Menubar.Trigger>…</Menubar.Trigger>  <Menubar.Portal>  <Menubar.Content>  <Menubar.Label>Label</Menubar.Label>  <Menubar.Item>…</Menubar.Item>  <Menubar.Item>…</Menubar.Item>  <Menubar.Item>…</Menubar.Item>  </Menubar.Content>  </Menubar.Portal> 	</Menubar.Menu> </Menubar.Root> 

### With checkbox items

Use the `CheckboxItem` part to add an item that can be checked.

    import * as React from "react"; import { CheckIcon } from "@radix-ui/react-icons"; import { Menubar } from "radix-ui";  export default () => { 	const [checked, setChecked] = React.useState(true);  	return (  <Menubar.Root>  <Menubar.Menu>  <Menubar.Trigger>…</Menubar.Trigger>  <Menubar.Portal>  <Menubar.Content>  <Menubar.Item>…</Menubar.Item>  <Menubar.Item>…</Menubar.Item>  <Menubar.Separator />  <Menubar.CheckboxItem checked={checked} onCheckedChange={setChecked} >  <Menubar.ItemIndicator>  <CheckIcon />  </Menubar.ItemIndicator>  Checkbox item  </Menubar.CheckboxItem>  </Menubar.Content>  </Menubar.Portal>  </Menubar.Menu>  </Menubar.Root> 	); }; 

### With radio items

Use the `RadioGroup` and `RadioItem` parts to add an item that can be checked amongst others.

    import * as React from "react"; import { CheckIcon } from "@radix-ui/react-icons"; import { Menubar } from "radix-ui";  export default () => { 	const [color, setColor] = React.useState("blue");  	return (  <Menubar.Root>  <Menubar.Menu>  <Menubar.Trigger>…</Menubar.Trigger>  <Menubar.Portal>  <Menubar.Content>  <Menubar.RadioGroup value={color} onValueChange={setColor}>  <Menubar.RadioItem value="red">  <Menubar.ItemIndicator>  <CheckIcon />  </Menubar.ItemIndicator>  Red  </Menubar.RadioItem>  <Menubar.RadioItem value="blue">  <Menubar.ItemIndicator>  <CheckIcon />  </Menubar.ItemIndicator>  Blue  </Menubar.RadioItem>  </Menubar.RadioGroup>  </Menubar.Content>  </Menubar.Portal>  </Menubar.Menu>  </Menubar.Root> 	); }; 

### With complex items

You can add extra decorative elements in the `Item` parts, such as images.

    import { Menubar } from "radix-ui";  export default () => ( 	<Menubar.Root>  <Menubar.Menu>  <Menubar.Trigger>…</Menubar.Trigger>  <Menubar.Portal>  <Menubar.Content>  <Menubar.Item>  <img src="…" />  Adolfo Hess  </Menubar.Item>  <Menubar.Item>  <img src="…" />  Miyah Myles  </Menubar.Item>  </Menubar.Content>  </Menubar.Portal>  </Menubar.Menu> 	</Menubar.Root> ); 

### Constrain the content/sub-content size

You may want to constrain the width of the content (or sub-content) so that it matches the trigger (or sub-trigger) width. You may also want to constrain its height to not exceed the viewport.

We expose several CSS custom properties such as `--radix-menubar-trigger-width` and `--radix-menubar-content-available-height` to support this. Use them to constrain the content dimensions.

    // index.jsx import { Menubar } from "radix-ui"; import "./styles.css";  export default () => ( 	<Menubar.Root>  <Menubar.Trigger>…</Menubar.Trigger>  <Menubar.Portal>  <Menubar.Content className="MenubarContent" sideOffset={5}>  …  </Menubar.Content>  </Menubar.Portal> 	</Menubar.Root> ); 

    /* styles.css */ .MenubarContent { 	width: var(--radix-menubar-trigger-width); 	max-height: var(--radix-menubar-content-available-height); } 

### Origin-aware animations

We expose a CSS custom property `--radix-menubar-content-transform-origin`. Use it to animate the content from its computed origin based on `side`, `sideOffset`, `align`, `alignOffset` and any collisions.

    // index.jsx import { Menubar } from "radix-ui"; import "./styles.css";  export default () => ( 	<Menubar.Root>  <Menubar.Menu>  <Menubar.Trigger>…</Menubar.Trigger>  <Menubar.Portal>  <Menubar.Content className="MenubarContent">…</Menubar.Content>  </Menubar.Portal>  </Menubar.Menu> 	</Menubar.Root> ); 

    /* styles.css */ .MenubarContent { 	transform-origin: var(--radix-menubar-content-transform-origin); 	animation: scaleIn 0.5s ease-out; }  @keyframes scaleIn { 	from {  opacity: 0;  transform: scale(0); 	} 	to {  opacity: 1;  transform: scale(1); 	} } 

### Collision-aware animations

We expose `data-side` and `data-align` attributes. Their values will change at runtime to reflect collisions. Use them to create collision and direction-aware animations.

    // index.jsx import { Menubar } from "radix-ui"; import "./styles.css";  export default () => ( 	<Menubar.Root>  <Menubar.Menu>  <Menubar.Trigger>…</Menubar.Trigger>  <Menubar.Portal>  <Menubar.Content className="MenubarContent">…</Menubar.Content>  </Menubar.Portal>  </Menubar.Menu> 	</Menubar.Root> ); 

    /* styles.css */ .MenubarContent { 	animation-duration: 0.6s; 	animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1); } .MenubarContent[data-side="top"] { 	animation-name: slideUp; } .MenubarContent[data-side="bottom"] { 	animation-name: slideDown; }  @keyframes slideUp { 	from {  opacity: 0;  transform: translateY(10px); 	} 	to {  opacity: 1;  transform: translateY(0); 	} }  @keyframes slideDown { 	from {  opacity: 0;  transform: translateY(-10px); 	} 	to {  opacity: 1;  transform: translateY(0); 	} } 

## Accessibility

Adheres to the Menu Button WAI-ARIA design pattern and uses roving tabindex to manage focus movement among menu items.

### Keyboard Interactions

| Key | Description |
| --- | --- |
| 
Space

 | When focus is on `Menubar.Trigger`, opens the menubar and focuses the first item.  
When focus is on an item, activates the focused item. |
| 

Enter

 | When focus is on `Menubar.Trigger`, opens the associated menu.  
When focus is on an item, activates the focused item. |
| 

ArrowDown

 | When focus is on `Menubar.Trigger`, opens the associated menu.  
When focus is on an item, moves focus to the next item. |
| 

ArrowUp

 | When focus is on an item, moves focus to the previous item. |
| 

ArrowRightArrowLeft

 | When focus is on a `Menubar.Trigger`, moves focus to the next or previous item.  
When focus is on a `Menubar.SubTrigger`, opens or closes the submenu depending on reading direction.  
When focus is within a `Menubar.Content`, opens the next menu in the menubar. |
| 

Esc

 | Closes the currently open menu and moves focus to its `Menubar.Trigger`. |

#### Quick nav

*   Installation
*   Anatomy
*   API Reference
*   Root
*   Menu
*   Trigger
*   Portal
*   Content
*   Arrow
*   Item
*   Group
*   Label
*   CheckboxItem
*   RadioGroup
*   RadioItem
*   ItemIndicator
*   Separator
*   Sub
*   SubTrigger
*   SubContent
*   Examples
*   With submenus
*   With disabled items
*   With separators
*   With labels
*   With checkbox items
*   With radio items
*   With complex items
*   Constrain the content/sub-content size
*   Origin-aware animations
*   Collision-aware animations
*   Accessibility
*   Keyboard Interactions

PreviousLabel

NextNavigation Menu

Edit this page on GitHub.

---

## Page: https://www.radix-ui.com/primitives/docs/components/navigation-menu

Components

# Navigation Menu

A collection of links for navigating websites.

*   Learn
*   Overview
*   Github

index.jsxindex.jsxstyles.cssstyles.css

CSS

    import * as React from "react"; import { NavigationMenu } from "radix-ui"; import classNames from "classnames"; import { CaretDownIcon } from "@radix-ui/react-icons"; import "./styles.css";  const NavigationMenuDemo = () => { 	return (  <NavigationMenu.Root className="NavigationMenuRoot">  <NavigationMenu.List className="NavigationMenuList">  <NavigationMenu.Item>  <NavigationMenu.Trigger className="NavigationMenuTrigger">  Learn <CaretDownIcon className="CaretDown" aria-hidden />  </NavigationMenu.Trigger>  <NavigationMenu.Content className="NavigationMenuContent">  <ul className="List one">  <li style={{ gridRow: "span 3" }}>  <NavigationMenu.Link asChild>  <a className="Callout" href="/">  <svg aria-hidden width="38" height="38" viewBox="0 0 25 25" fill="white" >  <path d="M12 25C7.58173 25 4 21.4183 4 17C4 12.5817 7.58173 9 12 9V25Z"></path>  <path d="M12 0H4V8H12V0Z"></path>  <path d="M17 8C19.2091 8 21 6.20914 21 4C21 1.79086 19.2091 0 17 0C14.7909 0 13 1.79086 13 4C13 6.20914 14.7909 8 17 8Z"></path>  </svg>  <div className="CalloutHeading">Radix Primitives</div>  <p className="CalloutText">  Unstyled, accessible components for React.  </p>  </a>  </NavigationMenu.Link>  </li>   <ListItem href="https://stitches.dev/" title="Stitches">  CSS-in-JS with best-in-class developer experience.  </ListItem>  <ListItem href="/colors" title="Colors">  Beautiful, thought-out palettes with auto dark mode.  </ListItem>  <ListItem href="https://icons.radix-ui.com/" title="Icons">  A crisp set of 15x15 icons, balanced and consistent.  </ListItem>  </ul>  </NavigationMenu.Content>  </NavigationMenu.Item>   <NavigationMenu.Item>  <NavigationMenu.Trigger className="NavigationMenuTrigger">  Overview <CaretDownIcon className="CaretDown" aria-hidden />  </NavigationMenu.Trigger>  <NavigationMenu.Content className="NavigationMenuContent">  <ul className="List two">  <ListItem title="Introduction" href="/primitives/docs/overview/introduction" >  Build high-quality, accessible design systems and web apps.  </ListItem>  <ListItem title="Getting started" href="/primitives/docs/overview/getting-started" >  A quick tutorial to get you up and running with Radix  Primitives.  </ListItem>  <ListItem title="Styling" href="/primitives/docs/guides/styling">  Unstyled and compatible with any styling solution.  </ListItem>  <ListItem title="Animation" href="/primitives/docs/guides/animation" >  Use CSS keyframes or any animation library of your choice.  </ListItem>  <ListItem title="Accessibility" href="/primitives/docs/overview/accessibility" >  Tested in a range of browsers and assistive technologies.  </ListItem>  <ListItem title="Releases" href="/primitives/docs/overview/releases" >  Radix Primitives releases and their changelogs.  </ListItem>  </ul>  </NavigationMenu.Content>  </NavigationMenu.Item>   <NavigationMenu.Item>  <NavigationMenu.Link className="NavigationMenuLink" href="https://github.com/radix-ui" >  Github  </NavigationMenu.Link>  </NavigationMenu.Item>   <NavigationMenu.Indicator className="NavigationMenuIndicator">  <div className="Arrow" />  </NavigationMenu.Indicator>  </NavigationMenu.List>   <div className="ViewportPosition">  <NavigationMenu.Viewport className="NavigationMenuViewport" />  </div>  </NavigationMenu.Root> 	); };  const ListItem = React.forwardRef( 	({ className, children, title, ...props }, forwardedRef) => (  <li>  <NavigationMenu.Link asChild>  <a className={classNames("ListItemLink", className)} {...props} ref={forwardedRef} >  <div className="ListItemHeading">{title}</div>  <p className="ListItemText">{children}</p>  </a>  </NavigationMenu.Link>  </li> 	), );  export default NavigationMenuDemo; 

## Features

Can be controlled or uncontrolled.

Flexible layout structure with managed tab focus.

Supports submenus.

Optional active item indicator.

Full keyboard navigation.

Exposes CSS variables for advanced animation.

Supports custom timings.

## Component Reference Links

Version: 1.2.13

Size: 11.9 kB

View source

Report an issue

ARIA design pattern

## Installation

Install the component from your command line.

    npm install @radix-ui/react-navigation-menu 

## Anatomy

Import all parts and piece them together.

    import { NavigationMenu } from "radix-ui";  export default () => ( 	<NavigationMenu.Root>  <NavigationMenu.List>  <NavigationMenu.Item>  <NavigationMenu.Trigger />  <NavigationMenu.Content>  <NavigationMenu.Link />  </NavigationMenu.Content>  </NavigationMenu.Item>   <NavigationMenu.Item>  <NavigationMenu.Link />  </NavigationMenu.Item>   <NavigationMenu.Item>  <NavigationMenu.Trigger />  <NavigationMenu.Content>  <NavigationMenu.Sub>  <NavigationMenu.List />  <NavigationMenu.Viewport />  </NavigationMenu.Sub>  </NavigationMenu.Content>  </NavigationMenu.Item>   <NavigationMenu.Indicator />  </NavigationMenu.List>   <NavigationMenu.Viewport /> 	</NavigationMenu.Root> ); 

## API Reference

### Root

Contains all the parts of a navigation menu.

| Prop | Type | Default |
| --- | --- | --- |
| 
`defaultValue`

Prop description

 | 

`string`



 | No default value |
| 

`value`

Prop description

 | 

`string`



 | No default value |
| 

`onValueChange`

Prop description

 | 

`function`

See full type

 | No default value |
| 

`delayDuration`

Prop description

 | 

`number`



 | `200` |
| 

`skipDelayDuration`

Prop description

 | 

`number`



 | `300` |
| 

`dir`

Prop description

 | 

`enum`

See full type

 | No default value |
| 

`orientation`

Prop description

 | 

`enum`

See full type

 | `"horizontal"` |

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

### Sub

Signifies a submenu. Use it in place of the root part when nested to create a submenu.

| Prop | Type | Default |
| --- | --- | --- |
| 
`defaultValue`

Prop description

 | 

`string`



 | No default value |
| 

`value`

Prop description

 | 

`string`



 | No default value |
| 

`onValueChange`

Prop description

 | 

`function`

See full type

 | No default value |
| 

`orientation`

Prop description

 | 

`enum`

See full type

 | `"horizontal"` |

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

### List

Contains the top level menu items.

| Prop | Type | Default |
| --- | --- | --- |
| 
`asChild`

Prop description

 | 

`boolean`



 | `false` |

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

### Item

A top level menu item, contains a link or trigger with content combination.

| Prop | Type | Default |
| --- | --- | --- |
| 
`asChild`

Prop description

 | 

`boolean`



 | `false` |
| 

`value`

Prop description

 | 

`string`



 | No default value |

### Trigger

The button that toggles the content.

| Prop | Type | Default |
| --- | --- | --- |
| 
`asChild`

Prop description

 | 

`boolean`



 | `false` |

| Data attribute | Values |
| --- | --- |
| `[data-state]` | `"open" | "closed"` |
| `[data-disabled]` | 
Present when disabled

 |

### Content

Contains the content associated with each trigger.

| Prop | Type | Default |
| --- | --- | --- |
| 
`asChild`

Prop description

 | 

`boolean`



 | `false` |
| 

`onEscapeKeyDown`

Prop description

 | 

`function`

See full type

 | No default value |
| 

`onPointerDownOutside`

Prop description

 | 

`function`

See full type

 | No default value |
| 

`onFocusOutside`

Prop description

 | 

`function`

See full type

 | No default value |
| 

`onInteractOutside`

Prop description

 | 

`function`

See full type

 | No default value |
| 

`forceMount`

Prop description

 | 

`boolean`



 | No default value |

| Data attribute | Values |
| --- | --- |
| `[data-state]` | `"open" | "closed"` |
| `[data-motion]` | `"to-start" | "to-end" | "from-start" | "from-end"` |
| `[data-orientation]` | `"vertical" | "horizontal"` |

### Link

A navigational link.

| Prop | Type | Default |
| --- | --- | --- |
| 
`asChild`

Prop description

 | 

`boolean`



 | `false` |
| 

`active`

Prop description

 | 

`boolean`



 | `false` |
| 

`onSelect`

Prop description

 | 

`function`

See full type

 | No default value |

| Data attribute | Values |
| --- | --- |
| `[data-active]` | 
Present when active

 |

### Indicator

An optional indicator element that renders below the list, is used to highlight the currently active trigger.

| Prop | Type | Default |
| --- | --- | --- |
| 
`asChild`

Prop description

 | 

`boolean`



 | `false` |
| 

`forceMount`

Prop description

 | 

`boolean`



 | No default value |

| Data attribute | Values |
| --- | --- |
| `[data-state]` | `"visible" | "hidden"` |
| `[data-orientation]` | `"vertical" | "horizontal"` |

### Viewport

An optional viewport element that is used to render active content outside of the list.

| Prop | Type | Default |
| --- | --- | --- |
| 
`asChild`

Prop description

 | 

`boolean`



 | `false` |
| 

`forceMount`

Prop description

 | 

`boolean`



 | No default value |

| Data attribute | Values |
| --- | --- |
| `[data-state]` | `"open" | "closed"` |
| `[data-orientation]` | `"vertical" | "horizontal"` |

| CSS Variable | Description |
| --- | --- |
| `--radix-navigation-menu-viewport-width` | The width of the viewport when visible/hidden, computed from the active content |
| `--radix-navigation-menu-viewport-height` | The height of the viewport when visible/hidden, computed from the active content |

## Examples

### Vertical

You can create a vertical menu by using the `orientation` prop.

    <NavigationMenu.Root orientation="vertical"> 	<NavigationMenu.List>  <NavigationMenu.Item>  <NavigationMenu.Trigger>Item one</NavigationMenu.Trigger>  <NavigationMenu.Content>Item one content</NavigationMenu.Content>  </NavigationMenu.Item>  <NavigationMenu.Item>  <NavigationMenu.Trigger>Item two</NavigationMenu.Trigger>  <NavigationMenu.Content>Item Two content</NavigationMenu.Content>  </NavigationMenu.Item> 	</NavigationMenu.List> </NavigationMenu.Root> 

### Flexible layouts

Use the `Viewport` part when you need extra control over where `Content` is rendered. This can be helpful when your design requires an adjusted DOM structure or if you need flexibility to achieve advanced animation. Tab focus will be maintained automatically.

    <NavigationMenu.Root> 	<NavigationMenu.List>  <NavigationMenu.Item>  <NavigationMenu.Trigger>Item one</NavigationMenu.Trigger>  <NavigationMenu.Content>Item one content</NavigationMenu.Content>  </NavigationMenu.Item>  <NavigationMenu.Item>  <NavigationMenu.Trigger>Item two</NavigationMenu.Trigger>  <NavigationMenu.Content>Item two content</NavigationMenu.Content>  </NavigationMenu.Item> 	</NavigationMenu.List>  	{/* NavigationMenu.Content will be rendered here when active */} 	<NavigationMenu.Viewport /> </NavigationMenu.Root> 

### With indicator

You can use the optional `Indicator` part to highlight the currently active `Trigger`, this is useful when you want to provide an animated visual cue such as an arrow or highlight to accompany the `Viewport`.

    // index.jsx import { NavigationMenu } from "radix-ui"; import "./styles.css";  export default () => ( 	<NavigationMenu.Root>  <NavigationMenu.List>  <NavigationMenu.Item>  <NavigationMenu.Trigger>Item one</NavigationMenu.Trigger>  <NavigationMenu.Content>Item one content</NavigationMenu.Content>  </NavigationMenu.Item>  <NavigationMenu.Item>  <NavigationMenu.Trigger>Item two</NavigationMenu.Trigger>  <NavigationMenu.Content>Item two content</NavigationMenu.Content>  </NavigationMenu.Item>   <NavigationMenu.Indicator className="NavigationMenuIndicator" />  </NavigationMenu.List>   <NavigationMenu.Viewport /> 	</NavigationMenu.Root> ); 

    /* styles.css */ .NavigationMenuIndicator { 	background-color: grey; } .NavigationMenuIndicator[data-orientation="horizontal"] { 	height: 3px; 	transition:  width,  transform,  250ms ease; } 

### With submenus

Create a submenu by nesting your `NavigationMenu` and using the `Sub` part in place of its `Root`. Submenus work differently to `Root` navigation menus and are similar to `Tabs` in that one item should always be active, so be sure to assign and set a `defaultValue`.

    <NavigationMenu.Root> 	<NavigationMenu.List>  <NavigationMenu.Item>  <NavigationMenu.Trigger>Item one</NavigationMenu.Trigger>  <NavigationMenu.Content>Item one content</NavigationMenu.Content>  </NavigationMenu.Item>  <NavigationMenu.Item>  <NavigationMenu.Trigger>Item two</NavigationMenu.Trigger>  <NavigationMenu.Content>  <NavigationMenu.Sub defaultValue="sub1">  <NavigationMenu.List>  <NavigationMenu.Item value="sub1">  <NavigationMenu.Trigger>Sub item one</NavigationMenu.Trigger>  <NavigationMenu.Content>  Sub item one content  </NavigationMenu.Content>  </NavigationMenu.Item>  <NavigationMenu.Item value="sub2">  <NavigationMenu.Trigger>Sub item two</NavigationMenu.Trigger>  <NavigationMenu.Content>  Sub item two content  </NavigationMenu.Content>  </NavigationMenu.Item>  </NavigationMenu.List>  </NavigationMenu.Sub>  </NavigationMenu.Content>  </NavigationMenu.Item> 	</NavigationMenu.List> </NavigationMenu.Root> 

### With client side routing

If you need to use the `Link` component provided by your routing package then we recommend composing with `NavigationMenu.Link` via a custom component. This will ensure accessibility and consistent keyboard control is maintained. Here's an example using Next.js:

    // index.jsx import { usePathname } from "next/navigation"; import NextLink from "next/link"; import { NavigationMenu } from "radix-ui"; import "./styles.css";  const Link = ({ href, ...props }) => { 	const pathname = usePathname(); 	const isActive = href === pathname;  	return (  <NavigationMenu.Link asChild active={isActive}>  <NextLink href={href} className="NavigationMenuLink" {...props} />  </NavigationMenu.Link> 	); };  export default () => ( 	<NavigationMenu.Root>  <NavigationMenu.List>  <NavigationMenu.Item>  <Link href="/">Home</Link>  </NavigationMenu.Item>  <NavigationMenu.Item>  <Link href="/about">About</Link>  </NavigationMenu.Item>  </NavigationMenu.List> 	</NavigationMenu.Root> ); 

    /* styles.css */ .NavigationMenuLink { 	text-decoration: none; } .NavigationMenuLink[data-active] { 	text-decoration: "underline"; } 

### Advanced animation

We expose `--radix-navigation-menu-viewport-[width|height]` and `data-motion['from-start'|'to-start'|'from-end'|'to-end']` attributes to allow you to animate `Viewport` size and `Content` position based on the enter/exit direction.

Combining these with `position: absolute;` allows you to create smooth overlapping animation effects when moving between items.

    // index.jsx import { NavigationMenu } from "radix-ui"; import "./styles.css";  export default () => ( 	<NavigationMenu.Root>  <NavigationMenu.List>  <NavigationMenu.Item>  <NavigationMenu.Trigger>Item one</NavigationMenu.Trigger>  <NavigationMenu.Content className="NavigationMenuContent">  Item one content  </NavigationMenu.Content>  </NavigationMenu.Item>  <NavigationMenu.Item>  <NavigationMenu.Trigger>Item two</NavigationMenu.Trigger>  <NavigationMenu.Content className="NavigationMenuContent">  Item two content  </NavigationMenu.Content>  </NavigationMenu.Item>  </NavigationMenu.List>   <NavigationMenu.Viewport className="NavigationMenuViewport" /> 	</NavigationMenu.Root> ); 

    /* styles.css */ .NavigationMenuContent { 	position: absolute; 	top: 0; 	left: 0; 	animation-duration: 250ms; 	animation-timing-function: ease; } .NavigationMenuContent[data-motion="from-start"] { 	animation-name: enterFromLeft; } .NavigationMenuContent[data-motion="from-end"] { 	animation-name: enterFromRight; } .NavigationMenuContent[data-motion="to-start"] { 	animation-name: exitToLeft; } .NavigationMenuContent[data-motion="to-end"] { 	animation-name: exitToRight; }  .NavigationMenuViewport { 	position: relative; 	width: var(--radix-navigation-menu-viewport-width); 	height: var(--radix-navigation-menu-viewport-height); 	transition:  width,  height,  250ms ease; }  @keyframes enterFromRight { 	from {  opacity: 0;  transform: translateX(200px); 	} 	to {  opacity: 1;  transform: translateX(0); 	} }  @keyframes enterFromLeft { 	from {  opacity: 0;  transform: translateX(-200px); 	} 	to {  opacity: 1;  transform: translateX(0); 	} }  @keyframes exitToRight { 	from {  opacity: 1;  transform: translateX(0); 	} 	to {  opacity: 0;  transform: translateX(200px); 	} }  @keyframes exitToLeft { 	from {  opacity: 1;  transform: translateX(0); 	} 	to {  opacity: 0;  transform: translateX(-200px); 	} } 

## Accessibility

Adheres to the `navigation` role requirements.

### Differences to menubar

`NavigationMenu` should not be confused with `menubar`, although this primitive shares the name `menu` in the colloquial sense to refer to a set of navigation links, it does not use the WAI-ARIA `menu` role. This is because `menu` and `menubars` behave like native operating system menus most commonly found in desktop application windows, as such they feature complex functionality like composite focus management and first-character navigation.

These features are often considered unnecessary for website navigation and at worst can confuse users who are familiar with established website patterns.

See the W3C Disclosure Navigation Menu example for more information.

### Link usage and aria-current

It's important to use `NavigationMenu.Link` for all navigational links within a menu, this not only applies to the main list but also within any content rendered via `NavigationMenu.Content`. This will ensure consistent keyboard interactions and accessibility while also giving access to the `active` prop for setting `aria-current` and the active styles. See this example for more information on usage with third party routing components.

### Keyboard Interactions

| Key | Description |
| --- | --- |
| 
SpaceEnter

 | When focus is on `NavigationMenu.Trigger`, opens the content. |
| 

Tab

 | Moves focus to the next focusable element. |
| 

ArrowDown

 | When `horizontal` and focus is on an open `NavigationMenu.Trigger`, moves focus into `NavigationMenu.Content`.  
Moves focus to the next `NavigationMenu.Trigger` or `NavigationMenu.Link`. |
| 

ArrowUp

 | Moves focus to the previous `NavigationMenu.Trigger` or `NavigationMenu.Link`. |
| 

ArrowRightArrowLeft

 | When `vertical` and focus is on an open `NavigationMenu.Trigger`, moves focus into its `NavigationMenu.Content`.  
Moves focus to the next / previous `NavigationMenu.Trigger` or `NavigationMenu.Link`. |
| 

HomeEnd

 | Moves focus to the first/last `NavigationMenu.Trigger` or `NavigationMenu.Link`. |
| 

Esc

 | Closes open `NavigationMenu.Content` and moves focus to its `NavigationMenu.Trigger`. |

#### Quick nav

*   Installation
*   Anatomy
*   API Reference
*   Root
*   Sub
*   List
*   Item
*   Trigger
*   Content
*   Link
*   Indicator
*   Viewport
*   Examples
*   Vertical
*   Flexible layouts
*   With indicator
*   With submenus
*   With client side routing
*   Advanced animation
*   Accessibility
*   Differences to menubar
*   Link usage and aria-current
*   Keyboard Interactions

PreviousMenubar

NextOne-Time Password Field

Edit this page on GitHub.

---

## Page: https://www.radix-ui.com/primitives/docs/components/one-time-password-field

Components

# One-Time Password Field

A group of single-character text inputs to handle one-time password verification.

index.jsxindex.jsxstyles.cssstyles.css

CSS

    import * as React from "react"; import { unstable_OneTimePasswordField as OneTimePasswordField } from "radix-ui";  const OneTimePasswordFieldDemo = () => ( 	<OneTimePasswordField.Root className="OTPRoot">  <OneTimePasswordField.Input className="OTPInput" />  <OneTimePasswordField.Input className="OTPInput" />  <OneTimePasswordField.Input className="OTPInput" />  <OneTimePasswordField.Input className="OTPInput" />  <OneTimePasswordField.Input className="OTPInput" />  <OneTimePasswordField.Input className="OTPInput" />  <OneTimePasswordField.HiddenInput /> 	</OneTimePasswordField.Root> );  export default OneTimePasswordFieldDemo; 

## Features

Keyboard navigation mimicking the behavior of a single input field

Overriding values on paste

Password manager autofill support

Input validation for numeric and alphanumeric values

Auto-submit on completion

Hidden input to provide a single value to form data

## Component Reference Links

Version: 0.1.7

Size: 11.5 kB

View source

Report an issue

## Anatomy

Import all parts and piece them together.

    import { unstable_OneTimePasswordField as OneTimePasswordField } from "radix-ui";  export default () => ( 	<OneTimePasswordField.Root>  {/* one Input for each character of the value */}  <OneTimePasswordField.Input />  {/* single HiddenInput to store the full value */}  <OneTimePasswordField.HiddenInput /> 	</OneTimePasswordField.Root> ); 

## API Reference

### Root

Contains all the parts of a one-time password field.

| Prop | Type | Default |
| --- | --- | --- |
| 
`asChild`

Prop description

 | 

`boolean`



 | `false` |
| 

`autoComplete`

Prop description

 | 

`enum`

See full type

 | `one-time-code` |
| 

`autoFocus`

Prop description

 | 

`boolean`



 | No default value |
| 

`value`

Prop description

 | 

`string`



 | No default value |
| 

`defaultValue`

Prop description

 | 

`string`



 | No default value |
| 

`onValueChange`

Prop description

 | 

`function`

See full type

 | No default value |
| 

`autoSubmit`

Prop description

 | 

`boolean`



 | `false` |
| 

`onAutoSubmit`

Prop description

 | 

`function`

See full type

 | No default value |
| 

`disabled`

Prop description

 | 

`boolean`



 | `false` |
| 

`dir`

Prop description

 | 

`enum`

See full type

 | `"ltr"` |
| 

`orientation`

Prop description

 | 

`enum`

See full type

 | `"vertical"` |
| 

`form`

Prop description

 | 

`string`



 | No default value |
| 

`name`

Prop description

 | 

`string`



 | No default value |
| 

`placeholder`

Prop description

 | 

`string`



 | No default value |
| 

`readOnly`

Prop description

 | 

`boolean`



 | `false` |
| 

`sanitizeValue`

Prop description

 | 

`function`

See full type

 | No default value |
| 

`type`

Prop description

 | 

`enum`

See full type

 | `"text"` |
| 

`validationType`

Prop description

 | 

`enum`

See full type

 | `"numeric"` |

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

### Input

Renders a text input representing a single character in the value.

| Prop | Type | Default |
| --- | --- | --- |
| 
`asChild`

Prop description

 | 

`boolean`



 | `false` |

| Data attribute | Values |
| --- | --- |
| `[data-index]` | 
The index corresponding with the index of the character relative to the root field value

 |

### HiddenInput

| Prop | Type | Default |
| --- | --- | --- |
| 
`asChild`

Prop description

 | 

`boolean`



 | `false` |

## Examples

### Basic usage

    // This will render a field with 6 inputs, for use with // 6-character passwords. Render an Input component for // each character of accepted password's length. <OneTimePasswordField.Root> 	<OneTimePasswordField.Input /> 	<OneTimePasswordField.Input /> 	<OneTimePasswordField.Input /> 	<OneTimePasswordField.Input /> 	<OneTimePasswordField.Input /> 	<OneTimePasswordField.Input /> 	<OneTimePasswordField.HiddenInput /> </OneTimePasswordField.Root> 

### Segmented controls

The `Root` component accepts arbitrary children, so rendering a visually segmented list is as simple as rendering separators between inputs. We recommend hiding decorative elements from assistive tech with `aria-hidden` and avoid rendering other meaningful content within `Root` since each child element is expected to belong to the parent with the `group` role.

    <OneTimePasswordField.Root> 	<OneTimePasswordField.Input /> 	<Separator.Root aria-hidden /> 	<OneTimePasswordField.Input /> 	<Separator.Root aria-hidden /> 	<OneTimePasswordField.Input /> 	<Separator.Root aria-hidden /> 	<OneTimePasswordField.Input /> 	<OneTimePasswordField.HiddenInput /> </OneTimePasswordField.Root> 

### Auto-submit form when password is entered

Use the `autoSubmit` prop to submit an associated form when all inputs are filled.

    function Verify({ validCode }) { 	const PASSWORD_LENGTH = 6; 	function handleSubmit(event) {  event.preventDefault();  const formData = event.formData;  if (formData.get("otp") === validCode) {  redirect("/authenticated");  } else {  window.alert("Invalid code");  } 	} 	return (  <form onSubmit={handleSubmit}>  <OneTimePasswordField.Root name="otp" autoSubmit>  {PASSWORD_LENGTH.map((_, i) => (  <OneTimePasswordField.Input key={i} />  ))}  {/* HiddenInput is required for the form to have data associated with the field */}  <OneTimePasswordField.HiddenInput />  </OneTimePasswordField.Root>  <button>Submit</button>  </form> 	); } 

### Controlled value

    function Verify({ validCode }) { 	const [value, setValue] = React.useState(""); 	const PASSWORD_LENGTH = 6; 	function handleSubmit() {  if (value === validCode) {  redirect("/authenticated");  } else {  window.alert("Invalid code");  } 	} 	return (  <OneTimePasswordField.Root autoSubmit value={value} onAutoSubmit={handleSubmit} onValueChange={setValue} >  {PASSWORD_LENGTH.map((_, i) => (  <OneTimePasswordField.Input key={i} />  ))}  </OneTimePasswordField.Root> 	); } 

## Accessibility

At the time of writing, there is no singular established pattern in WCAG guidelines for implementing one-time password fields as separate inputs. The behavior aims to get as close as possible to having the field act as a single input, with a few exceptions to match user expectations based on our initial research, testing, and gathering feedback.

This component is implemented as `input` elements within a container with a role of `group` to indicate that child inputs are related. Inputs can be navigated and focused using direction keys, and typing input will move focus to the next input until the last input is reached.

Pasting a value into the field will replace the contents of all inputs, regardless of the currently focused input. Based on our research this seems to align with most user expectations, where values are often pasted from password-managers or an email.

### Keyboard Interactions

| Key | Description |
| --- | --- |
| 
Enter

 | Attempts to submit an associated `form` if one is found |
| 

Tab

 | Moves focus to the next focusable element outside of the `Root` |
| 

Shift + Tab

 | Moves focus to the previous focusable element outside of the `Root` |
| 

ArrowDown

 | Moves focus to the next `Input` when `orientation` is `vertical`. |
| 

ArrowUp

 | Moves focus to the previous `Input` when `orientation` is `vertical`. |
| 

ArrowRight

 | Moves focus to the next `Input` when `orientation` is `horizontal`. |
| 

ArrowLeft

 | Moves focus to the previous `Input` when `orientation` is `horizontal`. |
| 

Home

 | Moves focus to the first `Input`. |
| 

End

 | Moves focus to the last `Input`. |
| 

Delete

 | Removes the character in the currently focused `Input` and shifts later values back |
| 

Backspace

 | Removes the character in the currently focused `Input` and moves focus to the previous `Input` |
| 

Command + Backspace

 | Clears the value of all `Input` elements |

#### Quick nav

*   Anatomy
*   API Reference
*   Root
*   Input
*   HiddenInput
*   Examples
*   Basic usage
*   Segmented controls
*   Auto-submit form when password is entered
*   Controlled value
*   Accessibility
*   Keyboard Interactions

PreviousNavigation Menu

NextPassword Toggle Field

Edit this page on GitHub.

---

## Page: https://www.radix-ui.com/primitives/docs/components/password-toggle-field

Components

# Password Toggle Field

A password input field with an integrated button to toggle the value's visibility.

index.jsxindex.jsxstyles.cssstyles.css

CSS

    import * as React from "react"; import { unstable_PasswordToggleField as PasswordToggleField } from "radix-ui"; import { EyeClosedIcon, EyeOpenIcon } from "@radix-ui/react-icons";  const PasswordToggleFieldDemo = () => ( 	<PasswordToggleField.Root>  <div className="Root">  <PasswordToggleField.Input className="Input" />  <PasswordToggleField.Toggle className="Toggle">  <PasswordToggleField.Icon visible={<EyeOpenIcon />} hidden={<EyeClosedIcon />} />  </PasswordToggleField.Toggle>  </div> 	</PasswordToggleField.Root> );  export default PasswordToggleFieldDemo; 

## Features

Returns focus to the input when toggling with a pointer

Maintains button focus when toggling with keyboard or virtual navigation

Resets visibility to hidden after form submission to prevent accidental storage

Implicit accessible labeling for icon-based toggle buttons

## Component Reference Links

View source

Report an issue

## Anatomy

Import all parts and piece them together.

    import { unstable_PasswordToggleField as PasswordToggleField } from "radix-ui"; import { EyeClosedIcon, EyeOpenIcon } from "@radix-ui/react-icons";  export default () => ( 	<PasswordToggleField.Root>  <PasswordToggleField.Input />  <PasswordToggleField.Toggle>  <PasswordToggleField.Icon visible={<EyeOpenIcon />} hidden={<EyeClosedIcon />} />  </PasswordToggleField.Toggle> 	</PasswordToggleField.Root> ); 

## API Reference

### Root

Contains all the parts of a password toggle field.

| Prop | Type | Default |
| --- | --- | --- |
| 
`id`

Prop description

 | 

`string`



 | No default value |
| 

`visible`

Prop description

 | 

`boolean`



 | No default value |
| 

`defaultVisible`

Prop description

 | 

`boolean`



 | No default value |
| 

`onVisiblityChange`

Prop description

 | 

`function`

See full type

 | No default value |

### Input

Renders a the input containing the password value.

| Prop | Type | Default |
| --- | --- | --- |
| 
`asChild`

Prop description

 | 

`boolean`



 | `false` |
| 

`autoComplete`

Prop description

 | 

`enum`

See full type

 | `"current-password"` |

### Toggle

| Prop | Type | Default |
| --- | --- | --- |
| 
`asChild`

Prop description

 | 

`boolean`



 | `false` |

### Slot

| Prop | Type | Default |
| --- | --- | --- |
| 
`render`

Prop description

 | 

`function`

See full type

 | No default value |
| 

`visible`

Prop description

 | 

`boolean`



 | No default value |
| 

`hidden`

Prop description

 | 

`boolean`



 | No default value |

### Icon

| Prop | Type | Default |
| --- | --- | --- |
| 
`asChild`

Prop description

 | 

`boolean`



 | `false` |
| 

`visible*`

Prop description

 | 

`boolean`



 | No default value |
| 

`hidden*`

Prop description

 | 

`boolean`



 | No default value |

## Examples

### Basic usage

    <PasswordToggleField.Root> 	<PasswordToggleField.Input /> 	<PasswordToggleField.Toggle>  <PasswordToggleField.Icon visible={<EyeOpenIcon />} hidden={<EyeClosedIcon />} /> 	</PasswordToggleField.Toggle> </PasswordToggleField.Root> 

### With `Slot`

    <PasswordToggleField.Root> 	<PasswordToggleField.Input /> 	<PasswordToggleField.Toggle>  <PasswordToggleField.Slot visible="🙊" hidden="🙈" /> 	</PasswordToggleField.Toggle> </PasswordToggleField.Root> 

### With `Slot` + `render` prop

    <PasswordToggleField.Root> 	<PasswordToggleField.Input /> 	<PasswordToggleField.Toggle>  <PasswordToggleField.Slot render={({ visible }) => ( <svg aria-hidden viewBox="0 0 2 2" xmlns="http://www.w3.org/2000/svg">  <path d={visible ? "M1 1 L2 2" : "M2 1 L1 2"} />  </svg> )} /> 	</PasswordToggleField.Toggle> </PasswordToggleField.Root> 

#### Quick nav

*   Anatomy
*   API Reference
*   Root
*   Input
*   Toggle
*   Slot
*   Icon
*   Examples
*   Basic usage
*   With Slot
*   With Slot + render prop

PreviousOne-Time Password Field

NextPopover

Edit this page on GitHub.

---

## Page: https://www.radix-ui.com/primitives/docs/components/popover

Components

# Popover

Displays rich content in a portal, triggered by a button.

index.jsxindex.jsxstyles.cssstyles.css

CSS

    import * as React from "react"; import { Popover } from "radix-ui"; import { MixerHorizontalIcon, Cross2Icon } from "@radix-ui/react-icons"; import "./styles.css";  const PopoverDemo = () => ( 	<Popover.Root>  <Popover.Trigger asChild>  <button className="IconButton" aria-label="Update dimensions">  <MixerHorizontalIcon />  </button>  </Popover.Trigger>  <Popover.Portal>  <Popover.Content className="PopoverContent" sideOffset={5}>  <div style={{ display: "flex", flexDirection: "column", gap: 10 }}>  <p className="Text" style={{ marginBottom: 10 }}>  Dimensions  </p>  <fieldset className="Fieldset">  <label className="Label" htmlFor="width">  Width  </label>  <input className="Input" id="width" defaultValue="100%" />  </fieldset>  <fieldset className="Fieldset">  <label className="Label" htmlFor="maxWidth">  Max. width  </label>  <input className="Input" id="maxWidth" defaultValue="300px" />  </fieldset>  <fieldset className="Fieldset">  <label className="Label" htmlFor="height">  Height  </label>  <input className="Input" id="height" defaultValue="25px" />  </fieldset>  <fieldset className="Fieldset">  <label className="Label" htmlFor="maxHeight">  Max. height  </label>  <input className="Input" id="maxHeight" defaultValue="none" />  </fieldset>  </div>  <Popover.Close className="PopoverClose" aria-label="Close">  <Cross2Icon />  </Popover.Close>  <Popover.Arrow className="PopoverArrow" />  </Popover.Content>  </Popover.Portal> 	</Popover.Root> );  export default PopoverDemo; 

## Features

Can be controlled or uncontrolled.

Customize side, alignment, offsets, collision handling.

Optionally render a pointing arrow.

Focus is fully managed and customizable.

Supports modal and non-modal modes.

Dismissing and layering behavior is highly customizable.

## Component Reference Links

Version: 1.1.14

Size: 28.08 kB

View source

Report an issue

ARIA design pattern

## Installation

Install the component from your command line.

    npm install @radix-ui/react-popover 

## Anatomy

Import all parts and piece them together.

    import { Popover } from "radix-ui";  export default () => ( 	<Popover.Root>  <Popover.Trigger />  <Popover.Anchor />  <Popover.Portal>  <Popover.Content>  <Popover.Close />  <Popover.Arrow />  </Popover.Content>  </Popover.Portal> 	</Popover.Root> ); 

## API Reference

### Root

Contains all the parts of a popover.

| Prop | Type | Default |
| --- | --- | --- |
| 
`defaultOpen`

Prop description

 | 

`boolean`



 | No default value |
| 

`open`

Prop description

 | 

`boolean`



 | No default value |
| 

`onOpenChange`

Prop description

 | 

`function`

See full type

 | No default value |
| 

`modal`

Prop description

 | 

`boolean`



 | `false` |

### Trigger

The button that toggles the popover. By default, the `Popover.Content` will position itself against the trigger.

| Prop | Type | Default |
| --- | --- | --- |
| 
`asChild`

Prop description

 | 

`boolean`



 | `false` |

| Data attribute | Values |
| --- | --- |
| `[data-state]` | `"open" | "closed"` |

### Anchor

An optional element to position the `Popover.Content` against. If this part is not used, the content will position alongside the `Popover.Trigger`.

| Prop | Type | Default |
| --- | --- | --- |
| 
`asChild`

Prop description

 | 

`boolean`



 | `false` |

### Portal

When used, portals the content part into the `body`.

| Prop | Type | Default |
| --- | --- | --- |
| 
`forceMount`

Prop description

 | 

`boolean`



 | No default value |
| 

`container`

Prop description

 | 

`HTMLElement`



 | `document.body` |

### Content

The component that pops out when the popover is open.

| Prop | Type | Default |
| --- | --- | --- |
| 
`asChild`

Prop description

 | 

`boolean`



 | `false` |
| 

`onOpenAutoFocus`

Prop description

 | 

`function`

See full type

 | No default value |
| 

`onCloseAutoFocus`

Prop description

 | 

`function`

See full type

 | No default value |
| 

`onEscapeKeyDown`

Prop description

 | 

`function`

See full type

 | No default value |
| 

`onPointerDownOutside`

Prop description

 | 

`function`

See full type

 | No default value |
| 

`onFocusOutside`

Prop description

 | 

`function`

See full type

 | No default value |
| 

`onInteractOutside`

Prop description

 | 

`function`

See full type

 | No default value |
| 

`forceMount`

Prop description

 | 

`boolean`



 | No default value |
| 

`side`

Prop description

 | 

`enum`

See full type

 | `"bottom"` |
| 

`sideOffset`

Prop description

 | 

`number`



 | `0` |
| 

`align`

Prop description

 | 

`enum`

See full type

 | `"center"` |
| 

`alignOffset`

Prop description

 | 

`number`



 | `0` |
| 

`avoidCollisions`

Prop description

 | 

`boolean`



 | `true` |
| 

`collisionBoundary`

Prop description

 | 

`Boundary`

See full type

 | `[]` |
| 

`collisionPadding`

Prop description

 | 

`number | Padding`

See full type

 | `0` |
| 

`arrowPadding`

Prop description

 | 

`number`



 | `0` |
| 

`sticky`

Prop description

 | 

`enum`

See full type

 | `"partial"` |
| 

`hideWhenDetached`

Prop description

 | 

`boolean`



 | `false` |

| Data attribute | Values |
| --- | --- |
| `[data-state]` | `"open" | "closed"` |
| `[data-side]` | `"left" | "right" | "bottom" | "top"` |
| `[data-align]` | `"start" | "end" | "center"` |

| CSS Variable | Description |
| --- | --- |
| `--radix-popover-content-transform-origin` | The `transform-origin` computed from the content and arrow positions/offsets |
| `--radix-popover-content-available-width` | The remaining width between the trigger and the boundary edge |
| `--radix-popover-content-available-height` | The remaining height between the trigger and the boundary edge |
| `--radix-popover-trigger-width` | The width of the trigger |
| `--radix-popover-trigger-height` | The height of the trigger |

### Arrow

An optional arrow element to render alongside the popover. This can be used to help visually link the anchor with the `Popover.Content`. Must be rendered inside `Popover.Content`.

| Prop | Type | Default |
| --- | --- | --- |
| 
`asChild`

Prop description

 | 

`boolean`



 | `false` |
| 

`width`

Prop description

 | 

`number`



 | `10` |
| 

`height`

Prop description

 | 

`number`



 | `5` |

### Close

The button that closes an open popover.

| Prop | Type | Default |
| --- | --- | --- |
| 
`asChild`

Prop description

 | 

`boolean`



 | `false` |

## Examples

### Constrain the content size

You may want to constrain the width of the content so that it matches the trigger width. You may also want to constrain its height to not exceed the viewport.

We expose several CSS custom properties such as `--radix-popover-trigger-width` and `--radix-popover-content-available-height` to support this. Use them to constrain the content dimensions.

    // index.jsx import { Popover } from "radix-ui"; import "./styles.css";  export default () => ( 	<Popover.Root>  <Popover.Trigger>…</Popover.Trigger>  <Popover.Portal>  <Popover.Content className="PopoverContent" sideOffset={5}>  …  </Popover.Content>  </Popover.Portal> 	</Popover.Root> ); 

    /* styles.css */ .PopoverContent { 	width: var(--radix-popover-trigger-width); 	max-height: var(--radix-popover-content-available-height); } 

### Origin-aware animations

We expose a CSS custom property `--radix-popover-content-transform-origin`. Use it to animate the content from its computed origin based on `side`, `sideOffset`, `align`, `alignOffset` and any collisions.

    // index.jsx import { Popover } from "radix-ui"; import "./styles.css";  export default () => ( 	<Popover.Root>  <Popover.Trigger>…</Popover.Trigger>  <Popover.Portal>  <Popover.Content className="PopoverContent">…</Popover.Content>  </Popover.Portal> 	</Popover.Root> ); 

    /* styles.css */ .PopoverContent { 	transform-origin: var(--radix-popover-content-transform-origin); 	animation: scaleIn 0.5s ease-out; }  @keyframes scaleIn { 	from {  opacity: 0;  transform: scale(0); 	} 	to {  opacity: 1;  transform: scale(1); 	} } 

### Collision-aware animations

We expose `data-side` and `data-align` attributes. Their values will change at runtime to reflect collisions. Use them to create collision and direction-aware animations.

    // index.jsx import { Popover } from "radix-ui"; import "./styles.css";  export default () => ( 	<Popover.Root>  <Popover.Trigger>…</Popover.Trigger>  <Popover.Portal>  <Popover.Content className="PopoverContent">…</Popover.Content>  </Popover.Portal> 	</Popover.Root> ); 

    /* styles.css */ .PopoverContent { 	animation-duration: 0.6s; 	animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1); } .PopoverContent[data-side="top"] { 	animation-name: slideUp; } .PopoverContent[data-side="bottom"] { 	animation-name: slideDown; }  @keyframes slideDown { 	from {  opacity: 0;  transform: translateY(-10px); 	} 	to {  opacity: 1;  transform: translateY(0); 	} }  @keyframes slideUp { 	from {  opacity: 0;  transform: translateY(10px); 	} 	to {  opacity: 1;  transform: translateY(0); 	} } 

### With custom anchor

You can anchor the content to another element if you do not want to use the trigger as the anchor.

    // index.jsx import { Popover } from "radix-ui"; import "./styles.css";  export default () => ( 	<Popover.Root>  <Popover.Anchor asChild>  <div className="Row">  Row as anchor <Popover.Trigger>Trigger</Popover.Trigger>  </div>  </Popover.Anchor>   <Popover.Portal>  <Popover.Content>…</Popover.Content>  </Popover.Portal> 	</Popover.Root> ); 

    /* styles.css */ .Row { 	background-color: gainsboro; 	padding: 20px; } 

## Accessibility

Adheres to the Dialog WAI-ARIA design pattern.

### Keyboard Interactions

| Key | Description |
| --- | --- |
| 
Space

 | Opens/closes the popover. |
| 

Enter

 | Opens/closes the popover. |
| 

Tab

 | Moves focus to the next focusable element |
| 

Shift + Tab

 | Moves focus to the previous focusable element |
| 

Esc

 | Closes the popover and moves focus to `Popover.Trigger`. |

## Custom APIs

Create your own API by abstracting the primitive parts into your own component.

#### Abstract the arrow and set default configuration

This example abstracts the `Popover.Arrow` part and sets a default `sideOffset` configuration.

#### Usage

    import { Popover, PopoverTrigger, PopoverContent } from "./your-popover";  export default () => ( 	<Popover>  <PopoverTrigger>Popover trigger</PopoverTrigger>  <PopoverContent>Popover content</PopoverContent> 	</Popover> ); 

#### Implementation

    // your-popover.jsx import * as React from "react"; import { Popover as PopoverPrimitive } from "radix-ui";  export const Popover = PopoverPrimitive.Root; export const PopoverTrigger = PopoverPrimitive.Trigger;  export const PopoverContent = React.forwardRef( 	({ children, ...props }, forwardedRef) => (  <PopoverPrimitive.Portal>  <PopoverPrimitive.Content sideOffset={5} {...props} ref={forwardedRef}>  {children}  <PopoverPrimitive.Arrow />  </PopoverPrimitive.Content>  </PopoverPrimitive.Portal> 	), ); 

#### Quick nav

*   Installation
*   Anatomy
*   API Reference
*   Root
*   Trigger
*   Anchor
*   Portal
*   Content
*   Arrow
*   Close
*   Examples
*   Constrain the content size
*   Origin-aware animations
*   Collision-aware animations
*   With custom anchor
*   Accessibility
*   Keyboard Interactions
*   Custom APIs

PreviousPassword Toggle Field

NextProgress

Edit this page on GitHub.

---

## Page: https://www.radix-ui.com/primitives/docs/components/progress

Components

# Progress

Displays an indicator showing the completion progress of a task, typically displayed as a progress bar.

index.jsxindex.jsxstyles.cssstyles.css

CSS

    import * as React from "react"; import { Progress } from "radix-ui"; import "./styles.css";  const ProgressDemo = () => { 	const [progress, setProgress] = React.useState(13);  	React.useEffect(() => {  const timer = setTimeout(() => setProgress(66), 500);  return () => clearTimeout(timer); 	}, []);  	return (  <Progress.Root className="ProgressRoot" value={progress}>  <Progress.Indicator className="ProgressIndicator" style={{ transform: `translateX(-${100 - progress}%)` }} />  </Progress.Root> 	); };  export default ProgressDemo; 

## Features

Provides context for assistive technology to read the progress of a task.

## Component Reference Links

Version: 1.1.7

Size: 2.62 kB

View source

Report an issue

ARIA design pattern

## Installation

Install the component from your command line.

    npm install @radix-ui/react-progress 

### Anatomy

Import all parts and piece them together.

    import { Progress } from "radix-ui";  export default () => ( 	<Progress.Root>  <Progress.Indicator /> 	</Progress.Root> ); 

## Accessibility

Adheres to the `progressbar` role requirements.

## API Reference

### Root

Contains all of the progress parts.

| Prop | Type | Default |
| --- | --- | --- |
| 
`asChild`

Prop description

 | 

`boolean`



 | `false` |
| 

`value`

Prop description

 | 

`number | null`



 | No default value |
| 

`max`

Prop description

 | 

`number`



 | No default value |
| 

`getValueLabel`

Prop description

 | 

`function`

See full type

 | No default value |

| Data attribute | Values |
| --- | --- |
| `[data-state]` | `"complete" | "indeterminate" | "loading"` |
| `[data-value]` | 
The current value

 |
| `[data-max]` | 

The max value

 |

### Indicator

Used to show the progress visually. It also makes progress accessible to assistive technologies.

| Prop | Type | Default |
| --- | --- | --- |
| 
`asChild`

Prop description

 | 

`boolean`



 | `false` |

| Data attribute | Values |
| --- | --- |
| `[data-state]` | `"complete" | "indeterminate" | "loading"` |
| `[data-value]` | 
The current value

 |
| `[data-max]` | 

The max value

 |

#### Quick nav

*   Installation
*   Anatomy
*   Accessibility
*   API Reference
*   Root
*   Indicator

PreviousPopover

NextRadio Group

Edit this page on GitHub.

---

## Page: https://www.radix-ui.com/primitives/docs/components/radio-group

Components

# Radio Group

A set of checkable buttons—known as radio buttons—where no more than one of the buttons can be checked at a time.

Default

Comfortable

Compact

index.jsxindex.jsxstyles.cssstyles.css

CSS

    import * as React from "react"; import { RadioGroup } from "radix-ui"; import "./styles.css";  const RadioGroupDemo = () => ( 	<form>  <RadioGroup.Root className="RadioGroupRoot" defaultValue="default" aria-label="View density" >  <div style={{ display: "flex", alignItems: "center" }}>  <RadioGroup.Item className="RadioGroupItem" value="default" id="r1">  <RadioGroup.Indicator className="RadioGroupIndicator" />  </RadioGroup.Item>  <label className="Label" htmlFor="r1">  Default  </label>  </div>  <div style={{ display: "flex", alignItems: "center" }}>  <RadioGroup.Item className="RadioGroupItem" value="comfortable" id="r2">  <RadioGroup.Indicator className="RadioGroupIndicator" />  </RadioGroup.Item>  <label className="Label" htmlFor="r2">  Comfortable  </label>  </div>  <div style={{ display: "flex", alignItems: "center" }}>  <RadioGroup.Item className="RadioGroupItem" value="compact" id="r3">  <RadioGroup.Indicator className="RadioGroupIndicator" />  </RadioGroup.Item>  <label className="Label" htmlFor="r3">  Compact  </label>  </div>  </RadioGroup.Root> 	</form> );  export default RadioGroupDemo; 

## Features

Full keyboard navigation.

Supports horizontal/vertical orientation.

Can be controlled or uncontrolled.

## Component Reference Links

Version: 1.3.7

Size: 9.88 kB

View source

Report an issue

ARIA design pattern

## Installation

Install the component from your command line.

    npm install @radix-ui/react-radio-group 

## Anatomy

Import all parts and piece them together.

    import { RadioGroup } from "radix-ui";  export default () => ( 	<RadioGroup.Root>  <RadioGroup.Item>  <RadioGroup.Indicator />  </RadioGroup.Item> 	</RadioGroup.Root> ); 

## API Reference

### Root

Contains all the parts of a radio group.

| Prop | Type | Default |
| --- | --- | --- |
| 
`asChild`

Prop description

 | 

`boolean`



 | `false` |
| 

`defaultValue`

Prop description

 | 

`string`



 | No default value |
| 

`value`

Prop description

 | 

`string`



 | No default value |
| 

`onValueChange`

Prop description

 | 

`function`

See full type

 | No default value |
| 

`disabled`

Prop description

 | 

`boolean`



 | No default value |
| 

`name`

Prop description

 | 

`string`



 | No default value |
| 

`required`

Prop description

 | 

`boolean`



 | No default value |
| 

`orientation`

Prop description

 | 

`enum`

See full type

 | `undefined` |
| 

`dir`

Prop description

 | 

`enum`

See full type

 | No default value |
| 

`loop`

Prop description

 | 

`boolean`



 | `true` |

| Data attribute | Values |
| --- | --- |
| `[data-disabled]` | 
Present when disabled

 |

### Item

An item in the group that can be checked. An `input` will also render when used within a `form` to ensure events propagate correctly.

| Prop | Type | Default |
| --- | --- | --- |
| 
`asChild`

Prop description

 | 

`boolean`



 | `false` |
| 

`value`

Prop description

 | 

`string`



 | No default value |
| 

`disabled`

Prop description

 | 

`boolean`



 | No default value |
| 

`required`

Prop description

 | 

`boolean`



 | No default value |

| Data attribute | Values |
| --- | --- |
| `[data-state]` | `"checked" | "unchecked"` |
| `[data-disabled]` | 
Present when disabled

 |

### Indicator

Renders when the radio item is in a checked state. You can style this element directly, or you can use it as a wrapper to put an icon into, or both.

| Prop | Type | Default |
| --- | --- | --- |
| 
`asChild`

Prop description

 | 

`boolean`



 | `false` |
| 

`forceMount`

Prop description

 | 

`boolean`



 | No default value |

| Data attribute | Values |
| --- | --- |
| `[data-state]` | `"checked" | "unchecked"` |
| `[data-disabled]` | 
Present when disabled

 |

## Accessibility

Adheres to the Radio Group WAI-ARIA design pattern and uses roving tabindex to manage focus movement among radio items.

### Keyboard Interactions

| Key | Description |
| --- | --- |
| 
Tab

 | Moves focus to either the checked radio item or the first radio item in the group. |
| 

Space

 | When focus is on an unchecked radio item, checks it. |
| 

ArrowDown

 | Moves focus and checks the next radio item in the group. |
| 

ArrowRight

 | Moves focus and checks the next radio item in the group. |
| 

ArrowUp

 | Moves focus to the previous radio item in the group. |
| 

ArrowLeft

 | Moves focus to the previous radio item in the group. |

#### Quick nav

*   Installation
*   Anatomy
*   API Reference
*   Root
*   Item
*   Indicator
*   Accessibility
*   Keyboard Interactions

PreviousProgress

NextScroll Area

Edit this page on GitHub.

---

## Page: https://www.radix-ui.com/primitives/docs/components/scroll-area

Components

# Scroll Area

Augments native scroll functionality for custom, cross-browser styling.

Tags

v1.2.0-beta.50

v1.2.0-beta.49

v1.2.0-beta.48

v1.2.0-beta.47

v1.2.0-beta.46

v1.2.0-beta.45

v1.2.0-beta.44

v1.2.0-beta.43

v1.2.0-beta.42

v1.2.0-beta.41

v1.2.0-beta.40

v1.2.0-beta.39

v1.2.0-beta.38

v1.2.0-beta.37

v1.2.0-beta.36

v1.2.0-beta.35

v1.2.0-beta.34

v1.2.0-beta.33

v1.2.0-beta.32

v1.2.0-beta.31

v1.2.0-beta.30

v1.2.0-beta.29

v1.2.0-beta.28

v1.2.0-beta.27

v1.2.0-beta.26

v1.2.0-beta.25

v1.2.0-beta.24

v1.2.0-beta.23

v1.2.0-beta.22

v1.2.0-beta.21

v1.2.0-beta.20

v1.2.0-beta.19

v1.2.0-beta.18

v1.2.0-beta.17

v1.2.0-beta.16

v1.2.0-beta.15

v1.2.0-beta.14

v1.2.0-beta.13

v1.2.0-beta.12

v1.2.0-beta.11

v1.2.0-beta.10

v1.2.0-beta.9

v1.2.0-beta.8

v1.2.0-beta.7

v1.2.0-beta.6

v1.2.0-beta.5

v1.2.0-beta.4

v1.2.0-beta.3

v1.2.0-beta.2

v1.2.0-beta.1

index.jsxindex.jsxstyles.cssstyles.css

CSS

    import * as React from "react"; import { ScrollArea } from "radix-ui"; import "./styles.css";  const TAGS = Array.from({ length: 50 }).map( 	(_, i, a) => `v1.2.0-beta.${a.length - i}`, );  const ScrollAreaDemo = () => ( 	<ScrollArea.Root className="ScrollAreaRoot">  <ScrollArea.Viewport className="ScrollAreaViewport">  <div style={{ padding: "15px 20px" }}>  <div className="Text">Tags</div>  {TAGS.map((tag) => (  <div className="Tag" key={tag}>  {tag}  </div>  ))}  </div>  </ScrollArea.Viewport>  <ScrollArea.Scrollbar className="ScrollAreaScrollbar" orientation="vertical" >  <ScrollArea.Thumb className="ScrollAreaThumb" />  </ScrollArea.Scrollbar>  <ScrollArea.Scrollbar className="ScrollAreaScrollbar" orientation="horizontal" >  <ScrollArea.Thumb className="ScrollAreaThumb" />  </ScrollArea.Scrollbar>  <ScrollArea.Corner className="ScrollAreaCorner" /> 	</ScrollArea.Root> );  export default ScrollAreaDemo; 

## Features

Scrollbar sits on top of the scrollable content, taking up no space.

Scrolling is native; no underlying position movements via CSS transformations.

Shims pointer behaviors only when interacting with the controls, so keyboard controls are unaffected.

Supports Right to Left direction.

## Component Reference Links

Version: 1.2.9

Size: 6.48 kB

View source

Report an issue

## Installation

Install the component from your command line.

    npm install @radix-ui/react-scroll-area 

## Anatomy

Import all parts and piece them together.

    import { ScrollArea } from "radix-ui";  export default () => ( 	<ScrollArea.Root>  <ScrollArea.Viewport />  <ScrollArea.Scrollbar orientation="horizontal">  <ScrollArea.Thumb />  </ScrollArea.Scrollbar>  <ScrollArea.Scrollbar orientation="vertical">  <ScrollArea.Thumb />  </ScrollArea.Scrollbar>  <ScrollArea.Corner /> 	</ScrollArea.Root> ); 

## API Reference

### Root

Contains all the parts of a scroll area.

| Prop | Type | Default |
| --- | --- | --- |
| 
`asChild`

Prop description

 | 

`boolean`



 | `false` |
| 

`type`

Prop description

 | 

`enum`

See full type

 | `"hover"` |
| 

`scrollHideDelay`

Prop description

 | 

`number`



 | `600` |
| 

`dir`

Prop description

 | 

`enum`

See full type

 | No default value |
| 

`nonce`

Prop description

 | 

`string`



 | No default value |

### Viewport

The viewport area of the scroll area.

| Prop | Type | Default |
| --- | --- | --- |
| 
`asChild`

Prop description

 | 

`boolean`



 | `false` |

### Scrollbar

The vertical scrollbar. Add a second `Scrollbar` with an `orientation` prop to enable horizontal scrolling.

| Prop | Type | Default |
| --- | --- | --- |
| 
`asChild`

Prop description

 | 

`boolean`



 | `false` |
| 

`forceMount`

Prop description

 | 

`boolean`



 | No default value |
| 

`orientation`

Prop description

 | 

`enum`

See full type

 | `vertical` |

| Data attribute | Values |
| --- | --- |
| `[data-state]` | `"visible" | "hidden"` |
| `[data-orientation]` | `"vertical" | "horizontal"` |

### Thumb

The thumb to be used in `ScrollArea.Scrollbar`.

| Prop | Type | Default |
| --- | --- | --- |
| 
`asChild`

Prop description

 | 

`boolean`



 | `false` |

| Data attribute | Values |
| --- | --- |
| `[data-state]` | `"visible" | "hidden"` |

### Corner

The corner where both vertical and horizontal scrollbars meet.

| Prop | Type | Default |
| --- | --- | --- |
| 
`asChild`

Prop description

 | 

`boolean`



 | `false` |

## Accessibility

In most cases, it's best to rely on native scrolling and work with the customization options available in CSS. When that isn't enough, `ScrollArea` provides additional customizability while maintaining the browser's native scroll behavior (as well as accessibility features, like keyboard scrolling).

### Keyboard Interactions

Scrolling via keyboard is supported by default because the component relies on native scrolling. Specific keyboard interactions may differ between platforms, so we do not specify them here or add specific event listeners to handle scrolling via key events.

#### Quick nav

*   Installation
*   Anatomy
*   API Reference
*   Root
*   Viewport
*   Scrollbar
*   Thumb
*   Corner
*   Accessibility
*   Keyboard Interactions

PreviousRadio Group

NextSelect

Edit this page on GitHub.

---

## Page: https://www.radix-ui.com/primitives/docs/components/select

Components

# Select

Displays a list of options for the user to pick from—triggered by a button.

Select a fruit…

index.jsxindex.jsxstyles.cssstyles.css

CSS

    import * as React from "react"; import { Select } from "radix-ui"; import classnames from "classnames"; import { CheckIcon, ChevronDownIcon, ChevronUpIcon, } from "@radix-ui/react-icons"; import "./styles.css";  const SelectDemo = () => ( 	<Select.Root>  <Select.Trigger className="SelectTrigger" aria-label="Food">  <Select.Value placeholder="Select a fruit…" />  <Select.Icon className="SelectIcon">  <ChevronDownIcon />  </Select.Icon>  </Select.Trigger>  <Select.Portal>  <Select.Content className="SelectContent">  <Select.ScrollUpButton className="SelectScrollButton">  <ChevronUpIcon />  </Select.ScrollUpButton>  <Select.Viewport className="SelectViewport">  <Select.Group>  <Select.Label className="SelectLabel">Fruits</Select.Label>  <SelectItem value="apple">Apple</SelectItem>  <SelectItem value="banana">Banana</SelectItem>  <SelectItem value="blueberry">Blueberry</SelectItem>  <SelectItem value="grapes">Grapes</SelectItem>  <SelectItem value="pineapple">Pineapple</SelectItem>  </Select.Group>   <Select.Separator className="SelectSeparator" />   <Select.Group>  <Select.Label className="SelectLabel">Vegetables</Select.Label>  <SelectItem value="aubergine">Aubergine</SelectItem>  <SelectItem value="broccoli">Broccoli</SelectItem>  <SelectItem value="carrot" disabled>  Carrot  </SelectItem>  <SelectItem value="courgette">Courgette</SelectItem>  <SelectItem value="leek">Leek</SelectItem>  </Select.Group>   <Select.Separator className="SelectSeparator" />   <Select.Group>  <Select.Label className="SelectLabel">Meat</Select.Label>  <SelectItem value="beef">Beef</SelectItem>  <SelectItem value="chicken">Chicken</SelectItem>  <SelectItem value="lamb">Lamb</SelectItem>  <SelectItem value="pork">Pork</SelectItem>  </Select.Group>  </Select.Viewport>  <Select.ScrollDownButton className="SelectScrollButton">  <ChevronDownIcon />  </Select.ScrollDownButton>  </Select.Content>  </Select.Portal> 	</Select.Root> );  const SelectItem = React.forwardRef( 	({ children, className, ...props }, forwardedRef) => {  return (  <Select.Item className={classnames("SelectItem", className)} {...props} ref={forwardedRef} >  <Select.ItemText>{children}</Select.ItemText>  <Select.ItemIndicator className="SelectItemIndicator">  <CheckIcon />  </Select.ItemIndicator>  </Select.Item>  ); 	}, );  export default SelectDemo; 

## Features

Can be controlled or uncontrolled.

Offers 2 positioning modes.

Supports items, labels, groups of items.

Focus is fully managed.

Full keyboard navigation.

Supports custom placeholder.

Typeahead support.

Supports Right to Left direction.

## Component Reference Links

Version: 2.2.5

Size: 34.2 kB

View source

Report an issue

ARIA design pattern

## Installation

Install the component from your command line.

    npm install @radix-ui/react-select 

## Anatomy

Import all parts and piece them together.

    import { Select } from "radix-ui";  export default () => ( 	<Select.Root>  <Select.Trigger>  <Select.Value />  <Select.Icon />  </Select.Trigger>   <Select.Portal>  <Select.Content>  <Select.ScrollUpButton />  <Select.Viewport>  <Select.Item>  <Select.ItemText />  <Select.ItemIndicator />  </Select.Item>   <Select.Group>  <Select.Label />  <Select.Item>  <Select.ItemText />  <Select.ItemIndicator />  </Select.Item>  </Select.Group>   <Select.Separator />  </Select.Viewport>  <Select.ScrollDownButton />  <Select.Arrow />  </Select.Content>  </Select.Portal> 	</Select.Root> ); 

## API Reference

### Root

Contains all the parts of a select.

| Prop | Type | Default |
| --- | --- | --- |
| 
`defaultValue`

Prop description

 | 

`string`



 | No default value |
| 

`value`

Prop description

 | 

`string`



 | No default value |
| 

`onValueChange`

Prop description

 | 

`function`

See full type

 | No default value |
| 

`defaultOpen`

Prop description

 | 

`boolean`



 | No default value |
| 

`open`

Prop description

 | 

`boolean`



 | No default value |
| 

`onOpenChange`

Prop description

 | 

`function`

See full type

 | No default value |
| 

`dir`

Prop description

 | 

`enum`

See full type

 | No default value |
| 

`name`

Prop description

 | 

`string`



 | No default value |
| 

`disabled`

Prop description

 | 

`boolean`



 | No default value |
| 

`required`

Prop description

 | 

`boolean`



 | No default value |

### Trigger

The button that toggles the select. The `Select.Content` will position itself by aligning over the trigger.

| Prop | Type | Default |
| --- | --- | --- |
| 
`asChild`

Prop description

 | 

`boolean`



 | `false` |

| Data attribute | Values |
| --- | --- |
| `[data-state]` | `"open" | "closed"` |
| `[data-disabled]` | 
Present when disabled

 |
| `[data-placeholder]` | 

Present when has placeholder

 |

### Value

The part that reflects the selected value. By default the selected item's text will be rendered. if you require more control, you can instead control the select and pass your own `children`. It should not be styled to ensure correct positioning. An optional `placeholder` prop is also available for when the select has no value.

| Prop | Type | Default |
| --- | --- | --- |
| 
`asChild`

Prop description

 | 

`boolean`



 | `false` |
| 

`placeholder`

Prop description

 | 

`ReactNode`



 | No default value |

### Icon

A small icon often displayed next to the value as a visual affordance for the fact it can be open. By default renders ▼ but you can use your own icon via `asChild` or use `children`.

| Prop | Type | Default |
| --- | --- | --- |
| 
`asChild`

Prop description

 | 

`boolean`



 | `false` |

### Portal

When used, portals the content part into the `body`.

| Prop | Type | Default |
| --- | --- | --- |
| 
`container`

Prop description

 | 

`HTMLElement`



 | `document.body` |

### Content

The component that pops out when the select is open.

| Prop | Type | Default |
| --- | --- | --- |
| 
`asChild`

Prop description

 | 

`boolean`



 | `false` |
| 

`onCloseAutoFocus`

Prop description

 | 

`function`

See full type

 | No default value |
| 

`onEscapeKeyDown`

Prop description

 | 

`function`

See full type

 | No default value |
| 

`onPointerDownOutside`

Prop description

 | 

`function`

See full type

 | No default value |
| 

`position`

Prop description

 | 

`enum`

See full type

 | `"item-aligned"` |
| 

`side`

Prop description

 | 

`enum`

See full type

 | `"bottom"` |
| 

`sideOffset`

Prop description

 | 

`number`



 | `0` |
| 

`align`

Prop description

 | 

`enum`

See full type

 | `"start"` |
| 

`alignOffset`

Prop description

 | 

`number`



 | `0` |
| 

`avoidCollisions`

Prop description

 | 

`boolean`



 | `true` |
| 

`collisionBoundary`

Prop description

 | 

`Boundary`

See full type

 | `[]` |
| 

`collisionPadding`

Prop description

 | 

`number | Padding`

See full type

 | `10` |
| 

`arrowPadding`

Prop description

 | 

`number`



 | `0` |
| 

`sticky`

Prop description

 | 

`enum`

See full type

 | `"partial"` |
| 

`hideWhenDetached`

Prop description

 | 

`boolean`



 | `false` |

| Data attribute | Values |
| --- | --- |
| `[data-state]` | `"open" | "closed"` |
| `[data-side]` | `"left" | "right" | "bottom" | "top"` |
| `[data-align]` | `"start" | "end" | "center"` |

| CSS Variable | Description |
| --- | --- |
| `--radix-select-content-transform-origin` | The `transform-origin` computed from the content and arrow positions/offsets. Only present when `position="popper"`. |
| `--radix-select-content-available-width` | The remaining width between the trigger and the boundary edge. Only present when `position="popper"`. |
| `--radix-select-content-available-height` | The remaining height between the trigger and the boundary edge. Only present when `position="popper"`. |
| `--radix-select-trigger-width` | The width of the trigger. Only present when `position="popper"`. |
| `--radix-select-trigger-height` | The height of the trigger. Only present when `position="popper"`. |

### Viewport

The scrolling viewport that contains all of the items.

| Prop | Type | Default |
| --- | --- | --- |
| 
`asChild`

Prop description

 | 

`boolean`



 | `false` |

### Item

The component that contains the select items.

| Prop | Type | Default |
| --- | --- | --- |
| 
`asChild`

Prop description

 | 

`boolean`



 | `false` |
| 

`value*`

Prop description

 | 

`string`



 | No default value |
| 

`disabled`

Prop description

 | 

`boolean`



 | No default value |
| 

`textValue`

Prop description

 | 

`string`



 | No default value |

| Data attribute | Values |
| --- | --- |
| `[data-state]` | `"checked" | "unchecked"` |
| `[data-highlighted]` | 
Present when highlighted

 |
| `[data-disabled]` | 

Present when disabled

 |

### ItemText

The textual part of the item. It should only contain the text you want to see in the trigger when that item is selected. It should not be styled to ensure correct positioning.

| Prop | Type | Default |
| --- | --- | --- |
| 
`asChild`

Prop description

 | 

`boolean`



 | `false` |

### ItemIndicator

Renders when the item is selected. You can style this element directly, or you can use it as a wrapper to put an icon into, or both.

| Prop | Type | Default |
| --- | --- | --- |
| 
`asChild`

Prop description

 | 

`boolean`



 | `false` |

### ScrollUpButton

An optional button used as an affordance to show the viewport overflow as well as functionaly enable scrolling upwards.

| Prop | Type | Default |
| --- | --- | --- |
| 
`asChild`

Prop description

 | 

`boolean`



 | `false` |

### ScrollDownButton

An optional button used as an affordance to show the viewport overflow as well as functionaly enable scrolling downwards.

| Prop | Type | Default |
| --- | --- | --- |
| 
`asChild`

Prop description

 | 

`boolean`



 | `false` |

### Group

Used to group multiple items. use in conjunction with `Select.Label` to ensure good accessibility via automatic labelling.

| Prop | Type | Default |
| --- | --- | --- |
| 
`asChild`

Prop description

 | 

`boolean`



 | `false` |

### Label

Used to render the label of a group. It won't be focusable using arrow keys.

| Prop | Type | Default |
| --- | --- | --- |
| 
`asChild`

Prop description

 | 

`boolean`



 | `false` |

### Separator

Used to visually separate items in the select.

| Prop | Type | Default |
| --- | --- | --- |
| 
`asChild`

Prop description

 | 

`boolean`



 | `false` |

### Arrow

An optional arrow element to render alongside the content. This can be used to help visually link the trigger with the `Select.Content`. Must be rendered inside `Select.Content`. Only available when `position` is set to `popper`.

| Prop | Type | Default |
| --- | --- | --- |
| 
`asChild`

Prop description

 | 

`boolean`



 | `false` |
| 

`width`

Prop description

 | 

`number`



 | `10` |
| 

`height`

Prop description

 | 

`number`



 | `5` |

## Examples

### Change the positioning mode

By default, `Select` will behave similarly to a native MacOS menu by positioning `Select.Content` relative to the active item. If you would prefer an alternative positioning approach similar to `Popover` or `DropdownMenu` then you can set `position` to `popper` and make use of additional alignment options such as `side`, `sideOffset` and more.

    // index.jsx import { Select } from "radix-ui";  export default () => ( 	<Select.Root>  <Select.Trigger>…</Select.Trigger>  <Select.Portal>  <Select.Content position="popper" sideOffset={5}>  …  </Select.Content>  </Select.Portal> 	</Select.Root> ); 

### Constrain the content size

When using `position="popper"` on `Select.Content`, you may want to constrain the width of the content so that it matches the trigger width. You may also want to constrain its height to not exceed the viewport.

We expose several CSS custom properties such as `--radix-select-trigger-width` and `--radix-select-content-available-height` to support this. Use them to constrain the content dimensions.

    // index.jsx import { Select } from "radix-ui"; import "./styles.css";  export default () => ( 	<Select.Root>  <Select.Trigger>…</Select.Trigger>  <Select.Portal>  <Select.Content className="SelectContent" position="popper" sideOffset={5} >  …  </Select.Content>  </Select.Portal> 	</Select.Root> ); 

    /* styles.css */ .SelectContent { 	width: var(--radix-select-trigger-width); 	max-height: var(--radix-select-content-available-height); } 

### With disabled items

You can add special styles to disabled items via the `data-disabled` attribute.

    // index.jsx import { Select } from "radix-ui"; import "./styles.css";  export default () => ( 	<Select.Root>  <Select.Trigger>…</Select.Trigger>  <Select.Portal>  <Select.Content>  <Select.Viewport>  <Select.Item className="SelectItem" disabled>  …  </Select.Item>  <Select.Item>…</Select.Item>  <Select.Item>…</Select.Item>  </Select.Viewport>  </Select.Content>  </Select.Portal> 	</Select.Root> ); 

    /* styles.css */ .SelectItem[data-disabled] { 	color: "gainsboro"; } 

### With a placeholder

You can use the `placeholder` prop on `Value` for when the select has no value. There's also a `data-placeholder` attribute on `Trigger` to help with styling.

    // index.jsx import { Select } from "radix-ui"; import "./styles.css";  export default () => ( 	<Select.Root>  <Select.Trigger className="SelectTrigger">  <Select.Value placeholder="Pick an option" />  <Select.Icon />  </Select.Trigger>  <Select.Portal>  <Select.Content>…</Select.Content>  </Select.Portal> 	</Select.Root> ); 

    /* styles.css */ .SelectTrigger[data-placeholder] { 	color: "gainsboro"; } 

### With separators

Use the `Separator` part to add a separator between items.

    <Select.Root> 	<Select.Trigger>…</Select.Trigger> 	<Select.Portal>  <Select.Content>  <Select.Viewport>  <Select.Item>…</Select.Item>  <Select.Item>…</Select.Item>  <Select.Item>…</Select.Item>  <Select.Separator />  <Select.Item>…</Select.Item>  <Select.Item>…</Select.Item>  </Select.Viewport>  </Select.Content> 	</Select.Portal> </Select.Root> 

### With grouped items

Use the `Group` and `Label` parts to group items in a section.

    <Select.Root> 	<Select.Trigger>…</Select.Trigger> 	<Select.Portal>  <Select.Content>  <Select.Viewport>  <Select.Group>  <Select.Label>Label</Select.Label>  <Select.Item>…</Select.Item>  <Select.Item>…</Select.Item>  <Select.Item>…</Select.Item>  </Select.Group>  </Select.Viewport>  </Select.Content> 	</Select.Portal> </Select.Root> 

### With complex items

You can use custom content in your items.

    import { Select } from "radix-ui";  export default () => ( 	<Select.Root>  <Select.Trigger>…</Select.Trigger>  <Select.Portal>  <Select.Content>  <Select.Viewport>  <Select.Item>  <Select.ItemText>  <img src="…" />  Adolfo Hess  </Select.ItemText>  <Select.ItemIndicator>…</Select.ItemIndicator>  </Select.Item>  <Select.Item>…</Select.Item>  <Select.Item>…</Select.Item>  </Select.Viewport>  </Select.Content>  </Select.Portal> 	</Select.Root> ); 

### Controlling the value displayed in the trigger

By default the trigger will automatically display the selected item `ItemText`'s content. You can control what appears by chosing to put things inside/outside the `ItemText` part.

If you need more flexibility, you can control the component using `value`/`onValueChange` props and passing `children` to `SelectValue`. Remember to make sure what you put in there is accessible.

    const countries = { france: "🇫🇷", "united-kingdom": "🇬🇧", spain: "🇪🇸" };  export default () => { 	const [value, setValue] = React.useState("france"); 	return (  <Select.Root value={value} onValueChange={setValue}>  <Select.Trigger>  <Select.Value aria-label={value}>  {countries[value]}  </Select.Value>  <Select.Icon />  </Select.Trigger>  <Select.Portal>  <Select.Content>  <Select.Viewport>  <Select.Item value="france">  <Select.ItemText>France</Select.ItemText>  <Select.ItemIndicator>…</Select.ItemIndicator>  </Select.Item>  <Select.Item value="united-kingdom">  <Select.ItemText>United Kingdom</Select.ItemText>  <Select.ItemIndicator>…</Select.ItemIndicator>  </Select.Item>  <Select.Item value="spain">  <Select.ItemText>Spain</Select.ItemText>  <Select.ItemIndicator>…</Select.ItemIndicator>  </Select.Item>  </Select.Viewport>  </Select.Content>  </Select.Portal>  </Select.Root> 	); }; 

### With custom scrollbar

The native scrollbar is hidden by default as we recommend using the `ScrollUpButton` and `ScrollDownButton` parts for the best UX. If you do not want to use these parts, compose your select with our Scroll Area primitive.

    // index.jsx import { Select, ScrollArea } from "radix-ui"; import "./styles.css";  export default () => ( 	<Select.Root>  <Select.Trigger>…</Select.Trigger>  <Select.Portal>  <Select.Content>  <ScrollArea.Root className="ScrollAreaRoot" type="auto">  <Select.Viewport asChild>  <ScrollArea.Viewport className="ScrollAreaViewport">  <StyledItem>…</StyledItem>  <StyledItem>…</StyledItem>  <StyledItem>…</StyledItem>  </ScrollArea.Viewport>  </Select.Viewport>  <ScrollArea.Scrollbar className="ScrollAreaScrollbar" orientation="vertical" >  <ScrollArea.Thumb className="ScrollAreaThumb" />  </ScrollArea.Scrollbar>  </ScrollArea.Root>  </Select.Content>  </Select.Portal> 	</Select.Root> ); 

    /* styles.css */ .ScrollAreaRoot { 	width: 100%; 	height: 100%; }  .ScrollAreaViewport { 	width: 100%; 	height: 100%; }  .ScrollAreaScrollbar { 	width: 4px; 	padding: 5px 2px; }  .ScrollAreaThumb { 	background: rgba(0, 0, 0, 0.3); 	border-radius: 3px; } 

## Accessibility

Adheres to the ListBox WAI-ARIA design pattern.

See the W3C Select-Only Combobox example for more information.

### Keyboard Interactions

| Key | Description |
| --- | --- |
| 
Space

 | When focus is on `Select.Trigger`, opens the select and focuses the selected item.  
When focus is on an item, selects the focused item. |
| 

Enter

 | When focus is on `Select.Trigger`, opens the select and focuses the first item.  
When focus is on an item, selects the focused item. |
| 

ArrowDown

 | When focus is on `Select.Trigger`, opens the select.  
When focus is on an item, moves focus to the next item. |
| 

ArrowUp

 | When focus is on `Select.Trigger`, opens the select.  
When focus is on an item, moves focus to the previous item. |
| 

Esc

 | Closes the select and moves focus to `Select.Trigger`. |

### Labelling

Use our Label component in order to offer a visual and accessible label for the select.

    import { Select, Label } from "radix-ui";  export default () => ( 	<>  <Label>  Country  <Select.Root>…</Select.Root>  </Label>   {/* or */}   <Label htmlFor="country">Country</Label>  <Select.Root>  <Select.Trigger id="country">…</Select.Trigger>  <Select.Portal>  <Select.Content>…</Select.Content>  </Select.Portal>  </Select.Root> 	</> ); 

## Custom APIs

Create your own API by abstracting the primitive parts into your own component.

### Abstract down to `Select` and `SelectItem`

This example abstracts most of the parts.

#### Usage

    import { Select, SelectItem } from "./your-select";  export default () => ( 	<Select defaultValue="2">  <SelectItem value="1">Item 1</SelectItem>  <SelectItem value="2">Item 2</SelectItem>  <SelectItem value="3">Item 3</SelectItem> 	</Select> ); 

#### Implementation

    // your-select.jsx import * as React from "react"; import { Select as SelectPrimitive } from "radix-ui"; import { CheckIcon, ChevronDownIcon, ChevronUpIcon, } from "@radix-ui/react-icons";  export const Select = React.forwardRef( 	({ children, ...props }, forwardedRef) => {  return (  <SelectPrimitive.Root {...props}>  <SelectPrimitive.Trigger ref={forwardedRef}>  <SelectPrimitive.Value />  <SelectPrimitive.Icon>  <ChevronDownIcon />  </SelectPrimitive.Icon>  </SelectPrimitive.Trigger>  <SelectPrimitive.Portal>  <SelectPrimitive.Content>  <SelectPrimitive.ScrollUpButton>  <ChevronUpIcon />  </SelectPrimitive.ScrollUpButton>  <SelectPrimitive.Viewport>{children}</SelectPrimitive.Viewport>  <SelectPrimitive.ScrollDownButton>  <ChevronDownIcon />  </SelectPrimitive.ScrollDownButton>  </SelectPrimitive.Content>  </SelectPrimitive.Portal>  </SelectPrimitive.Root>  ); 	}, );  export const SelectItem = React.forwardRef( 	({ children, ...props }, forwardedRef) => {  return (  <SelectPrimitive.Item {...props} ref={forwardedRef}>  <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>  <SelectPrimitive.ItemIndicator>  <CheckIcon />  </SelectPrimitive.ItemIndicator>  </SelectPrimitive.Item>  ); 	}, ); 

#### Quick nav

*   Installation
*   Anatomy
*   API Reference
*   Root
*   Trigger
*   Value
*   Icon
*   Portal
*   Content
*   Viewport
*   Item
*   ItemText
*   ItemIndicator
*   ScrollUpButton
*   ScrollDownButton
*   Group
*   Label
*   Separator
*   Arrow
*   Examples
*   Change the positioning mode
*   Constrain the content size
*   With disabled items
*   With a placeholder
*   With separators
*   With grouped items
*   With complex items
*   Controlling the value displayed in the trigger
*   With custom scrollbar
*   Accessibility
*   Keyboard Interactions
*   Labelling
*   Custom APIs
*   Abstract down to Select and SelectItem

PreviousScroll Area

NextSeparator

Edit this page on GitHub.

---

## Page: https://www.radix-ui.com/primitives/docs/components/separator

Components

# Separator

Visually or semantically separates content.

Radix Primitives

An open-source UI component library.

Blog

Docs

Source

index.jsxindex.jsxstyles.cssstyles.css

CSS

    import * as React from "react"; import { Separator } from "radix-ui"; import "./styles.css";  const SeparatorDemo = () => ( 	<div style={{ width: "100%", maxWidth: 300, margin: "0 15px" }}>  <div className="Text" style={{ fontWeight: 500 }}>  Radix Primitives  </div>  <div className="Text">An open-source UI component library.</div>  <Separator.Root className="SeparatorRoot" style={{ margin: "15px 0" }} />  <div style={{ display: "flex", height: 20, alignItems: "center" }}>  <div className="Text">Blog</div>  <Separator.Root className="SeparatorRoot" decorative orientation="vertical" style={{ margin: "0 15px" }} />  <div className="Text">Docs</div>  <Separator.Root className="SeparatorRoot" decorative orientation="vertical" style={{ margin: "0 15px" }} />  <div className="Text">Source</div>  </div> 	</div> );  export default SeparatorDemo; 

## Features

Supports horizontal and vertical orientations.

## Component Reference Links

Version: 1.1.7

Size: 1.69 kB

View source

Report an issue

ARIA design pattern

## Installation

Install the component from your command line.

    npm install @radix-ui/react-separator 

## Anatomy

Import all parts and piece them together.

    import { Separator } from "radix-ui";  export default () => <Separator.Root />; 

## API Reference

### Root

The separator.

| Prop | Type | Default |
| --- | --- | --- |
| 
`asChild`

Prop description

 | 

`boolean`



 | `false` |
| 

`orientation`

Prop description

 | 

`enum`

See full type

 | `"horizontal"` |
| 

`decorative`

Prop description

 | 

`boolean`



 | No default value |

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

## Accessibility

Adheres to the `separator` role requirements.

#### Quick nav

*   Installation
*   Anatomy
*   API Reference
*   Root
*   Accessibility

PreviousSelect

NextSlider

Edit this page on GitHub.

---

## Page: https://www.radix-ui.com/primitives/docs/components/slider

Components

# Slider

An input where the user selects a value from within a given range.

index.jsxindex.jsxstyles.cssstyles.css

CSS

    import * as React from "react"; import { Slider } from "radix-ui"; import "./styles.css";  const SliderDemo = () => ( 	<form>  <Slider.Root className="SliderRoot" defaultValue={[50]} max={100} step={1}>  <Slider.Track className="SliderTrack">  <Slider.Range className="SliderRange" />  </Slider.Track>  <Slider.Thumb className="SliderThumb" aria-label="Volume" />  </Slider.Root> 	</form> );  export default SliderDemo; 

## Features

Can be controlled or uncontrolled.

Supports multiple thumbs.

Supports a minimum value between thumbs.

Supports touch or click on track to update value.

Supports Right to Left direction.

Full keyboard navigation.

## Component Reference Links

Version: 1.3.5

Size: 8.49 kB

View source

Report an issue

ARIA design pattern

## Installation

Install the component from your command line.

    npm install @radix-ui/react-slider 

## Anatomy

Import all parts and piece them together.

    import { Slider } from "radix-ui";  export default () => ( 	<Slider.Root>  <Slider.Track>  <Slider.Range />  </Slider.Track>  <Slider.Thumb /> 	</Slider.Root> ); 

## API Reference

### Root

Contains all the parts of a slider. It will render an `input` for each thumb when used within a `form` to ensure events propagate correctly.

| Prop | Type | Default |
| --- | --- | --- |
| 
`asChild`

Prop description

 | 

`boolean`



 | `false` |
| 

`defaultValue`

Prop description

 | 

`number[]`



 | No default value |
| 

`value`

Prop description

 | 

`number[]`



 | No default value |
| 

`onValueChange`

Prop description

 | 

`function`

See full type

 | No default value |
| 

`onValueCommit`

Prop description

 | 

`function`

See full type

 | No default value |
| 

`name`

Prop description

 | 

`string`



 | No default value |
| 

`disabled`

Prop description

 | 

`boolean`



 | `false` |
| 

`orientation`

Prop description

 | 

`enum`

See full type

 | `"horizontal"` |
| 

`dir`

Prop description

 | 

`enum`

See full type

 | No default value |
| 

`inverted`

Prop description

 | 

`boolean`



 | `false` |
| 

`min`

Prop description

 | 

`number`



 | `0` |
| 

`max`

Prop description

 | 

`number`



 | `100` |
| 

`step`

Prop description

 | 

`number`



 | `1` |
| 

`minStepsBetweenThumbs`

Prop description

 | 

`number`



 | `0` |
| 

`form`

Prop description

 | 

`string`



 | No default value |

| Data attribute | Values |
| --- | --- |
| `[data-disabled]` | 
Present when disabled

 |
| `[data-orientation]` | `"vertical" | "horizontal"` |

### Track

The track that contains the `Slider.Range`.

| Prop | Type | Default |
| --- | --- | --- |
| 
`asChild`

Prop description

 | 

`boolean`



 | `false` |

| Data attribute | Values |
| --- | --- |
| `[data-disabled]` | 
Present when disabled

 |
| `[data-orientation]` | `"vertical" | "horizontal"` |

### Range

The range part. Must live inside `Slider.Track`.

| Prop | Type | Default |
| --- | --- | --- |
| 
`asChild`

Prop description

 | 

`boolean`



 | `false` |

| Data attribute | Values |
| --- | --- |
| `[data-disabled]` | 
Present when disabled

 |
| `[data-orientation]` | `"vertical" | "horizontal"` |

### Thumb

A draggable thumb. You can render multiple thumbs.

| Prop | Type | Default |
| --- | --- | --- |
| 
`asChild`

Prop description

 | 

`boolean`



 | `false` |

| Data attribute | Values |
| --- | --- |
| `[data-disabled]` | 
Present when disabled

 |
| `[data-orientation]` | `"vertical" | "horizontal"` |

## Examples

### Vertical orientation

Use the `orientation` prop to create a vertical slider.

    // index.jsx import { Slider } from "radix-ui"; import "./styles.css";  export default () => ( 	<Slider.Root className="SliderRoot" defaultValue={[50]} orientation="vertical" >  <Slider.Track className="SliderTrack">  <Slider.Range className="SliderRange" />  </Slider.Track>  <Slider.Thumb className="SliderThumb" /> 	</Slider.Root> ); 

    /* styles.css */ .SliderRoot { 	position: relative; 	display: flex; 	align-items: center; } .SliderRoot[data-orientation="vertical"] { 	flex-direction: column; 	width: 20px; 	height: 100px; }  .SliderTrack { 	position: relative; 	flex-grow: 1; 	background-color: grey; } .SliderTrack[data-orientation="vertical"] { 	width: 3px; }  .SliderRange { 	position: absolute; 	background-color: black; } .SliderRange[data-orientation="vertical"] { 	width: 100%; }  .SliderThumb { 	display: block; 	width: 20px; 	height: 20px; 	background-color: black; } 

### Create a range

Add multiple thumbs and values to create a range slider.

    import { Slider } from "radix-ui";  export default () => ( 	<Slider.Root defaultValue={[25, 75]}>  <Slider.Track>  <Slider.Range />  </Slider.Track>  <Slider.Thumb />  <Slider.Thumb /> 	</Slider.Root> ); 

### Define step size

Use the `step` prop to increase the stepping interval.

    import { Slider } from "radix-ui";  export default () => ( 	<Slider.Root defaultValue={[50]} step={10}>  <Slider.Track>  <Slider.Range />  </Slider.Track>  <Slider.Thumb /> 	</Slider.Root> ); 

### Prevent thumb overlap

Use `minStepsBetweenThumbs` to avoid thumbs with equal values.

    import { Slider } from "radix-ui";  export default () => ( 	<Slider.Root defaultValue={[25, 75]} step={10} minStepsBetweenThumbs={1}>  <Slider.Track>  <Slider.Range />  </Slider.Track>  <Slider.Thumb />  <Slider.Thumb /> 	</Slider.Root> ); 

## Accessibility

Adheres to the Slider WAI-ARIA design pattern.

### Keyboard Interactions

| Key | Description |
| --- | --- |
| 
ArrowRight

 | Increments/decrements by the `step` value depending on `orientation`. |
| 

ArrowLeft

 | Increments/decrements by the `step` value depending on `orientation`. |
| 

ArrowUp

 | Increases the value by the `step` amount. |
| 

ArrowDown

 | Decreases the value by the `step` amount. |
| 

PageUp

 | Increases the value by a larger `step`. |
| 

PageDown

 | Decreases the value by a larger `step`. |
| 

Shift + ArrowUp

 | Increases the value by a larger `step`. |
| 

Shift + ArrowDown

 | Decreases the value by a larger `step`. |
| 

Home

 | Sets the value to its minimum. |
| 

End

 | Sets the value to its maximum. |

## Custom APIs

Create your own API by abstracting the primitive parts into your own component.

### Abstract all parts

This example abstracts all of the `Slider` parts so it can be used as a self closing element.

#### Usage

    import { Slider } from "./your-slider";  export default () => <Slider defaultValue={[25]} />; 

#### Implementation

    // your-slider.jsx import { Slider as SliderPrimitive } from "radix-ui";  export const Slider = React.forwardRef((props, forwardedRef) => { 	const value = props.value || props.defaultValue;  	return (  <SliderPrimitive.Slider {...props} ref={forwardedRef}>  <SliderPrimitive.Track>  <SliderPrimitive.Range />  </SliderPrimitive.Track>  {value.map((_, i) => (  <SliderPrimitive.Thumb key={i} />  ))}  </SliderPrimitive.Slider> 	); }); 

## Caveats

### Mouse events are not fired

Because of a limitation we faced during implementation, the following example won't work as expected and the `onMouseDown` and `onMouseUp` event handlers won't be fired:

    <Slider.Root onMouseDown={() => console.log("onMouseDown")} onMouseUp={() => console.log("onMouseUp")} > 	… </Slider.Root> 

We recommend using pointer events instead (eg. `onPointerDown`, `onPointerUp`). Regardless of the above limitation, these events are better suited for cross-platform/device handling as they are fired for all pointer input types (mouse, touch, pen, etc.).

#### Quick nav

*   Installation
*   Anatomy
*   API Reference
*   Root
*   Track
*   Range
*   Thumb
*   Examples
*   Vertical orientation
*   Create a range
*   Define step size
*   Prevent thumb overlap
*   Accessibility
*   Keyboard Interactions
*   Custom APIs
*   Abstract all parts
*   Caveats
*   Mouse events are not fired

PreviousSeparator

NextSwitch

Edit this page on GitHub.

---

## Page: https://www.radix-ui.com/primitives/docs/components/switch

Components

# Switch

A control that allows the user to toggle between checked and not checked.

Airplane mode

index.jsxindex.jsxstyles.cssstyles.css

CSS

    import * as React from "react"; import { Switch } from "radix-ui"; import "./styles.css";  const SwitchDemo = () => ( 	<form>  <div style={{ display: "flex", alignItems: "center" }}>  <label className="Label" htmlFor="airplane-mode" style={{ paddingRight: 15 }} >  Airplane mode  </label>  <Switch.Root className="SwitchRoot" id="airplane-mode">  <Switch.Thumb className="SwitchThumb" />  </Switch.Root>  </div> 	</form> );  export default SwitchDemo; 

## Features

Full keyboard navigation.

Can be controlled or uncontrolled.

## Component Reference Links

Version: 1.2.5

Size: 4.06 kB

View source

Report an issue

ARIA design pattern

## Installation

Install the component from your command line.

    npm install @radix-ui/react-switch 

## Anatomy

Import all parts and piece them together.

    import { Switch } from "radix-ui";  export default () => ( 	<Switch.Root>  <Switch.Thumb /> 	</Switch.Root> ); 

## API Reference

### Root

Contains all the parts of a switch. An `input` will also render when used within a `form` to ensure events propagate correctly.

| Prop | Type | Default |
| --- | --- | --- |
| 
`asChild`

Prop description

 | 

`boolean`



 | `false` |
| 

`defaultChecked`

Prop description

 | 

`boolean`



 | No default value |
| 

`checked`

Prop description

 | 

`boolean`



 | No default value |
| 

`onCheckedChange`

Prop description

 | 

`function`

See full type

 | No default value |
| 

`disabled`

Prop description

 | 

`boolean`



 | No default value |
| 

`required`

Prop description

 | 

`boolean`



 | No default value |
| 

`name`

Prop description

 | 

`string`



 | No default value |
| 

`value`

Prop description

 | 

`string`



 | `on` |

| Data attribute | Values |
| --- | --- |
| `[data-state]` | `"checked" | "unchecked"` |
| `[data-disabled]` | 
Present when disabled

 |

### Thumb

The thumb that is used to visually indicate whether the switch is on or off.

| Prop | Type | Default |
| --- | --- | --- |
| 
`asChild`

Prop description

 | 

`boolean`



 | `false` |

| Data attribute | Values |
| --- | --- |
| `[data-state]` | `"checked" | "unchecked"` |
| `[data-disabled]` | 
Present when disabled

 |

## Accessibility

Adheres to the `switch` role requirements.

### Keyboard Interactions

| Key | Description |
| --- | --- |
| 
Space

 | Toggles the component's state. |
| 

Enter

 | Toggles the component's state. |

#### Quick nav

*   Installation
*   Anatomy
*   API Reference
*   Root
*   Thumb
*   Accessibility
*   Keyboard Interactions

PreviousSlider

NextTabs

Edit this page on GitHub.

---

## Page: https://www.radix-ui.com/primitives/docs/components/tabs

Components

# Tabs

A set of layered sections of content—known as tab panels—that are displayed one at a time.

AccountPassword

Make changes to your account here. Click save when you're done.

Name

Username

Save changes

index.jsxindex.jsxstyles.cssstyles.css

CSS

    import * as React from "react"; import { Tabs } from "radix-ui"; import "./styles.css";  const TabsDemo = () => ( 	<Tabs.Root className="TabsRoot" defaultValue="tab1">  <Tabs.List className="TabsList" aria-label="Manage your account">  <Tabs.Trigger className="TabsTrigger" value="tab1">  Account  </Tabs.Trigger>  <Tabs.Trigger className="TabsTrigger" value="tab2">  Password  </Tabs.Trigger>  </Tabs.List>  <Tabs.Content className="TabsContent" value="tab1">  <p className="Text">  Make changes to your account here. Click save when you're done.  </p>  <fieldset className="Fieldset">  <label className="Label" htmlFor="name">  Name  </label>  <input className="Input" id="name" defaultValue="Pedro Duarte" />  </fieldset>  <fieldset className="Fieldset">  <label className="Label" htmlFor="username">  Username  </label>  <input className="Input" id="username" defaultValue="@peduarte" />  </fieldset>  <div style={{ display: "flex", marginTop: 20, justifyContent: "flex-end" }} >  <button className="Button green">Save changes</button>  </div>  </Tabs.Content>  <Tabs.Content className="TabsContent" value="tab2">  <p className="Text">  Change your password here. After saving, you'll be logged out.  </p>  <fieldset className="Fieldset">  <label className="Label" htmlFor="currentPassword">  Current password  </label>  <input className="Input" id="currentPassword" type="password" />  </fieldset>  <fieldset className="Fieldset">  <label className="Label" htmlFor="newPassword">  New password  </label>  <input className="Input" id="newPassword" type="password" />  </fieldset>  <fieldset className="Fieldset">  <label className="Label" htmlFor="confirmPassword">  Confirm password  </label>  <input className="Input" id="confirmPassword" type="password" />  </fieldset>  <div style={{ display: "flex", marginTop: 20, justifyContent: "flex-end" }} >  <button className="Button green">Change password</button>  </div>  </Tabs.Content> 	</Tabs.Root> );  export default TabsDemo; 

## Features

Can be controlled or uncontrolled.

Supports horizontal/vertical orientation.

Supports automatic/manual activation.

Full keyboard navigation.

## Component Reference Links

Version: 1.1.12

Size: 9.38 kB

View source

Report an issue

ARIA design pattern

## Installation

Install the component from your command line.

    npm install @radix-ui/react-tabs 

## Anatomy

Import all parts and piece them together.

    import { Tabs } from "radix-ui";  export default () => ( 	<Tabs.Root>  <Tabs.List>  <Tabs.Trigger />  </Tabs.List>  <Tabs.Content /> 	</Tabs.Root> ); 

## API Reference

### Root

Contains all the tabs component parts.

| Prop | Type | Default |
| --- | --- | --- |
| 
`asChild`

Prop description

 | 

`boolean`



 | `false` |
| 

`defaultValue`

Prop description

 | 

`string`



 | No default value |
| 

`value`

Prop description

 | 

`string`



 | No default value |
| 

`onValueChange`

Prop description

 | 

`function`

See full type

 | No default value |
| 

`orientation`

Prop description

 | 

`enum`

See full type

 | `"horizontal"` |
| 

`dir`

Prop description

 | 

`enum`

See full type

 | No default value |
| 

`activationMode`

Prop description

 | 

`enum`

See full type

 | `"automatic"` |

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

### List

Contains the triggers that are aligned along the edge of the active content.

| Prop | Type | Default |
| --- | --- | --- |
| 
`asChild`

Prop description

 | 

`boolean`



 | `false` |
| 

`loop`

Prop description

 | 

`boolean`



 | `true` |

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

### Trigger

The button that activates its associated content.

| Prop | Type | Default |
| --- | --- | --- |
| 
`asChild`

Prop description

 | 

`boolean`



 | `false` |
| 

`value*`

Prop description

 | 

`string`



 | No default value |
| 

`disabled`

Prop description

 | 

`boolean`



 | `false` |

| Data attribute | Values |
| --- | --- |
| `[data-state]` | `"active" | "inactive"` |
| `[data-disabled]` | 
Present when disabled

 |
| `[data-orientation]` | `"vertical" | "horizontal"` |

### Content

Contains the content associated with each trigger.

| Prop | Type | Default |
| --- | --- | --- |
| 
`asChild`

Prop description

 | 

`boolean`



 | `false` |
| 

`value*`

Prop description

 | 

`string`



 | No default value |
| 

`forceMount`

Prop description

 | 

`boolean`



 | No default value |

| Data attribute | Values |
| --- | --- |
| `[data-state]` | `"active" | "inactive"` |
| `[data-orientation]` | `"vertical" | "horizontal"` |

## Examples

### Vertical

You can create vertical tabs by using the `orientation` prop.

    import { Tabs } from "radix-ui";  export default () => ( 	<Tabs.Root defaultValue="tab1" orientation="vertical">  <Tabs.List aria-label="tabs example">  <Tabs.Trigger value="tab1">One</Tabs.Trigger>  <Tabs.Trigger value="tab2">Two</Tabs.Trigger>  <Tabs.Trigger value="tab3">Three</Tabs.Trigger>  </Tabs.List>  <Tabs.Content value="tab1">Tab one content</Tabs.Content>  <Tabs.Content value="tab2">Tab two content</Tabs.Content>  <Tabs.Content value="tab3">Tab three content</Tabs.Content> 	</Tabs.Root> ); 

## Accessibility

Adheres to the Tabs WAI-ARIA design pattern.

### Keyboard Interactions

| Key | Description |
| --- | --- |
| 
Tab

 | When focus moves onto the tabs, focuses the active trigger. When a trigger is focused, moves focus to the active content. |
| 

ArrowDown

 | Moves focus to the next trigger depending on `orientation` and activates its associated content. |
| 

ArrowRight

 | Moves focus to the next trigger depending on `orientation` and activates its associated content. |
| 

ArrowUp

 | Moves focus to the previous trigger depending on `orientation` and activates its associated content. |
| 

ArrowLeft

 | Moves focus to the previous trigger depending on `orientation` and activates its associated content. |
| 

Home

 | Moves focus to the first trigger and activates its associated content. |
| 

End

 | Moves focus to the last trigger and activates its associated content. |

#### Quick nav

*   Installation
*   Anatomy
*   API Reference
*   Root
*   List
*   Trigger
*   Content
*   Examples
*   Vertical
*   Accessibility
*   Keyboard Interactions

PreviousSwitch

NextToast

Edit this page on GitHub.

---

## Page: https://www.radix-ui.com/primitives/docs/components/toast

Components

# Toast

A succinct message that is displayed temporarily.

Add to calendar

index.jsxindex.jsxstyles.cssstyles.css

CSS

    import * as React from "react"; import { Toast } from "radix-ui"; import "./styles.css";  const ToastDemo = () => { 	const [open, setOpen] = React.useState(false); 	const eventDateRef = React.useRef(new Date()); 	const timerRef = React.useRef(0);  	React.useEffect(() => {  return () => clearTimeout(timerRef.current); 	}, []);  	return (  <Toast.Provider swipeDirection="right">  <button className="Button large violet" onClick={() => { setOpen(false); window.clearTimeout(timerRef.current); timerRef.current = window.setTimeout(() => { eventDateRef.current = oneWeekAway(); setOpen(true); }, 100); }} >  Add to calendar  </button>   <Toast.Root className="ToastRoot" open={open} onOpenChange={setOpen}>  <Toast.Title className="ToastTitle">Scheduled: Catch up</Toast.Title>  <Toast.Description asChild>  <time className="ToastDescription" dateTime={eventDateRef.current.toISOString()} >  {prettyDate(eventDateRef.current)}  </time>  </Toast.Description>  <Toast.Action className="ToastAction" asChild altText="Goto schedule to undo" >  <button className="Button small green">Undo</button>  </Toast.Action>  </Toast.Root>  <Toast.Viewport className="ToastViewport" />  </Toast.Provider> 	); };  function oneWeekAway(date) { 	const now = new Date(); 	const inOneWeek = now.setDate(now.getDate() + 7); 	return new Date(inOneWeek); }  function prettyDate(date) { 	return new Intl.DateTimeFormat("en-US", {  dateStyle: "full",  timeStyle: "short", 	}).format(date); }  export default ToastDemo; 

## Features

Automatically closes.

Pauses closing on hover, focus and window blur.

Supports hotkey to jump to toast viewport.

Supports closing via swipe gesture.

Exposes CSS variables for swipe gesture animations.

Can be controlled or uncontrolled.

## Component Reference Links

Version: 1.2.14

Size: 11.15 kB

View source

Report an issue

ARIA design pattern

## Installation

Install the component from your command line.

    npm install @radix-ui/react-toast 

## Anatomy

Import the component.

    import { Toast } from "radix-ui";  export default () => ( 	<Toast.Provider>  <Toast.Root>  <Toast.Title />  <Toast.Description />  <Toast.Action />  <Toast.Close />  </Toast.Root>   <Toast.Viewport /> 	</Toast.Provider> ); 

## API Reference

### Provider

The provider that wraps your toasts and toast viewport. It usually wraps the application.

| Prop | Type | Default |
| --- | --- | --- |
| 
`duration`

Prop description

 | 

`number`



 | `5000` |
| 

`label*`

Prop description

 | 

`string`



 | `"Notification"` |
| 

`swipeDirection`

Prop description

 | 

`enum`

See full type

 | `"right"` |
| 

`swipeThreshold`

Prop description

 | 

`number`



 | `50` |

### Viewport

The fixed area where toasts appear. Users can jump to the viewport by pressing a hotkey. It is up to you to ensure the discoverability of the hotkey for keyboard users.

| Prop | Type | Default |
| --- | --- | --- |
| 
`asChild`

Prop description

 | 

`boolean`



 | `false` |
| 

`hotkey`

Prop description

 | 

`string[]`



 | `["F8"]` |
| 

`label`

Prop description

 | 

`string`



 | `"Notifications ({hotkey})"` |

### Root

The toast that automatically closes. It should not be held open to acquire a user response.

| Prop | Type | Default |
| --- | --- | --- |
| 
`asChild`

Prop description

 | 

`boolean`



 | `false` |
| 

`type`

Prop description

 | 

`enum`

See full type

 | `"foreground"` |
| 

`duration`

Prop description

 | 

`number`



 | No default value |
| 

`defaultOpen`

Prop description

 | 

`boolean`



 | `true` |
| 

`open`

Prop description

 | 

`boolean`



 | No default value |
| 

`onOpenChange`

Prop description

 | 

`function`

See full type

 | No default value |
| 

`onEscapeKeyDown`

Prop description

 | 

`function`

See full type

 | No default value |
| 

`onPause`

Prop description

 | 

`function`

See full type

 | No default value |
| 

`onResume`

Prop description

 | 

`function`

See full type

 | No default value |
| 

`onSwipeStart`

Prop description

 | 

`function`

See full type

 | No default value |
| 

`onSwipeMove`

Prop description

 | 

`function`

See full type

 | No default value |
| 

`onSwipeEnd`

Prop description

 | 

`function`

See full type

 | No default value |
| 

`onSwipeCancel`

Prop description

 | 

`function`

See full type

 | No default value |
| 

`forceMount`

Prop description

 | 

`boolean`



 | No default value |

| Data attribute | Values |
| --- | --- |
| `[data-state]` | `"open" | "closed"` |
| `[data-swipe]` | `"start" | "move" | "cancel" | "end"` |
| `[data-swipe-direction]` | `"up" | "down" | "left" | "right"` |

| CSS Variable | Description |
| --- | --- |
| `--radix-toast-swipe-move-x` | The offset position of the toast when horizontally swiping |
| `--radix-toast-swipe-move-y` | The offset position of the toast when vertically swiping |
| `--radix-toast-swipe-end-x` | The offset end position of the toast after horizontally swiping |
| `--radix-toast-swipe-end-y` | The offset end position of the toast after vertically swiping |

### Title

An optional title for the toast.

| Prop | Type | Default |
| --- | --- | --- |
| 
`asChild`

Prop description

 | 

`boolean`



 | `false` |

### Description

The toast message.

| Prop | Type | Default |
| --- | --- | --- |
| 
`asChild`

Prop description

 | 

`boolean`



 | `false` |

### Action

An action that is safe to ignore to ensure users are not expected to complete tasks with unexpected side effects as a result of a time limit.

When obtaining a user response is necessary, portal an `AlertDialog` styled as a toast into the viewport instead.

| Prop | Type | Default |
| --- | --- | --- |
| 
`asChild`

Prop description

 | 

`boolean`



 | `false` |
| 

`altText*`

Prop description

 | 

`string`



 | No default value |

### Close

A button that allows users to dismiss the toast before its duration has elapsed.

| Prop | Type | Default |
| --- | --- | --- |
| 
`asChild`

Prop description

 | 

`boolean`



 | `false` |

## Examples

### Custom hotkey

Override the default hotkey using the `event.code` value for each key from keycode.info.

    <Toast.Provider> 	{/* ... */} 	<Toast.Viewport hotkey={["altKey", "KeyT"]} /> </Toast.Provider> 

### Custom duration

Customise the duration of a toast to override the provider value.

    <Toast.Root duration={3000}> 	<Toast.Description>Saved!</Toast.Description> </Toast.Root> 

### Duplicate toasts

When a toast must appear every time a user clicks a button, use state to render multiple instances of the same toast (see below). Alternatively, you can abstract the parts to create your own imperative API.

    export default () => { 	const [savedCount, setSavedCount] = React.useState(0);  	return (  <div>  <form onSubmit={() => setSavedCount((count) => count + 1)}>  {/* ... */}  <button>save</button>  </form>   {Array.from({ length: savedCount }).map((_, index) => (  <Toast.Root key={index}>  <Toast.Description>Saved!</Toast.Description>  </Toast.Root>  ))}  </div> 	); }; 

### Animating swipe gesture

Combine `--radix-toast-swipe-move-[x|y]` and `--radix-toast-swipe-end-[x|y]` CSS variables with `data-swipe="[start|move|cancel|end]"` attributes to animate a swipe to close gesture. Here's an example:

    // index.jsx import { Toast } from "radix-ui"; import "./styles.css";  export default () => ( 	<Toast.Provider swipeDirection="right">  <Toast.Root className="ToastRoot">...</Toast.Root>  <Toast.Viewport /> 	</Toast.Provider> ); 

    /* styles.css */ .ToastRoot[data-swipe="move"] { 	transform: translateX(var(--radix-toast-swipe-move-x)); } .ToastRoot[data-swipe="cancel"] { 	transform: translateX(0); 	transition: transform 200ms ease-out; } .ToastRoot[data-swipe="end"] { 	animation: slideRight 100ms ease-out; }  @keyframes slideRight { 	from {  transform: translateX(var(--radix-toast-swipe-end-x)); 	} 	to {  transform: translateX(100%); 	} } 

## Accessibility

Adheres to the `aria-live` requirements.

### Sensitivity

Control the sensitivity of the toast for screen readers using the `type` prop.

For toasts that are the result of a user action, choose `foreground`. Toasts generated from background tasks should use `background`.

#### Foreground

Foreground toasts are announced immediately. Assistive technologies may choose to clear previously queued messages when a foreground toast appears. Try to avoid stacking distinct foreground toasts at the same time.

#### Background

Background toasts are announced at the next graceful opportunity, for example, when the screen reader has finished reading its current sentence. They do not clear queued messages so overusing them can be perceived as a laggy user experience for screen reader users when used in response to a user interaction.

    <Toast.Root type="foreground"> 	<Toast.Description>File removed successfully.</Toast.Description> 	<Toast.Close>Dismiss</Toast.Close> </Toast.Root>  <Toast.Root type="background"> 	<Toast.Description>We've just released Radix 1.0.</Toast.Description> 	<Toast.Close>Dismiss</Toast.Close> </Toast.Root> 

### Alternative action

Use the `altText` prop on the `Action` to instruct an alternative way of actioning the toast to screen reader users.

You can direct the user to a permanent place in your application where they can action it or implement your own custom hotkey logic. If implementing the latter, use `foreground` type to announce immediately and increase the duration to give the user ample time.

    <Toast.Root type="background"> 	<Toast.Title>Upgrade Available!</Toast.Title> 	<Toast.Description>We've just released Radix 1.0.</Toast.Description> 	<Toast.Action altText="Goto account settings to upgrade">  Upgrade 	</Toast.Action> 	<Toast.Close>Dismiss</Toast.Close> </Toast.Root>  <Toast.Root type="foreground" duration={10000}> 	<Toast.Description>File removed successfully.</Toast.Description> 	<Toast.Action altText="Undo (Alt+U)">  Undo <kbd>Alt</kbd>+<kbd>U</kbd> 	</Toast.Action> 	<Toast.Close>Dismiss</Toast.Close> </Toast.Root> 

### Close icon button

When providing an icon (or font icon), remember to label it correctly for screen reader users.

    <Toast.Root type="foreground"> 	<Toast.Description>Saved!</Toast.Description> 	<Toast.Close aria-label="Close">  <span aria-hidden>×</span> 	</Toast.Close> </Toast.Root> 

### Keyboard Interactions

| Key | Description |
| --- | --- |
| 
F8

 | Focuses toasts viewport. |
| 

Tab

 | Moves focus to the next focusable element. |
| 

Shift + Tab

 | Moves focus to the previous focusable element. |
| 

Space

 | When focus is on a `Toast.Action` or `Toast.Close`, closes the toast. |
| 

Enter

 | When focus is on a `Toast.Action` or `Toast.Close`, closes the toast. |
| 

Esc

 | When focus is on a `Toast`, closes the toast. |

## Custom APIs

### Abstract parts

Create your own API by abstracting the primitive parts into your own component.

#### Usage

    import { Toast } from "./your-toast";  export default () => ( 	<Toast title="Upgrade available" content="We've just released Radix 3.0!">  <button onClick={handleUpgrade}>Upgrade</button> 	</Toast> ); 

#### Implementation

    // your-toast.jsx import { Toast as ToastPrimitive } from "radix-ui";  export const Toast = ({ title, content, children, ...props }) => { 	return (  <ToastPrimitive.Root {...props}>  {title && <ToastPrimitive.Title>{title}</ToastPrimitive.Title>}  <ToastPrimitive.Description>{content}</ToastPrimitive.Description>  {children && (  <ToastPrimitive.Action asChild>{children}</ToastPrimitive.Action>  )}  <ToastPrimitive.Close aria-label="Close">  <span aria-hidden>×</span>  </ToastPrimitive.Close>  </ToastPrimitive.Root> 	); }; 

### Imperative API

Create your own imperative API to allow toast duplication if preferred.

#### Usage

    import { Toast } from "./your-toast";  export default () => { 	const savedRef = React.useRef(); 	return (  <div>  <form onSubmit={() => savedRef.current.publish()}>  {/* ... */}  <button>Save</button>  </form>  <Toast ref={savedRef}>Saved successfully!</Toast>  </div> 	); }; 

#### Implementation

    // your-toast.jsx import * as React from "react"; import { Toast as ToastPrimitive } from "radix-ui";  export const Toast = React.forwardRef((props, forwardedRef) => { 	const { children, ...toastProps } = props; 	const [count, setCount] = React.useState(0);  	React.useImperativeHandle(forwardedRef, () => ({  publish: () => setCount((count) => count + 1), 	}));  	return (  <>  {Array.from({ length: count }).map((_, index) => (  <ToastPrimitive.Root key={index} {...toastProps}>  <ToastPrimitive.Description>{children}</ToastPrimitive.Description>  <ToastPrimitive.Close>Dismiss</ToastPrimitive.Close>  </ToastPrimitive.Root>  ))}  </> 	); }); 

#### Quick nav

*   Installation
*   Anatomy
*   API Reference
*   Provider
*   Viewport
*   Root
*   Title
*   Description
*   Action
*   Close
*   Examples
*   Custom hotkey
*   Custom duration
*   Duplicate toasts
*   Animating swipe gesture
*   Accessibility
*   Sensitivity
*   Alternative action
*   Close icon button
*   Keyboard Interactions
*   Custom APIs
*   Abstract parts
*   Imperative API

PreviousTabs

NextToggle

Edit this page on GitHub.

---

## Page: https://www.radix-ui.com/primitives/docs/components/toggle

Components

# Toggle

A two-state button that can be either on or off.

index.jsxindex.jsxstyles.cssstyles.css

CSS

    import * as React from "react"; import { Toggle } from "radix-ui"; import { FontItalicIcon } from "@radix-ui/react-icons"; import "./styles.css";  const ToggleDemo = () => ( 	<Toggle.Root className="Toggle" aria-label="Toggle italic">  <FontItalicIcon /> 	</Toggle.Root> );  export default ToggleDemo; 

## Features

Full keyboard navigation.

Can be controlled or uncontrolled.

## Component Reference Links

Version: 1.1.9

Size: 2.77 kB

View source

Report an issue

ARIA design pattern

## Installation

Install the component from your command line.

    npm install @radix-ui/react-toggle 

## Anatomy

Import the component.

    import { Toggle } from "radix-ui";  export default () => <Toggle.Root />; 

## API Reference

### Root

The toggle.

| Prop | Type | Default |
| --- | --- | --- |
| 
`asChild`

Prop description

 | 

`boolean`



 | `false` |
| 

`defaultPressed`

Prop description

 | 

`boolean`



 | No default value |
| 

`pressed`

Prop description

 | 

`boolean`



 | No default value |
| 

`onPressedChange`

Prop description

 | 

`function`

See full type

 | No default value |
| 

`disabled`

Prop description

 | 

`boolean`



 | No default value |

| Data attribute | Values |
| --- | --- |
| `[data-state]` | `"on" | "off"` |
| `[data-disabled]` | 
Present when disabled

 |

## Accessibility

### Keyboard Interactions

| Key | Description |
| --- | --- |
| 
Space

 | Activates/deactivates the toggle. |
| 

Enter

 | Activates/deactivates the toggle. |

#### Quick nav

*   Installation
*   Anatomy
*   API Reference
*   Root
*   Accessibility
*   Keyboard Interactions

PreviousToast

NextToggle Group

Edit this page on GitHub.

---

## Page: https://www.radix-ui.com/primitives/docs/components/toggle-group

Components

# Toggle Group

A set of two-state buttons that can be toggled on or off.

index.jsxindex.jsxstyles.cssstyles.css

CSS

    import * as React from "react"; import { ToggleGroup } from "radix-ui"; import { TextAlignLeftIcon, TextAlignCenterIcon, TextAlignRightIcon, } from "@radix-ui/react-icons"; import "./styles.css";  const ToggleGroupDemo = () => ( 	<ToggleGroup.Root className="ToggleGroup" type="single" defaultValue="center" aria-label="Text alignment" >  <ToggleGroup.Item className="ToggleGroupItem" value="left" aria-label="Left aligned" >  <TextAlignLeftIcon />  </ToggleGroup.Item>  <ToggleGroup.Item className="ToggleGroupItem" value="center" aria-label="Center aligned" >  <TextAlignCenterIcon />  </ToggleGroup.Item>  <ToggleGroup.Item className="ToggleGroupItem" value="right" aria-label="Right aligned" >  <TextAlignRightIcon />  </ToggleGroup.Item> 	</ToggleGroup.Root> );  export default ToggleGroupDemo; 

## Features

Full keyboard navigation.

Supports horizontal/vertical orientation.

Support single and multiple pressed buttons.

Can be controlled or uncontrolled.

## Component Reference Links

Version: 1.1.10

Size: 8.44 kB

View source

Report an issue

ARIA design pattern

## Installation

Install the component from your command line.

    npm install @radix-ui/react-toggle-group 

## Anatomy

Import the component.

    import { ToggleGroup } from "radix-ui";  export default () => ( 	<ToggleGroup.Root>  <ToggleGroup.Item /> 	</ToggleGroup.Root> ); 

## API Reference

### Root

Contains all the parts of a toggle group.

| Prop | Type | Default |
| --- | --- | --- |
| 
`asChild`

Prop description

 | 

`boolean`



 | `false` |
| 

`type*`

Prop description

 | 

`enum`

See full type

 | No default value |
| 

`value`

Prop description

 | 

`string`



 | No default value |
| 

`defaultValue`

Prop description

 | 

`string`



 | No default value |
| 

`onValueChange`

Prop description

 | 

`function`

See full type

 | No default value |
| 

`value`

Prop description

 | 

`string[]`



 | `[]` |
| 

`defaultValue`

Prop description

 | 

`string[]`



 | `[]` |
| 

`onValueChange`

Prop description

 | 

`function`

See full type

 | No default value |
| 

`disabled`

Prop description

 | 

`boolean`



 | `false` |
| 

`rovingFocus`

Prop description

 | 

`boolean`



 | `true` |
| 

`orientation`

Prop description

 | 

`enum`

See full type

 | `undefined` |
| 

`dir`

Prop description

 | 

`enum`

See full type

 | No default value |
| 

`loop`

Prop description

 | 

`boolean`



 | `true` |

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

### Item

An item in the group.

| Prop | Type | Default |
| --- | --- | --- |
| 
`asChild`

Prop description

 | 

`boolean`



 | `false` |
| 

`value*`

Prop description

 | 

`string`



 | No default value |
| 

`disabled`

Prop description

 | 

`boolean`



 | No default value |

| Data attribute | Values |
| --- | --- |
| `[data-state]` | `"on" | "off"` |
| `[data-disabled]` | 
Present when disabled

 |
| `[data-orientation]` | `"vertical" | "horizontal"` |

## Examples

### Ensuring there is always a value

You can control the component to ensure a value.

    import * as React from "react"; import { ToggleGroup } from "radix-ui";  export default () => { 	const [value, setValue] = React.useState("left");  	return (  <ToggleGroup.Root type="single" value={value} onValueChange={(value) => { if (value) setValue(value); }} >  <ToggleGroup.Item value="left">  <TextAlignLeftIcon />  </ToggleGroup.Item>  <ToggleGroup.Item value="center">  <TextAlignCenterIcon />  </ToggleGroup.Item>  <ToggleGroup.Item value="right">  <TextAlignRightIcon />  </ToggleGroup.Item>  </ToggleGroup.Root> 	); }; 

## Accessibility

Uses roving tabindex to manage focus movement among items.

### Keyboard Interactions

| Key | Description |
| --- | --- |
| 
Tab

 | Moves focus to either the pressed item or the first item in the group. |
| 

Space

 | Activates/deactivates the item. |
| 

Enter

 | Activates/deactivates the item. |
| 

ArrowDown

 | Moves focus to the next item in the group. |
| 

ArrowRight

 | Moves focus to the next item in the group. |
| 

ArrowUp

 | Moves focus to the previous item in the group. |
| 

ArrowLeft

 | Moves focus to the previous item in the group. |
| 

Home

 | Moves focus to the first item. |
| 

End

 | Moves focus to the last item. |

#### Quick nav

*   Installation
*   Anatomy
*   API Reference
*   Root
*   Item
*   Examples
*   Ensuring there is always a value
*   Accessibility
*   Keyboard Interactions

PreviousToggle

NextToolbar

Edit this page on GitHub.

---

## Page: https://www.radix-ui.com/primitives/docs/components/toolbar

Components

# Toolbar

A container for grouping a set of controls, such as buttons, toggle groups or dropdown menus.

Edited 2 hours agoShare

index.jsxindex.jsxstyles.cssstyles.css

CSS

    import * as React from "react"; import { Toolbar } from "radix-ui"; import { StrikethroughIcon, TextAlignLeftIcon, TextAlignCenterIcon, TextAlignRightIcon, FontBoldIcon, FontItalicIcon, } from "@radix-ui/react-icons"; import "./styles.css";  const ToolbarDemo = () => ( 	<Toolbar.Root className="ToolbarRoot" aria-label="Formatting options">  <Toolbar.ToggleGroup type="multiple" aria-label="Text formatting">  <Toolbar.ToggleItem className="ToolbarToggleItem" value="bold" aria-label="Bold" >  <FontBoldIcon />  </Toolbar.ToggleItem>  <Toolbar.ToggleItem className="ToolbarToggleItem" value="italic" aria-label="Italic" >  <FontItalicIcon />  </Toolbar.ToggleItem>  <Toolbar.ToggleItem className="ToolbarToggleItem" value="strikethrough" aria-label="Strike through" >  <StrikethroughIcon />  </Toolbar.ToggleItem>  </Toolbar.ToggleGroup>  <Toolbar.Separator className="ToolbarSeparator" />  <Toolbar.ToggleGroup type="single" defaultValue="center" aria-label="Text alignment" >  <Toolbar.ToggleItem className="ToolbarToggleItem" value="left" aria-label="Left aligned" >  <TextAlignLeftIcon />  </Toolbar.ToggleItem>  <Toolbar.ToggleItem className="ToolbarToggleItem" value="center" aria-label="Center aligned" >  <TextAlignCenterIcon />  </Toolbar.ToggleItem>  <Toolbar.ToggleItem className="ToolbarToggleItem" value="right" aria-label="Right aligned" >  <TextAlignRightIcon />  </Toolbar.ToggleItem>  </Toolbar.ToggleGroup>  <Toolbar.Separator className="ToolbarSeparator" />  <Toolbar.Link className="ToolbarLink" href="#" target="_blank" style={{ marginRight: 10 }} >  Edited 2 hours ago  </Toolbar.Link>  <Toolbar.Button className="ToolbarButton" style={{ marginLeft: "auto" }}>  Share  </Toolbar.Button> 	</Toolbar.Root> );  export default ToolbarDemo; 

## Features

Full keyboard navigation.

## Component Reference Links

Version: 1.1.10

Size: 10.48 kB

View source

Report an issue

ARIA design pattern

## Installation

Install the component from your command line.

    npm install @radix-ui/react-toolbar 

## Anatomy

Import the component.

    import { Toolbar } from "radix-ui";  export default () => ( 	<Toolbar.Root>  <Toolbar.Button />  <Toolbar.Separator />  <Toolbar.Link />  <Toolbar.ToggleGroup>  <Toolbar.ToggleItem />  </Toolbar.ToggleGroup> 	</Toolbar.Root> ); 

## API Reference

### Root

Contains all the toolbar component parts.

| Prop | Type | Default |
| --- | --- | --- |
| 
`asChild`

Prop description

 | 

`boolean`



 | `false` |
| 

`orientation`

Prop description

 | 

`enum`

See full type

 | `"horizontal"` |
| 

`dir`

Prop description

 | 

`enum`

See full type

 | No default value |
| 

`loop`

Prop description

 | 

`boolean`



 | `true` |

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

### Button

A button item.

| Prop | Type | Default |
| --- | --- | --- |
| 
`asChild`

Prop description

 | 

`boolean`



 | `false` |

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

### Link

A link item.

| Prop | Type | Default |
| --- | --- | --- |
| 
`asChild`

Prop description

 | 

`boolean`



 | `false` |

### ToggleGroup

A set of two-state buttons that can be toggled on or off.

| Prop | Type | Default |
| --- | --- | --- |
| 
`asChild`

Prop description

 | 

`boolean`



 | `false` |
| 

`type*`

Prop description

 | 

`enum`

See full type

 | No default value |
| 

`value`

Prop description

 | 

`string`



 | No default value |
| 

`defaultValue`

Prop description

 | 

`string`



 | No default value |
| 

`onValueChange`

Prop description

 | 

`function`

See full type

 | No default value |
| 

`value`

Prop description

 | 

`string[]`



 | `[]` |
| 

`defaultValue`

Prop description

 | 

`string[]`



 | `[]` |
| 

`onValueChange`

Prop description

 | 

`function`

See full type

 | No default value |
| 

`disabled`

Prop description

 | 

`boolean`



 | `false` |

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

### ToggleItem

An item in the group.

| Prop | Type | Default |
| --- | --- | --- |
| 
`asChild`

Prop description

 | 

`boolean`



 | `false` |
| 

`value*`

Prop description

 | 

`string`



 | No default value |
| 

`disabled`

Prop description

 | 

`boolean`



 | No default value |

| Data attribute | Values |
| --- | --- |
| `[data-state]` | `"on" | "off"` |
| `[data-disabled]` | 
Present when disabled

 |
| `[data-orientation]` | `"vertical" | "horizontal"` |

### Separator

Used to visually separate items in the toolbar.

| Prop | Type | Default |
| --- | --- | --- |
| 
`asChild`

Prop description

 | 

`boolean`



 | `false` |

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

## Examples

### Use with other primitives

All our primitives which expose a `Trigger` part, such as `Dialog`, `AlertDialog`, `Popover`, `DropdownMenu` can be composed within a toolbar by using the `asChild` prop.

Here is an example using our `DropdownMenu` primitive.

    import { Toolbar, DropdownMenu } from "radix-ui";  export default () => ( 	<Toolbar.Root>  <Toolbar.Button>Action 1</Toolbar.Button>  <Toolbar.Separator />  <DropdownMenu.Root>  <Toolbar.Button asChild>  <DropdownMenu.Trigger>Trigger</DropdownMenu.Trigger>  </Toolbar.Button>  <DropdownMenu.Content>…</DropdownMenu.Content>  </DropdownMenu.Root> 	</Toolbar.Root> ); 

## Accessibility

Uses roving tabindex to manage focus movement among items.

### Keyboard Interactions

| Key | Description |
| --- | --- |
| 
Tab

 | Moves focus to the first item in the group. |
| 

Space

 | Activates/deactivates the item. |
| 

Enter

 | Activates/deactivates the item. |
| 

ArrowDown

 | Moves focus to the next item depending on `orientation`. |
| 

ArrowRight

 | Moves focus to the next item depending on `orientation`. |
| 

ArrowUp

 | Moves focus to the previous item depending on `orientation`. |
| 

ArrowLeft

 | Moves focus to the previous item depending on `orientation`. |
| 

Home

 | Moves focus to the first item. |
| 

End

 | Moves focus to the last item. |

#### Quick nav

*   Installation
*   Anatomy
*   API Reference
*   Root
*   Button
*   Link
*   ToggleGroup
*   ToggleItem
*   Separator
*   Examples
*   Use with other primitives
*   Accessibility
*   Keyboard Interactions

PreviousToggle Group

NextTooltip

Edit this page on GitHub.

---

## Page: https://www.radix-ui.com/primitives/docs/components/tooltip

Components

# Tooltip

A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.

index.jsxindex.jsxstyles.cssstyles.css

CSS

    import * as React from "react"; import { Tooltip } from "radix-ui"; import { PlusIcon } from "@radix-ui/react-icons"; import "./styles.css";  const TooltipDemo = () => { 	return (  <Tooltip.Provider>  <Tooltip.Root>  <Tooltip.Trigger asChild>  <button className="IconButton">  <PlusIcon />  </button>  </Tooltip.Trigger>  <Tooltip.Portal>  <Tooltip.Content className="TooltipContent" sideOffset={5}>  Add to library  <Tooltip.Arrow className="TooltipArrow" />  </Tooltip.Content>  </Tooltip.Portal>  </Tooltip.Root>  </Tooltip.Provider> 	); };  export default TooltipDemo; 

## Features

Provider to control display delay globally.

Opens when the trigger is focused or hovered.

Closes when the trigger is activated or when pressing escape.

Supports custom timings.

## Component Reference Links

Version: 1.2.7

Size: 18.79 kB

View source

Report an issue

ARIA design pattern

## Installation

Install the component from your command line.

    npm install @radix-ui/react-tooltip 

## Anatomy

Import all parts and piece them together.

    import { Tooltip } from "radix-ui";  export default () => ( 	<Tooltip.Provider>  <Tooltip.Root>  <Tooltip.Trigger />  <Tooltip.Portal>  <Tooltip.Content>  <Tooltip.Arrow />  </Tooltip.Content>  </Tooltip.Portal>  </Tooltip.Root> 	</Tooltip.Provider> ); 

## API Reference

### Provider

Wraps your app to provide global functionality to your tooltips.

| Prop | Type | Default |
| --- | --- | --- |
| 
`delayDuration`

Prop description

 | 

`number`



 | `700` |
| 

`skipDelayDuration`

Prop description

 | 

`number`



 | `300` |
| 

`disableHoverableContent`

Prop description

 | 

`boolean`



 | No default value |

### Root

Contains all the parts of a tooltip.

| Prop | Type | Default |
| --- | --- | --- |
| 
`defaultOpen`

Prop description

 | 

`boolean`



 | No default value |
| 

`open`

Prop description

 | 

`boolean`



 | No default value |
| 

`onOpenChange`

Prop description

 | 

`function`

See full type

 | No default value |
| 

`delayDuration`

Prop description

 | 

`number`



 | `700` |
| 

`disableHoverableContent`

Prop description

 | 

`boolean`



 | No default value |

### Trigger

The button that toggles the tooltip. By default, the `Tooltip.Content` will position itself against the trigger.

| Prop | Type | Default |
| --- | --- | --- |
| 
`asChild`

Prop description

 | 

`boolean`



 | `false` |

| Data attribute | Values |
| --- | --- |
| `[data-state]` | `"closed" | "delayed-open" | "instant-open"` |

### Portal

When used, portals the content part into the `body`.

| Prop | Type | Default |
| --- | --- | --- |
| 
`forceMount`

Prop description

 | 

`boolean`



 | No default value |
| 

`container`

Prop description

 | 

`HTMLElement`



 | `document.body` |

### Content

The component that pops out when the tooltip is open.

| Prop | Type | Default |
| --- | --- | --- |
| 
`asChild`

Prop description

 | 

`boolean`



 | `false` |
| 

`aria-label`

Prop description

 | 

`string`



 | No default value |
| 

`onEscapeKeyDown`

Prop description

 | 

`function`

See full type

 | No default value |
| 

`onPointerDownOutside`

Prop description

 | 

`function`

See full type

 | No default value |
| 

`forceMount`

Prop description

 | 

`boolean`



 | No default value |
| 

`side`

Prop description

 | 

`enum`

See full type

 | `"top"` |
| 

`sideOffset`

Prop description

 | 

`number`



 | `0` |
| 

`align`

Prop description

 | 

`enum`

See full type

 | `"center"` |
| 

`alignOffset`

Prop description

 | 

`number`



 | `0` |
| 

`avoidCollisions`

Prop description

 | 

`boolean`



 | `true` |
| 

`collisionBoundary`

Prop description

 | 

`Boundary`

See full type

 | `[]` |
| 

`collisionPadding`

Prop description

 | 

`number | Padding`

See full type

 | `0` |
| 

`arrowPadding`

Prop description

 | 

`number`



 | `0` |
| 

`sticky`

Prop description

 | 

`enum`

See full type

 | `"partial"` |
| 

`hideWhenDetached`

Prop description

 | 

`boolean`



 | `false` |

| Data attribute | Values |
| --- | --- |
| `[data-state]` | `"closed" | "delayed-open" | "instant-open"` |
| `[data-side]` | `"left" | "right" | "bottom" | "top"` |
| `[data-align]` | `"start" | "end" | "center"` |

| CSS Variable | Description |
| --- | --- |
| `--radix-tooltip-content-transform-origin` | The `transform-origin` computed from the content and arrow positions/offsets |
| `--radix-tooltip-content-available-width` | The remaining width between the trigger and the boundary edge |
| `--radix-tooltip-content-available-height` | The remaining height between the trigger and the boundary edge |
| `--radix-tooltip-trigger-width` | The width of the trigger |
| `--radix-tooltip-trigger-height` | The height of the trigger |

### Arrow

An optional arrow element to render alongside the tooltip. This can be used to help visually link the trigger with the `Tooltip.Content`. Must be rendered inside `Tooltip.Content`.

| Prop | Type | Default |
| --- | --- | --- |
| 
`asChild`

Prop description

 | 

`boolean`



 | `false` |
| 

`width`

Prop description

 | 

`number`



 | `10` |
| 

`height`

Prop description

 | 

`number`



 | `5` |

## Examples

### Configure globally

Use the `Provider` to control `delayDuration` and `skipDelayDuration` globally.

    import { Tooltip } from "radix-ui";  export default () => ( 	<Tooltip.Provider delayDuration={800} skipDelayDuration={500}>  <Tooltip.Root>  <Tooltip.Trigger>…</Tooltip.Trigger>  <Tooltip.Content>…</Tooltip.Content>  </Tooltip.Root>  <Tooltip.Root>  <Tooltip.Trigger>…</Tooltip.Trigger>  <Tooltip.Content>…</Tooltip.Content>  </Tooltip.Root> 	</Tooltip.Provider> ); 

### Show instantly

Use the `delayDuration` prop to control the time it takes for the tooltip to open.

    import { Tooltip } from "radix-ui";  export default () => ( 	<Tooltip.Root delayDuration={0}>  <Tooltip.Trigger>…</Tooltip.Trigger>  <Tooltip.Content>…</Tooltip.Content> 	</Tooltip.Root> ); 

### Constrain the content size

You may want to constrain the width of the content so that it matches the trigger width. You may also want to constrain its height to not exceed the viewport.

We expose several CSS custom properties such as `--radix-tooltip-trigger-width` and `--radix-tooltip-content-available-height` to support this. Use them to constrain the content dimensions.

    // index.jsx import { Tooltip } from "radix-ui"; import "./styles.css";  export default () => ( 	<Tooltip.Root>  <Tooltip.Trigger>…</Tooltip.Trigger>  <Tooltip.Portal>  <Tooltip.Content className="TooltipContent" sideOffset={5}>  …  </Tooltip.Content>  </Tooltip.Portal> 	</Tooltip.Root> ); 

    /* styles.css */ .TooltipContent { 	width: var(--radix-tooltip-trigger-width); 	max-height: var(--radix-tooltip-content-available-height); } 

### Origin-aware animations

We expose a CSS custom property `--radix-tooltip-content-transform-origin`. Use it to animate the content from its computed origin based on `side`, `sideOffset`, `align`, `alignOffset` and any collisions.

    // index.jsx import { Tooltip } from "radix-ui"; import "./styles.css";  export default () => ( 	<Tooltip.Root>  <Tooltip.Trigger>…</Tooltip.Trigger>  <Tooltip.Content className="TooltipContent">…</Tooltip.Content> 	</Tooltip.Root> ); 

    /* styles.css */ .TooltipContent { 	transform-origin: var(--radix-tooltip-content-transform-origin); 	animation: scaleIn 0.5s ease-out; }  @keyframes scaleIn { 	from {  opacity: 0;  transform: scale(0); 	} 	to {  opacity: 1;  transform: scale(1); 	} } 

### Collision-aware animations

We expose `data-side` and `data-align` attributes. Their values will change at runtime to reflect collisions. Use them to create collision and direction-aware animations.

    // index.jsx import { Tooltip } from "radix-ui"; import "./styles.css";  export default () => ( 	<Tooltip.Root>  <Tooltip.Trigger>…</Tooltip.Trigger>  <Tooltip.Content className="TooltipContent">…</Tooltip.Content> 	</Tooltip.Root> ); 

    /* styles.css */ .TooltipContent { 	animation-duration: 0.6s; 	animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1); } .TooltipContent[data-side="top"] { 	animation-name: slideUp; } .TooltipContent[data-side="bottom"] { 	animation-name: slideDown; }  @keyframes slideDown { 	from {  opacity: 0;  transform: translateY(-10px); 	} 	to {  opacity: 1;  transform: translateY(0); 	} }  @keyframes slideUp { 	from {  opacity: 0;  transform: translateY(10px); 	} 	to {  opacity: 1;  transform: translateY(0); 	} } 

## Accessibility

### Keyboard Interactions

| Key | Description |
| --- | --- |
| 
Tab

 | Opens/closes the tooltip without delay. |
| 

Space

 | If open, closes the tooltip without delay. |
| 

Enter

 | If open, closes the tooltip without delay. |
| 

Escape

 | If open, closes the tooltip without delay. |

## Custom APIs

Create your own API by abstracting the primitive parts into your own component.

### Abstract parts and introduce a content prop

This example abstracts all of the `Tooltip` parts and introduces a new `content` prop.

#### Usage

    import { Tooltip } from "./your-tooltip";  export default () => ( 	<Tooltip content="Tooltip content">  <button>Tooltip trigger</button> 	</Tooltip> ); 

#### Implementation

Use the `asChild` prop to convert the trigger part into a slottable area. It will replace the trigger with the child that gets passed to it.

    // your-tooltip.jsx import * as React from "react"; import { Tooltip as TooltipPrimitive } from "radix-ui";  export function Tooltip({ children, content, open, defaultOpen, onOpenChange, ...props }) { 	return (  <TooltipPrimitive.Root open={open} defaultOpen={defaultOpen} onOpenChange={onOpenChange} >  <TooltipPrimitive.Trigger asChild>  {children}  </TooltipPrimitive.Trigger>  <TooltipPrimitive.Content side="top" align="center" {...props}>  {content}  <TooltipPrimitive.Arrow width={11} height={5} />  </TooltipPrimitive.Content>  </TooltipPrimitive.Root> 	); } 

#### Quick nav

*   Installation
*   Anatomy
*   API Reference
*   Provider
*   Root
*   Trigger
*   Portal
*   Content
*   Arrow
*   Examples
*   Configure globally
*   Show instantly
*   Constrain the content size
*   Origin-aware animations
*   Collision-aware animations
*   Accessibility
*   Keyboard Interactions
*   Custom APIs
*   Abstract parts and introduce a content prop

PreviousToolbar

NextAccessible Icon

Edit this page on GitHub.

---

## Page: https://www.radix-ui.com/primitives/docs/utilities/accessible-icon

Utilities

# Accessible Icon

Makes icons accessible by adding a label.

## Features

Quickly make any icon accessible by wrapping it and providing a meaningful label.

No visual difference, but announced correctly by screen readers.

## Component Reference Links

Version: 1.1.7

Size: 1.82 kB

View source

Report an issue

## Installation

Install the component from your command line.

    npm install @radix-ui/react-accessible-icon 

## Anatomy

Import the component.

    import { AccessibleIcon } from "radix-ui";  export default () => <AccessibleIcon.Root />; 

## API Reference

### Root

Contains the icon to make accessible.

| Prop | Type | Default |
| --- | --- | --- |
| 
`label*`

Prop description

 | 

`string`



 | No default value |

## Accessibility

Most icons or icon systems come with no accessibility built-in. For example, the same visual **cross** icon may in fact mean **"close"** or **"delete"**. This component lets you give meaning to icons used throughout your app.

This is built with Visually Hidden.

#### Quick nav

*   Installation
*   Anatomy
*   API Reference
*   Root
*   Accessibility

PreviousTooltip

NextDirection Provider

Edit this page on GitHub.

---

## Page: https://www.radix-ui.com/primitives/docs/utilities/portal

Utilities

# Portal

Renders a React subtree in a different part of the DOM.

## Features

Render any React subtree outside of your App.

Appends to \`document.body\` by default but can be customized to use a different container.

## Component Reference Links

Version: 1.1.9

Size: 1.72 kB

View source

Report an issue

## Installation

Install the component from your command line.

    npm install @radix-ui/react-portal 

## Anatomy

Import the component.

    import { Portal } from "radix-ui";  export default () => <Portal.Root />; 

## Basic example

Use the portal primitive.

    import { Portal } from "radix-ui";  export default () => <Portal.Root>Content</Portal.Root>; 

## API Reference

### Root

Anything you put inside this component will be rendered in a separate `<div>` element. By default, this element will be appended to `document.body` but you can choose a different container by using the `container` prop.

| Prop | Type | Default |
| --- | --- | --- |
| 
`asChild`

Prop description

 | 

`boolean`



 | `false` |
| 

`container`

Prop description

 | 

`HTMLElement`



 | No default value |

#### Quick nav

*   Installation
*   Anatomy
*   Basic example
*   API Reference
*   Root

PreviousDirection Provider

NextSlot

Edit this page on GitHub.

---

## Page: https://www.radix-ui.com/primitives/docs/utilities/slot

Utilities

# Slot

Merges its props onto its immediate child.

## Features

Can be used to support your own \`asChild\` prop.

## Component Reference Links

Version: 1.2.3

Size: 1.24 kB

View source

Report an issue

## Installation

Install the component from your command line.

    npm install @radix-ui/react-slot 

## Anatomy

Import the component.

    import { Slot } from "radix-ui";  export default () => ( 	<Slot.Root>  <div>Hello</div> 	</Slot.Root> ); 

## Basic example

Use to create your own `asChild` API.

When your component has a single children element:

    // your-button.jsx import * as React from "react"; import { Slot } from "radix-ui";  function Button({ asChild, ...props }) { 	const Comp = asChild ? Slot.Root : "button"; 	return <Comp {...props} />; } 

Use `Slottable` when your component has multiple children to pass the props to the correct element:

    // your-button.jsx import * as React from "react"; import { Slot } from "radix-ui";  function Button({ asChild, children, leftElement, rightElement, ...props }) { 	const Comp = asChild ? Slot.Root : "button"; 	return (  <Comp {...props}>  {leftElement}  <Slot.Slottable>{children}</Slot.Slottable>  {rightElement}  </Comp> 	); } 

### Usage

    import { Button } from "./your-button";  export default () => ( 	<Button asChild>  <a href="/contact">Contact</a> 	</Button> ); 

### Event handlers

Any prop that starts with `on` (e.g., `onClick`) is considered an event handler.

When merging event handlers, `Slot` will create a new function where the child handler takes precedence over the slot handler.

If one of the event handlers relies on `event.defaultPrevented` make sure that the order is correct.

    import { Slot } from "radix-ui";  export default () => ( 	<Slot.Root onClick={(event) => { if (!event.defaultPrevented) console.log("Not logged because default is prevented."); }} >  <button onClick={(event) => event.preventDefault()} /> 	</Slot.Root> ); 

#### Quick nav

*   Installation
*   Anatomy
*   Basic example
*   Usage
*   Event handlers

PreviousPortal

NextVisually Hidden

Edit this page on GitHub.

---

## Page: https://www.radix-ui.com/primitives/docs/utilities/visually-hidden

Utilities

# Visually Hidden

Hides content from the screen in an accessible way.

## Features

Visually hides content while preserving it for assistive technology.

## Component Reference Links

Version: 1.2.3

Size: 1.74 kB

View source

Report an issue

## Installation

Install the component from your command line.

    npm install @radix-ui/react-visually-hidden 

## Anatomy

Import the component.

    import { VisuallyHidden } from "radix-ui";  export default () => <VisuallyHidden.Root />; 

## Basic example

Use the visually hidden primitive.

    import { VisuallyHidden } from "radix-ui"; import { GearIcon } from "@radix-ui/react-icons";  export default () => ( 	<button>  <GearIcon />  <VisuallyHidden.Root>Settings</VisuallyHidden.Root> 	</button> ); 

## API Reference

### Root

Anything you put inside this component will be hidden from the screen but will be announced by screen readers.

| Prop | Type | Default |
| --- | --- | --- |
| 
`asChild`

Prop description

 | 

`boolean`



 | `false` |

## Accessibility

This is useful in certain scenarios as an alternative to traditional labelling with `aria-label` or `aria-labelledby`.

#### Quick nav

*   Installation
*   Anatomy
*   Basic example
*   API Reference
*   Root
*   Accessibility

PreviousSlot

Edit this page on GitHub.