# Accordion

::docs-component-example{name="a-accordion"}
::

## Features

::docs-highlights
---
features:
  - Full keyboard navigation.
  - Supports horizontal/vertical orientation.
  - Supports Right to Left direction.
  - Can expand one or multiple items.
  - Can be controlled or uncontrolled.
---
::

## Anatomy

Import all parts and piece them together.

```vue
<script setup>
import { AAccordionContent, AAccordionHeader, AAccordionItem, AAccordionRoot, AAccordionTrigger } from 'akar';
</script>

<template>
  <AAccordionRoot>
    <AAccordionItem>
      <AAccordionHeader>
        <AAccordionTrigger />
      </AAccordionHeader>
      <AAccordionContent />
    </AAccordionItem>
  </AAccordionRoot>
</template>
```

## Pohon

::docs-akar-to-pohon
---
to: https://akar.vinicunca.dev/docs/pohon/components/accordion
---
::

## API Reference

### Root

Contains all the parts of an Accordion

::docs-component-meta{name="a-accordion-root"}
::

::docs-data-attributes-table
---
data:
  - attribute: "[data-orientation]"
    values:
      - vertical
      - horizontal
---
::

### Item

Contains all the parts of a collapsible section.

::docs-component-meta{name="a-accordion-item"}
::

::docs-data-attributes-table
---
data:
  - attribute: "[data-state]"
    values:
      - open
      - closed
  - attribute: "[data-disabled]"
    values: Present when disabled
  - attribute: "[data-orientation]"
    values:
      - vertical
      - horizontal
---
::

### Header

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

::docs-component-meta{name="a-accordion-header"}
::

::docs-data-attributes-table
---
data:
  - attribute: "[data-state]"
    values:
      - open
      - closed
  - attribute: "[data-disabled]"
    values: Present when disabled
  - attribute: "[data-orientation]"
    values:
      - vertical
      - horizontal
---
::

### Trigger

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

::docs-component-meta{name="a-accordion-trigger"}
::

::docs-data-attributes-table
---
data:
  - attribute: "[data-state]"
    values:
      - open
      - closed
  - attribute: "[data-disabled]"
    values: Present when disabled
  - attribute: "[data-orientation]"
    values:
      - vertical
      - horizontal
---
::

### Content

Contains the collapsible content for an item.

::docs-component-meta{name="a-accordion-content"}
::

::docs-data-attributes-table
---
data:
  - attribute: "[data-state]"
    values:
      - open
      - closed
  - attribute: "[data-disabled]"
    values: Present when disabled
  - attribute: "[data-orientation]"
    values:
      - vertical
      - horizontal
---
::

::docs-css-variables-table
---
data:
  - cssVariable: --akar-accordion-content-width
    description: The width of the content when it opens/closes
  - cssVariable: --akar-accordion-content-height
    description: The height of the content when it opens/closes
---
::

## Examples

### Expanded by default

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

```vue {4}
<template>
  <AAccordionRoot
    type="single"
    default-value="item-2"
  >
    <AAccordionItem value="item-1">
      …
    </AAccordionItem>
    <AAccordionItem value="item-2">
      …
    </AAccordionItem>
  </AAccordionRoot>
</template>
```

### Allow collapsing all items

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

```vue {4}
<template>
  <AAccordionRoot
    type="single"
    collapsible
  >
    <AAccordionItem value="item-1">
      …
    </AAccordionItem>
    <AAccordionItem value="item-2">
      …
    </AAccordionItem>
  </AAccordionRoot>
</template>
```

### Multiple items open at the same time

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

```vue {2}
<template>
  <AAccordionRoot type="multiple">
    <AAccordionItem value="item-1">
      …
    </AAccordionItem>
    <AAccordionItem value="item-2">
      …
    </AAccordionItem>
  </AAccordionRoot>
</template>
```

### Rotated icon when open

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

```vue {16}
// index.vue
<script setup>
import { AAccordionContent, AAccordionHeader, AAccordionItem, AAccordionRoot, AAccordionTrigger } from 'akar';
</script>

<template>
  <AAccordionRoot type="single">
    <AAccordionItem value="item-1">
      <AAccordionHeader>
        <AAccordionTrigger class="group">
          <span>Trigger text</span>
          <i
            class="i-lucide:chevron-down transition-transform-280 group-data-[state=open]:rotate-180"
          />
        </AAccordionTrigger>
      </AAccordionHeader>
      <AAccordionContent>…</AAccordionContent>
    </AAccordionItem>
  </AAccordionRoot>
</template>
```

### Horizontal orientation

Use the `orientation` prop to create a horizontal Accordion

```vue {2}
<template>
  <AAccordionRoot orientation="horizontal">
    <AAccordionItem value="item-1">
      …
    </AAccordionItem>
    <AAccordionItem value="item-2">
      …
    </AAccordionItem>
  </AAccordionRoot>
</template>
```

### Animating content size

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

```vue {11}
// index.vue
<script setup>
import { AAccordionContent, AAccordionHeader, AAccordionItem, AAccordionRoot } from 'akar';
import './styles.css';
</script>

<template>
  <AAccordionRoot type="single">
    <AAccordionItem value="item-1">
      <AAccordionHeader>…</AAccordionHeader>
      <AAccordionContent class="AAccordionContent">
        …
      </AAccordionContent>
    </AAccordionItem>
  </AAccordionRoot>
</template>
```

```css {17,23}
/* styles.css */
.AAccordionContent {
  overflow: hidden;
}
.AAccordionContent[data-state='open'] {
  animation: accordion-down 300ms ease-out;
}
.AAccordionContent[data-state='closed'] {
  animation: accordion-up 300ms ease-out;
}

@keyframes accordion-down {
  from {
    height: 0;
  }
  to {
    height: var(--akar-accordion-content-height);
  }
}

@keyframes accordion-up {
  from {
    height: var(--akar-accordion-content-height);
  }
  to {
    height: 0;
  }
}
```

#### UnoCSS Preset

::tip
By installing the [Vinicunca Preset](https://vinicunca.dev/unocss-preset/pohon-ui){rel="nofollow"}, you gain immediate access to pre-defined animation keyframes. This means the utility classes `animate-accordion-up` and `animate-accordion-down` are available right out of the box, saving you the step of manually creating them.
::

### Render content even when closed

By default hidden content will be removed, use `:unmountOnHide="false"` to keep the content always available.

This will also allow browser to search the hidden text, and open the accordion.

```vue {2}
<template>
  <AAccordionRoot :unmount-on-hide="false">
    <AAccordionItem value="item-1">
      …
    </AAccordionItem>
    <AAccordionItem value="item-2">
      …
    </AAccordionItem>
  </AAccordionRoot>
</template>
```

## Accessibility

Adheres to the [Accordion WAI-ARIA design pattern](https://www.w3.org/WAI/ARIA/apg/patterns/accordion){rel="nofollow"}.

### Keyboard Interactions

::docs-keyboard-table
---
data:
  - keys:
      - Space
    description: When focus is on an <code>AAccordionTrigger</code> of a collapsed
      section, expands the section.
  - keys:
      - Enter
    description: When focus is on an <code>AAccordionTrigger</code> of a collapsed
      section, expands the section.
  - keys:
      - Tab
    description: Moves focus to the next focusable element.
  - keys:
      - Shift + Tab
    description: Moves focus to the previous focusable element.
  - keys:
      - ArrowDown
    description: Moves focus to the next <code>AAccordionTrigger</code> when
      <code>orientation</code> is <code>vertical</code>.
  - keys:
      - ArrowUp
    description: Moves focus to the previous <code>AAccordionTrigger</code> when
      <code>orientation</code> is <code>vertical</code>.
  - keys:
      - ArrowRight
    description: Moves focus to the next <code>AAccordionTrigger</code> when
      <code>orientation</code> is <code>horizontal</code>.
  - keys:
      - ArrowLeft
    description: Moves focus to the previous <code>AAccordionTrigger</code> when
      <code>orientation</code> is <code>horizontal</code>.
  - keys:
      - Home
    description: When focus is on an <code>AAccordionTrigger</code>, moves focus to
      the start <code>AAccordionTrigger</code>.
  - keys:
      - End
    description: When focus is on an <code>AAccordionTrigger</code>, moves focus to
      the last <code>AAccordionTrigger</code>.
name: keyboard-a-accordion
---
::


# Alert Dialog

::docs-component-example{name="a-alert-dialog"}
::

## Features

::docs-highlights
---
features:
  - Focus is automatically trapped.
  - Can be controlled or uncontrolled.
  - Manages screen reader announcements with <code>Title</code> and
    <code>Description</code> components.
  - Esc closes the component automatically.
---
::

## Anatomy

Import all parts and piece them together.

```vue
<script setup lang="ts">
import {
  AAlertDialogAction,
  AAlertDialogCancel,
  AAlertDialogContent,
  AAlertDialogDescription,
  AAlertDialogOverlay,
  AAlertDialogPortal,
  AAlertDialogRoot,
  AAlertDialogTitle,
  AAlertDialogTrigger,
} from 'akar';
</script>

<template>
  <AAlertDialogRoot>
    <AAlertDialogTrigger />
    <AAlertDialogPortal>
      <AAlertDialogOverlay />
      <AAlertDialogContent>
        <AAlertDialogTitle />
        <AAlertDialogDescription />
        <AAlertDialogCancel />
        <AAlertDialogAction />
      </AAlertDialogContent>
    </AAlertDialogPortal>
  </AAlertDialogRoot>
</template>
```

## API Reference

### Root

Contains all the parts of an alert dialog.

::docs-component-meta{name="a-alert-dialog-root"}
::

### Trigger

A button that opens the dialog.

::docs-component-meta{name="a-alert-dialog-trigger"}
::

::docs-data-attributes-table
---
data:
  - attribute: "[data-state]"
    values:
      - open
      - closed
---
::

### Portal

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

::docs-component-meta{name="a-alert-dialog-portal"}
::

### Overlay

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

::docs-component-meta{name="a-alert-dialog-overlay"}
::

::docs-data-attributes-table
---
data:
  - attribute: "[data-state]"
    values:
      - open
      - closed
---
::

### Content

Contains content to be rendered when the dialog is open.

::docs-component-meta{name="a-alert-dialog-content"}
::

::docs-data-attributes-table
---
data:
  - attribute: "[data-state]"
    values:
      - open
      - closed
---
::

### Cancel

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

::docs-component-meta{name="a-alert-dialog-cancel"}
::

### Action

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

::docs-component-meta{name="a-alert-dialog-action"}
::

### Title

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

::docs-component-meta{name="a-alert-dialog-title"}
::

### Description

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

::docs-component-meta{name="a-alert-dialog-description"}
::

## Examples

### Close after asynchronous form submission

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

```vue {14-15,19,25-29}
<script setup>
import {
  AAlertDialogAction,
  AAlertDialogCancel,
  AAlertDialogContent,
  AAlertDialogDescription,
  AAlertDialogOverlay,
  AAlertDialogPortal,
  AAlertDialogRoot,
  AAlertDialogTitle,
  AAlertDialogTrigger,
} from 'akar';

const wait = () => new Promise((resolve) => setTimeout(resolve, 1000));
const open = ref(false);
</script>

<template>
  <AAlertDialogRoot v-model:open="open">
    <AAlertDialogTrigger>Open</AAlertDialogTrigger>
    <AAlertDialogPortal>
      <AAlertDialogOverlay />
      <AAlertDialogContent>
        <form
          @submit.prevent="
            (event) => {
              wait().then(() => open = false);
            }
          "
        >
          <!-- some inputs -->
          <button type="submit">
            Submit
          </button>
        </form>
      </AAlertDialogContent>
    </AAlertDialogPortal>
  </AAlertDialogRoot>
</template>
```

:br

### Custom portal container

Customise the element that your alert dialog portals into.

```vue {4,17}
<script setup>
import { ref } from 'vue';

const container = ref(null);
</script>

<template>
  <div>
    <AAlertDialogRoot>
      <AAlertDialogTrigger />
      <AAlertDialogPortal :to="container">
        <AAlertDialogOverlay />
        <AAlertDialogContent>...</AAlertDialogContent>
      </AAlertDialogPortal>
    </AAlertDialogRoot>

    <div ref="container" />
  </div>
</template>
```

## Accessibility

Adheres to the [Alert and Message Dialogs WAI-ARIA design pattern](https://www.w3.org/WAI/ARIA/apg/patterns/alertdialog){rel="nofollow"}.

### Keyboard Interactions

::docs-keyboard-table
---
data:
  - keys:
      - Space
    description: Opens/closes the dialog.
  - keys:
      - Enter
    description: Opens/closes the dialog.
  - keys:
      - Tab
    description: Moves focus to the next focusable element.
  - keys:
      - Shift + Tab
    description: Moves focus to the previous focusable element.
  - keys:
      - Esc
    description: Closes the dialog and moves focus to `AAlertDialogTrigger`.
name: keyboard-a-alert-dialog
---
::


# Avatar

::docs-component-example{name="a-avatar"}
::

## Features

::docs-highlights
---
features:
  - Automatic and manual control over when the image renders.
  - Fallback part accepts any children.
  - Optionally delay fallback rendering to avoid content flashing.
---
::

## Anatomy

Import all parts and piece them together.

```vue
<script setup>
import { AAvatarFallback, AAvatarImage, AAvatarRoot } from 'akar';
</script>

<template>
  <AAvatarRoot>
    <AAvatarImage />
    <AAvatarFallback />
  </AAvatarRoot>
</template>
```

## Pohon

::docs-akar-to-pohon
---
to: https://akar.vinicunca.dev/docs/pohon/components/avatar
---
::

## API Reference

### Root

Contains all the parts of an avatar

::docs-component-meta{name="a-avatar-root"}
::

### Image

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

::docs-component-meta{name="a-avatar-image"}
::

### 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 `@loadingStatusChange` emit on `AAvatarImage`.

::docs-component-meta{name="a-avatar-fallback"}
::

## Examples

### Clickable Avatar with tooltip

You can compose the Avatar with a [Tooltip](https://akar.vinicunca.dev/docs/akar/components/tooltip) to display extra information.

```vue {6-7,9,11-15}
<script setup>
import { AAvatarRoot, ATooltipArrow, ATooltipRoot, ATooltipTrigger } from 'akar';
</script>

<template>
  <ATooltipRoot>
    <ATooltipTrigger>
      <AAvatarRoot>…</AAvatarRoot>
    </ATooltipTrigger>

    <ATooltipContent side="top">
      ATooltip content
      <ATooltipArrow />
    </ATooltipContent>
  </ATooltipRoot>
</template>
```


# Calendar

::docs-component-example{name="a-calendar"}
::

## Features

::docs-highlights
---
features:
  - Automatic and manual control over when the image renders.
  - Fallback part accepts any children.
  - Optionally delay fallback rendering to avoid content flashing.
  - Full keyboard navigation
  - Can be controlled or uncontrolled
  - Focus is fully managed
  - Localization support
  - Highly composable
---
::

## Preface

The component depends on the [@internationalized/date](https://react-spectrum.adobe.com/internationalized/date/index.html){rel="nofollow"} package, which solves a lot of the problems that come with working with dates and times in JavaScript.

We highly recommend reading through the documentation for the package to get a solid feel for how it works, and you'll need to install it in your project to use the date-related components.

## Anatomy

Import all parts and piece them together.

```vue
<script setup>
import {
  ACalendarCell,
  ACalendarCellTrigger,
  ACalendarGrid,
  ACalendarGridBody,
  ACalendarGridHead,
  ACalendarGridRow,
  ACalendarHeadCell,
  ACalendarHeader,
  ACalendarHeading,
  ACalendarNext,
  ACalendarPrev,
  ACalendarRoot,
} from 'akar';
</script>

<template>
  <ACalendarRoot>
    <ACalendarHeader>
      <ACalendarPrev />
      <ACalendarHeading />
      <ACalendarNext />
    </ACalendarHeader>
    <ACalendarGrid>
      <ACalendarGridHead>
        <ACalendarGridRow>
          <ACalendarHeadCell />
        </ACalendarGridRow>
      </ACalendarGridHead>
      <ACalendarGridBody>
        <ACalendarGridRow>
          <ACalendarCell>
            <ACalendarCellTrigger />
          </ACalendarCell>
        </ACalendarGridRow>
      </ACalendarGridBody>
    </ACalendarGrid>
  </ACalendarRoot>
</template>
```

## Pohon

::docs-akar-to-pohon
---
to: https://akar.vinicunca.dev/docs/pohon/components/calendar
---
::

## API Reference

### Root

Contains all the parts of a calendar

::docs-component-meta{name="a-calendar-root"}
::

::docs-data-attributes-table
---
data:
  - attribute: "[data-readonly]"
    values: Present when readonly
  - attribute: "[data-disabled]"
    values: Present when disabled
  - attribute: "[data-invalid]"
    values: Present when invalid
---
::

### Header

Contains the navigation buttons and the heading segments.

::docs-component-meta{name="a-calendar-header"}
::

### Prev Button

Calendar navigation button. It navigates the calendar one month/year/decade in the past based on the current calendar view.

::docs-component-meta{name="a-calendar-prev"}
::

::docs-data-attributes-table
---
data:
  - attribute: "[data-disabled]"
    values: Present when disabled
---
::

### Next Button

Calendar navigation button. It navigates the calendar one month/year/decade in the future based on the current calendar view.

::docs-component-meta{name="a-calendar-next"}
::

::docs-data-attributes-table
---
data:
  - attribute: "[data-disabled]"
    values: Present when disabled
---
::

### Heading

Heading for displaying the current month and year

::docs-component-meta{name="a-calendar-heading"}
::

::docs-data-attributes-table
---
data:
  - attribute: "[data-disabled]"
    values: Present when disabled
---
::

### Grid

Container for wrapping the calendar grid.

::docs-component-meta{name="a-calendar-grid"}
::

::docs-data-attributes-table
---
data:
  - attribute: "[data-readonly]"
    values: Present when readonly
  - attribute: "[data-disabled]"
    values: Present when disabled
---
::

### Grid Head

Container for wrapping the grid head.

::docs-component-meta{name="a-calendar-grid-head"}
::

### Grid Body

Container for wrapping the grid body.

::docs-component-meta{name="a-calendar-grid-body"}
::

### Grid Row

Container for wrapping the grid row.

::docs-component-meta{name="a-calendar-grid-row"}
::

### Head Cell

Container for wrapping the head cell. Used for displaying the week days.

::docs-component-meta{name="a-calendar-head-cell"}
::

### Cell

Container for wrapping the calendar cells.

::docs-component-meta{name="a-calendar-cell"}
::

::docs-data-attributes-table
---
data:
  - attribute: "[data-disabled]"
    values: Present when disabled
---
::

### Cell Trigger

Interactable container for displaying the cell dates. Clicking it selects the date.

::docs-component-meta{name="a-calendar-cell-trigger"}
::

::docs-data-attributes-table
---
data:
  - attribute: "[data-selected]"
    values: Present when selected
  - attribute: "[data-value]"
    values: The ISO string value of the date.
  - attribute: "[data-disabled]"
    values: Present when disabled
  - attribute: "[data-unavailable]"
    values: Present when unavailable
  - attribute: "[data-today]"
    values: Present when today
  - attribute: "[data-outside-view]"
    values: Present when the date is outside the current month it is displayed in.
  - attribute: "[data-outside-visible-view]"
    values: Present when the date is outside the months that are visible on the
      calendar.
  - attribute: "[data-focused]"
    values: Present when focused
---
::

## Examples

### Calendar with Year Incrementation

This example showcases a calendar which allows incrementing the year.

::docs-component-example{name="a-calendar-year-increment"}
::

### Calendar with Locale and Calendar System Selection

This example showcases some of the available locales and how the calendar systems are displayed.

::docs-component-example{name="a-calendar-select"}
::

### Calendar swipe gesture navigation

This component demonstrates intuitive calendar navigation using touch-based swipe gestures, user-friendly way to browse through months.

::docs-component-example{name="a-calendar-swipe"}
::

### Calendar week numbers

This example showcases usage of the CalendarWeek component used to display the number of the week.

::docs-component-example{name="a-calendar-weeks"}
::

## Accessibility

### Keyboard Interactions

::docs-keyboard-table
---
data:
  - keys:
      - Tab
    description: When focus moves onto the calendar, focuses the first navigation button.
  - keys:
      - Space
    description: When the focus is on either `CalendarNext` or `CalendarPrev`, it
      navigates the calendar. Otherwise, it selects the date.
  - keys:
      - Enter
    description: When the focus is on either `CalendarNext` or `CalendarPrev`, it
      navigates the calendar. Otherwise, it selects the date.
  - keys:
      - ArrowLeft
      - ArrowRight
      - ArrowUp
      - ArrowDown
    description: When the focus is on `CalendarCellTrigger`, it navigates the dates,
      changing the month/year/decade if necessary.
name: keyboard-a-calendar
---
::


# Checkbox

::docs-component-example{name="a-checkbox"}
::

## Features

::docs-highlights
---
features:
  - Supports indeterminate state.
  - Full keyboard navigation.
  - Can be controlled or uncontrolled.
---
::

## Anatomy

Import all parts and piece them together.

```vue
<script setup>
import { ACheckboxGroupRoot, ACheckboxIndicator, ACheckboxRoot } from 'akar';
</script>

<template>
  <ACheckboxRoot>
    <ACheckboxIndicator />
  </ACheckboxRoot>

  <!-- or with array support -->
  <ACheckboxGroupRoot>
    <ACheckboxRoot>
      <ACheckboxIndicator />
    </ACheckboxRoot>
  </ACheckboxGroupRoot>
</template>
```

## Pohon

::docs-akar-to-pohon
---
to: https://akar.vinicunca.dev/docs/pohon/components/checkbox
---
::

## 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.

::docs-component-meta{name="a-checkbox-root"}
::

::docs-data-attributes-table
---
data:
  - attribute: "[data-state]"
    values:
      - checked
      - unchecked
      - indeterminate
  - attribute: "[data-disabled]"
    values: 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.

::docs-presence-tip
::

::docs-component-meta{name="a-checkbox-indicator"}
::

::docs-data-attributes-table
---
data:
  - attribute: "[data-state]"
    values:
      - checked
      - unchecked
      - indeterminate
  - attribute: "[data-disabled]"
    values: Present when disabled
---
::

### Group Root

Wrapper around `CheckboxRoot` to support array of `modelValue`

::docs-component-meta{name="a-checkbox-group-root"}
::

## Examples

### Indeterminate

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

```vue {5,9-14,16-18}
<script setup>
import { Icon } from '@iconify/vue';
import { ACheckboxIndicator, ACheckboxRoot } from 'akar';

const checked = ref('indeterminate');
</script>

<template>
  <ACheckboxRoot v-model="checked">
    <ACheckboxIndicator>
      <Icon
        v-if="checked === 'indeterminate'"
        icon="radix-icons:divider-horizontal"
      />
      <Icon
        v-if="checked"
        icon="radix-icons:check"
      />
    </ACheckboxIndicator>
  </ACheckboxRoot>

  <button
    type="button"
    @click="() => (checked === 'indeterminate' ? (checked = false) : (checked = 'indeterminate'))"
  >
    Toggle indeterminate
  </button>
</template>
```

## Accessibility

Adheres to the [tri-state Checkbox WAI-ARIA design pattern](https://www.w3.org/WAI/ARIA/apg/patterns/checkbox){rel="nofollow"}.

### Keyboard Interactions

::docs-keyboard-table
---
data:
  - keys:
      - Space
    description: Checks/unchecks the checkbox
name: keyboard-a-checkbox
---
::


# Collapsible

::docs-component-example{name="a-collapsible"}
::

## Features

::docs-highlights
---
features:
  - Full keyboard navigation.
  - Can be controlled or uncontrolled.
---
::

## Anatomy

Import the components and piece the parts together.

```vue
<script setup>
import { ACollapsibleContent, ACollapsibleRoot, ACollapsibleTrigger } from 'akar';
</script>

<template>
  <ACollapsibleRoot>
    <ACollapsibleTrigger />
    <ACollapsibleContent />
  </ACollapsibleRoot>
</template>
```

## Pohon

::docs-akar-to-pohon
---
to: https://akar.vinicunca.dev/docs/pohon/components/collapsible
---
::

## API Reference

### Root

Contains all the parts of a collapsible

::docs-component-meta{name="a-collapsible-root"}
::

::docs-data-attributes-table
---
data:
  - attribute: "[data-state]"
    values:
      - open
      - closed
  - attribute: "[data-disabled]"
    values: Present when disabled
---
::

### Trigger

The button that toggles the collapsible

::docs-component-meta{name="a-collapsible-trigger"}
::

::docs-data-attributes-table
---
data:
  - attribute: "[data-state]"
    values:
      - open
      - closed
  - attribute: "[data-disabled]"
    values: Present when disabled
---
::

### Content

The component that contains the collapsible content.

::docs-presence-tip
::

::docs-component-meta{name="a-collapsible-content"}
::

::docs-data-attributes-table
---
data:
  - attribute: "[data-state]"
    values:
      - open
      - closed
  - attribute: "[data-disabled]"
    values: Present when disabled
---
::

::docs-css-variables-table
---
data:
  - cssVariable: --akar-collapsible-content-width
    description: The width of the content when it opens/closes
  - cssVariable: --akar-collapsible-content-height
    description: The height of the content when it opens/closes
---
::

## Examples

### Animating content size

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

```vue {10}
// index.vue
<script setup>
import { ACollapsibleContent, ACollapsibleRoot, ACollapsibleTrigger } from 'akar';
import './styles.css';
</script>

<template>
  <ACollapsibleRoot>
    <ACollapsibleTrigger>…</ACollapsibleTrigger>
    <ACollapsibleContent class="ACollapsibleContent">
      …
    </ACollapsibleContent>
  </ACollapsibleRoot>
</template>
```

```css {17,23}
/* styles.css */
.ACollapsibleContent {
  overflow: hidden;
}
.ACollapsibleContent[data-state='open'] {
  animation: collapsible-down 300ms ease-out;
}
.ACollapsibleContent[data-state='closed'] {
  animation: collapsible-up 300ms ease-out;
}

@keyframes collapsible-down {
  from {
    height: 0;
  }
  to {
    height: var(--akar-collapsible-content-height);
  }
}

@keyframes collapsible-up {
  from {
    height: var(--akar-collapsible-content-height);
  }
  to {
    height: 0;
  }
}
```

#### UnoCSS Preset

::tip
By installing the [Vinicunca Preset](https://vinicunca.dev/unocss-preset/pohon-ui){rel="nofollow"}, you gain immediate access to pre-defined animation keyframes. This means the utility classes `animate-collapsible-up` and `animate-collapsible-down` are available right out of the box, saving you the step of manually creating them.
::

### Render content even when collapsed

By default hidden content will be removed, use `:unmountOnHide="false"` to keep the content always available.

This will also allow browser to search the hidden text, and open the collapsible.

```vue {6}
<script setup>
import { ACollapsibleRoot } from 'akar';
</script>

<template>
  <ACollapsibleRoot :unmount-on-hide="false">
    …
  </ACollapsibleRoot>
</template>
```

## Accessibility

Adheres to the [Disclosure WAI-ARIA design pattern](https://www.w3.org/WAI/ARIA/apg/patterns/disclosure){rel="nofollow"}.

### Keyboard Interactions

::docs-keyboard-table
---
data:
  - keys:
      - Space
    description: Opens/closes the collapsible
  - keys:
      - Enter
    description: Opens/closes the collapsible
name: keyboard-a-collapsible
---
::


# Combobox

::docs-component-example{name="a-combobox"}
::

## Features

::docs-highlights
---
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.
  - Supports Right to Left direction.
---
::

## Anatomy

Import all parts and piece them together.

```vue
<script setup lang="ts">
import {
  AComboboxAnchor,
  AComboboxArrow,
  AComboboxCancel,
  AComboboxContent,
  AComboboxGroup,
  AComboboxInput,
  AComboboxItem,
  AComboboxItemIndicator,
  AComboboxLabel,
  AComboboxPortal,
  AComboboxRoot,
  AComboboxSeparator,
  AComboboxTrigger,
  AComboboxViewport,
} from 'akar';
</script>

<template>
  <AComboboxRoot>
    <AComboboxAnchor>
      <AComboboxInput />
      <AComboboxTrigger />
      <AComboboxCancel />
    </AComboboxAnchor>

    <AComboboxPortal>
      <AComboboxContent>
        <AComboboxViewport>
          <AComboboxItem>
            <AComboboxItemIndicator />
          </AComboboxItem>

          <AComboboxGroup>
            <AComboboxLabel />
            <AComboboxItem>
              <AComboboxItemIndicator />
            </AComboboxItem>
          </AComboboxGroup>
          <AComboboxSeparator />
        </AComboboxViewport>

        <AComboboxArrow />
      </AComboboxContent>
    </AComboboxPortal>
  </AComboboxRoot>
</template>
```

## Pohon

::docs-akar-to-pohon
---
to: https://akar.vinicunca.dev/docs/pohon/components/input-menu
---
::

## API Reference

### Root

Contains all the parts of a Combobox

::docs-component-meta{name="a-combobox-root"}
::

### Anchor

Used as an anchor if you set `AComboboxContent`'s position to `popper`.

::docs-component-meta{name="a-combobox-anchor"}
::

### Input

The input component to search through the combobox items.

::docs-component-meta{name="a-combobox-input"}
::

### Trigger

The button that toggles the Combobox Content.

::docs-component-meta{name="a-combobox-trigger"}
::

::docs-data-attributes-table
---
data:
  - attribute: "[data-state]"
    values:
      - open
      - closed
  - attribute: "[data-disabled]"
    values: Present when disabled
---
::

### Cancel

The button that clears the search term.

::docs-component-meta{name="a-combobox-cancel"}
::

### Empty

Shown when none of the items match the query.

::docs-component-meta{name="a-combobox-empty"}
::

### Portal

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

You need to set `position="popper"` for `AComboboxContent` to make sure the position was automatically computed similar to `Popover` or `DropdownMenu`.

::docs-component-meta{name="a-combobox-portal"}
::

### Content

The component that pops out when the combobox is open.

::docs-presence-tip
::

::docs-component-meta{name="a-combobox-content"}
::

::docs-data-attributes-table
---
data:
  - attribute: "[data-state]"
    values:
      - open
      - closed
  - attribute: "[data-side]"
    values:
      - left
      - right
      - bottom
      - top
  - attribute: "[data-align]"
    values:
      - start
      - end
      - center
---
::

::docs-css-variables-table
---
data:
  - cssVariable: --akar-combobox-content-transform-origin
    description: The `transform-origin` computed from the content and arrow
      positions/offsets. Only present when `position="popper"`
  - cssVariable: --akar-combobox-content-available-width
    description: The remaining width between the trigger and the boundary edge. Only
      present when `position="popper"`
  - cssVariable: --akar-combobox-content-available-height
    description: The remaining height between the trigger and the boundary edge.
      Only present when `position="popper"`
  - cssVariable: --akar-combobox-trigger-width
    description: The width of the trigger. Only present when `position="popper"`
  - cssVariable: --akar-combobox-trigger-height
    description: The height of the trigger. Only present when `position="popper"`
---
::

### Viewport

The scrolling viewport that contains all of the items.

::docs-component-meta{name="a-combobox-viewport"}
::

### Item

The component that contains the combobox items.

::docs-component-meta{name="a-combobox-item"}
::

::docs-data-attributes-table
---
data:
  - attribute: "[data-state]"
    values:
      - checked
      - unchecked
  - attribute: "[data-highlighted]"
    values: Present when highlighted
  - attribute: "[data-disabled]"
    values: Present when disabled
---
::

### 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.

::docs-component-meta{name="aa-combobo-item-indicator"}
::

### Group

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

::docs-component-meta{name="a-combobox-group"}
::

### Label

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

::docs-component-meta{name="a-combobox-label"}
::

### Separator

Used to visually separate items in the Combobox

::docs-component-meta{name="a-combobox-separator"}
::

### Arrow

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

::docs-component-meta{name="a-combobox-arrow"}
::

### Virtualizer

Virtual container to achieve list virtualization.

::warning
Combobox items **must** be filtered manually before passing them over to the virtualizer. See [example below](https://akar.vinicunca.dev/#virtualized-combobox-with-working-filtering).
::

See the [virtualization guide](https://akar.vinicunca.dev/../guides/virtualization) for more general info on virtualization.

::docs-component-meta{name="a-combobox-virtualizer"}
::

## Examples

### Binding objects as values

Unlike native HTML form controls which only allow you to provide strings as values, `akar` supports binding complex objects as well.

Make sure to set the `displayValue` prop to set the input value on item selection.

```vue {12,17,23}
<script setup lang="ts">
import { AComboboxContent, AComboboxInput, AComboboxItem, AComboboxPortal, AComboboxRoot } from 'akar';
import { ref } from 'vue';

const people = [
  { id: 1, name: 'Durward Reynolds' },
  { id: 2, name: 'Kenton Towne' },
  { id: 3, name: 'Therese Wunsch' },
  { id: 4, name: 'Benedict Kessler' },
  { id: 5, name: 'Katelyn Rohan' },
];
const selectedPeople = ref(people[0]);
</script>

<template>
  <AComboboxRoot v-model="selectedPeople">
    <AComboboxInput :display-value="(v) => v.name" />
    <AComboboxPortal>
      <AComboboxContent>
        <AComboboxItem
          v-for="person in people"
          :key="person.id"
          :value="person"
          :disabled="person.unavailable"
        >
          {{ person.name }}
        </AComboboxItem>
      </AComboboxContent>
    </AComboboxPortal>
  </AComboboxRoot>
</template>
```

### Selecting multiple values

The `Combobox` component allows you to select multiple values. You can enable this by providing an array of values instead of a single value.

```vue {12,17-18}
<script setup lang="ts">
import { AComboboxRoot } from 'akar';
import { ref } from 'vue';

const people = [
  { id: 1, name: 'Durward Reynolds' },
  { id: 2, name: 'Kenton Towne' },
  { id: 3, name: 'Therese Wunsch' },
  { id: 4, name: 'Benedict Kessler' },
  { id: 5, name: 'Katelyn Rohan' },
];
const selectedPeople = ref([people[0], people[1]]);
</script>

<template>
  <AComboboxRoot
    v-model="selectedPeople"
    multiple
  >
    …
  </AComboboxRoot>
</template>
```

### Custom filtering

Internally, `AComboboxRoot` will filter the item based on the rendered text.

However, you may also provide your own custom filtering logic together with setting `ignoreFilter="true"`.

```vue {15-16,22,28}
<script setup lang="ts">
import { AComboboxContent, AComboboxInput, AComboboxItem, AComboboxPortal, AComboboxRoot, useFilter } from 'akar';
import { ref } from 'vue';

const people = [
  { id: 1, name: 'Durward Reynolds' },
  { id: 2, name: 'Kenton Towne' },
  { id: 3, name: 'Therese Wunsch' },
  { id: 4, name: 'Benedict Kessler' },
  { id: 5, name: 'Katelyn Rohan' },
];
const selectedPeople = ref(people[0]);
const searchTerm = ref('');

const { startsWith } = useFilter({ sensitivity: 'base' });
const filteredPeople = computed(() => people.filter((p) => startsWith(p.name, searchTerm.value)));
</script>

<template>
  <AComboboxRoot
    v-model="selectedPeople"
    :ignore-filter="true"
  >
    <AComboboxInput v-model="searchTerm" />
    <AComboboxPortal>
      <AComboboxContent>
        <AComboboxItem
          v-for="person in filteredPeople"
          :key="person.id"
          :value="person"
        >
          {{ person.name }}
        </AComboboxItem>
      </AComboboxContent>
    </AComboboxPortal>
  </AComboboxRoot>
</template>
```

### Custom label

By default the `Combobox` will use the input contents as the label for screenreaders. If you'd like more control over what is announced to assistive technologies, use the [Label](https://akar.vinicunca.dev/docs/akar/components/label) component.

```vue {8,10}
<script setup lang="ts">
import { AComboboxInput, AComboboxRoot, Label } from 'akar';
</script>

<template>
  <AComboboxRoot v-model="selectedPeople">
    <Label for="person">Person: </Label>
    <AComboboxInput
      id="person"
      placeholder="Select a person"
    />
    …
  </AComboboxRoot>
</template>
```

### With disabled items

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

```vue {19}
<script setup lang="ts">
import {
  AComboboxContent,
  AComboboxInput,
  AComboboxItem,
  AComboboxPortal,
  AComboboxRoot,
} from 'akar';
</script>

<template>
  <AComboboxRoot>
    <AComboboxInput />
    <AComboboxPortal>
      <AComboboxContent>
        <AComboboxItem
          class="AComboboxItem"
          disabled
        >
          …
        </AComboboxItem>
      </AComboboxContent>
    </AComboboxPortal>
  </AComboboxRoot>
</template>
```

```css {2}
/* styles.css */
.AComboboxItem[data-disabled] {
  color: 'gainsboro';
}
```

### With separators

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

```vue {21}
<script setup lang="ts">
import {
  AComboboxContent,
  AComboboxInput,
  AComboboxItem,
  AComboboxPortal,
  AComboboxRoot,
  AComboboxSeparator
} from 'akar';
</script>

<template>
  <AComboboxRoot>
    <AComboboxInput />
    <AComboboxPortal>
      <AComboboxContent>
        <AComboboxItem>…</AComboboxItem>
        <AComboboxItem>…</AComboboxItem>
        <AComboboxItem>…</AComboboxItem>
        <AComboboxSeparator />
        <AComboboxItem>…</AComboboxItem>
        <AComboboxItem>…</AComboboxItem>
        <AComboboxItem>…</AComboboxItem>
      </AComboboxContent>
    </AComboboxPortal>
  </AComboboxRoot>
</template>
```

### With grouped items

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

```vue {19-20,24}
<script setup lang="ts">
import {
  AComboboxContent,
  AComboboxGroup,
  AComboboxInput,
  AComboboxItem,
  AComboboxLabel,
  AComboboxPortal,
  AComboboxRoot
} from 'akar';
</script>

<template>
  <AComboboxRoot>
    <AComboboxInput />
    <AComboboxPortal>
      <AComboboxContent>
        <AComboboxGroup>
          <AComboboxLabel>Label</AComboboxLabel>
          <AComboboxItem>…</AComboboxItem>
          <AComboboxItem>…</AComboboxItem>
          <AComboboxItem>…</AComboboxItem>
        </AComboboxGroup>
      </AComboboxContent>
    </AComboboxPortal>
  </AComboboxRoot>
</template>
```

### With complex items

You can use custom content in your items.

```vue {21}
<script setup lang="ts">
import {
  AComboboxContent,
  AComboboxInput,
  AComboboxItem,
  AComboboxItemIndicator,
  AComboboxPortal,
  AComboboxRoot
} from 'akar';
</script>

<template>
  <AComboboxRoot>
    <AComboboxInput />
    <AComboboxPortal>
      <AComboboxContent>
        <AComboboxItem>
          <img src="…">
          Adolfo Hess
          <AComboboxItemIndicator />
        </AComboboxItem>
        …
      </AComboboxContent>
    </AComboboxPortal>
  </AComboboxRoot>
</template>
```

### Prevent select behavior

By default, selecting `AComboboxItem` would close the content, and update the `modelValue` with the provided value.
You can prevent this behavior by preventing default `@select.prevent`.

```vue {11}
<script setup lang="ts">
import { AComboboxContent, AComboboxInput, AComboboxItem, AComboboxPortal, AComboboxRoot } from 'akar';
</script>

<template>
  <AComboboxRoot>
    <AComboboxInput />
    <AComboboxPortal>
      <AComboboxContent>
        <AComboboxItem @select.prevent>
          Item A
        </AComboboxItem>
        …
      </AComboboxContent>
    </AComboboxPortal>
  </AComboboxRoot>
</template>
```

### Virtualized combobox with working filtering

ACombobox items **must** be filtered manually before passing them over to the virtualizer.

See the [virtualization guide](https://akar.vinicunca.dev/../guides/virtualization) for more general info on virtualization.

```vue {9-10,17,19-28}
<script setup lang="ts">
import { AComboboxContent, AComboboxInput, AComboboxItem, AComboboxPortal, AComboboxRoot, AComboboxViewport, AComboboxVirtualizer, useFilter } from 'akar';
import { computed, ref } from 'vue';

const people = Array.from({ length: 100000 }).map((_, id) => ({ id, name: `Person #${id}` }));
const selectedPeople = ref(people[0]);
const searchTerm = ref('');

const { contains } = useFilter({ sensitivity: 'base' });
const filteredPeople = computed(() => people.filter((p) => contains(p.name, searchTerm.value)));
</script>

<template>
  <AComboboxRoot v-model="selectedPeople">
    <AComboboxInput v-model="searchTerm" />
    <AComboboxPortal>
      <AComboboxContent class="max-h-[40vh] overflow-hidden">
        <AComboboxViewport>
          <AComboboxVirtualizer
            v-slot="{ option }"
            :options="filteredPeople"
            :text-content="(x) => x.name"
            :estimate-size="24"
          >
            <AComboboxItem :value="option">
              {{ option.name }}
            </AComboboxItem>
          </AComboboxVirtualizer>
        </AComboboxViewport>
      </AComboboxContent>
    </AComboboxPortal>
  </AComboboxRoot>
</template>
```

## Accessibility

Adheres to the [ACombobox WAI-ARIA design pattern](https://www.w3.org/WAI/ARIA/apg/patterns/Acombobox/){rel="nofollow"}.

See the W3C [ACombobox Autocomplete List](https://www.w3.org/WAI/ARIA/apg/patterns/Acombobox/examples/Acombobox-autocomplete-list/){rel="nofollow"} example for more information.

### Keyboard Interactions

::docs-keyboard-table
---
data:
  - keys:
      - Enter
    description: When focus is on `AComboboxItem`, selects the focused item.
  - keys:
      - ArrowDown
    description: " When focus is on `AComboboxInput`, opens the ACombobox content.
      <br /> When focus is on an item, moves focus to the next item."
  - keys:
      - ArrowUp
    description: " When focus is on `AComboboxInput`, opens the ACombobox content.
      <br /> When focus is on an item, moves focus to the previous item."
  - keys:
      - Esc
    description: " Closes ACombobox and restores the selected item in the
      `AComboboxInput` field."
name: keyboard-a-combobox
---
::

## Custom APIs

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

### Command Menu

ACombobox can be use to build your own Command Menu.

#### Usage

```vue
<script setup lang="ts">
import { Command, CommandItem } from './your-command';
</script>

<template>
  <Command>
    <CommandItem value="1">
      Item 1
    </CommandItem>
    <CommandItem value="2">
      Item 2
    </CommandItem>
    <CommandItem value="3">
      Item 3
    </CommandItem>
  </Command>
</template>
```

#### Implementation

```ts
// your-command.ts
export { default as Command } from 'Command.vue';
export { default as CommandItem } from 'CommandItem.vue';
```

```vue
<!-- Command.vue -->
<script setup lang="ts">
import type { AComboboxRootEmits, AComboboxRootProps } from 'akar';
import { AComboboxContent, AComboboxInput, AComboboxPortal, AComboboxRoot, useForwardPropsEmits } from 'akar';

const props = defineProps<AComboboxRootProps>();
const emits = defineEmits<AComboboxRootEmits>();

const forward = useForwardPropsEmits(props, emits);
</script>

<template>
  <AComboboxRoot
    v-bind="forward"
    :open="true"
    model-value=""
  >
    <AComboboxInput placeholder="Type a command or search…" />

    <AComboboxPortal>
      <AComboboxContent
        @escape-key-down.prevent
        @focus-outside.prevent
        @interact-outside.prevent
        @pointer-down-outside.prevent
      >
        <AComboboxViewport>
          <slot />
        </AComboboxViewport>
      </AComboboxContent>
    </AComboboxPortal>
  </AComboboxRoot>
</template>
```

```vue
<!-- AComboboxItem.vue -->
<script setup lang="ts">
import type { AComboboxItemProps } from 'akar';
import { AComboboxItem } from 'akar';

const props = defineProps<AComboboxItemProps>();
</script>

<template>
  <AComboboxItem
    v-bind="props"
    @select.prevent
  >
    <slot />
  </AComboboxItem>
</template>
```


# Context Menu

::docs-component-example{name="a-context-menu"}
::

## Features

::docs-highlights
---
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
---
::

## Anatomy

Import all parts and piece them together.

```vue
<script setup lang="ts">
import {
  AContextMenuCheckboxItem,
  AContextMenuContent,
  AContextMenuGroup,
  AContextMenuItem,
  AContextMenuItemIndicator,
  AContextMenuLabel,
  AContextMenuPortal,
  AContextMenuRadioGroup,
  AContextMenuRadioItem,
  AContextMenuRoot,
  AContextMenuSeparator,
  AContextMenuSub,
  AContextMenuSubContent,
  AContextMenuSubTrigger,
  AContextMenuTrigger,
} from 'akar';
</script>

<template>
  <AContextMenuRoot>
    <AContextMenuTrigger />

    <AContextMenuPortal>
      <AContextMenuContent>
        <AContextMenuLabel />
        <AContextMenuItem />

        <AContextMenuGroup>
          <AContextMenuItem />
        </AContextMenuGroup>

        <AContextMenuCheckboxItem>
          <AContextMenuItemIndicator />
        </AContextMenuCheckboxItem>

        <AContextMenuRadioGroup>
          <AContextMenuRadioItem>
            <AContextMenuItemIndicator />
          </AContextMenuRadioItem>
        </AContextMenuRadioGroup>

        <AContextMenuSub>
          <AContextMenuSubTrigger />
          <AContextMenuPortal>
            <AContextMenuSubContent />
          </AContextMenuPortal>
        </AContextMenuSub>

        <AContextMenuSeparator />
      </AContextMenuContent>
    </AContextMenuPortal>
  </AContextMenuRoot>
</template>
```

## Pohon

::docs-akar-to-pohon
---
to: https://akar.vinicunca.dev/docs/pohon/components/context-menu
---
::

## API Reference

Adheres to the [Menu WAI-ARIA design pattern](https://www.w3.org/WAI/ARIA/apg/patterns/menu){rel="nofollow"} and uses [roving tabindex](https://www.w3.org/TR/wai-aria-practices-1.2/examples/menu-button/menu-button-actions.html){rel="nofollow"} to manage focus movement among menu items.

### Root

Contains all the parts of a context menu.

::docs-component-meta{name="a-context-menu-root"}
::

### 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).

::docs-component-meta{name="a-context-menu-trigger"}
::

::docs-data-attributes-table
---
data:
  - attribute: "[data-state]"
    values:
      - open
      - closed
---
::

### Portal

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

::docs-component-meta{name="a-context-menu-portal"}
::

### Content

The component that pops out in an open context menu.

::docs-component-meta{name="a-context-menu-content"}
::

::docs-data-attributes-table
---
data:
  - attribute: "[data-state]"
    values:
      - open
      - closed
  - attribute: "[data-side]"
    values:
      - left
      - right
      - bottom
      - top
  - attribute: "[data-align]"
    values:
      - start
      - end
      - center
---
::

::docs-css-variables-table
---
data:
  - cssVariable: --akar-context-menu-content-transform-origin
    description: The `transform-origin` computed from the content and arrow
      positions/offsets
  - cssVariable: --akar-context-menu-content-available-width
    description: The remaining width between the trigger and the boundary edge
  - cssVariable: --akar-context-menu-content-available-height
    description: The remaining height between the trigger and the boundary edge
  - cssVariable: --akar-context-menu-trigger-width
    description: The width of the trigger
  - cssVariable: --akar-context-menu-trigger-height
    description: 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 `AContextMenu.Content`. Must be rendered inside `AContextMenu.Content`.

::docs-component-meta{name="a-context-menu-arrow"}
::

### Item

The component that contains the context menu items.

::docs-component-meta{name="a-context-menu-item"}
::

::docs-data-attributes-table
---
data:
  - attribute: "[data-highlighted]"
    values: Present when highlighted
  - attribute: "[data-disabled]"
    values: Present when disabled
---
::

### Group

Used to group multiple `AContextMenu.Item`s.

::docs-component-meta{name="a-context-menu-group"}
::

### Label

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

::docs-component-meta{name="a-context-menu-label"}
::

### CheckboxItem

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

::docs-component-meta{name="a-context-menu-checkbox-item"}
::

::docs-data-attributes-table
---
data:
  - attribute: "[data-state]"
    values:
      - checked
      - unchecked
      - indeterminate
  - attribute: "[data-highlighted]"
    values: Present when highlighted
  - attribute: "[data-disabled]"
    values: Present when disabled
---
::

### RadioGroup

Used to group multiple `AContextMenu.RadioItem`s.

::docs-component-meta{name="a-context-menu-radio-group"}
::

### RadioItem

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

::docs-component-meta{name="a-context-menu-radio-item"}
::

::docs-data-attributes-table
---
data:
  - attribute: "[data-state]"
    values:
      - checked
      - unchecked
      - indeterminate
  - attribute: "[data-highlighted]"
    values: Present when highlighted
  - attribute: "[data-disabled]"
    values: Present when disabled
---
::

### ItemIndicator

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

::docs-component-meta{name="a-context-menu-item-indicator"}
::

::docs-data-attributes-table
---
data:
  - attribute: "[data-state]"
    values:
      - checked
      - unchecked
      - indeterminate
---
::

### Separator

Used to visually separate items in the context menu.

::docs-component-meta{name="a-context-menu-separator"}
::

### Sub

Contains all the parts of a submenu.

::docs-component-meta{name="a-context-menu-sub"}
::

### SubTrigger

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

::docs-component-meta{name="a-context-menu-sub-trigger"}
::

::docs-data-attributes-table
---
data:
  - attribute: "[data-state]"
    values:
      - open
      - closed
  - attribute: "[data-highlighted]"
    values: Present when highlighted
  - attribute: "[data-disabled]"
    values: Present when disabled
---
::

### SubContent

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

::docs-component-meta{name="a-context-menu-sub-content"}
::

::docs-data-attributes-table
---
data:
  - attribute: "[data-state]"
    values:
      - open
      - closed
  - attribute: "[data-side]"
    values:
      - left
      - right
      - bottom
      - top
  - attribute: "[data-align]"
    values:
      - start
      - end
      - center
---
::

::docs-css-variables-table
---
data:
  - cssVariable: --akar-context-menu-content-transform-origin
    description: The `transform-origin` computed from the content and arrow
      positions/offsets
  - cssVariable: --akar-context-menu-content-available-width
    description: The remaining width between the trigger and the boundary edge
  - cssVariable: --akar-context-menu-content-available-height
    description: The remaining height between the trigger and the boundary edge
  - cssVariable: --akar-context-menu-trigger-width
    description: The width of the trigger
  - cssVariable: --akar-context-menu-trigger-height
    description: The height of the trigger
---
::

## Examples

### With submenus

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

```vue {24-33}
<script setup lang="ts">
import {
  AContextMenuContent,
  AContextMenuItem,
  AContextMenuPortal,
  AContextMenuRoot,
  AContextMenuSeparator,
  AContextMenuSub,
  AContextMenuSubContent,
  AContextMenuSubTrigger,
  AContextMenuTrigger,
} from 'akar';
</script>

<template>
  <AContextMenuRoot>
    <AContextMenuTrigger>…</AContextMenuTrigger>
    <AContextMenuPortal>
      <AContextMenuContent>
        <AContextMenuItem>…</AContextMenuItem>
        <AContextMenuItem>…</AContextMenuItem>
        <AContextMenuSeparator />
        <AContextMenuSub>
          <AContextMenuSubTrigger>Sub menu →</AContextMenuSubTrigger>
          <AContextMenuPortal>
            <AContextMenuSubContent>
              <AContextMenuItem>Sub menu item</AContextMenuItem>
              <AContextMenuItem>Sub menu item</AContextMenuItem>
              <AContextMenuArrow />
            </AContextMenuSubContent>
          </AContextMenuPortal>
        </AContextMenuSub>
        <AContextMenuSeparator />
        <AContextMenuItem>…</AContextMenuItem>
      </AContextMenuContent>
    </AContextMenuPortal>
  </AContextMenuRoot>
</template>
```

### With disabled items

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

```vue {12}
<script setup lang="ts">
import { AContextMenuContent, AContextMenuItem, AContextMenuPortal, AContextMenuRoot, AContextMenuTrigger } from 'akar';
</script>

<template>
  <AContextMenuRoot>
    <AContextMenuTrigger>…</AContextMenuTrigger>
    <AContextMenuPortal>
      <AContextMenuContent>
        <AContextMenuItem
          class="AContextMenuItem"
          disabled
        >
          …
        </AContextMenuItem>
        <AContextMenuItem class="AContextMenuItem">
          …
        </AContextMenuItem>
      </AContextMenuContent>
    </AContextMenuPortal>
  </AContextMenuRoot>
</template>
```

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

### With separators

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

```vue {7,18,20}
<script setup lang="ts">
import {
  AContextMenuContent,
  AContextMenuItem,
  AContextMenuPortal,
  AContextMenuRoot,
  AContextMenuSeparator,
  AContextMenuTrigger,
} from 'akar';
</script>

<template>
  <AContextMenuRoot>
    <AContextMenuTrigger>…</AContextMenuTrigger>
    <AContextMenuPortal>
      <AContextMenuContent>
        <AContextMenuItem>…</AContextMenuItem>
        <AContextMenuSeparator />
        <AContextMenuItem>…</AContextMenuItem>
        <AContextMenuSeparator />
        <AContextMenuItem>…</AContextMenuItem>
      </AContextMenuContent>
    </AContextMenuPortal>
  </AContextMenuRoot>
</template>
```

### With labels

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

```vue {5,17}
<script setup lang="ts">
import {
  AContextMenuContent,
  AContextMenuItem,
  AContextMenuLabel,
  AContextMenuPortal,
  AContextMenuRoot,
  AContextMenuTrigger,
} from 'akar';
</script>

<template>
  <AContextMenuRoot>
    <AContextMenuTrigger>…</AContextMenuTrigger>
    <AContextMenuPortal>
      <AContextMenuContent>
        <AContextMenuLabel>Label</AContextMenuLabel>
        <AContextMenuItem>…</AContextMenuItem>
        <AContextMenuItem>…</AContextMenuItem>
        <AContextMenuItem>…</AContextMenuItem>
      </AContextMenuContent>
    </AContextMenuPortal>
  </AContextMenuRoot>
</template>
```

### With checkbox items

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

```vue {3,25-30}
<script setup lang="ts">
import { Icon } from '@iconify/vue';
import {
  AContextMenuCheckboxItem,
  AContextMenuContent,
  AContextMenuItem,
  AContextMenuItemIndicator,
  AContextMenuPortal,
  AContextMenuRoot,
  AContextMenuSeparator,
  AContextMenuTrigger,
} from 'akar';

const checked = ref(true);
</script>

<template>
  <AContextMenuRoot>
    <AContextMenuTrigger>…</AContextMenuTrigger>
    <AContextMenuPortal>
      <AContextMenuContent>
        <AContextMenuItem>…</AContextMenuItem>
        <AContextMenuItem>…</AContextMenuItem>
        <AContextMenuSeparator />
        <AContextMenuCheckboxItem v-model="checked">
          <AContextMenuItemIndicator>
            <Icon icon="radix-icons:check" />
          </AContextMenuItemIndicator>
          Checkbox item
        </AContextMenuCheckboxItem>
      </AContextMenuContent>
    </AContextMenuPortal>
  </AContextMenuRoot>
</template>
```

### With radio items

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

```vue {8-9,24-43}
<script setup lang="ts">
import { Icon } from '@iconify/vue';
import {
  AContextMenuCheckboxItem,
  AContextMenuContent,
  AContextMenuItem,
  AContextMenuItemIndicator,
  AContextMenuPortal,
  AContextMenuRadioGroup,
  AContextMenuRadioItem,
  AContextMenuRoot,
  AContextMenuSeparator,
  AContextMenuTrigger,
} from 'akar';

const color = ref('blue');
</script>

<template>
  <AContextMenuRoot>
    <AContextMenuTrigger>…</AContextMenuTrigger>
    <AContextMenuPortal>
      <AContextMenuContent>
        <AContextMenuRadioGroup v-model="color">
          <AContextMenuRadioItem value="red">
            <AContextMenuItemIndicator>
              <Icon icon="radix-icons:check" />
            </AContextMenuItemIndicator>
            Red
          </AContextMenuRadioItem>
          <AContextMenuRadioItem value="blue">
            <AContextMenuItemIndicator>
              <Icon icon="radix-icons:check" />
            </AContextMenuItemIndicator>
            Blue
          </AContextMenuRadioItem>
          <AContextMenuRadioItem value="green">
            <AContextMenuItemIndicator>
              <Icon icon="radix-icons:check" />
            </AContextMenuItemIndicator>
            Green
          </AContextMenuRadioItem>
        </AContextMenuRadioGroup>
      </AContextMenuContent>
    </AContextMenuPortal>
  </AContextMenuRoot>
</template>
```

### With complex items

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

```vue {11,15}
<script setup lang="ts">
import { AContextMenuContent, AContextMenuItem, AContextMenuPortal, AContextMenuRoot, AContextMenuTrigger } from 'akar';
</script>

<template>
  <AContextMenuRoot>
    <AContextMenuTrigger>…</AContextMenuTrigger>
    <AContextMenuPortal>
      <AContextMenuContent>
        <AContextMenuItem>
          <img src="…">
          Adolfo Hess
        </AContextMenuItem>
        <AContextMenuItem>
          <img src="…">
          Miyah Myles
        </AContextMenuItem>
      </AContextMenuContent>
    </AContextMenuPortal>
  </AContextMenuRoot>
</template>
```

### 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 `--akar-context-menu-trigger-width` and `--akar-context-menu-content-available-height` to support this. Use them to constrain the content dimensions.

```vue {9}
<script setup lang="ts">
import { AContextMenuContent, AContextMenuItem, AContextMenuPortal, AContextMenuRoot, AContextMenuTrigger } from 'akar';
</script>

<template>
  <AContextMenuRoot>
    <AContextMenuTrigger>…</AContextMenuTrigger>
    <AContextMenuPortal>
      <AContextMenuContent class="AContextMenuContent">
        …
      </AContextMenuContent>
    </AContextMenuPortal>
  </AContextMenuRoot>
</template>
```

```css {3-4}
/* styles.css */
.AContextMenuContent {
  width: var(--akar-context-menu-trigger-width);
  max-height: var(--akar-context-menu-content-available-height);
}
```

### Origin-aware animations

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

```vue {9}
<script setup lang="ts">
import { AContextMenuContent, AContextMenuPortal, AContextMenuRoot, AContextMenuTrigger } from 'akar';
</script>

<template>
  <AContextMenuRoot>
    <AContextMenuTrigger>…</AContextMenuTrigger>
    <AContextMenuPortal>
      <AContextMenuContent class="AContextMenuContent">
        …
      </AContextMenuContent>
    </AContextMenuPortal>
  </AContextMenuRoot>
</template>
```

```css {3}
/* styles.css */
.AContextMenuContent {
  transform-origin: var(--akar-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.

```vue {9}
<script setup lang="ts">
import { AContextMenuContent, AContextMenuPortal, AContextMenuRoot, AContextMenuTrigger } from 'akar';
</script>

<template>
  <AContextMenuRoot>
    <AContextMenuTrigger>…</AContextMenuTrigger>
    <AContextMenuPortal>
      <AContextMenuContent class="AContextMenuContent">
        …
      </AContextMenuContent>
    </AContextMenuPortal>
  </AContextMenuRoot>
</template>
```

```css {6-11}
/* styles.css */
.AContextMenuContent {
  animation-duration: 0.6s;
  animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
}
.AContextMenuContent[data-side='top'] {
  animation-name: slideUp;
}
.AContextMenuContent[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](https://www.w3.org/WAI/ARIA/apg/patterns/kbd_roving_tabindex){rel="nofollow"} to manage focus movement among menu items.

### Keyboard Interactions

::docs-keyboard-table
---
data:
  - keys:
      - Space
    description: Activates the focused item.
  - keys:
      - Enter
    description: Activates the focused item.
  - keys:
      - ArrowDown
    description: Moves focus to the next item.
  - keys:
      - ArrowUp
    description: Moves focus to the previous item.
  - keys:
      - ArrowRight
      - ArrowLeft
    description: When focus is on `AContextMenu.SubTrigger`, opens or closes the
      submenu depending on reading direction.
  - keys:
      - Esc
    description: Closes the context menu
name: keyboard-a-context-menu
---
::


# Date Field

::docs-component-example{name="a-date-field"}
::

## Features

::docs-highlights
---
features:
  - Full keyboard navigation.
  - Supports Right to Left direction.
  - Can be controlled or uncontrolled.
  - Focus is fully managed.
  - Localization support.
  - Highly composable.
  - Accessible by default.
  - Supports both date and date-time formats.
---
::

## Preface

The component depends on the [@internationalized/date](https://react-spectrum.adobe.com/internationalized/date/index.html){rel="nofollow"} package, which solves a lot of the problems that come with working with dates and times in JavaScript.

We highly recommend reading through the documentation for the package to get a solid feel for how it works, and you'll need to install it in your project to use the date-related components.

## Installation

Install the date package.

::code-group{sync="pm"}
```bash [pnpm]
pnpm add @internationalized/date
```

```bash [npm]
npm install @internationalized/date
```

```bash [bun]
bun add @internationalized/date
```
::

## Anatomy

Import all parts and piece them together.

```vue
<script setup>
import {
  ADateFieldInput,
  ADateFieldRoot,
} from 'akar';
</script>

<template>
  <ADateFieldRoot>
    <ADateFieldInput />
  </ADateFieldRoot>
</template>
```

## Pohon

::docs-akar-to-pohon
---
to: https://akar.vinicunca.dev/docs/pohon/components/input-date
---
::

## API Reference

### Root

Contains all the parts of a date field

::docs-component-meta{name="a-date-field-root"}
::

::data-attributes-table
---
data:
  - attribute: "[data-readonly]"
    values: Present when readonly
  - attribute: "[data-disabled]"
    values: Present when disabled
  - attribute: "[data-invalid]"
    values: Present when invalid
---
::

### Input

Contains the date field segments

::docs-component-meta{name="a-date-field-input"}
::

::docs-data-attributes-table
---
data:
  - attribute: "[data-disabled]"
    values: Present when disabled
  - attribute: "[data-invalid]"
    values: Present when invalid
  - attribute: "[data-placeholder]"
    values: Present when no value is set
---
::

## Accessibility

### Keyboard Interactions

::docs-keyboard-table
---
data:
  - keys:
      - Tab
    description: When focus moves onto the date field, focuses the first segment.
  - keys:
      - ArrowLeft
      - ArrowRight
    description: Navigates between the date field segments.
  - keys:
      - ArrowUp
      - ArrowDown
    description: Increments/changes the value of the segment.
  - keys:
      - 0-9
    description: When the focus is on a numeric `ADateFieldInput`, it types in
      number and focuses the next segment if the next input would result in an
      invalid value.
  - keys:
      - Backspace
    description: Deletes a digit from the focused numeric segments.
  - keys:
      - A
      - P
    description: When the focus is on the day period, it sets it to AM or PM.
name: keyboard-a-date-field
---
::


# Date Picker

::docs-component-example{name="a-date-picker"}
::

## Features

::docs-highlights
---
features:
  - Full keyboard navigation.
  - Can be controlled or uncontrolled.
  - Focus is fully managed.
  - Localization support.
  - Accessible by default.
  - Supports both date and date-time formats.
---
::

## Preface

The component depends on the [@internationalized/date](https://react-spectrum.adobe.com/internationalized/date/index.html){rel="nofollow"} package, which solves a lot of the problems that come with working with dates and times in JavaScript.

We highly recommend reading through the documentation for the package to get a solid feel for how it works, and you'll need to install it in your project to use the date-related components.

## Installation

Install the date package.

::code-group{sync="pm"}
```bash [pnpm]
pnpm add @internationalized/date
```

```bash [npm]
npm install @internationalized/date
```

```bash [bun]
bun add @internationalized/date
```
::

## Anatomy

Import all parts and piece them together.

```vue
<script setup>
import {
  ADatePickerAnchor,
  ADatePickerArrow,
  ADatePickerCalendar,
  ADatePickerCell,
  ADatePickerCellTrigger,
  ADatePickerClose,
  ADatePickerContent,
  ADatePickerField,
  ADatePickerGrid,
  ADatePickerGridBody,
  ADatePickerGridHead,
  ADatePickerGridRow,
  ADatePickerHeadCell,
  ADatePickerHeader,
  ADatePickerHeading,
  ADatePickerInput,
  ADatePickerNext,
  ADatePickerPrev,
  ADatePickerRoot,
  ADatePickerTrigger,
} from 'akar';
</script>

<template>
  <ADatePickerRoot>
    <ADatePickerField>
      <ADatePickerInput />
      <ADatePickerTrigger />
    </ADatePickerField>

    <ADatePickerAnchor />
    <ADatePickerContent>
      <ADatePickerClose />
      <ADatePickerArrow />

      <ADatePickerCalendar>
        <ADatePickerHeader>
          <ADatePickerPrev />
          <ADatePickerHeading />
          <ADatePickerNext />
        </ADatePickerHeader>

        <ADatePickerGrid>
          <ADatePickerGridHead>
            <ADatePickerGridRow>
              <ADatePickerHeadCell />
            </ADatePickerGridRow>
          </ADatePickerGridHead>

          <ADatePickerGridBody>
            <ADatePickerGridRow>
              <ADatePickerCell>
                <ADatePickerCellTrigger />
              </ADatePickerCell>
            </ADatePickerGridRow>
          </ADatePickerGridBody>
        </ADatePickerGrid>
      </ADatePickerCalendar>
    </ADatePickerContent>
  </ADatePickerRoot>
</template>
```

## Pohon

::docs-akar-to-pohon
---
to: https://akar.vinicunca.dev/docs/pohon/components/input-date#date-picker
---
::

## API Reference

### Root

Contains all the parts of a date picker

::docs-component-meta{name="a-date-picker-root"}
::

### Field

Contains the date picker date field segments and trigger

::docs-component-meta{name="a-date-picker-field"}
::

::docs-data-attributes-table
---
data:
  - attribute: "[data-readonly]"
    values: Present when readonly
  - attribute: "[data-disabled]"
    values: Present when disabled
  - attribute: "[data-invalid]"
    values: Present when invalid
---
::

### Input

Contains the date picker date field segments

::docs-component-meta{name="a-date-picker-input"}
::

::docs-data-attributes-table
---
data:
  - attribute: "[data-disabled]"
    values: Present when disabled
  - attribute: "[data-invalid]"
    values: Present when invalid
  - attribute: "[data-placeholder]"
    values: Present when no value is set
---
::

### Trigger

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

::docs-component-meta{name="a-date-picker-trigger"}
::

### Content

The component that pops out when the popover is open.

::docs-component-meta{name="a-date-picker-content"}
::

### Arrow

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

::docs-component-meta{name="a-date-picker-arrow"}
::

### Close

The button that closes an open date picker.

::docs-component-meta{name="a-date-picker-close"}
::

### Anchor

An optional element to position the `ADatePickerContent` against. If this part is not used, the content will position alongside the `ADatePickerTrigger`.

::docs-component-meta{name="a-date-picker-anchor"}
::

### Calendar

Contains all the parts of a calendar

::docs-component-meta{name="a-date-picker-calendar"}
::

::docs-data-attributes-table
---
data:
  - attribute: "[data-disabled]"
    values: Present when disabled
  - attribute: "[data-readonly]"
    values: Present when readonly
  - attributes: "[data-invalid]"
    values: Present when invalid
---
::

### Header

Contains the navigation buttons and the heading segments.

::docs-component-meta{name="a-date-picker-header"}
::

### Prev Button

Calendar navigation button. It navigates the calendar one month/year/decade in the past based on the current calendar view.

::docs-component-meta{name="a-date-picker-prev"}
::

::docs-data-attributes-table
---
data:
  - attribute: "[data-disabled]"
    values: Present when disabled
---
::

### Next Button

Calendar navigation button. It navigates the calendar one month/year/decade in the future based on the current calendar view.

::docs-component-meta{name="a-date-picker-next"}
::

::docs-data-attributes-table
---
data:
  - attribute: "[data-disabled]"
    values: Present when disabled
---
::

### Heading

Heading for displaying the current month and year/

::docs-component-meta{name="a-date-picker-heading"}
::

### Grid

Container for wrapping the calendar grid.

::docs-component-meta{name="a-date-picker-grid"}
::

::docs-data-attributes-table
---
data:
  - attribute: "[data-disabled]"
    values: Present when disabled
  - attribute: "[data-readonly]"
    values: Present when readonly
---
::

### Grid Head

Container for wrapping the grid head.

::docs-component-meta{name="a-date-picker-grid-head"}
::

### Grid Body

Container for wrapping the grid body.

::docs-component-meta{name="a-date-picker-grid-body"}
::

### Grid Row

Container for wrapping the grid row.

::docs-component-meta{name="a-date-picker-grid-row"}
::

### Head Cell

Container for wrapping the head cell. Used for displaying the week days.

::docs-component-meta{name="a-date-picker-head-cell"}
::

### Cell

Container for wrapping the calendar cells.

::docs-component-meta{name="a-date-picker-cell"}
::

::docs-data-attributes-table
---
data:
  - attribute: "[data-disabled]"
    values: Present when disabled
---
::

### Cell Trigger

Interactable container for displaying the cell dates. Clicking it selects the date.

::docs-component-meta{name="a-date-picker-cell-trigger"}
::

::docs-data-attributes-table
---
data:
  - attribute: "[data-selected]"
    values: Present when selected
  - attribute: "[data-value]"
    values: The ISO string value of the date.
  - attribute: "[data-disabled]"
    values: Present when disabled
  - attribute: "[data-unavailable]"
    values: Present when unavailable
  - attribute: "[data-today]"
    values: Present when today
  - attribute: "[data-outside-view]"
    values: Present when the date is outside the current month it is displayed in.
  - attribute: "[data-outside-visible-view]"
    values: Present when the date is outside the months that are visible on the
      calendar.
  - attribute: "[data-focused]"
    values: Present when focused
---
::

## Accessibility

### Keyboard Interactions

::docs-keyboard-table
---
data:
  - keys:
      - Tab
    description: When focus moves onto the date field, focuses the first segment.
  - keys:
      - Space
    description: When the focus is on either `ADatePickerNext` or `ADatePickerPrev`,
      it navigates the calendar. Otherwise, it selects the date. If the focus is
      on `ADatePickerTrigger`, it opens/closes the popover.
  - keys:
      - Enter
    description: " When the focus is on either `ADatePickerNext` or
      `ADatePickerPrev`, it navigates the calendar. Otherwise it selects the
      date. If the focus is on `ADatePickerTrigger`, it opens/closes the
      popover."
  - keys:
      - ArrowLeft
      - ArrowRight
    description: Navigates between the date field segments. If the focus is on the
      `ADatePickerCalendar`, it navigates between dates.
  - keys:
      - ArrowUp
      - ArrowDown
    description: Increments/changes the value of the segment. If the focus is on the
      `ADatePickerCalendar`, it navigates between the dates.
  - keys:
      - 0-9
    description: When the focus is on a numeric `ADatePickerInput`, it types in the
      number and focuses the next segment if the next input would result in an
      invalid value.
  - keys:
      - Backspace
    description: Deletes a digit from the focused numeric segments.
  - keys:
      - A
      - P
    description: When the focus is on the day period, it sets it to AM or PM.
name: keyboard-a-date-picker
---
::


# Date Range Field

::docs-component-example{name="a-date-range-field"}
::

## Features

::docs-highlights
---
features:
  - Full keyboard navigation.
  - Can be controlled or uncontrolled.
  - Focus is fully managed.
  - Localization support.
  - Highly composable.
  - Accessible by default.
  - Supports both date and date-time formats.
---
::

## Preface

The component depends on the [@internationalized/date](https://react-spectrum.adobe.com/internationalized/date/index.html){rel="nofollow"} package, which solves a lot of the problems that come with working with dates and times in JavaScript.

We highly recommend reading through the documentation for the package to get a solid feel for how it works, and you'll need to install it in your project to use the date-related components.

## Installation

Install the date package.

::code-group{sync="pm"}
```bash [pnpm]
pnpm add @internationalized/date
```

```bash [npm]
npm install @internationalized/date
```

```bash [bun]
bun add @internationalized/date
```
::

## Anatomy

Import all parts and piece them together.

```vue
<script setup>
import {
  ADateRangeFieldInput,
  ADateRangeFieldRoot,
} from 'akar';
</script>

<template>
  <ADateRangeFieldRoot>
    <ADateRangeFieldInput />
  </ADateRangeFieldRoot>
</template>
```

## Pohon

::docs-akar-to-pohon
---
to: https://akar.vinicunca.dev/docs/pohon/components/input-date#range
---
::

## API Reference

### Root

Contains all the parts of a date field

::docs-component-meta{name="a-date-range-field-root"}
::

::data-attributes-table
---
data:
  - attribute: "[data-readonly]"
    values: Present when readonly
  - attribute: "[data-disabled]"
    values: Present when disabled
  - attribute: "[data-invalid]"
    values: Present when invalid
---
::

### Input

Contains the date field segments

::docs-component-meta{name="a-date-range-field-input"}
::

::docs-data-attributes-table
---
data:
  - attribute: "[data-disabled]"
    values: Present when disabled
  - attribute: "[data-invalid]"
    values: Present when invalid
  - attribute: "[data-placeholder]"
    values: Present when no value is set
---
::

## Accessibility

### Keyboard Interactions

::docs-keyboard-table
---
data:
  - keys:
      - Tab
    description: When focus moves onto the date field, focuses the first segment.
  - keys:
      - ArrowLeft
      - ArrowRight
    description: Navigates between the date field segments.
  - keys:
      - ArrowUp
      - ArrowDown
    description: Increments/changes the value of the segment.
  - keys:
      - 0-9
    description: When the focus is on a numeric `ADateFieldInput`, it types in
      number and focuses the next segment if the next input would result in an
      invalid value.
  - keys:
      - Backspace
    description: Deletes a digit from the focused numeric segments.
  - keys:
      - A
      - P
    description: When the focus is on the day period, it sets it to AM or PM.
name: keyboard-a-date-range-field
---
::


# Date Range Picker

::docs-component-example{name="a-date-range-picker"}
::

## Features

::docs-highlights
---
features:
  - Full keyboard navigation.
  - Can be controlled or uncontrolled.
  - Focus is fully managed.
  - Localization support.
  - Accessible by default.
  - Supports both date and date-time formats.
---
::

## Preface

The component depends on the [@internationalized/date](https://react-spectrum.adobe.com/internationalized/date/index.html){rel="nofollow"} package, which solves a lot of the problems that come with working with dates and times in JavaScript.

We highly recommend reading through the documentation for the package to get a solid feel for how it works, and you'll need to install it in your project to use the date-related components.

## Installation

Install the date package.

::code-group{sync="pm"}
```bash [pnpm]
pnpm add @internationalized/date
```

```bash [npm]
npm install @internationalized/date
```

```bash [bun]
bun add @internationalized/date
```
::

## Anatomy

Import all parts and piece them together.

```vue
<script setup>
import {
  ADateRangePickerAnchor,
  ADateRangePickerArrow,
  ADateRangePickerCalendar,
  ADateRangePickerCell,
  ADateRangePickerCellTrigger,
  ADateRangePickerClose,
  ADateRangePickerContent,
  ADateRangePickerField,
  ADateRangePickerGrid,
  ADateRangePickerGridBody,
  ADateRangePickerGridHead,
  ADateRangePickerGridRow,
  ADateRangePickerHeadCell,
  ADateRangePickerHeader,
  ADateRangePickerHeading,
  ADateRangePickerInput,
  ADateRangePickerNext,
  ADateRangePickerPrev,
  ADateRangePickerRoot,
  ADateRangePickerTrigger,
} from 'akar';
</script>

<template>
  <ADateRangePickerRoot>
    <ADateRangePickerField>
      <ADateRangePickerInput />
      <ADateRangePickerTrigger />
    </ADateRangePickerField>

    <ADateRangePickerAnchor />

    <ADateRangePickerContent>
      <ADateRangePickerClose />
      <ADateRangePickerArrow />

      <ADateRangePickerCalendar>
        <ADateRangePickerHeader>
          <ADateRangePickerPrev />
          <ADateRangePickerHeading />
          <ADateRangePickerNext />
        </ADateRangePickerHeader>

        <ADateRangePickerGrid>
          <ADateRangePickerGridHead>
            <ADateRangePickerGridRow>
              <ADateRangePickerHeadCell />
            </ADateRangePickerGridRow>
          </ADateRangePickerGridHead>

          <ADateRangePickerGridBody>
            <ADateRangePickerGridRow>
              <ADateRangePickerCell>
                <ADateRangePickerCellTrigger />
              </ADateRangePickerCell>
            </ADateRangePickerGridRow>
          </ADateRangePickerGridBody>
        </ADateRangePickerGrid>
      </ADateRangePickerCalendar>
    </ADateRangePickerContent>
  </ADateRangePickerRoot>
</template>
```

## Pohon

::docs-akar-to-pohon
---
to: https://akar.vinicunca.dev/docs/pohon/components/input-date#range-picker
---
::

## API Reference

### Root

Contains all the parts of a date picker

::docs-component-meta{name="a-date-range-picker-root"}
::

### Field

Contains the date picker date field segments and trigger

::docs-component-meta{name="a-date-range-picker-field"}
::

::docs-data-attributes-table
---
data:
  - attribute: "[data-readonly]"
    values: Present when readonly
  - attribute: "[data-disabled]"
    values: Present when disabled
  - attribute: "[data-invalid]"
    values: Present when invalid
---
::

### Input

Contains the date picker date field segments

::docs-component-meta{name="a-date-range-picker-input"}
::

::docs-data-attributes-table
---
data:
  - attribute: "[data-disabled]"
    values: Present when disabled
  - attribute: "[data-invalid]"
    values: Present when invalid
  - attribute: "[data-placeholder]"
    values: Present when no value is set
---
::

### Trigger

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

::docs-component-meta{name="a-date-range-picker-trigger"}
::

### Content

The component that pops out when the popover is open.

::docs-component-meta{name="a-date-range-picker-content"}
::

### Arrow

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

::docs-component-meta{name="a-date-range-picker-arrow"}
::

### Close

The button that closes an open date picker.

::docs-component-meta{name="a-date-range-picker-close"}
::

### Anchor

An optional element to position the `ADateRangePickerContent` against. If this part is not used, the content will position alongside the `ADateRangePickerTrigger`.

::docs-component-meta{name="a-date-range-picker-anchor"}
::

### Calendar

Contains all the parts of a calendar

::docs-component-meta{name="a-date-range-picker-calendar"}
::

::docs-data-attributes-table
---
data:
  - attribute: "[data-disabled]"
    values: Present when disabled
  - attribute: "[data-readonly]"
    values: Present when readonly
  - attributes: "[data-invalid]"
    values: Present when invalid
---
::

### Header

Contains the navigation buttons and the heading segments.

::docs-component-meta{name="a-date-range-picker-header"}
::

### Prev Button

Calendar navigation button. It navigates the calendar one month/year/decade in the past based on the current calendar view.

::docs-component-meta{name="a-date-range-picker-prev"}
::

::docs-data-attributes-table
---
data:
  - attribute: "[data-disabled]"
    values: Present when disabled
---
::

### Next Button

Calendar navigation button. It navigates the calendar one month/year/decade in the future based on the current calendar view.

::docs-component-meta{name="a-date-range-picker-next"}
::

::docs-data-attributes-table
---
data:
  - attribute: "[data-disabled]"
    values: Present when disabled
---
::

### Heading

Heading for displaying the current month and year

::docs-component-meta{name="a-date-range-picker-heading"}
::

::docs-data-attributes-table
---
data:
  - attribute: "[data-disabled]"
    values: Present when disabled
---
::

### Grid

Container for wrapping the calendar grid.

::docs-component-meta{name="a-date-range-picker-grid"}
::

::docs-data-attributes-table
---
data:
  - attribute: "[data-disabled]"
    values: Present when disabled
  - attribute: "[data-readonly]"
    values: Present when readonly
---
::

### Grid Head

Container for wrapping the grid head.

::docs-component-meta{name="a-date-range-picker-grid-head"}
::

### Grid Body

Container for wrapping the grid body.

::docs-component-meta{name="a-date-range-picker-grid-body"}
::

### Grid Row

Container for wrapping the grid row.

::docs-component-meta{name="a-date-range-picker-grid-row"}
::

### Head Cell

Container for wrapping the head cell. Used for displaying the week days.

::docs-component-meta{name="a-date-range-picker-head-cell"}
::

### Cell

Container for wrapping the calendar cells.

::docs-component-meta{name="a-date-range-picker-cell"}
::

::docs-data-attributes-table
---
data:
  - attribute: "[data-disabled]"
    values: Present when disabled
---
::

### Cell Trigger

Interactable container for displaying the cell dates. Clicking it selects the date.

::docs-component-meta{name="a-date-range-picker-cell-trigger"}
::

::docs-data-attributes-table
---
data:
  - attribute: "[data-selected]"
    values: Present when selected
  - attribute: "[data-value]"
    values: The ISO string value of the date.
  - attribute: "[data-disabled]"
    values: Present when disabled
  - attribute: "[data-unavailable]"
    values: Present when unavailable
  - attribute: "[data-today]"
    values: Present when today
  - attribute: "[data-outside-view]"
    values: Present when the date is outside the current month it is displayed in.
  - attribute: "[data-outside-visible-view]"
    values: Present when the date is outside the months that are visible on the
      calendar.
  - attribute: "[data-focused]"
    values: Present when focused
---
::

## Accessibility

### Keyboard Interactions

::docs-keyboard-table
---
data:
  - keys:
      - Tab
    description: When focus moves onto the date field, focuses the first segment.
  - keys:
      - Space
    description: When the focus is on either `ADatePickerNext` or `ADatePickerPrev`,
      it navigates the calendar. Otherwise, it selects the date. If the focus is
      on `ADatePickerTrigger`, it opens/closes the popover.
  - keys:
      - Enter
    description: When the focus is on either `ADatePickerNext` or `ADatePickerPrev`,
      it navigates the calendar. Otherwise it selects the date. If the focus is
      on `ADatePickerTrigger`, it opens/closes the popover.
  - keys:
      - ArrowLeft
      - ArrowRight
    description: Navigates between the date field segments. If the focus is on the
      `ADatePickerCalendar`, it navigates between dates.
  - keys:
      - ArrowUp
      - ArrowDown
    description: Increments/changes the value of the segment. If the focus is on the
      `ADatePickerCalendar`, it navigates between the dates.
  - keys:
      - 0-9
    description: When the focus is on a numeric `ADatePickerInput`, it types in the
      number and focuses the next segment if the next input would result in an
      invalid value.
  - keys:
      - Backspace
    description: Deletes a digit from the focused numeric segments.
  - keys:
      - A
      - P
    description: When the focus is on the day period, it sets it to AM or PM.
name: keyboard-a-date-picker
---
::


# Dialog

::docs-component-example{name="a-dialog"}
::

## Features

::docs-highlights
---
features:
  - Supports modal and non-modal modes.
  - Focus is automatically trapped when modal.
  - Can be controlled or uncontrolled.
  - Manages screen reader announcements with `<AADialogTitle>` and
    `<AADialogDescription>` components.
  - Esc closes the component automatically.
---
::

## Anatomy

Import all parts and piece them together.

```vue
<script setup>
import {
  ADialogClose,
  ADialogContent,
  ADialogDescription,
  ADialogOverlay,
  ADialogPortal,
  ADialogRoot,
  ADialogTitle,
  ADialogTrigger,
} from 'akar';
</script>

<template>
  <ADialogRoot>
    <ADialogTrigger />
    <ADialogPortal>
      <ADialogOverlay />
      <ADialogContent>
        <ADialogTitle />
        <ADialogDescription />
        <ADialogClose />
      </ADialogContent>
    </ADialogPortal>
  </ADialogRoot>
</template>
```

## Pohon

::docs-akar-to-pohon
---
to: https://akar.vinicunca.dev/docs/pohon/components/dialog
---
::

## API Reference

### Root

Contains all the parts of a dialog

::docs-component-meta{name="a-dialog-root"}
::

### Trigger

The button that opens the dialog

::docs-component-meta{name="a-dialog-trigger"}
::

::docs-data-attributes-table
---
data:
  - attribute: "[data-state]"
    values:
      - open
      - closed
---
::

### Portal

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

::docs-component-meta{name="a-dialog-portal"}
::

### Overlay

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

::docs-presence-tip
::

::docs-component-meta{name="a-dialog-overlay"}
::

::docs-data-attributes-table
---
data:
  - attribute: "[data-state]"
    values:
      - open
      - closed
---
::

### Content

Contains content to be rendered in the open dialog

::docs-presence-tip
::

::docs-component-meta{name="a-dialog-content"}
::

::docs-data-attributes-table
---
data:
  - attribute: "[data-state]"
    values:
      - open
      - closed
---
::

### Close

The button that closes the dialog

::docs-component-meta{name="a-dialog-close"}
::

### 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 `<AVisuallyHidden asChild>`.

::docs-component-meta{name="a-dialog-title"}
::

### 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 `<AVisuallyHidden asChild>`. If you want to remove the description entirely, remove this part and pass `:aria-describedby="undefined"` to `ADialogContent`.

::docs-component-meta{name="a-dialog-description"}
::

## Examples

### Nested dialog

You can nest multiple layers of dialogs.

::docs-component-example{name="a-dialog-nested"}
::

### Close after asynchronous form submission

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

```vue {4-5,15-19,22-24}
<script setup>
import { ADialogContent, ADialogOverlay, ADialogPortal, ADialogRoot, ADialogTrigger } from 'akar';

function wait() {
  return new Promise((resolve) => {
    setTimeout(resolve, 1000);
  });
}
const open = ref(false);
</script>

<template>
  <ADialogRoot v-model:open="open">
    <ADialogTrigger>Open</ADialogTrigger>
    <ADialogPortal>
      <ADialogOverlay />
      <ADialogContent>
        <form
          @submit.prevent="
            (event) => {
              wait().then(() => (open = false));
            }
          "
        >
          <!-- some inputs -->
          <button type="submit">
            Submit
          </button>
        </form>
      </ADialogContent>
    </ADialogPortal>
  </ADialogRoot>
</template>
```

### Scrollable overlay

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

```vue
// index.vue
<script setup>
import { ADialogContent, ADialogOverlay, ADialogPortal, ADialogRoot, ADialogTrigger } from 'akar';
import './styles.css';
</script>

<template>
  <ADialogRoot>
    <ADialogTrigger />
    <ADialogPortal>
      <ADialogOverlay class="ADialogOverlay">
        <ADialogContent class="ADialogContent">
          ...
        </ADialogContent>
      </ADialogOverlay>
    </ADialogPortal>
  </ADialogRoot>
</template>
```

```css
/* styles.css */
.ADialogOverlay {
  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;
}

.ADialogContent {
  min-width: 300px;
  background: white;
  padding: 30px;
  border-radius: 4px;
}
```

However, there's a caveat to this approach, where user might click on the scrollbar and close the dialog unintentionally. There's no universal solution that would fix this issue for now, however you can add the following snippet to `ADialogContent` to prevent closing of modal when clicking on scrollbar.

```vue
<ADialogContent
  @pointer-down-outside="(event) => {
    const originalEvent = event.detail.originalEvent;
    const target = originalEvent.target as HTMLElement;
    if (originalEvent.offsetX > target.clientWidth || originalEvent.offsetY > target.clientHeight) {
      event.preventDefault();
    }
  }"
>
```

### Custom portal container

Customise the element that your dialog portals into.

```vue {4,11,17}
<script setup>
import { ADialogContent, ADialogOverlay, ADialogPortal, ADialogRoot, ADialogTrigger } from 'akar';

const container = ref(null);
</script>

<template>
  <div>
    <ADialogRoot>
      <ADialogTrigger />
      <ADialogPortal to="container">
        <ADialogOverlay />
        <ADialogContent>...</ADialogContent>
      </ADialogPortal>
    </ADialogRoot>

    <div ref="container" />
  </div>
</template>
```

## Accessibility

Adheres to the [ADialog WAI-ARIA design pattern](https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/){rel="nofollow"}.

### Close icon button

When providing an icon (or font icon), remember to label it correctly for screen reader users.

```vue {9-11}
<template>
  <ADialogRoot>
    <ADialogTrigger />
    <ADialogPortal>
      <ADialogOverlay />
      <ADialogContent>
        <ADialogTitle />
        <ADialogDescription />
        <ADialogClose aria-label="Close">
          <span aria-hidden="true">×</span>
        </ADialogClose>
      </ADialogContent>
    </ADialogPortal>
  </ADialogRoot>
</template>
```

### Close using slot props

Alternatively, you can use the `close` method provided by the `ADialogRoot` slot props to programmatically close the dialog.

```vue {4,8,16-20}
<script setup>
import { ADialogContent, ADialogOverlay, ADialogPortal, ADialogRoot, ADialogTrigger } from 'akar';
</script>

<template>
  <ADialogRoot v-slot="{ close }">
    <ADialogTrigger>Open</ADialogTrigger>
    <ADialogPortal>
      <ADialogOverlay />
      <ADialogContent>
        <form>
          <!-- some inputs -->
          <button
            type="submit"
            @click="close"
          >
            Submit
          </button>
        </form>
      </ADialogContent>
      <ADialogFooter>
        <button
          type="submit"
          @click="close"
        >
          Submit
        </button>
      </ADialogFooter>
    </ADialogPortal>
  </ADialogRoot>
</template>
```

### Keyboard Interactions

::docs-keyboard-table
---
data:
  - keys:
      - Space
    description: Opens/closes the dialog
  - keys:
      - Enter
    description: Opens/closes the dialog
  - keys:
      - Tab
    description: Moves focus to the next focusable element.
  - keys:
      - Shift + Tab
    description: Moves focus to the previous focusable element.
  - keys:
      - Esc
    description: Closes the dialog and moves focus to `ADialogTrigger`.
name: keyboard-a-dialog
---
::

## 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 `ADialogOverlay` and `ADialogClose` parts.

#### Usage

```vue
<script setup>
import { ADialog, ADialogContent, ADialogTrigger } from './your-dialog';
</script>

<template>
  <ADialog>
    <ADialogTrigger>ADialog trigger</ADialogTrigger>
    <ADialogContent>ADialog Content</ADialogContent>
  </ADialog>
</template>
```

#### Implementation

```ts
// your-dialog.ts
export { default as ADialogContent } from 'ADialogContent.vue';
export { ADialogRoot as ADialog, ADialogTrigger } from 'akar';
```

```vue
<!-- ADialogContent.vue -->
<script setup lang="ts">
import type { ADialogContentEmits, ADialogContentProps } from 'akar';
import { Cross2Icon } from '@radix-icons/vue';
import { ADialogClose, ADialogContent, ADialogOverlay, ADialogPortal, useForwardPropsEmits } from 'akar';

const props = defineProps<ADialogContentProps>();
const emits = defineEmits<ADialogContentEmits>();

const forwarded = useForwardPropsEmits(props, emits);
</script>

<template>
  <ADialogPortal>
    <ADialogOverlay />
    <ADialogContent v-bind="forwarded">
      <slot />

      <ADialogClose>
        <Cross2Icon />
        <span class="sr-only">Close</span>
      </ADialogClose>
    </ADialogContent>
  </ADialogPortal>
</template>
```


# Drawer

Work in Progress


# Dropdown Menu

::docs-component-example{name="a-dropdown-menu"}
::

## Features

::docs-highlights
---
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.
---
::

## Anatomy

Import all parts and piece them together.

```vue
<script setup lang="ts">
import {
  ADropdownMenuArrow,
  ADropdownMenuCheckboxItem,
  ADropdownMenuContent,
  ADropdownMenuGroup,
  ADropdownMenuItem,
  ADropdownMenuItemIndicator,
  ADropdownMenuLabel,
  ADropdownMenuPortal,
  ADropdownMenuRadioGroup,
  ADropdownMenuRadioItem,
  ADropdownMenuRoot,
  ADropdownMenuSeparator,
  ADropdownMenuSub,
  ADropdownMenuSubContent,
  ADropdownMenuSubTrigger,
  ADropdownMenuTrigger,
} from 'akar';
</script>

<template>
  <ADropdownMenuRoot>
    <ADropdownMenuTrigger />

    <ADropdownMenuPortal>
      <ADropdownMenuContent>
        <ADropdownMenuLabel />
        <ADropdownMenuItem />

        <ADropdownMenuGroup>
          <ADropdownMenuItem />
        </ADropdownMenuGroup>

        <ADropdownMenuCheckboxItem>
          <ADropdownMenuItemIndicator />
        </ADropdownMenuCheckboxItem>

        <ADropdownMenuRadioGroup>
          <ADropdownMenuRadioItem>
            <ADropdownMenuItemIndicator />
          </ADropdownMenuRadioItem>
        </ADropdownMenuRadioGroup>

        <ADropdownMenuSub>
          <ADropdownMenuSubTrigger />
          <ADropdownMenuPortal>
            <ADropdownMenuSubContent />
          </ADropdownMenuPortal>
        </ADropdownMenuSub>

        <ADropdownMenuSeparator />
        <ADropdownMenuArrow />
      </ADropdownMenuContent>
    </ADropdownMenuPortal>
  </ADropdownMenuRoot>
</template>
```

## Pohon

::docs-akar-to-pohon
---
to: https://akar.vinicunca.dev/docs/pohon/components/dropdown-menu
---
::

## API Reference

### Root

Contains all the parts of a dropdown menu.

::docs-component-meta{name="a-dropdown-menu-root"}
::

### Trigger

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

::docs-component-meta{name="a-dropdown-menu-trigger"}
::

::docs-data-attributes-table
---
data:
  - attribute: "[data-state]"
    values:
      - open
      - closed
  - attribute: "[data-disabled]"
    values: Present when disabled
---
### Portal

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

  :::docs-component-meta{name="a-dropdown-menu-portal"}
  :::

### Content

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

  :::docs-component-meta{name="a-dropdown-menu-content"}
  :::

  :::docs-data-attributes-table
  ---
  data:
    - attribute: "[data-state]"
      values:
        - open
        - closed
    - attribute: "[data-side]"
      values:
        - left
        - right
        - bottom
        - top
    - attribute: "[data-align]"
      values:
        - start
        - end
        - center
    - attribute: "[data-orientation]"
      values:
        - vertical
        - horizontal
  ---
  :::

  :::docs-css-variables-table
  ---
  data:
    - cssVariable: --akar-dropdown-menu-content-transform-origin
      description: The `transform-origin` computed from the content and arrow
        positions/offsets'
    - cssVariable: --akar-dropdown-menu-content-available-width
      description: The remaining width between the trigger and the boundary edge
    - cssVariable: --akar-dropdown-menu-content-available-height
      description: The remaining height between the trigger and the boundary edge
    - cssVariable: --akar-dropdown-menu-trigger-width
      description: The width of the trigger
    - cssVariable: --akar-dropdown-menu-trigger-height
      description: 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 `ADropdownMenuContent`. Must be rendered inside `ADropdownMenuContent`.

  :::docs-component-meta{name="a-dropdown-menu-arrow"}
  :::

### Item

The component that contains the dropdown menu items.

  :::docs-component-meta{name="a-dropdown-menu-item"}
  :::

  :::docs-data-attributes-table
  ---
  data:
    - attribute: "[data-orientation]"
      values:
        - vertical
        - horizontal
    - attribute: "[data-highlighted]"
      values: Present when highlighted
    - attribute: "[data-disabled]"
      values: Present when disabled
  ---
  :::

### Group

Used to group multiple `ADropdownMenuItem`s.

  :::docs-component-meta{name="a-dropdown-menu-group"}
  :::

### Label

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

  :::docs-component-meta{name="a-dropdown-menu-label"}
  :::

### CheckboxItem

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

  :::docs-component-meta{name="a-dropdown-menu-checkbox-item"}
  :::

  :::docs-data-attributes-table
  ---
  data:
    - attribute: "[data-state]"
      values:
        - checked
        - unchecked
        - indeterminate
    - attribute: "[data-highlighted]"
      values: Present when highlighted
    - attribute: "[data-disabled]"
      values: Present when disabled
  ---
  :::

### RadioGroup

Used to group multiple `ADropdownMenuRadioItem`s.

  :::docs-component-meta{name="a-dropdown-menu-radio-group"}
  :::

### RadioItem

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

  :::docs-component-meta{name="a-dropdown-menu-radio-item"}
  :::

  :::docs-data-attributes-table
  ---
  data:
    - attribute: "[data-state]"
      values:
        - checked
        - unchecked
        - indeterminate
    - attribute: "[data-highlighted]"
      values: Present when highlighted
    - attribute: "[data-disabled]"
      values: Present when disabled
  ---
  :::

### ItemIndicator

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

  :::docs-component-meta{name="a-dropdown-menu-item-indicator"}
  :::

  :::docs-data-attributes-table
  ---
  data:
    - attribute: "[data-state]"
      values:
        - checked
        - unchecked
        - indeterminate
  ---
  :::

### Separator

Used to visually separate items in the dropdown menu.

  :::docs-component-meta{name="a-dropdown-menu-separator"}
  :::

### Sub

Contains all the parts of a submenu.

  :::docs-component-meta{name="a-dropdown-menu-sub"}
  :::

### SubTrigger

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

  :::docs-component-meta{name="a-dropdown-menu-sub-trigger"}
  :::

  :::docs-data-attributes-table
  ---
  data:
    - attribute: "[data-state]"
      values:
        - open
        - closed
    - attribute: "[data-highlighted]"
      values: Present when highlighted
    - attribute: "[data-disabled]"
      values: Present when disabled
  ---
  :::

  :::docs-css-variables-table
  ---
  data:
    - cssVariable: --akar-dropdown-menu-content-transform-origin
      description: The `transform-origin` computed from the content and arrow
        positions/offsets
    - cssVariable: --akar-dropdown-menu-content-available-width
      description: The remaining width between the trigger and the boundary edge
    - cssVariable: --akar-dropdown-menu-content-available-height
      description: The remaining height between the trigger and the boundary edge
    - cssVariable: --akar-dropdown-menu-trigger-width
      description: The width of the trigger
    - cssVariable: --akar-dropdown-menu-trigger-height
      description: The height of the trigger
  ---
  :::

### SubContent

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

  :::docs-component-meta{name="a-dropdown-menu-sub-content"}
  :::

  :::docs-data-attributes-table
  ---
  data:
    - attribute: "[data-state]"
      values:
        - open
        - closed
    - attribute: "[data-side]"
      values:
        - left
        - right
        - bottom
        - top
    - attribute: "[data-align]"
      values:
        - start
        - end
        - center
    - attribute: "[data-orientation]"
      values:
        - vertical
        - horizontal
  ---
  :::

## Examples

### With submenus

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

```vue {9-11,24-33}
<script setup lang="ts">
import {
  ADropdownMenuArrow,
  ADropdownMenuContent,
  ADropdownMenuItem,
  ADropdownMenuPortal,
  ADropdownMenuRoot,
  ADropdownMenuSeparator,
  ADropdownMenuSub,
  ADropdownMenuSubContent,
  ADropdownMenuSubTrigger,
  ADropdownMenuTrigger,
} from 'akar';
</script>

<template>
  <ADropdownMenuRoot>
    <ADropdownMenuTrigger>…</ADropdownMenuTrigger>
    <ADropdownMenuPortal>
      <ADropdownMenuContent>
        <ADropdownMenuItem>…</ADropdownMenuItem>
        <ADropdownMenuItem>…</ADropdownMenuItem>
        <ADropdownMenuSeparator />
        <ADropdownMenuSub>
          <ADropdownMenuSubTrigger>Sub menu →</ADropdownMenuSubTrigger>
          <ADropdownMenuPortal>
            <ADropdownMenuSubContent>
              <ADropdownMenuItem>Sub menu item</ADropdownMenuItem>
              <ADropdownMenuItem>Sub menu item</ADropdownMenuItem>
              <ADropdownMenuArrow />
            </ADropdownMenuSubContent>
          </ADropdownMenuPortal>
        </ADropdownMenuSub>
        <ADropdownMenuSeparator />
        <ADropdownMenuItem>…</ADropdownMenuItem>
      </ADropdownMenuContent>
    </ADropdownMenuPortal>
  </ADropdownMenuRoot>
</template>
```

### With disabled items

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

```vue {18}
<script setup lang="ts">
import {
  ADropdownMenuContent,
  ADropdownMenuItem,
  ADropdownMenuPortal,
  ADropdownMenuRoot,
  ADropdownMenuTrigger,
} from 'akar';
</script>

<template>
  <ADropdownMenuRoot>
    <ADropdownMenuTrigger>…</ADropdownMenuTrigger>
    <ADropdownMenuPortal>
      <ADropdownMenuContent>
        <ADropdownMenuItem
          class="ADropdownMenuItem"
          disabled
        >
          …
        </ADropdownMenuItem>
        <ADropdownMenuItem class="ADropdownMenuItem">
          …
        </ADropdownMenuItem>
      </ADropdownMenuContent>
    </ADropdownMenuPortal>
  </ADropdownMenuRoot>
</template>
```

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

### With separators

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

```vue {7,18,20}
<script setup lang="ts">
import {
  ADropdownMenuContent,
  ADropdownMenuItem,
  ADropdownMenuPortal,
  ADropdownMenuRoot,
  ADropdownMenuSeparator,
  ADropdownMenuTrigger,
} from 'akar';
</script>

<template>
  <ADropdownMenuRoot>
    <ADropdownMenuTrigger>…</ADropdownMenuTrigger>
    <ADropdownMenuPortal>
      <ADropdownMenuContent>
        <ADropdownMenuItem>…</ADropdownMenuItem>
        <ADropdownMenuSeparator />
        <ADropdownMenuItem>…</ADropdownMenuItem>
        <ADropdownMenuSeparator />
        <ADropdownMenuItem>…</ADropdownMenuItem>
      </ADropdownMenuContent>
    </ADropdownMenuPortal>
  </ADropdownMenuRoot>
</template>
```

### With labels

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

```vue {5,17}
<script setup lang="ts">
import {
  ADropdownMenuContent,
  ADropdownMenuItem,
  ADropdownMenuLabel,
  ADropdownMenuPortal,
  ADropdownMenuRoot,
  ADropdownMenuTrigger,
} from 'akar';
</script>

<template>
  <ADropdownMenuRoot>
    <ADropdownMenuTrigger>…</ADropdownMenuTrigger>
    <ADropdownMenuPortal>
      <ADropdownMenuContent>
        <ADropdownMenuLabel>Label</ADropdownMenuLabel>
        <ADropdownMenuItem>…</ADropdownMenuItem>
        <ADropdownMenuItem>…</ADropdownMenuItem>
        <ADropdownMenuItem>…</ADropdownMenuItem>
      </ADropdownMenuContent>
    </ADropdownMenuPortal>
  </ADropdownMenuRoot>
</template>
```

### With checkbox items

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

```vue {5,26-31}
<script setup lang="ts">
import { Icon } from '@iconify/vue';
import {
  ADropdownMenuCheckboxItem,
  ADropdownMenuContent,
  ADropdownMenuItem,
  ADropdownMenuItemIndicator,
  ADropdownMenuPortal,
  ADropdownMenuRoot,
  ADropdownMenuSeparator,
  ADropdownMenuTrigger,
} from 'akar';
import { ref } from 'vue';

const checked = ref(false);
</script>

<template>
  <ADropdownMenuRoot>
    <ADropdownMenuTrigger>…</ADropdownMenuTrigger>
    <ADropdownMenuPortal>
      <ADropdownMenuContent>
        <ADropdownMenuItem>…</ADropdownMenuItem>
        <ADropdownMenuItem>…</ADropdownMenuItem>
        <ADropdownMenuSeparator />
        <ADropdownMenuCheckboxItem v-model="checked">
          <ADropdownMenuItemIndicator>
            <Icon icon="radix-icons:check" />
          </ADropdownMenuItemIndicator>
          Checkbox item
        </ADropdownMenuCheckboxItem>
      </ADropdownMenuContent>
    </ADropdownMenuPortal>
  </ADropdownMenuRoot>
</template>
```

### With radio items

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

```vue {8-9,22-41}
<script setup lang="ts">
import { Icon } from '@iconify/vue';
import {
  ADropdownMenuContent,
  ADropdownMenuItemIndicator,
  ADropdownMenuPortal,
  ADropdownMenuRadioGroup,
  ADropdownMenuRadioItem,
  ADropdownMenuRoot,
  ADropdownMenuTrigger,
} from 'akar';
import { ref } from 'vue';

const color = ref(false);
</script>

<template>
  <ADropdownMenuRoot>
    <ADropdownMenuTrigger>…</ADropdownMenuTrigger>
    <ADropdownMenuPortal>
      <ADropdownMenuContent>
        <ADropdownMenuRadioGroup v-model="color">
          <ADropdownMenuRadioItem value="red">
            <ADropdownMenuItemIndicator>
              <Icon icon="radix-icons:check" />
            </ADropdownMenuItemIndicator>
            Red
          </ADropdownMenuRadioItem>
          <ADropdownMenuRadioItem value="blue">
            <ADropdownMenuItemIndicator>
              <Icon icon="radix-icons:check" />
            </ADropdownMenuItemIndicator>
            Blue
          </ADropdownMenuRadioItem>
          <ADropdownMenuRadioItem value="green">
            <ADropdownMenuItemIndicator>
              <Icon icon="radix-icons:check" />
            </ADropdownMenuItemIndicator>
            Green
          </ADropdownMenuRadioItem>
        </ADropdownMenuRadioGroup>
      </ADropdownMenuContent>
    </ADropdownMenuPortal>
  </ADropdownMenuRoot>
</template>
```

### With complex items

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

```vue {17,21}
<script setup lang="ts">
import {
  ADropdownMenuContent,
  ADropdownMenuItem,
  ADropdownMenuPortal,
  ADropdownMenuRoot,
  ADropdownMenuTrigger,
} from 'akar';
</script>

<template>
  <ADropdownMenuRoot>
    <ADropdownMenuTrigger>…</ADropdownMenuTrigger>
    <ADropdownMenuPortal>
      <ADropdownMenuContent>
        <ADropdownMenuItem>
          <img src="…">
          Adolfo Hess
        </ADropdownMenuItem>
        <ADropdownMenuItem>
          <img src="…">
          Miyah Myles
        </ADropdownMenuItem>
      </ADropdownMenuContent>
    </ADropdownMenuPortal>
  </ADropdownMenuRoot>
</template>
```

### 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 `--akar-dropdown-menu-trigger-width` and `--akar-dropdown-menu-content-available-height` to support this. Use them to constrain the content dimensions.

```vue {9-12}
<script setup lang="ts">
import { ADropdownMenuContent, ADropdownMenuPortal, ADropdownMenuRoot, ADropdownMenuTrigger } from 'akar';
</script>

<template>
  <ADropdownMenuRoot>
    <ADropdownMenuTrigger>…</ADropdownMenuTrigger>
    <ADropdownMenuPortal>
      <ADropdownMenuContent
        class="ADropdownMenuContent"
        :side-offset="5"
      >
        …
      </ADropdownMenuContent>
    </ADropdownMenuPortal>
  </ADropdownMenuRoot>
</template>
```

```css {3-4}
/* styles.css */
.ADropdownMenuContent {
  width: var(--akar-dropdown-menu-trigger-width);
  max-height: var(--akar-dropdown-menu-content-available-height);
}
```

### Origin-aware animations

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

```vue {9}
<script setup lang="ts">
import { ADropdownMenuContent, ADropdownMenuPortal, ADropdownMenuRoot, ADropdownMenuTrigger } from 'akar';
</script>

<template>
  <ADropdownMenuRoot>
    <ADropdownMenuTrigger>…</ADropdownMenuTrigger>
    <ADropdownMenuPortal>
      <ADropdownMenuContent class="ADropdownMenuContent">
        …
      </ADropdownMenuContent>
    </ADropdownMenuPortal>
  </ADropdownMenuRoot>
</template>
```

```css {3}
/* styles.css */
.ADropdownMenuContent {
  transform-origin: var(--akar-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.

```vue {9}
<script setup lang="ts">
import { ADropdownMenuContent, ADropdownMenuPortal, ADropdownMenuRoot, ADropdownMenuTrigger } from 'akar';
</script>

<template>
  <ADropdownMenuRoot>
    <ADropdownMenuTrigger>…</ADropdownMenuTrigger>
    <ADropdownMenuPortal>
      <ADropdownMenuContent class="ADropdownMenuContent">
        …
      </ADropdownMenuContent>
    </ADropdownMenuPortal>
  </ADropdownMenuRoot>
</template>
```

```css {6-11}
/* styles.css */
.ADropdownMenuContent {
  animation-duration: 0.6s;
  animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
}
.ADropdownMenuContent[data-side='top'] {
  animation-name: slideUp;
}
.ADropdownMenuContent[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](https://www.w3.org/WAI/ARIA/apg/patterns/menu-button){rel="nofollow"} and uses [roving tabindex](https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/#kbd_roving_tabindex){rel="nofollow"} to manage focus movement among menu items.

### Keyboard Interactions

  :::docs-keyboard-table
  ---
  data:
    - keys:
        - Space
      description: When focus is on `ADropdownMenuTrigger`, opens the dropdown menu
        and focuses the first item. <br/> When focus is on an item, activates the
        focused item.
    - keys:
        - Enter
      description: When focus is on `ADropdownMenuTrigger`, opens the dropdown menu
        and focuses the first item. <br/> When focus is on an item, activates the
        focused item.
    - keys:
        - ArrowDown
      description: When focus is on `ADropdownMenuTrigger`, opens the dropdown menu.
        <br/> When focus is on an item, moves focus to the next item.
    - keys:
        - ArrowUp
      description: When focus is on an item, moves focus to the previous item.
    - keys:
        - ArrowRight
        - ArrowLeft
      description: When focus is on `ADropdownMenuSubTrigger`, opens or closes the
        submenu depending on reading direction.
    - keys:
        - Esc
      description: Closes the dropdown menu and moves focus to `ADropdownMenuTrigger`.
  name: keyboard-a-dropdown-menu
  ---
  :::

## 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 `ADropdownMenuArrow` and `ADropdownMenuItemIndicator` parts. It also wraps implementation details for `CheckboxItem` and `RadioItem`.

#### Usage

```vue
<script setup lang="ts">
import {
  ADropdownMenu,
  ADropdownMenuCheckboxItem,
  ADropdownMenuContent,
  ADropdownMenuGroup,
  ADropdownMenuItem,
  ADropdownMenuLabel,
  ADropdownMenuRadioGroup,
  ADropdownMenuRadioItem,
  ADropdownMenuSeparator,
  ADropdownMenuTrigger,
} from './your-dropdown-menu';
</script>

<template>
  <ADropdownMenu>
    <ADropdownMenuTrigger>ADropdownMenu trigger</ADropdownMenuTrigger>
    <ADropdownMenuContent>
      <ADropdownMenuItem>Item</ADropdownMenuItem>
      <ADropdownMenuLabel>Label</ADropdownMenuLabel>
      <ADropdownMenuGroup>Group</ADropdownMenuGroup>
      <ADropdownMenuCheckboxItem>CheckboxItem</ADropdownMenuCheckboxItem>
      <ADropdownMenuSeparator>Separator</ADropdownMenuSeparator>
      <ADropdownMenuRadioGroup>
        <ADropdownMenuRadioItem>RadioItem</ADropdownMenuRadioItem>
        <ADropdownMenuRadioItem>RadioItem</ADropdownMenuRadioItem>
      </ADropdownMenuRadioGroup>
    </ADropdownMenuContent>
  </ADropdownMenu>
</template>
```

#### Implementation

```ts
export { default as ADropdownMenuCheckboxItem } from 'ADropdownMenuCheckboxItem.vue';
// your-dropdown-menu.ts
export { default as ADropdownMenuContent } from 'ADropdownMenuContent.vue';
export { default as ADropdownMenuRadioItem } from 'ADropdownMenuRadioItem.vue';

export {
  ADropdownMenuRoot as ADropdownMenu,
  ADropdownMenuGroup,
  ADropdownMenuItem,
  ADropdownMenuLabel,
  ADropdownMenuRadioGroup,
  ADropdownMenuSeparator,
  ADropdownMenuTrigger
} from 'akar';
```

```vue
<!-- ADropdownMenuContent.vue -->
<script setup lang="ts">
import type { ADropdownMenuContentEmits, ADropdownMenuContentProps } from 'akar';
import { ADropdownMenuContent, ADropdownMenuPortal, useForwardPropsEmits } from 'akar';

const props = defineProps<ADropdownMenuContentProps>();
const emits = defineEmits<ADropdownMenuContentEmits>();

const forwarded = useForwardPropsEmits(props, emits);
</script>

<template>
  <ADropdownMenuPortal>
    <ADropdownMenuContent v-bind="forwarded">
      <slot />
    </ADropdownMenuContent>
  </ADropdownMenuPortal>
</template>
```

```vue
<!-- ADropdownMenuCheckboxItem.vue -->
<script setup lang="ts">
import type { ADropdownMenuCheckboxItemEmits, ADropdownMenuCheckboxItemProps } from 'akar';
import { CheckIcon } from '@radix-icons/vue';
import { ADropdownMenuCheckboxItem, ADropdownMenuItemIndicator, useForwardPropsEmits } from 'akar';

const props = defineProps<ADropdownMenuCheckboxItemProps>();
const emits = defineEmits<ADropdownMenuCheckboxItemEmits>();

const forwarded = useForwardPropsEmits(props, emits);
</script>

<template>
  <ADropdownMenuCheckboxItem v-bind="forwarded">
    <span>
      <ADropdownMenuItemIndicator>
        <CheckIcon />
      </ADropdownMenuItemIndicator>
    </span>
    <slot />
  </ADropdownMenuCheckboxItem>
</template>
```

```vue
<!-- ADropdownMenuRadioItem.vue -->
<script setup lang="ts">
import type { ADropdownMenuRadioItemEmits, ADropdownMenuRadioItemProps } from 'akar';
import { DotFilledIcon } from '@radix-icons/vue';
import { ADropdownMenuItemIndicator, ADropdownMenuRadioItem, useForwardPropsEmits } from 'akar';

const props = defineProps<ADropdownMenuRadioItemProps>();
const emits = defineEmits<ADropdownMenuRadioItemEmits>();

const forwarded = useForwardPropsEmits(props, emits);
</script>

<template>
  <ADropdownMenuRadioItem v-bind="forwarded">
    <span>
      <ADropdownMenuItemIndicator>
        <DotFilledIcon />
      </ADropdownMenuItemIndicator>
    </span>
    <slot />
  </ADropdownMenuRadioItem>
</template>
```
::


# Editable

::docs-component-example{name="a-editable"}
::

## Features

::docs-highlights
---
features:
  - Full keyboard navigation.
  - Can be controlled or uncontrolled.
  - Focus is fully managed.
---
::

## Anatomy

Import all parts and piece them together.

```vue
<script setup>
import {
  AEditableArea,
  AEditableCancelTrigger,
  AEditableEditTrigger,
  AEditableInput,
  AEditablePreview,
  AEditableRoot,
  AEditableSubmitTrigger
} from 'akar';
</script>

<template>
  <AEditableRoot>
    <AEditableArea>
      <AEditablePreview />
      <AEditableInput />
    </AEditableArea>
    <AEditableEditTrigger />
    <AEditableSubmitTrigger />
    <AEditableCancelTrigger />
  </AEditableRoot>
</template>
```

## API Reference

### Root

Contains all the parts of an editable component.

::docs-component-meta{name="a-editable-root"}
::

### Area

Contains the text parts of an editable component.

::docs-component-meta{name="a-editable-area"}
::

::docs-data-attributes-table
---
data:
  - attribute: "[data-readonly]"
    values: Present when readonly
  - attribute: "[data-disabled]"
    values: Present when disabled
  - attribute: "[data-placeholder-shown]"
    values: Present when preview is shown
  - attribute: "[data-empty]"
    values: Present when the input is empty
  - attribute: "[data-focus]"
    values: Present when the editable field is focused. To be deprecated in favor of
      [data-focused]
  - attribute: "[data-focused]"
    values: Present when the editable field is focused
---
::

### Input

Contains the input of an editable component.

::docs-component-meta{name="a-editable-input"}
::

::docs-data-attributes-table
---
data:
  - attribute: "[data-disabled]"
    values: Present when disabled
  - attribute: "[data-invalid]"
    values: Present when invalid
---
::

### Preview

Contains the preview of the editable component.

::docs-component-meta{name="a-editable-preview"}
::

### Edit Trigger

Contains the edit trigger of the editable component.

::docs-component-meta{name="a-editable-edit-trigger"}
::

### Submit Trigger

Contains the submit trigger of the editable component.

::docs-component-meta{name="a-editable-submit-trigger"}
::

### Cancel Trigger

Contains the cancel trigger of the editable component.

::docs-component-meta{name="a-editable-cancel-trigger"}
::

## Examples

### Change only on submit

By default the component will submit when `blur` event triggers. We can modify the `submit-mode` prop to alter this behavior.
In this case, we want to submit only when user click on `AEditableSubmitTrigger`, so we change the submit mode to `none`.

```vue line=2,8
<template>
  <AEditableRoot submit-mode="none">
    <AEditableArea>
      <AEditablePreview />
      <AEditableInput />
    </AEditableArea>
    <AEditableEditTrigger />
    <AEditableSubmitTrigger />
    <AEditableCancelTrigger />
  </AEditableRoot>
</template>
```

## Accessibility

### Keyboard Interactions

::docs-keyboard-table
---
data:
  - keys:
      - Tab
    description: When focus moves onto the editable field, switches into the
      editable mode if the `activation-mode` is set to focus.
  - keys:
      - Enter
    description: If the `submit-mode` is set to `enter` or `both`, it submits the changes.
  - keys:
      - Escape
    description: When the focus is on the editable field, it cancels the changes.
name: a-keyboard-table
---
::


# Hover Card

::docs-component-example{name="a-hover-card"}
::

## Features

::docs-highlights
---
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.
---
::

## Anatomy

Import all parts and piece them together.

```vue
<script setup>
import { AHoverCardArrow, AHoverCardContent, AHoverCardPortal, AHoverCardRoot, AHoverCardTrigger } from 'akar';
</script>

<template>
  <AHoverCardRoot>
    <AHoverCardTrigger />
    <AHoverCardPortal>
      <AHoverCardContent>
        <AHoverCardArrow />
      </AHoverCardContent>
    </AHoverCardPortal>
  </AHoverCardRoot>
</template>
```

## Pohon

::docs-akar-to-pohon
---
to: https://akar.vinicunca.dev/docs/pohon/components/popover#mode
---
::

## API Reference

### Root

Contains all the parts of a hover card.

::docs-component-meta{name="a-hover-card-root"}
::

### Trigger

The link that opens the hover card when hovered.

::docs-component-meta{name="a-hover-card-trigger"}
::

::docs-data-attributes-table
---
data:
  - attribute: "[data-state]"
    values:
      - open
      - closed
---
::

### Portal

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

::docs-component-meta{name="a-hover-card-portal"}
::

### Content

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

::docs-presence-tip
::

::docs-component-meta{name="a-hover-card-content"}
::

::docs-data-attributes-table
---
data:
  - attribute: "[data-state]"
    values:
      - open
      - closed
  - attribute: "[data-side]"
    values:
      - left
      - right
      - bottom
      - top
  - attribute: "[data-align]"
    values:
      - start
      - end
      - center
---
::

::docs-css-variables-table
---
data:
  - cssVariable: --akar-hover-card-content-transform-origin
    description: The `transform-origin` computed from the content and arrow
      positions/offsets
  - cssVariable: --akar-hover-card-content-available-width
    description: The remaining width between the trigger and the boundary edge
  - cssVariable: --akar-hover-card-content-available-height
    description: The remaining height between the trigger and the boundary edge
  - cssVariable: --akar-hover-card-trigger-width
    description: The width of the trigger
  - cssVariable: --akar-hover-card-trigger-height
    description: 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 `AHoverCardContent`. Must be rendered inside `AHoverCardContent`.

::docs-component-meta{name="a-hover-card-arrow"}
::

## Examples

### Show instantly

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

```vue {12}
<script setup>
import {
  AHoverCardContent,
  AHoverCardRoot,
  AHoverCardTrigger,
} from 'akar';
</script>

<template>
  <AHoverCardRoot :open-delay="0">
    <AHoverCardTrigger>…</AHoverCardTrigger>
    <AHoverCardContent>…</AHoverCardContent>
  </AHoverCardRoot>
</template>
```

### 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 `--akar-hover-card-trigger-width` and `--akar-hover-card-content-available-height` to support this. Use them to constrain the content dimensions.

```vue {11}
// index.vue
<script setup>
import { AHoverCardContent, AHoverCardPortal, AHoverCardRoot, AHoverCardTrigger } from 'akar';
</script>

<template>
  <AHoverCardRoot>
    <AHoverCardTrigger>…</AHoverCardTrigger>
    <AHoverCardPortal>
      <AHoverCardContent
        class="AHoverCardContent"
        :side-offset="5"
      >
        …
      </AHoverCardContent>
    </AHoverCardPortal>
  </AHoverCardRoot>
</template>
```

```css {3-4}
/* styles.css */
.AHoverCardContent {
  width: var(--akar-hover-card-trigger-width);
  max-height: var(--akar-hover-card-content-available-height);
}
```

### Origin-aware animations

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

```vue {8}
<script setup>
import { AHoverCardContent, AHoverCardRoot, AHoverCardTrigger } from 'akar';
</script>

<template>
  <AHoverCardRoot>
    <AHoverCardTrigger>…</AHoverCardTrigger>
    <AHoverCardContent class="AHoverCardContent">
      …
    </AHoverCardContent>
  </AHoverCardRoot>
</template>
```

```css {3}
/* styles.css */
.AHoverCardContent {
  transform-origin: var(--akar-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.

```vue {8}
<script setup>
import { AHoverCardContent, AHoverCardRoot, AHoverCardTrigger } from 'akar';
</script>

<template>
  <AHoverCardRoot>
    <AHoverCardTrigger>…</AHoverCardTrigger>
    <AHoverCardContent class="AHoverCardContent">
      …
    </AHoverCardContent>
  </AHoverCardRoot>
</template>
```

```css {6-11}
/* styles.css */
.AHoverCardContent {
  animation-duration: 0.6s;
  animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
}
.AHoverCardContent[data-side="top"] {
  animation-name: slideUp;
}
.AHoverCardContent[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

::docs-keyboard-table
---
data:
  - keys:
      - Tab
    description: Opens/closes the hover card.
  - keys:
      - Enter
    description: Opens the hover card link
name: keyboard-a-popover
---
::


# Label

::docs-component-example{name="a-label"}
::

## Features

::docs-highlights
---
features:
  - Text selection is prevented when double clicking label.
  - Supports nested controls.
---
::

## Anatomy

Import the component.

```vue
<script setup>
import { ALabel } from 'akar';
</script>

<template>
  <ALabel />
</template>
```

## API Reference

### Root

Contains the content for the label.

::docs-component-meta{name="a-label"}
::

## Accessibility

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


# Listbox

::docs-component-example{name="a-listbox"}
::

## Features

::docs-highlights
---
features:
  - Can be controlled or uncontrolled.
  - Supports items, labels, groups of items.
  - Focus is fully managed.
  - Full keyboard navigation.
  - Supports Right to Left direction.
  - Different selection behavior.
---
::

## Anatomy

Import all parts and piece them together.

```vue
<script setup>
import { AListboxContent, AListboxFilter, AListboxGroup, AListboxGroupLabel, AListboxItem, AListboxItemIndicator, AListboxRoot, AListboxVirtualizer } from 'akar';
</script>

<template>
  <AListboxRoot>
    <AListboxFilter />

    <AListboxContent>
      <AListboxItem>
        <AListboxItemIndicator />
      </AListboxItem>

      <!-- or with group -->
      <AListboxGroup>
        <AListboxGroupLabel />
        <AListboxItem>
          <AListboxItemIndicator />
        </AListboxItem>
      </AListboxGroup>

      <!-- or with virtual -->
      <AListboxVirtualizer>
        <AListboxItem>
          <AListboxItemIndicator />
        </AListboxItem>
      </AListboxVirtualizer>
    </AListboxContent>
  </AListboxRoot>
</template>
```

## API Reference

### Root

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

::docs-component-meta{name="a-listbox-root"}
::

::docs-data-attributes-table
---
data:
  - attribute: "[data-disabled]"
    values: Present when disabled
---
::

### Filter

Input element to perform filtering.

::docs-component-meta{name="a-listbox-filter"}
::

::docs-data-attributes-table
---
data:
  - attribute: "[data-disabled]"
    values: Present when disabled
---
::

### Content

Contains all the listbox group and items.

::docs-component-meta{name="a-listbox-content"}
::

### Item

The item component.

::docs-component-meta{name="a-listbox-item"}
::

::docs-data-attributes-table
---
data:
  - attribute: "[data-state]"
    values:
      - checked
      - unchecked
  - attribute: "[data-highlighted]"
    values: Present when highlighted
  - attribute: "[data-disabled]"
    values: Present when disabled
---
::

### 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.

::docs-component-meta{name="a-listbox-item-indicator"}
::

### Group

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

::docs-component-meta{name="a-listbox-group"}
::

### GroupLabel

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

::docs-component-meta{name="a-listbox-group-label"}
::

### Virtualizer

Virtual container to achieve list virtualization.

::docs-component-meta{name="a-listbox-virtualizer"}
::

## Examples

### Binding objects as values

Unlike native HTML form controls which only allow you to provide strings as values, `akar` supports binding complex objects as well.

```vue {12,16,21}
<script setup lang="ts">
import { AListboxContent, AListboxItem, AListboxRoot } from 'akar';
import { ref } from 'vue';

const people = [
  { id: 1, name: 'Durward Reynolds' },
  { id: 2, name: 'Kenton Towne' },
  { id: 3, name: 'Therese Wunsch' },
  { id: 4, name: 'Benedict Kessler' },
  { id: 5, name: 'Katelyn Rohan' },
];
const selectedPeople = ref(people[0]);
</script>

<template>
  <AListboxRoot v-model="selectedPeople">
    <AListboxContent>
      <AListboxItem
        v-for="person in people"
        :key="person.id"
        :value="person"
        :disabled="person.unavailable"
      >
        {{ person.name }}
      </AListboxItem>
    </AListboxContent>
  </AListboxRoot>
</template>
```

### Selecting multiple values

The `AListbox` component allows you to select multiple values. You can enable this by providing an array of values instead of a single value.

```vue {12,18}
<script setup lang="ts">
import { AListboxRoot } from 'akar';
import { ref } from 'vue';

const people = [
  { id: 1, name: 'Durward Reynolds' },
  { id: 2, name: 'Kenton Towne' },
  { id: 3, name: 'Therese Wunsch' },
  { id: 4, name: 'Benedict Kessler' },
  { id: 5, name: 'Katelyn Rohan' },
];
const selectedPeople = ref([people[0], people[1]]);
</script>

<template>
  <AListboxRoot
    v-model="selectedPeople"
    multiple
  >
    ...
  </AListboxRoot>
</template>
```

### Custom filtering

```vue {13,15-16,21,24}
<script setup lang="ts">
import { AListboxContent, AListboxFilter, AListboxItem, AListboxRoot, useFilter } from 'akar';
import { ref } from 'vue';

const people = [
  { id: 1, name: 'Durward Reynolds' },
  { id: 2, name: 'Kenton Towne' },
  { id: 3, name: 'Therese Wunsch' },
  { id: 4, name: 'Benedict Kessler' },
  { id: 5, name: 'Katelyn Rohan' },
];
const selectedPeople = ref(people[0]);
const searchTerm = ref('');

const { startsWith } = useFilter({ sensitivity: 'base' });
const filteredPeople = computed(() => people.filter((p) => startsWith(p.name, searchTerm.value)));
</script>

<template>
  <AListboxRoot v-model="selectedPeople">
    <AListboxFilter v-model="searchTerm" />
    <AListboxContent>
      <AListboxItem
        v-for="person in filteredPeople"
        :key="person.id"
        :value="person"
      >
        {{ person.name }}
      </AListboxItem>
    </AListboxContent>
  </AListboxRoot>
</template>
```

### Virtual List

Rendering a long list of item can slow down the app, thus using virtualization would significantly improve the performance.

See the [virtualization guide](https://akar.vinicunca.dev/docs/akar/guides/virtualization.md) for more general info on virtualization.

```vue {18-23}
<script setup lang="ts">
import { AListboxContent, AListboxFilter, AListboxItem, AListboxRoot, AListboxVirtualizer } from 'akar';
import { ref } from 'vue';

const people = [
  { id: 1, name: 'Durward Reynolds' },
  { id: 2, name: 'Kenton Towne' },
  { id: 3, name: 'Therese Wunsch' },
  { id: 4, name: 'Benedict Kessler' },
  { id: 5, name: 'Katelyn Rohan' },
  // and a lot more
];
</script>

<template>
  <AListboxRoot>
    <AListboxContent>
      <AListboxVirtualizer
        v-slot="{ option }"
        :options="people"
        :text-content="(opt) => opt.name"
      >
        <AListboxItem :value="option">
          {{ person.name }}
        </AListboxItem>
      </AListboxVirtualizer>
    </AListboxContent>
  </AListboxRoot>
</template>
```

## Accessibility

Adheres to the [AListbox WAI-ARIA design pattern](https://www.w3.org/WAI/ARIA/apg/patterns/listbox/){rel="nofollow"}.

### Keyboard Interactions

::docs-keyboard-table
---
data:
  - keys:
      - Enter
    description: <span>When highlight on <code>AListboxItem</code>, selects the
      focused item. </span>
  - keys:
      - ArrowDown
    description: When focus is on <code>AListboxItem</code>, moves focus to the next
      item. </span>
  - keys:
      - ArrowUp
    description: When focus is on <code>AListboxItem</code>, moves focus to the
      previous item. </span>
  - keys:
      - Home
    description: <span>Moves focus and highlight to the first item.</span>
  - keys:
      - End
    description: <span>Moves focus and highlight to the last item.</span>
  - keys:
      - Ctrl/Cmd + A
    description: <span>Select all the items.</span>
name: keyboard-a-calendar
---
::


# Navigation Menu

::docs-component-example{name="a-navigation-menu"}
::

## Features

::docs-highlights
---
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.
---
::

## Anatomy

Import all parts and piece them together.

```vue
<script setup lang="ts">
import {
  ANavigationMenuContent,
  ANavigationMenuIndicator,
  ANavigationMenuItem,
  ANavigationMenuLink,
  ANavigationMenuList,
  ANavigationMenuRoot,
  ANavigationMenuSub,
  ANavigationMenuTrigger,
  ANavigationMenuViewport,
} from 'akar';
</script>

<template>
  <ANavigationMenuRoot>
    <ANavigationMenuList>
      <ANavigationMenuItem>
        <ANavigationMenuTrigger />
        <ANavigationMenuContent>
          <ANavigationMenuLink />
        </ANavigationMenuContent>
      </ANavigationMenuItem>

      <ANavigationMenuItem>
        <ANavigationMenuLink />
      </ANavigationMenuItem>

      <ANavigationMenuItem>
        <ANavigationMenuTrigger />
        <ANavigationMenuContent>
          <ANavigationMenuSub>
            <ANavigationMenuList />
            <ANavigationMenuViewport />
          </ANavigationMenuSub>
        </ANavigationMenuContent>
      </ANavigationMenuItem>

      <ANavigationMenuIndicator />
    </ANavigationMenuList>

    <ANavigationMenuViewport />
  </ANavigationMenuRoot>
</template>
```

## Pohon

::docs-akar-to-pohon
---
to: https://akar.vinicunca.dev/docs/pohon/components/navigation-menu
---
::

## API Reference

### Root

Contains all the parts of a navigation menu.

::docs-component-meta{name="a-navigation-menu-root"}
::

::docs-data-attributes-table{keys="orientation"}
::

### Sub

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

::docs-component-meta{name="a-navigation-menu-sub"}
::

::docs-data-attributes-table{keys="orientation"}
::

### List

Contains the top level menu items.

::docs-component-meta{name="a-navigation-menu-list"}
::

::docs-data-attributes-table{keys="orientation"}
::

### Item

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

::docs-component-meta{name="a-navigation-menu-item"}
::

### Trigger

The button that toggles the content.

::docs-component-meta{name="a-navigation-menu-trigger"}
::

::docs-data-attributes-table{keys="state, disabled"}
::

### Content

Contains the content associated with each trigger.

::docs-presence-tip
::

::docs-component-meta{name="a-navigation-menu-content"}
::

::docs-data-attributes-table{keys="state, motion, orientation"}
::

### Link

A navigational link.

::docs-component-meta{name="a-navigation-menu-link"}
::

::docs-data-attributes-table{keys="active"}
::

### Indicator

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

::docs-presence-tip
::

::docs-component-meta{name="a-navigation-menu-indicator"}
::

::docs-data-attributes-table{keys="visible, orientation"}
::

::docs-css-variables-table
---
data:
  - cssVariable: --akar-navigation-menu-indicator-size
    description: The size of the indicator.
  - cssVariable: --akar-navigation-menu-indicator-position
    description: The position of the indicator
---
::

### Viewport

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

::docs-presence-tip
::

::docs-component-meta{name="a-navigation-menu-viewport"}
::

::docs-data-attributes-table{keys="visible, orientation"}
::

::docs-css-variables-table
---
data:
  - cssVariable: --akar-navigation-menu-viewport-width
    description: The width of the viewport when visible/hidden, computed from the
      active content
  - cssVariable: --akar-navigation-menu-viewport-height
    description: 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.

```vue {16}
<script setup lang="ts">
import {
  ANavigationMenuContent,
  ANavigationMenuItem,
  ANavigationMenuList,
  ANavigationMenuRoot,
  ANavigationMenuTrigger,
} from 'akar';
</script>

<template>
  <ANavigationMenuRoot orientation="vertical">
    <ANavigationMenuList>
      <ANavigationMenuItem>
        <ANavigationMenuTrigger>Item one</ANavigationMenuTrigger>
        <ANavigationMenuContent>Item one content</ANavigationMenuContent>
      </ANavigationMenuItem>
      <ANavigationMenuItem>
        <ANavigationMenuTrigger>Item two</ANavigationMenuTrigger>
        <ANavigationMenuContent>Item Two content</ANavigationMenuContent>
      </ANavigationMenuItem>
    </ANavigationMenuList>
  </ANavigationMenuRoot>
</template>
```

### 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](https://akar.vinicunca.dev/docs/akar/components/navigation-menu#advanced-animation).
Tab focus will be maintained automatically.

```vue {26}
<script setup lang="ts">
import {
  ANavigationMenuContent,
  ANavigationMenuItem,
  ANavigationMenuList,
  ANavigationMenuRoot,
  ANavigationMenuTrigger,
  ANavigationMenuViewport,
} from 'akar';
</script>

<template>
  <ANavigationMenuRoot>
    <ANavigationMenuList>
      <ANavigationMenuItem>
        <ANavigationMenuTrigger>Item one</ANavigationMenuTrigger>
        <ANavigationMenuContent>Item one content</ANavigationMenuContent>
      </ANavigationMenuItem>
      <ANavigationMenuItem>
        <ANavigationMenuTrigger>Item two</ANavigationMenuTrigger>
        <ANavigationMenuContent>Item two content</ANavigationMenuContent>
      </ANavigationMenuItem>
    </ANavigationMenuList>

    <!-- ANavigationMenuContent will be rendered here when active  -->
    <ANavigationMenuViewport />
  </ANavigationMenuRoot>
</template>
```

### 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`.

```vue {24}
<script setup lang="ts">
import {
  ANavigationMenuContent,
  ANavigationMenuItem,
  ANavigationMenuList,
  ANavigationMenuRoot,
  ANavigationMenuTrigger,
  ANavigationMenuViewport,
} from 'akar';
</script>

<template>
  <ANavigationMenuRoot>
    <ANavigationMenuList>
      <ANavigationMenuItem>
        <ANavigationMenuTrigger>Item one</ANavigationMenuTrigger>
        <ANavigationMenuContent>Item one content</ANavigationMenuContent>
      </ANavigationMenuItem>
      <ANavigationMenuItem>
        <ANavigationMenuTrigger>Item two</ANavigationMenuTrigger>
        <ANavigationMenuContent>Item two content</ANavigationMenuContent>
      </ANavigationMenuItem>

      <ANavigationMenuIndicator class="ANavigationMenuIndicator" />
    </ANavigationMenuList>

    <ANavigationMenuViewport />
  </ANavigationMenuRoot>
</template>
```

```css
/* styles.css */
.ANavigationMenuIndicator {
  background-color: grey;
  position: absolute;
  transition:
    width,
    transform,
    250ms ease;
}

.ANavigationMenuIndicator[data-orientation='horizontal'] {
  left: 0;
  height: 3px;
  transform: translateX(var(--akar-navigation-menu-indicator-position));
  width: var(--akar-navigation-menu-indicator-size);
}
```

### With submenus

Create a submenu by nesting your `ANavigationMenu` and using the `Sub` part in place of its `Root`.
Submenus work differently to `Root` navigation menus and are similar to [`Tabs`](https://akar.vinicunca.dev/docs/akar/components/tabs) in that one item should always be active, so be
sure to assign and set a `defaultValue`.

```vue {7,23-34}
<script setup lang="ts">
import {
  ANavigationMenuContent,
  ANavigationMenuItem,
  ANavigationMenuList,
  ANavigationMenuRoot,
  ANavigationMenuSub,
  ANavigationMenuTrigger,
} from 'akar';
</script>

<template>
  <ANavigationMenuRoot>
    <ANavigationMenuList>
      <ANavigationMenuItem>
        <ANavigationMenuTrigger>Item one</ANavigationMenuTrigger>
        <ANavigationMenuContent>Item one content</ANavigationMenuContent>
      </ANavigationMenuItem>
      <ANavigationMenuItem>
        <ANavigationMenuTrigger>Item two</ANavigationMenuTrigger>
        <ANavigationMenuContent>
          <ANavigationMenuSub default-value="sub1">
            <ANavigationMenuList>
              <ANavigationMenuItem value="sub1">
                <ANavigationMenuTrigger>Sub item one</ANavigationMenuTrigger>
                <ANavigationMenuContent> Sub item one content </ANavigationMenuContent>
              </ANavigationMenuItem>
              <ANavigationMenuItem value="sub2">
                <ANavigationMenuTrigger>Sub item two</ANavigationMenuTrigger>
                <ANavigationMenuContent> Sub item two content </ANavigationMenuContent>
              </ANavigationMenuItem>
            </ANavigationMenuList>
          </ANavigationMenuSub>
        </ANavigationMenuContent>
      </ANavigationMenuItem>
    </ANavigationMenuList>
  </ANavigationMenuRoot>
</template>
```

### With client side routing

If you need to use the `RouterLink` component provided by your routing package then we recommend adding `asChild="true"` to `ANavigationMenuLink`, or setting `as="RouterLink"`.
This will ensure accessibility and consistent keyboard control is maintained:

```vue {12-14,19-21}
<script setup lang="ts">
import { ANavigationMenuItem, ANavigationMenuList, ANavigationMenuRoot } from 'akar';

// RouterLink should be injected by default if using `vue-router`
</script>

<template>
  <ANavigationMenuRoot>
    <ANavigationMenuList>
      <ANavigationMenuItem>
        <ANavigationMenuLink as-child>
          <RouterLink to="/">
            Home
          </RouterLink>
          <ANavigationMenuLink />
        </ANavigationMenuLink>
      </ANavigationMenuItem>
      <ANavigationMenuItem>
        <ANavigationMenuLink
          :as="RouterLink"
          to="/about"
        >
          About
        </ANavigationMenuLink>
      </ANavigationMenuItem>
    </ANavigationMenuList>
  </ANavigationMenuRoot>
</template>
```

### Advanced animation

We expose `--akar-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.

```vue {17,23,29}
<script setup lang="ts">
import {
  ANavigationMenuContent,
  ANavigationMenuItem,
  ANavigationMenuList,
  ANavigationMenuRoot,
  ANavigationMenuTrigger,
  ANavigationMenuViewport,
} from 'akar';
</script>

<template>
  <ANavigationMenuRoot>
    <ANavigationMenuList>
      <ANavigationMenuItem>
        <ANavigationMenuTrigger>Item one</ANavigationMenuTrigger>
        <ANavigationMenuContent class="ANavigationMenuContent">
          Item one content
        </ANavigationMenuContent>
      </ANavigationMenuItem>
      <ANavigationMenuItem>
        <ANavigationMenuTrigger>Item two</ANavigationMenuTrigger>
        <ANavigationMenuContent class="ANavigationMenuContent">
          Item two content
        </ANavigationMenuContent>
      </ANavigationMenuItem>
    </ANavigationMenuList>

    <ANavigationMenuViewport class="ANavigationMenuViewport" />
  </ANavigationMenuRoot>
</template>
```

```css {9-20,24-25}
/* styles.css */
.ANavigationMenuContent {
  position: absolute;
  top: 0;
  left: 0;
  animation-duration: 250ms;
  animation-timing-function: ease;
}
.ANavigationMenuContent[data-motion='from-start'] {
  animation-name: enterFromLeft;
}
.ANavigationMenuContent[data-motion='from-end'] {
  animation-name: enterFromRight;
}
.ANavigationMenuContent[data-motion='to-start'] {
  animation-name: exitToLeft;
}
.ANavigationMenuContent[data-motion='to-end'] {
  animation-name: exitToRight;
}

.ANavigationMenuViewport {
  position: relative;
  width: var(--akar-navigation-menu-viewport-width);
  height: var(--akar-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](https://www.w3.org/TR/wai-aria-1.2/#navigation){rel="nofollow"}.

### Differences to menubar

`ANavigationMenu` 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](https://github.com/w3c/aria-practices/issues/353){rel="nofollow"} and at worst can confuse users who are familiar with established website patterns.

See the W3C [Disclosure Navigation Menu](https://w3c.github.io/aria-practices/examples/disclosure/disclosure-navigation.html){rel="nofollow"} example for more information.

### Link usage and aria-current

It's important to use `ANavigationMenuLink` for all navigational links within a menu, this not only applies to the main list
but also within any content rendered via `ANavigationMenuContent`. 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](https://akar.vinicunca.dev/docs/akar/components/navigation-menu#with-client-side-routing) for more information on usage with third party routing components.

### Keyboard Interactions

::docs-keyboard-table
---
data:
  - keys:
      - Space
      - Enter
    description: <span>When focus is on <code>ANavigationMenuTrigger</code>, opens
      the content.</span>
  - keys:
      - Tab
    description: Moves focus to the next focusable element.
  - keys:
      - ArrowDown
    description: <span> When <code>horizontal</code> and focus is on an open
      <code>ANavigationMenuTrigger</code>, moves focus into
      <code>ANavigationMenuContent</code>. <br /> Moves focus to the next
      <code>ANavigationMenuTrigger</code> or
      <code>ANavigationMenuLink</code>.</span>
  - keys:
      - ArrowUp
    description: <span>Moves focus to the previous
      <code>ANavigationMenuTrigger</code> or
      <code>ANavigationMenuLink</code>.</span>
  - keys:
      - ArrowRight
      - ArrowLeft
    description: <span> When <code>vertical</code> and focus is on an open
      <code>ANavigationMenuTrigger</code>, moves focus into its
      <code>ANavigationMenuContent</code>. <br /> Moves focus to the next /
      previous <code> ANavigationMenuTrigger </code> or
      <code>ANavigationMenuLink</code>.</span>
  - keys:
      - Home
      - End
    description: <span>Moves focus to the first/last
      <code>ANavigationMenu.Trigger</code> or
      <code>ANavigationMenu.Link</code>.</span>
  - keys:
      - Esc
    description: <span>Closes open <code>ANavigationMenu.Content</code> and moves
      focus to its<code>ANavigationMenu.Trigger</code>.</span>
name: keyboard-a-navigation-menu
---
::


# Number Field

::docs-component-example{name="a-number-field"}
::

## Features

::docs-highlights
---
features:
  - Full keyboard navigation.
  - Can be controlled or uncontrolled.
  - Support button hold and wheel event.
  - Support numbering systems in different locale.
  - Customizable formatting.
---
::

::code-group{sync="pm"}
```bash [pnpm]
pnpm add @internationalized/number
```

```bash [npm]
npm install @internationalized/number
```

```bash [bun]
bun add @internationalized/number
```
::

## Anatomy

Import all parts and piece them together.

```vue
<script setup>
import { ANumberFieldDecrement, ANumberFieldIncrement, ANumberFieldInput, ANumberFieldRoot } from 'akar';
</script>

<template>
  <ANumberFieldRoot>
    <ANumberFieldDecrement />
    <ANumberFieldInput />
    <ANumberFieldIncrement />
  </ANumberFieldRoot>
</template>
```

## Pohon

::docs-akar-to-pohon
---
to: https://akar.vinicunca.dev/docs/pohon/components/input-number
---
::

## API Reference

### Root

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

::docs-component-meta{name="a-number-field-root"}
::

::docs-data-attributes-table
---
data:
  - attribute: "[data-disabled]"
    values: Present when disabled
---
::

### Input

Input

The input component that renders the text value based on value and format options.

::docs-component-meta{name="a-number-field-input"}
::

::docs-data-attributes-table
---
data:
  - attribute: "[data-disabled]"
    values: Present when disabled
---
::

### Increment

The button that increases the value.

::docs-component-meta{name="a-number-field-increment"}
::

::docs-data-attributes-table
---
data:
  - attribute: "[data-disabled]"
    values: Present when disabled
  - attribute: "[data-pressed]"
    values: Present when pressed
---
::

### Decrement

The button that decreases the value.

::docs-component-meta{name="a-number-field-decrement"}
::

::docs-data-attributes-table
---
data:
  - attribute: "[data-disabled]"
    values: Present when disabled
  - attribute: "[data-pressed]"
    values: Present when pressed
---
::

## Example

### Decimal

All options supported by `Intl.NumberFormat` are supported, including configuration of minimum and maximum fraction digits, sign display, grouping separators, etc.

```vue {3-7}
<template>
  <ANumberFieldRoot
    :default-value="5"
    :format-options="{
      signDisplay: 'exceptZero',
      minimumFractionDigits: 1,
    }"
  >
    …
  </ANumberFieldRoot>
</template>
```

### Percentage

You can set `formatOptions.style` to `percent` to treat the value as a percentage. You need to set the step to 0.01 manually to allow an appropriate step size in this mode.

```vue {3-7}
<template>
  <ANumberFieldRoot
    :default-value="0.05"
    :step="0.01"
    :format-options="{
      style: 'percent',
    }"
  >
    …
  </ANumberFieldRoot>
</template>
```

### Currency

You can set `formatOptions.style` to `currency` to treat the value as a currency value. The currency option must also be passed to set the currency code (e.g., USD).

If you need to allow the user to change the currency, you should include a separate dropdown next to the number field. The number field itself will not determine the currency from the user input.

```vue {4-9}
<template>
  <ANumberFieldRoot
    :default-value="5"
    :format-options="{
      style: 'currency',
      currency: 'EUR',
      currencyDisplay: 'code',
      currencySign: 'accounting',
    }"
  >
    …
  </ANumberFieldRoot>
</template>
```

## Accessibility

Adheres to the [Spinbutton WAI-ARIA design pattern](https://www.w3.org/WAI/ARIA/apg/patterns/spinbutton){rel="nofollow"}.

### Keyboard Interactions

::docs-keyboard-table
---
data:
  - keys:
      - ArrowUp
    description: Increase the value
  - keys:
      - ArrowDown
    description: Decrease the value
  - keys:
      - PageUp
    description: Increase the value by scale of 10
  - keys:
      - PageDown
    description: Decrease the value by scale of 10
  - keys:
      - Home
    description: Set value to minimum (if <code>min</code> is provided)
  - keys:
      - End
    description: Set value to maximum (if <code>max</code> is provided)
name: keyboard-a-number-field
---
::


# Pagination

::docs-component-example{name="a-pagination"}
::

## Features

::docs-highlights
---
features:
  - Enable quick access to first, or last page
  - Enable to show edges constantly, or not
---
::

### Anatomy

Import all parts and piece them together.

```vue
<script setup>
import { APaginationEllipsis, APaginationFirst, APaginationLast, APaginationList, APaginationListItem, APaginationNext, APaginationPrev, APaginationRoot } from 'akar';
</script>

<template>
  <APaginationRoot>
    <APaginationList v-slot="{ items }">
      <APaginationFirst />
      <APaginationPrev />
      <template v-for="(page, index) in items">
        <APaginationListItem
          v-if="page.type === 'page'"
          :key="index"
        />
        <APaginationEllipsis
          v-else
          :key="page.type"
          :index="index"
        >
          &#8230;
        </APaginationEllipsis>
      </template>
      <APaginationNext />
      <APaginationLast />
    </APaginationList>
  </APaginationRoot>
</template>
```

## Pohon

::docs-akar-to-pohon
---
to: https://akar.vinicunca.dev/docs/pohon/components/pagination
---
::

## API Reference

### Root

Contains all of the paginations parts.

::docs-component-meta{name="a-pagination-root"}
::

### List

Used to show the list of pages. It also makes pagination accessible to assistive technologies.

::docs-component-meta{name="a-pagination-list"}
::

### Item

Used to render the button that changes the current page.

::docs-component-meta{name="a-pagination-item"}
::

::docs-data-attributes-table
---
data:
  - attribute: "[data-selected]"
    values:
      - "true"
      - ""
  - attribute: "[data-type]"
    values:
      - page
---
::

### Ellipsis

Placeholder element when the list is long, and only a small amount of `siblingCount` was set and `showEdges` was set to `true`.

::docs-component-meta{name="a-pagination-ellipsis"}
::

::docs-data-attributes-table
---
data:
  - attribute: "[data-type]"
    values:
      - ellipsis
---
::

### First

Triggers that set the page value to 1

::docs-component-meta{name="a-pagination-first"}
::

### Prev

Triggers that set the page value to the previous page

::docs-component-meta{name="a-pagination-prev"}
::

### Next

Triggers that set the page value to the next page

::docs-component-meta{name="a-pagination-next"}
::

### Last

Triggers that set the page value to the last page

::docs-component-meta{name="a-pagination-last"}
::

## Examples

### With ellipsis

You can add `APaginationEllipsis` as a visual cue for more previous and after items.

```vue {10,14}
<script setup lang="ts">
import { APaginationEllipsis, APaginationList, APaginationListItem, APaginationRoot } from 'akar';
</script>

<template>
  <APaginationRoot>
    <APaginationList v-slot="{ items }">
      <template v-for="(page, index) in items">
        <APaginationListItem
          v-if="page.type === 'page'"
          :key="index"
        />
        <APaginationEllipsis
          v-else
          :key="page.type"
          :index="index"
        >
          &#8230;
        </APaginationEllipsis>
      </template>
    </APaginationList>
  </APaginationRoot>
</template>
```

### With first/last button

You can add `APaginationFirst` to allow user to navigate to first page, or `APaginationLast` to navigate to last page.

```vue {8,10}
<script setup lang="ts">
import { APaginationFirst, APaginationLast, APaginationList, APaginationListItem, APaginationRoot } from 'akar';
</script>

<template>
  <APaginationRoot>
    <APaginationList>
      <APaginationFirst />
      ...
      <APaginationLast />
    </APaginationList>
  </APaginationRoot>
</template>
```

### Control page programmatically

You can control the current page by passing it a reactive value.

```vue {6,10-11}
<script setup lang="ts">
import { APaginationRoot } from 'akar';
import { ref } from 'vue';
import { Select } from './custom-select';

const currentPage = ref(1);
</script>

<template>
  <Select v-model="currentPage" />
  <APaginationRoot v-model:page="currentPage">
    ...
  </APaginationRoot>
</template>
```

## Keyboard Interactions

::docs-keyboard-table
---
data:
  - keys:
      - Tab
    description: Moves focus to the next focusable element.
  - keys:
      - Space
    description: <span>When focus is on a any trigger, trigger selected page or
      arrow navigation</span>
  - keys:
      - Enter
    description: <span>When focus is on a any trigger, trigger selected page or
      arrow navigation</span>
name: keyboard-a-pagination
---
::


# Pin Input

::docs-component-example{name="a-pin-input"}
::

## Features

::docs-highlights
---
features:
  - Full keyboard navigation.
  - Can be controlled or uncontrolled.
  - Supports pasting from clipboard
  - Emit event when inputs were filled.
---
::

## Anatomy

Import all parts and piece them together.

```vue
<script setup>
import { APinInputInput, APinInputRoot } from 'akar';
</script>

<template>
  <APinInputRoot>
    <APinInputInput />
  </APinInputRoot>
</template>
```

## Pohon

::docs-akar-to-pohon
---
to: https://akar.vinicunca.dev/docs/pohon/components/pin-input
---
::

## API Reference

### Root

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

::docs-component-meta{name="a-pin-input-root"}
::

::docs-data-attributes-table
---
data:
  - attribute: "[data-complete]"
    values: Present when all inputs are filled
  - attribute: "[data-disabled]"
    values: Present when disabled
---
::

### Input

Input field for Pin Input. You can add as many input as you like.

::docs-component-meta{name="a-pin-input-input"}
::

::docs-data-attributes-table
---
data:
  - attribute: "[data-complete]"
    values: Present when all inputs are filled
  - attribute: "[data-disabled]"
    values: Present when disabled
---
::

## Examples

### OTP mode

You can set the pin input to `otp` mode by setting otp to `true`.

````vue {6}
<script setup lang="ts">
import { Label, APinInputInput, APinInputRoot } from 'akar'
</script>

<template>
  <APinInputRoot v-model="value" otp>
    …
  </APinInputRoot>
</template>
``

### Numeric mode

You can set the pin input to only accept `number` type by setting type to `number`.

```vue{6}
<script setup lang="ts">
import { Label, APinInputInput, APinInputRoot } from 'akar'
</script>

<template>
  <APinInputRoot v-model="value" type="number">
    …
  </APinInputRoot>
</template>
````

## Accessibility

### Keyboard Interactions

::docs-keyboard-table
---
data:
  - keys:
      - ArrowLeft
    description: Focus on previous input.
  - keys:
      - ArrowRight
    description: Focus on next input.
  - keys:
      - Home
    description: Focus on the first input.
  - keys:
      - End
    description: Focus on the last input.
  - keys:
      - Backspace
    description: Deletes the value of the current input. If the input is empty,
      moves to the previous input and deletes that value as well.
  - keys:
      - Delete
    description: Deletes the value of the current input.
  - keys:
      - Ctrl + V
    description: Pastes the contents of the clipboard into the pin input. If the
      number of characters in the clipboard equals exceeds the number of inputs,
      the contents are pasted from the first input. Otherwise, the contents are
      pasted from the current input onwards.
name: keyboard-a-number-field
---
::


# Popover

::docs-component-example{name="a-popover"}
::

## Features

::docs-highlights
---
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.
---
::

## Anatomy

Import all parts and piece them together.

```vue
<script setup>
import { APopoverAnchor, APopoverArrow, APopoverClose, APopoverContent, APopoverPortal, APopoverRoot, APopoverTrigger } from 'akar';
</script>

<template>
  <APopoverRoot>
    <APopoverTrigger />
    <APopoverAnchor />
    <APopoverPortal>
      <APopoverContent>
        <APopoverClose />
        <APopoverArrow />
      </APopoverContent>
    </APopoverPortal>
  </APopoverRoot>
</template>
```

## Pohon

::docs-akar-to-pohon
---
to: https://akar.vinicunca.dev/docs/pohon/components/popover
---
::

## API Reference

### Root

Contains all the parts of a popover.

::docs-component-meta{name="a-popover-root"}
::

### Trigger

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

::docs-component-meta{name="a-popover-trigger"}
::

::docs-data-attributes-table
---
data:
  - attribute: "[data-state]"
    values:
      - open
      - closed
---
::

### Anchor

An optional element to position the `APopoverContent` against. If this part is not used, the content will position alongside the `APopoverTrigger`.

::docs-component-meta{name="a-popover-anchor"}
::

### Portal

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

::docs-component-meta{name="a-popover-portal"}
::

### Content

The component that pops out when the popover is open.

::docs-presence-tip
::

::docs-component-meta{name="a-popover-content"}
::

::docs-data-attributes-table
---
data:
  - attribute: "[data-state]"
    values:
      - open
      - closed
  - attribute: "[data-side]"
    values:
      - left
      - right
      - bottom
      - top
  - attribute: "[data-align]"
    values:
      - start
      - end
      - center
---
::

::docs-css-variables-table
---
data:
  - cssVariable: --akar-popover-content-transform-origin
    description: The `transform-origin` computed from the content and arrow
      positions/offsets
  - cssVariable: --akar-popover-content-available-width
    description: The remaining width between the trigger and the boundary edge
  - cssVariable: --akar-popover-content-available-height
    description: The remaining height between the trigger and the boundary edge
  - cssVariable: --akar-popover-trigger-width
    description: The width of the trigger
  - cssVariable: --akar-popover-trigger-height
    description: 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 `APopoverContent`. Must be rendered inside `APopoverContent`.

::docs-component-meta{name="a-popover-arrow"}
::

### Close

The button that closes an open popover.

::docs-component-meta{name="a-popover-close"}
::

## 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 `--akar-popover-trigger-width` and `--akar-popover-content-available-height` to support this. Use them to constrain the content dimensions.

```vue {10-11}
<script setup>
import { APopoverArrow, APopoverClose, APopoverContent, APopoverPortal, APopoverRoot, APopoverTrigger } from 'akar';
</script>

<template>
  <APopoverRoot>
    <APopoverTrigger>…</APopoverTrigger>
    <APopoverPortal>
      <APopoverContent
        class="APopoverContent"
        :side-offset="5"
      >
        …
      </APopoverContent>
    </APopoverPortal>
  </APopoverRoot>
</template>
```

```css {3-4}
/* styles.css */
.APopoverContent {
  width: var(--akar-popover-trigger-width);
  max-height: var(--akar-popover-content-available-height);
}
```

### Origin-aware animations

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

```vue {9}
<script setup>
import { APopoverArrow, APopoverClose, APopoverContent, APopoverPortal, APopoverRoot, APopoverTrigger } from 'akar';
</script>

<template>
  <APopoverRoot>
    <APopoverTrigger>…</APopoverTrigger>
    <APopoverPortal>
      <APopoverContent class="APopoverContent">
        …
      </APopoverContent>
    </APopoverPortal>
  </APopoverRoot>
</template>
```

```css {3}
/* styles.css */
.APopoverContent {
  transform-origin: var(--akar-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.

```vue {9}
<script setup>
import { APopoverArrow, APopoverClose, APopoverContent, APopoverPortal, APopoverRoot, APopoverTrigger } from 'akar';
</script>

<template>
  <APopoverRoot>
    <APopoverTrigger>…</APopoverTrigger>
    <APopoverPortal>
      <APopoverContent class="APopoverContent">
        …
      </APopoverContent>
    </APopoverPortal>
  </APopoverRoot>
</template>
```

```css {6-11}
/* styles.css */
.APopoverContent {
  animation-duration: 0.6s;
  animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
}
.APopoverContent[data-side='top'] {
  animation-name: slideUp;
}
.APopoverContent[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.

```vue {7-11}
<script setup>
import { APopoverAnchor, APopoverArrow, APopoverClose, APopoverContent, APopoverPortal, APopoverRoot, APopoverTrigger } from 'akar';
</script>

<template>
  <APopoverRoot>
    <APopoverAnchor as-child>
      <div class="Row">
        Row as anchor <APopoverTrigger>Trigger</APopoverTrigger>
      </div>
    </APopoverAnchor>

    <APopoverPortal>
      <APopoverContent>…</APopoverContent>
    </APopoverPortal>
  </APopoverRoot>
</template>
```

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

### Close using slot props

Alternatively, you can use the `close` method provided by the `APopoverRoot` slot props to programmatically close the popover.

```vue {4,8,16-20}
<script setup>
import { APopoverAnchor, APopoverArrow, APopoverContent, APopoverPortal, APopoverRoot, APopoverTrigger } from 'akar';
</script>

<template>
  <APopoverRoot v-slot="{ close }">
    <APopoverTrigger>Open</APopoverTrigger>
    <APopoverAnchor />
    <APopoverPortal>
      <APopoverContent>
        <button
          type="submit"
          @click="close"
        >
          Submit
        </button>
        <APopoverArrow />
      </APopoverContent>
    </APopoverPortal>
  </APopoverRoot>
</template>
```

## Accessibility

Adheres to the [Dialog WAI-ARIA design pattern](https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/){rel="nofollow"}.

### Keyboard Interactions

::docs-keyboard-table
---
data:
  - keys:
      - Space
    description: Opens/closes the popover.
  - keys:
      - Enter
    description: Opens/closes the popover.
  - keys:
      - Tab
    description: Moves focus to the next focusable element
  - keys:
      - Shift + Tab
    description: Moves focus to the previous focusable element
  - keys:
      - Esc
    description: <span> Closes the popover and moves focus to
      <code>APopoverTrigger</code>.</span>
name: keyboard-a-popover
---
::

## 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 `APopoverArrow` part and sets a default `sideOffset` configuration.

#### Usage

```vue
<script setup lang="ts">
import { APopover, APopoverContent, APopoverTrigger } from './your-popover';
</script>

<template>
  <APopover>
    <APopoverTrigger>APopover trigger</APopoverTrigger>
    <APopoverContent>APopover content</APopoverContent>
  </APopover>
</template>
```

#### Implementation

```ts
export { APopoverRoot as APopover, APopoverTrigger } from 'akar';

// your-popover.ts
export { default as APopoverContent } from 'APopoverContent.vue';
```

```vue
<!-- APopoverContent.vue -->
<script setup lang="ts">
import type { APopoverContentEmits, APopoverContentProps } from 'akar';
import { APopoverContent, APopoverPortal, useForwardPropsEmits } from 'akar';

const props = defineProps<APopoverContentProps>();
const emits = defineEmits<APopoverContentEmits>();

const forwarded = useForwardPropsEmits(props, emits);
</script>

<template>
  <APopoverPortal>
    <APopoverContent v-bind="{ ...forwarded, ...$attrs }">
      <slot />
    </APopoverContent>
  </APopoverPortal>
</template>
```


# Progress

::docs-component-example{name="a-progress"}
::

## Features

::docs-highlights
---
features:
  - Provides context for assistive technology to read the progress of a task.
---
::

### Anatomy

Import all parts and piece them together.

```vue
<script setup>
import { AProgressIndicator, AProgressRoot } from 'akar';
</script>

<template>
  <AProgressRoot>
    <AProgressIndicator />
  </AProgressRoot>
</template>
```

## Accessibility

Adheres to the [`progressbar` role requirements](https://www.w3.org/WAI/ARIA/apg/patterns/meter){rel="nofollow"}.

## API Reference

### Root

Contains all of the progress parts.

::docs-component-meta{name="a-progress-root"}
::

::docs-data-attributes-table
---
data:
  - attribute: "[data-state]"
    values:
      - complete
      - indeterminate
      - loading
  - attribute: "[data-value]"
    values: The current value
  - attribute: "[data-max]"
    values: The max value
---
::

### Indicator

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

::docs-component-meta{name="a-progress-indicator"}
::

::docs-data-attributes-table
---
data:
  - attribute: "[data-state]"
    values:
      - complete
      - indeterminate
      - loading
  - attribute: "[data-value]"
    values: The current value
  - attribute: "[data-max]"
    values: The max value
---
::


# Radio Group

::docs-component-example{name="a-radio-group"}
::

## Features

::docs-highlights
---
features:
  - Full keyboard navigation.
  - Supports horizontal/vertical orientation.
  - Can be controlled or uncontrolled.
---
::

## Anatomy

Import all parts and piece them together.

```vue
<script setup>
import { ARadioGroupIndicator, ARadioGroupItem, ARadioGroupRoot } from 'akar';
</script>

<template>
  <ARadioGroupRoot>
    <ARadioGroupItem>
      <ARadioGroupIndicator />
    </ARadioGroupItem>
  </ARadioGroupRoot>
</template>
```

## API Reference

### Root

Contains all the parts of a radio group.

::docs-component-meta{name="a-radio-group-root"}
::

::docs-data-attributes-table
---
data:
  - attribute: "[data-disabled]"
    values: 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.

::docs-component-meta{name="a-radio-group-item"}
::

::docs-data-attributes-table
---
data:
  - attribute: "[data-state]"
    values:
      - checked
      - unchecked
  - attribute: "[data-disabled]"
    values: 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.

::docs-presence-tip
::

::docs-component-meta{name="a-radio-group-indicator"}
::

::docs-data-attributes-table
---
data:
  - attribute: "[data-state]"
    values:
      - checked
      - unchecked
  - attribute: "[data-disabled]"
    values: Present when disabled
---
::

## Accessibility

Adheres to the [Radio Group WAI-ARIA design pattern](https://www.w3.org/WAI/ARIA/apg/patterns/radiobutton){rel="nofollow"} and uses [roving tabindex](https://www.w3.org/TR/wai-aria-practices-1.2/examples/radio/radio.html){rel="nofollow"} to manage focus movement among radio items.

### Keyboard Interactions

::docs-keyboard-table
---
data:
  - keys:
      - Tab
    description: Moves focus to either the checked radio item or the first radio
      item in the group.
  - keys:
      - Space
    description: When focus is on an unchecked radio item, checks it.
  - keys:
      - ArrowDown
    description: Moves focus and checks the next radio item in the group.
  - keys:
      - ArrowRight
    description: Moves focus and checks the next radio item in the group.
  - keys:
      - ArrowUp
    description: Moves focus to the previous radio item in the group.
  - keys:
      - ArrowLeft
    description: Moves focus to the previous radio item in the group.
name: keyboard-a-radio-group
---
::


# Range Calendar

::docs-component-example{name="a-range-calendar"}
::

## Features

::docs-highlights
---
features:
  - Full keyboard navigation
  - Can be controlled or uncontrolled
  - Focus is fully managed
  - Localization support
  - Highly composable
---
::

## Preface

The component depends on the [@internationalized/date](https://react-spectrum.adobe.com/internationalized/date/index.html){rel="nofollow"} package, which solves a lot of the problems that come with working with dates and times in JavaScript.

We highly recommend reading through the documentation for the package to get a solid feel for how it works, and you'll need to install it in your project to use the date-related components.

## Anatomy

Import all parts and piece them together.

```vue
<script setup>
import {
  ARangeCalendarCell,
  ARangeCalendarCellTrigger,
  ARangeCalendarGrid,
  ARangeCalendarGridBody,
  ARangeCalendarGridHead,
  ARangeCalendarGridRow,
  ARangeCalendarHeadCell,
  ARangeCalendarHeader,
  ARangeCalendarHeading,
  ARangeCalendarNext,
  ARangeCalendarPrev,
  ARangeCalendarRoot,
} from 'akar';
</script>

<template>
  <ARangeCalendarRoot>
    <ARangeCalendarHeader>
      <ARangeCalendarPrev />
      <ARangeCalendarHeading />
      <ARangeCalendarNext />
    </ARangeCalendarHeader>
    <ARangeCalendarGrid>
      <ARangeCalendarGridHead>
        <ARangeCalendarGridRow>
          <ARangeCalendarHeadCell />
        </ARangeCalendarGridRow>
      </ARangeCalendarGridHead>
      <ARangeCalendarGridBody>
        <ARangeCalendarGridRow>
          <ARangeCalendarCell>
            <ARangeCalendarCellTrigger />
          </ARangeCalendarCell>
        </ARangeCalendarGridRow>
      </ARangeCalendarGridBody>
    </ARangeCalendarGrid>
  </ARangeCalendarRoot>
</template>
```

## Pohon

::docs-akar-to-pohon
---
to: https://akar.vinicunca.dev/docs/pohon/components/calendar#range
---
::

## API Reference

### Root

Contains all the parts of a calendar

::docs-component-meta{name="a-range-calendar-root"}
::

::docs-data-attributes-table
---
data:
  - attribute: "[data-readonly]"
    values: Present when readonly
  - attribute: "[data-disabled]"
    values: Present when disabled
  - attribute: "[data-invalid]"
    values: Present when invalid
---
::

### Header

Contains the navigation buttons and the heading segments.

::docs-component-meta{name="a-range-calendar-header"}
::

### Prev Button

Calendar navigation button. It navigates the calendar one month/year/decade in the past based on the current calendar view.

::docs-data-attributes-table
---
data:
  - attribute: "[data-disabled]"
    values: Present when disabled
---
::

::docs-component-meta{name="a-range-calendar-prev"}
::

### Next Button

Calendar navigation button. It navigates the calendar one month/year/decade in the future based on the current calendar view.

::docs-component-meta{name="a-range-calendar-next"}
::

::docs-data-attributes-table
---
data:
  - attribute: "[data-disabled]"
    values: Present when disabled
---
::

### Heading

Heading for displaying the current month and year.

::docs-component-meta{name="a-range-calendar-heading"}
::

::docs-data-attributes-table
---
data:
  - attribute: "[data-disabled]"
    values: Present when disabled
---
::

### Grid

Container for wrapping the calendar grid.

::docs-component-meta{name="a-range-calendar-grid"}
::

::docs-data-attributes-table
---
data:
  - attribute: "[data-readonly]"
    values: Present when readonly
  - attribute: "[data-disabled]"
    values: Present when disabled
---
::

### Grid Head

Container for wrapping the grid head.

::docs-component-meta{name="a-range-calendar-grid-head"}
::

### Grid Body

Container for wrapping the grid body.

::docs-component-meta{name="a-range-calendar-grid-body"}
::

### Grid Row

Container for wrapping the grid row.

::docs-component-meta{name="a-range-calendar-grid-row"}
::

### Head Cell

Container for wrapping the head cell. Used for displaying the week days.

::docs-component-meta{name="a-range-calendar-head-cell"}
::

### Cell

Container for wrapping the calendar cells.

::docs-component-meta{name="a-range-calendar-cell"}
::

::docs-data-attributes-table
---
data:
  - attribute: "[data-disabled]"
    values: Present when disabled
---
::

### Cell Trigger

Interactable container for displaying the cell dates. Clicking it selects the date.

::docs-component-meta{name="a-range-calendar-cell-trigger"}
::

::docs-data-attributes-table
---
data:
  - attribute: "[data-selected]"
    values: Present when selected
  - attribute: "[data-value]"
    values: The ISO string value of the date.
  - attribute: "[data-disabled]"
    values: Present when disabled
  - attribute: "[data-unavailable]"
    values: Present when unavailable
  - attribute: "[data-today]"
    values: Present when today
  - attribute: "[data-outside-view]"
    values: Present when the date is outside the current month it is displayed in.
  - attribute: "[data-outside-visible-view]"
    values: Present when the date is outside the months that are visible on the
      calendar.
  - attribute: "[data-focused]"
    values: Present when focused
  - attribute: "[data-selection-start]"
    values: Present when the date is the start of the selection.
  - attribute: "[data-selection-end]"
    values: Present when the date is the end of the selection.
  - attribute: "[data-highlighted]"
    values: Present when the date is highlighted by the user as they select a range.
  - attribute: "[data-highlighted-start]"
    values: Present when the date is the start of the range that is highlighted by
      the user.
  - attribute: "[data-highlighted-end]"
    values: Present when the date is the end of the range that is highlighted by the
      user.
  - attribute: "[data-focused]"
    values: Present when focused
---
::

## Accessibility

### Keyboard Interactions

::docs-keyboard-table
---
data:
  - keys:
      - Tab
    description: When focus moves onto the calendar, focuses the first navigation button.
  - keys:
      - Space
    description: When the focus is on either `CalendarNext` or `CalendarPrev`, it
      navigates the calendar. Otherwise, it selects the date.
  - keys:
      - Enter
    description: When the focus is on either `CalendarNext` or `CalendarPrev`, it
      navigates the calendar. Otherwise, it selects the date.
  - keys:
      - ArrowLeft
      - ArrowRight
      - ArrowUp
      - ArrowDown
    description: When the focus is on `CalendarCellTrigger`, it navigates the dates,
      changing the month/year/decade if necessary.
name: keyboard-a-range-calendar
---
::


# Scroll Area

::docs-component-example{name="a-scroll-area"}
::

## Features

::docs-highlights
---
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.
---
::

## Anatomy

Import all parts and piece them together.

```vue
<script setup>
import { AScrollAreaRoot, AScrollAreaScrollbar, AScrollAreaThumb, AScrollAreaViewport } from 'akar';
</script>

<template>
  <AScrollAreaRoot>
    <AScrollAreaViewport />
    <AScrollAreaScrollbar orientation="horizontal">
      <AScrollAreaThumb />
    </AScrollAreaScrollbar>
    <AScrollAreaScrollbar orientation="vertical">
      <AScrollAreaThumb />
    </AScrollAreaScrollbar>
    <AScrollAreaCorner />
  </AScrollAreaRoot>
</template>
```

## API Reference

### Root

Contains all the parts of a scroll area.

::docs-component-meta{name="a-scroll-area-root"}
::

### Viewport

The viewport area of the scroll area.

::docs-component-meta{name="a-scroll-area-viewport"}
::

### Scrollbar

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

::docs-presence-tip
::

::docs-component-meta{name="a-scroll-area-scrollbar"}
::

::docs-data-attributes-table
---
data:
  - attribute: "[data-orientation]"
    values:
      - vertical
      - horizontal
  - attribute: "[data-state]"
    values:
      - visible
      - hidden
---
::

### Thumb

The thumb to be used in `AScrollAreaScrollbar`.

::docs-component-meta{name="a-scroll-area-thumb"}
::

::docs-data-attributes-table
---
data:
  - attribute: "[data-state]"
    values:
      - visible
      - hidden
---
::

### Corner

The corner where both vertical and horizontal scrollbars meet.

::docs-component-meta{name="a-scroll-area-corner"}
::

## Examples

### Custom Scroll

Use the exposed `viewport` to modify / or set the scroll position outside default methods

```vue {4,18}
<script setup lang="ts">
import { AScrollAreaRoot, AScrollAreaScrollbar, AScrollAreaThumb, AScrollAreaViewport } from 'akar'

const scrollArea = useTemplateRef('scrollArea')
function scrollToBottom() {
  const viewport = scrollArea.value?.viewport
  if (viewport) {
    const top = scrollArea.value?.$el.scrollHeight
    container.scrollTo({
      top,
      behavior: 'smooth'
    })
  }
}
</script>

<template>
  <AScrollAreaRoot ref="scrollArea">
    <AScrollAreaViewport />
    <AScrollAreaScrollbar orientation="horizontal">
      <AScrollAreaThumb />
    </AScrollAreaScrollbar>
    <AScrollAreaScrollbar orientation="vertical">
      <AScrollAreaThumb />
    </AScrollAreaScrollbar>
    <AScrollAreaCorner />
  </AScrollAreaRoot>
</template>
```

## 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, `AScrollArea` 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.


# Select

::docs-component-example{name="a-select"}
::

## Features

::docs-highlights
---
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.
---
::

## Anatomy

Import all parts and piece them together.

```vue
<script setup lang="ts">
import {
  ASelectContent,
  ASelectGroup,
  ASelectIcon,
  ASelectItem,
  ASelectItemIndicator,
  ASelectLabel,
  ASelectPortal,
  ASelectRoot,
  ASelectScrollDownButton,
  ASelectScrollUpButton,
  ASelectSeparator,
  ASelectTrigger,
  ASelectValue,
  ASelectViewport,
} from 'akar';
</script>

<template>
  <ASelectRoot>
    <ASelectTrigger>
      <ASelectValue />
      <ASelectIcon />
    </ASelectTrigger>

    <ASelectPortal>
      <ASelectContent>
        <ASelectScrollUpButton />
        <ASelectViewport>
          <ASelectItem>
            <ASelectItemText />
            <ASelectItemIndicator />
          </ASelectItem>
          <ASelectGroup>
            <ASelectLabel />
            <ASelectItem>
              <ASelectItemText />
              <ASelectItemIndicator />
            </ASelectItem>
          </ASelectGroup>
          <ASelectSeparator />
        </ASelectViewport>
        <ASelectScrollDownButton />
        <ASelectArrow />
      </ASelectContent>
    </ASelectPortal>
  </ASelectRoot>
</template>
```

## Pohon

::docs-akar-to-pohon
---
to: https://akar.vinicunca.dev/docs/pohon/components/select
---
::

## API Reference

### Root

Contains all the parts of a ASelect

::docs-component-meta{name="a-select-root"}
::

### Trigger

The button that toggles the ASelect The `ASelectContent` will position itself by aligning over the trigger.

::docs-component-meta{name="a-select-trigger"}
::

::docs-data-attributes-table
---
data:
  - attribute: "[data-state]"
    values:
      - open
      - closed
  - attribute: "[data-placeholder]"
    values: Present when has placeholder
  - attribute: "[data-disabled]"
    values: Present when disabled
---
::

### 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.

::docs-component-meta{name="a-select-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`.

::docs-component-meta{name="a-select-item"}
::

### Portal

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

::docs-component-meta{name="a-select-portal"}
::

### Content

The component that pops out when the select is open.

::docs-presence-tip
::

::docs-component-meta{name="a-select-content"}
::

::docs-data-attributes-table
---
data:
  - attribute: "[data-state]"
    values:
      - open
      - closed
  - attribute: "[data-side]"
    values:
      - left
      - right
      - bottom
      - top
  - attribute: "[data-align]"
    values:
      - start
      - end
      - center
---
::

::docs-css-variables-table
---
data:
  - cssVariable: --akar-select-content-transform-origin
    description: The `transform-origin` computed from the content and arrow
      positions/offsets. Only present when `position="popper"`
  - cssVariable: --akar-select-content-available-width
    description: The remaining width between the trigger and the boundary edge. Only
      present when `position="popper"`
  - cssVariable: --akar-select-content-available-height
    description: The remaining height between the trigger and the boundary edge.
      Only present when `position="popper"`
  - cssVariable: --akar-select-trigger-width
    description: The width of the trigger. Only present when `position="popper"`
  - cssVariable: --akar-select-trigger-height
    description: The height of the trigger. Only present when `position="popper"`
---
::

### Viewport

The scrolling viewport that contains all of the items.

::docs-component-meta{name="a-select-viewport"}
::

### Item

The component that contains the select items.

::docs-component-meta{name="a-select-item"}
::

::docs-data-attributes-table
---
data:
  - attribute: "[data-state]"
    values:
      - checked
      - unchecked
  - attribute: "[data-highlighted]"
    values: Present when highlighted
  - attribute: "[data-disabled]"
    values: 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.

::docs-component-meta{name="a-select-item-text"}
::

### 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.

::docs-component-meta{name="a-select-item-indicator"}
::

### ScrollUpButton

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

::docs-component-meta{name="a-select-scroll-up-button"}
::

### ScrollDownButton

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

::docs-component-meta{name="a-select-scroll-down-button"}
::

### Group

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

::docs-component-meta{name="a-select-group"}
::

### Label

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

::docs-component-meta{name="a-select-label"}
::

### Separator

Used to visually separate items in the ASelect

::docs-component-meta{name="a-select-separator"}
::

### Arrow

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

::docs-component-meta{name="a-select-arrow"}
::

## Examples

### Change the positioning mode

By default, `ASelect` will behave similarly to a native MacOS menu by positioning `ASelectContent` 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.

```vue {20-23}
// index.vue
<script setup lang="ts">
import {
  ASelectContent,
  ASelectPortal,
  ASelectRoot,
  ASelectTrigger,
} from 'akar';
</script>

<template>
  <ASelectRoot>
    <ASelectTrigger>…</ASelectTrigger>
    <ASelectPortal>
      <ASelectContent
        position="popper"
        :side-offset="5"
      >
        …
      </ASelectContent>
    </ASelectPortal>
  </ASelectRoot>
</template>
```

### Constrain the content size

When using `position="popper"` on `ASelectContent`, 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 `--akar-select-trigger-width` and `--akar-select-content-available-height` to support this. Use them to constrain the content dimensions.

```vue {21}
// index.vue
<script setup lang="ts">
import {
  ASelectContent,
  ASelectGroup,
  ASelectItem,
  ASelectItemIndicator,
  ASelectLabel,
  ASelectPortal,
  ASelectRoot,
  ASelectSeparator,
  ASelectTrigger,
} from 'akar';
</script>

<template>
  <ASelectRoot>
    <ASelectTrigger>…</ASelectTrigger>
    <ASelectPortal>
      <ASelectContent
        class="ASelectContent"
        position="popper"
        :side-offset="5"
      >
        …
      </ASelectContent>
    </ASelectPortal>
  </ASelectRoot>
</template>
```

```css {3-4}
/* styles.css */
.ASelectContent {
  width: var(--akar-select-trigger-width);
  max-height: var(--akar-select-content-available-height);
}
```

### With disabled items

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

```vue {23-24}
// index.vue
<script setup lang="ts">
import {
  ASelectContent,
  ASelectGroup,
  ASelectItem,
  ASelectItemIndicator,
  ASelectLabel,
  ASelectPortal,
  ASelectRoot,
  ASelectSeparator,
  ASelectTrigger,
} from 'akar';
</script>

<template>
  <ASelectRoot>
    <ASelectTrigger>…</ASelectTrigger>
    <ASelectPortal>
      <ASelectContent>
        <ASelectViewport>
          <ASelectItem
            class="ASelectItem"
            disabled
          >
            …
          </ASelectItem>
          <ASelectItem>…</ASelectItem>
          <ASelectItem>…</ASelectItem>
        </ASelectViewport>
      </ASelectContent>
    </ASelectPortal>
  </ASelectRoot>
</template>
```

```css {2}
/* styles.css */
.ASelectItem[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.

```vue {19-20}
// index.vue
<script setup lang="ts">
import {
  ASelectContent,
  ASelectGroup,
  ASelectItem,
  ASelectItemIndicator,
  ASelectLabel,
  ASelectPortal,
  ASelectRoot,
  ASelectSeparator,
  ASelectTrigger,
} from 'akar';
import './styles.css';
</script>

<template>
  <ASelectRoot>
    <ASelectTrigger class="ASelectTrigger">
      <ASelectValue placeholder="Pick an option" />
      <ASelectIcon />
    </ASelectTrigger>
    <ASelectPortal>
      <ASelectContent>…</ASelectContent>
    </ASelectPortal>
  </ASelectRoot>
</template>
```

```css {2}
/* styles.css */
.ASelectTrigger[data-placeholder] {
  color: 'gainsboro';
}
```

### With separators

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

```vue {10}
<template>
  <ASelectRoot>
    <ASelectTrigger>…</ASelectTrigger>
    <ASelectPortal>
      <ASelectContent>
        <ASelectViewport>
          <ASelectItem>…</ASelectItem>
          <ASelectItem>…</ASelectItem>
          <ASelectItem>…</ASelectItem>
          <ASelectSeparator />
          <ASelectItem>…</ASelectItem>
          <ASelectItem>…</ASelectItem>
        </ASelectViewport>
      </ASelectContent>
    </ASelectPortal>
  </ASelectRoot>
</template>
```

### With grouped items

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

```vue {7-8,12}
<template>
  <ASelectRoot>
    <ASelectTrigger>…</ASelectTrigger>
    <ASelectPortal>
      <ASelectContent>
        <ASelectViewport>
          <ASelectGroup>
            <ASelectLabel>Label</ASelectLabel>
            <ASelectItem>…</ASelectItem>
            <ASelectItem>…</ASelectItem>
            <ASelectItem>…</ASelectItem>
          </ASelectGroup>
        </ASelectViewport>
      </ASelectContent>
    </ASelectPortal>
  </ASelectRoot>
</template>
```

### With complex items

You can use custom content in your items.

```vue {23}
<script setup lang="ts">
import {
  ASelectContent,
  ASelectGroup,
  ASelectItem,
  ASelectItemIndicator,
  ASelectLabel,
  ASelectPortal,
  ASelectRoot,
  ASelectSeparator,
  ASelectTrigger,
} from 'akar';
</script>

<template>
  <ASelectRoot>
    <ASelectTrigger>…</ASelectTrigger>
    <ASelectPortal>
      <ASelectContent>
        <ASelectViewport>
          <ASelectItem>
            <ASelectItemText>
              <img src="…">
              Adolfo Hess
            </ASelectItemText>
            <ASelectItemIndicator>…</ASelectItemIndicator>
          </ASelectItem>
          <ASelectItem>…</ASelectItem> <ASelectItem>…</ASelectItem>
        </ASelectViewport>
      </ASelectContent>
    </ASelectPortal>
  </ASelectRoot>
</template>
```

### Controlling the value displayed in the trigger

By default the trigger display the selected item's text (no longer automatically render `ItemText`'s content like in v1).

If you need to render other than plain text, you can control the component using `v-model` props (or accessing `ASelectValue`'s slotProps) and passing `slot` to `ASelectValue`. Remember to make sure what you put in there is accessible.

```vue {2,4,10-12}
<script setup>
const countries = { 'france': '🇫🇷', 'united-kingdom': '🇬🇧', 'spain': '🇪🇸' };

const value = ref('france');
</script>

<template>
  <ASelectRoot v-model="value">
    <ASelectTrigger>
      <ASelectValue :aria-label="value">
        {{ countries[value] }}
      </ASelectValue>
      <ASelectIcon />
    </ASelectTrigger>
    <ASelectPortal>
      <ASelectContent>
        <ASelectViewport>
          <ASelectItem value="france">
            <ASelectItemText>France</ASelectItemText>
            <ASelectItemIndicator>…</ASelectItemIndicator>
          </ASelectItem>
          <ASelectItem value="united-kingdom">
            <ASelectItemText>United Kingdom</ASelectItemText>
            <ASelectItemIndicator>…</ASelectItemIndicator>
          </ASelectItem>
          <ASelectItem value="spain">
            <ASelectItemText>Spain</ASelectItemText>
            <ASelectItemIndicator>…</ASelectItemIndicator>
          </ASelectItem>
        </ASelectViewport>
      </ASelectContent>
    </ASelectPortal>
  </ASelectRoot>
</template>
```

### 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](https://akar.vinicunca.dev/docs/akar/components/scroll-area) primitive.

```vue {25,27,32-34}
// index.vue
<script setup lang="ts">
import {
  ASelectContent,
  ASelectGroup,
  ASelectItem,
  ASelectItemIndicator,
  ASelectLabel,
  ASelectPortal,
  ASelectRoot,
  ASelectSeparator,
  ASelectTrigger,
  ScrollAreaRoot,
  ScrollAreaScrollbar,
  ScrollAreaThumb,
  ScrollAreaViewport,
} from 'akar';
</script>

<template>
  <ASelectRoot>
    <ASelectTrigger>…</ASelectTrigger>
    <ASelectPortal>
      <ASelectContent>
        <ScrollAreaRoot
          class="ScrollAreaRoot"
          type="auto"
        >
          <ASelectViewport as-child>
            <ScrollAreaViewport class="ScrollAreaViewport">
              <StyledItem>…</StyledItem> <StyledItem>…</StyledItem>
              <StyledItem>…</StyledItem>
            </ScrollAreaViewport>
          </ASelectViewport>
          <ScrollAreaScrollbar
            class="ScrollAreaScrollbar"
            orientation="vertical"
          >
            <ScrollAreaThumb class="ScrollAreaThumb" />
          </ScrollAreaScrollbar>
        </ScrollAreaRoot>
      </ASelectContent>
    </ASelectPortal>
  </ASelectRoot>
</template>
```

```css
/* 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);
  borderradius: 3px;
}
```

## Accessibility

Adheres to the [ListBox WAI-ARIA design pattern](https://www.w3.org/WAI/ARIA/apg/patterns/listbox){rel="nofollow"}.

See the W3C [ASelect-Only Combobox](https://www.w3.org/TR/wai-aria-practices/examples/combobox/combobox-select-only.html){rel="nofollow"} example for more information.

### Keyboard Interactions

::docs-keyboard-table
---
data:
  - keys:
      - Space
    description: When focus is on `ASelectTrigger`, opens the select and focuses the
      selected item. <br /> When focus is on an item, selects the focused item.
  - keys:
      - Enter
    description: When focus is on `ASelectTrigger`, opens the select and focuses the
      first item. <br /> When focus is on an item, selects the focused item.
  - keys:
      - ArrowDown
    description: When focus is on `ASelectTrigger`, opens the ASelect <br /> When
      focus is on an item, moves focus to the next item.
  - keys:
      - ArrowUp
    description: When focus is on `ASelectTrigger`, opens the ASelect <br /> When
      focus is on an item, moves focus to the previous item.
  - keys:
      - Esc
    description: Closes the select and moves focus to `ASelectTrigger`.
name: keyboard-a-select
---
::

### Labelling

Use our [Label](https://akar.vinicunca.dev/label) component in order to offer a visual and accessible label for the ASelect

```vue {19,22,26,28}
<script setup lang="ts">
import { Icon } from '@iconify/vue';
import {
  ASelectContent,
  ASelectGroup,
  ASelectItem,
  ASelectItemIndicator,
  ASelectLabel,
  ASelectPortal,
  ASelectRoot,
  ASelectSeparator,
  ASelectTrigger,
  Label,
} from 'akar';
import { ref } from 'vue';
</script>

<template>
  <Label>
    Country
    <ASelectRoot>…</ASelectRoot>
  </Label>

  <!-- or -->

  <Label for="country">Country</Label>
  <ASelectRoot>
    <ASelectTrigger id="country">
      …
    </ASelectTrigger>
    <ASelectPortal>
      <ASelectContent>…</ASelectContent>
    </ASelectPortal>
  </ASelectRoot>
</template>
```

## Custom APIs

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

### Abstract down to `ASelect` and `ASelectItem`

This example abstracts most of the parts.

#### Usage

```vue
<script setup lang="ts">
import { ASelect, ASelectItem } from './your-select';
</script>

<template>
  <ASelect default-value="2">
    <ASelectItem value="1">
      Item 1
    </ASelectItem>
    <ASelectItem value="2">
      Item 2
    </ASelectItem>
    <ASelectItem value="3">
      Item 3
    </ASelectItem>
  </ASelect>
</template>
```

#### Implementation

```ts
// your-select.ts
export { default as ASelect } from 'ASelect.vue';
export { default as ASelectItem } from 'ASelectItem.vue';
```

```vue
<!-- ASelect.vue -->
<script setup lang="ts">
import type { ASelectRootEmits, ASelectRootProps } from 'akar';
import { ChevronDownIcon, ChevronUpIcon, } from '@radix-icons/vue';
import { ASelectContent, ASelectIcon, ASelectPortal, ASelectRoot, ASelectScrollDownButton, ASelectScrollUpButton, ASelectTrigger, ASelectValue, ASelectViewport, useForwardPropsEmits } from 'akar';

const props = defineProps<ASelectRootProps>();
const emits = defineEmits<ASelectRootEmits>();

const forward = useForwardPropsEmits(props, emits);
</script>

<template>
  <ASelectRoot v-bind="forward">
    <ASelectTrigger>
      <ASelectValue />
      <ASelectIcon>
        <ChevronDownIcon />
      </ASelectIcon>
    </ASelectTrigger>

    <ASelectPortal>
      <ASelectContent>
        <ASelectScrollUpButton>
          <ChevronUpIcon />
        </ASelectScrollUpButton>
        <ASelectViewport>
          <slot />
        </ASelectViewport>
        <ASelectScrollDownButton>
          <ChevronDownIcon />
        </ASelectScrollDownButton>
      </ASelectContent>
    </ASelectPortal>
  </ASelectRoot>
</template>
```

```vue
<!-- ASelectItem.vue -->
<script setup lang="ts">
import type { ASelectItemProps } from 'akar';
import { CheckIcon } from '@radix-icons/vue';
import { ASelectItem, ASelectItemIndicator, ASelectItemText } from 'akar';

const props = defineProps<ASelectItemProps>();
</script>

<template>
  <ASelectItem v-bind="props">
    <ASelectItemText>
      <slot />
    </ASelectItemText>
    <ASelectItemIndicator>
      <CheckIcon />
    </ASelectItemIndicator>
  </ASelectItem>
</template>
```


# Separator

::docs-component-example{name="a-separator"}
::

## Features

::docs-highlights
---
features:
  - Supports horizontal and vertical orientations.
---
::

## Anatomy

Import all parts and piece them together.

```vue
<script setup>
import { ASeparator } from 'akar';
</script>

<template>
  <ASeparator />
</template>
```

## Pohon

::docs-akar-to-pohon
---
to: https://akar.vinicunca.dev/docs/pohon/components/separator
---
::

## API Reference

### Root

The separator.

::docs-component-meta{name="a-separator"}
::

::docs-data-attributes-table
---
data:
  - attribute: "[data-orientation]"
    values:
      - vertical
      - horizontal
---
::

## Accessibility

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


# Slider

::docs-component-example{name="a-slider"}
::

## Features

::docs-highlights
---
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.
---
::

## Anatomy

Import all parts and piece them together.

```vue
<script setup>
import { ASliderRange, ASliderRoot, ASliderThumb, ASliderTrack } from 'akar';
</script>

<template>
  <ASliderRoot>
    <ASliderTrack>
      <ASliderRange />
    </ASliderTrack>
    <ASliderThumb />
  </ASliderRoot>
</template>
```

## Pohon

::docs-akar-to-pohon
---
to: https://akar.vinicunca.dev/docs/pohon/components/slider
---
::

## 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.

::docs-component-meta{name="a-slider-root"}
::

::docs-data-attributes-table
---
data:
  - attribute: "[data-disabled]"
    values: Present when disabled
  - attribute: "[data-orientation]"
    values:
      - vertical
      - horizontal
---
::

### Track

The track that contains the `ASliderRange`.

::docs-component-meta{name="a-slider-track"}
::

::docs-data-attributes-table
---
data:
  - attribute: "[data-disabled]"
    values: Present when disabled
  - attribute: "[data-orientation]"
    values:
      - vertical
      - horizontal
---
::

### Range

The range part. Must live inside `ASliderTrack`.

::docs-component-meta{name="a-slider-range"}
::

::docs-data-attributes-table
---
data:
  - attribute: "[data-disabled]"
    values: Present when disabled
  - attribute: "[data-orientation]"
    values:
      - vertical
      - horizontal
---
::

### Thumb

A draggable thumb. You can render multiple thumbs.

::docs-component-meta{name="a-slider-thumb"}
::

::docs-data-attributes-table
---
data:
  - attribute: "[data-disabled]"
    values: Present when disabled
  - attribute: "[data-orientation]"
    values:
      - vertical
      - horizontal
---
::

## Examples

### Vertical orientation

Use the `orientation` prop to create a vertical slider.

```vue {10}
// index.vue
<script setup>
import { ASliderRange, ASliderRoot, ASliderThumb, ASliderTrack } from 'akar';
</script>

<template>
  <ASliderRoot
    class="ASliderRoot"
    :default-value="[50]"
    orientation="vertical"
  >
    <ASliderTrack class="ASliderTrack">
      <ASliderRange class="ASliderRange" />
    </ASliderTrack>
    <ASliderThumb class="ASliderThumb" />
  </ASliderRoot>
</template>
```

```css {7,18,26}
/* styles.css */
.ASliderRoot {
  position: relative;
  display: flex;
  align-items: center;
}
.ASliderRoot[data-orientation='vertical'] {
  flex-direction: column;
  width: 20px;
  height: 100px;
}

.ASliderTrack {
  position: relative;
  flex-grow: 1;
  background-color: grey;
}
.ASliderTrack[data-orientation='vertical'] {
  width: 3px;
}

.ASliderRange {
  position: absolute;
  background-color: black;
}
.ASliderRange[data-orientation='vertical'] {
  width: 100%;
}

.ASliderThumb {
  display: block;
  width: 20px;
  height: 20px;
  background-color: black;
}
```

### Create a range

Add multiple thumbs and values to create a range slider.

```vue {7,11-12}
// index.vue
<script setup>
import { ASliderRange, ASliderRoot, ASliderThumb, ASliderTrack } from 'akar';
</script>

<template>
  <ASliderRoot :default-value="[25, 75]">
    <ASliderTrack>
      <ASliderRange />
    </ASliderTrack>
    <ASliderThumb />
    <ASliderThumb />
  </ASliderRoot>
</template>
```

### Define step size

Use the `step` prop to increase the stepping interval.

```vue {9}
// index.vue
<script setup>
import { ASliderRange, ASliderRoot, ASliderThumb, ASliderTrack } from 'akar';
</script>

<template>
  <ASliderRoot
    :default-value="[50]"
    :step="10"
  >
    <ASliderTrack>
      <ASliderRange />
    </ASliderTrack>
    <ASliderThumb />
  </ASliderRoot>
</template>
```

### Prevent thumb overlap

Use `minStepsBetweenThumbs` to avoid thumbs with equal values.

```vue {10}
// index.vue
<script setup>
import { ASliderRange, ASliderRoot, ASliderThumb, ASliderTrack } from 'akar';
</script>

<template>
  <ASliderRoot
    :default-value="[25, 75]"
    :step="10"
    :min-steps-between-thumbs="1"
  >
    <ASliderTrack>
      <ASliderRange />
    </ASliderTrack>
    <ASliderThumb />
    <ASliderThumb />
  </ASliderRoot>
</template>
```

## Accessibility

Adheres to the [ASlider WAI-ARIA design pattern](https://www.w3.org/WAI/ARIA/apg/patterns/slidertwothumb){rel="nofollow"}.

### Keyboard Interactions

::docs-keyboard-table
---
data:
  - keys:
      - ArrowRight
    description: Increases the value by the `step` amount.
  - keys:
      - ArrowLeft
    description: Decreases the value by the `step` amount.
  - keys:
      - ArrowUp
    description: Increases the value by the `step` amount.
  - keys:
      - ArrowDown
    description: Decreases the value by the `step` amount.
  - keys:
      - PageUp
    description: Increases the value by a larger `step`.
  - keys:
      - PageDown
    description: Decreases the value by a larger `step`.
  - keys:
      - Shift + ArrowUp
    description: Increases the value by a larger `step`.
  - keys:
      - Shift + ArrowDown
    description: Decreases the value by a larger `step`.
  - keys:
      - Home
    description: Sets the value to its minimum.
  - keys:
      - End
    description: Sets the value to its maximum.
name: keyboard-a-slider
---
::

#### Inverted sliders

When the slider is `inverted`, some controls are inverted as well, depending on the `orientation`.

- When the slider is `horizontal` (the default), ``, ``, ``, and `` are inverted.
- When the slider is `vertical`, ``, ``, ``, ``, ``, and `` are inverted.

## Custom APIs

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

### Abstract all parts

This example abstracts all of the `ASlider` parts so it can be used as a self closing element.

#### Usage

```vue
<script setup lang="ts">
import { ASlider } from './your-slider';
</script>

<template>
  <ASlider :default-value="[25]" />
</template>
```

#### Implementation

```ts
// your-slider.ts
export { default as ASlider } from 'ASlider.vue';
```

```vue
 <!-- ASlider.vue -->
<script setup lang="ts">
import type { ASliderRootEmits, ASliderRootProps } from 'akar';
import { ASliderRange, ASliderRoot, ASliderThumb, ASliderTrack, useForwardPropsEmits } from 'akar';

const props = defineProps<ASliderRootProps>();
const emits = defineEmits<ASliderRootEmits>();

const forward = useForwardPropsEmits(props, emits);
</script>

<template>
  <ASliderRoot
    v-slot="{ modelValue }"
    v-bind="forward"
  >
    <ASliderTrack>
      <ASliderRange />
    </ASliderTrack>

    <ASliderThumb
      v-for="(_, i) in modelValue"
      :key="i"
    />
  </ASliderRoot>
</template>
```

## Caveats

### Mouse events are not fired

Because of [a limitation](https://github.com/vinicunca/akar/blob/main/packages/core/src/slider/slider-impl.vue#L48-L49){rel="nofollow"} we faced during implementation, the following example won't work as expected and the `@mousedown` and `@mousedown` event handlers won't be fired:

```vue
<ASliderRoot
  @mousedown="() => { console.log('onMouseDown')  }"
  @mouseup="() => { console.log('onMouseUp')  }"
>
  …
</ASliderRoot>
```

We recommend using pointer events instead (eg. `@pointerdown`, `@pointerup`). 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.).


# Splitter

::docs-component-example{name="a-splitter"}
::

## Features

::docs-highlights
---
features:
  - Supports keyboard interaction.
  - Supports horizontal/vertical layout.
  - Supports nested layout.
  - Supports Right to Left direction.
  - Can resize across another panel.
  - Can be mounted conditionally.
---
::

## Anatomy

Import all parts and piece them together.

```vue
<script setup>
import { ASplitterGroup, ASplitterPanel, ASplitterResizeHandle } from 'akar';
</script>

<template>
  <ASplitterGroup>
    <ASplitterPanel />
    <ASplitterResizeHandle />
  </ASplitterGroup>
</template>
```

## API Reference

### Group

Contains all the parts of a ASplitter.

::docs-component-meta{name="a-splitter-group.md"}
::

::docs-data-attributes-table
---
data:
  - attribute: "[data-orientation]"
    values:
      - vertical
      - horizontal
  - attribute: "[data-state]"
    values:
      - collapsed
      - expanded
      - Present when collapsible
---
::

### Panel

A collapsible section.

::docs-component-meta{name="a-splitter-panel.md"}
::

### Resize Handle

Handle that use for resizing.

::docs-component-meta{name="a-splitter-resize-handle.md"}
::

::docs-data-attributes-table
---
data:
  - attribute: "[data-orientation]"
    values:
      - vertical
      - horizontal
  - attribute: "[data-state]"
    values:
      - drag
      - hover
      - inactive
  - attribute: "[data-disabled]"
    values: Present when disabled
---
::

## Examples

### Collapsible

Use the `collapsible` prop to allow the panel to collapse into `collapsedSize` when `minSize` is reached.

(`collapsedSize` and `minSize` props are required.)

```vue {4-6}
<template>
  <ASplitterGroup>
    <ASplitterPanel
      collapsible
      :collapsed-size="10"
      :min-size="35"
    >
      Panel A
    </ASplitterPanel>
    <ASplitterResizeHandle />
    <ASplitterPanel>
      Panel B
    </ASplitterPanel>
  </ASplitterGroup>
</template>
```

### Persist in localStorage

Use the `autoSaveId` prop to save the layout data into `localStorage`.

```vue {2}
<template>
  <ASplitterGroup auto-save-id="any-id">
    …
  </ASplitterGroup>
</template>
```

### Persist layout with SSR

By default, ASplitter uses `localStorage` to persist layouts. With server rendering, this can cause a flicker when the default layout (rendered on the server) is replaced with the persisted layout (in `localStorage`). The way to avoid this flicker is to also persist the layout with a cookie like so:

```vue {3,8-9,11,15}
<!-- with Nuxt -->
<script setup lang="ts">
const layout = useCookie<number[]>('splitter:layout')
</script>

<template>
  <ASplitterGroup
    direction="horizontal"
    @layout="layout = $event"
  >
    <ASplitterPanel :default-size="layout[0]">
      …
    </ASplitterPanel>
    <ASplitterResizeHandle />
    <ASplitterPanel :default-size="layout[1]">
      …
    </ASplitterPanel>
  </ASplitterGroup>
</template>
```

### Collapse/Expand programmatically

Sometimes panels need to resize or collapse/expand in response to user actions. `ASplitterPanel` exposes the `collapse` and `expand` methods to achieve this.

```vue {2,7,14}
<script setup lang="ts">
const panelRef = ref<InstanceType<typeof ASplitterPanel>>()
</script>

<template>
  <button
    @click="panelRef?.isCollapsed ? panelRef?.expand() : panelRef?.collapse() "
  >
    {{ panelRef?.isCollapsed ? 'Expand' : 'Collapse' }}
  </button>

  <ASplitterGroup>
    <ASplitterPanel
      ref="panelRef"
      collapsible
      :collapsed-size="10"
      :min-size="35"
    >
      …
    </ASplitterPanel>
    <ASplitterResizeHandle />
    <ASplitterPanel>
      …
    </ASplitterPanel>
  </ASplitterGroup>
</template>
```

### Custom handle

Customize the handle by passing any element as the slot.

```vue {6-8}
<template>
  <ASplitterGroup>
    <ASplitterPanel>
      …
    </ASplitterPanel>
    <ASplitterResizeHandle>
      <Icon icon="radix-icons-drag-handle-dots-2" />
    </ASplitterResizeHandle>
    <ASplitterPanel>
      …
    </ASplitterPanel>
  </ASplitterGroup>
</template>
```

### SSR

ASplitter component heavily relies on unique `id`, however for Vue<3.4 we don't have a reliable way of generating [SSR-friendly `id`](https://github.com/vuejs/rfcs/discussions/557){rel="nofollow"}.

Thus, if you are using Nuxt or other SSR framework, you are required to manually add the `id` for all ASplitter components. Alternatively, you can wrap the component with `<ClientOnly>`.

```vue
<template>
  <ASplitterGroup id="group-1">
    <ASplitterPanel id="group-1-panel-1">
      …
    </ASplitterPanel>
    <ASplitterResizeHandle id="group-1-resize-1">
      <Icon icon="radix-icons-drag-handle-dots-2" />
    </ASplitterResizeHandle>
    <ASplitterPanel id="group-1-panel-2">
      …
    </ASplitterPanel>
  </ASplitterGroup>
</template>
```

## Accessibility

Adheres to the [Window ASplitter WAI-ARIA design pattern](https://www.w3.org/WAI/ARIA/apg/patterns/windowsplitter){rel="nofollow"}.

### Keyboard Interactions

::docs-keyboard-table
---
data:
  - keys:
      - Enter
    description: If the primary pane is not collapsed, collapses the pane. If the
      pane is collapsed, restores the splitter to its previous position.
  - keys:
      - ArrowDown
    description: Moves a horizontal splitter down.
  - keys:
      - ArrowUp
    description: Moves a horizontal splitter up.
  - keys:
      - ArrowRight
    description: Moves a vertical splitter to the right.
  - keys:
      - ArrowLeft
    description: Moves a vertical splitter to the left.
  - keys:
      - Home
    description: "Moves splitter to the position that gives the primary pane its
      smallest allowed size. "
  - keys:
      - End
    description: Moves splitter to the position that gives the primary pane its
      largest allowed size.
name: keyboard-a-accordion
---
::


# Stepper

::docs-component-example{name="a-slider"}
::

## Features

::docs-highlights
---
features:
  - Can be controlled or uncontrolled.
  - Supports horizontal/vertical orientation.
  - Supports linear/non-linear activation.
  - Full keyboard navigation.
---
::

## Anatomy

Import all parts and piece them together.

```vue
<script setup>
import { AStepperDescription, AStepperIndicator, AStepperItem, AStepperRoot, AStepperTitle, AStepperTrigger } from 'akar';
</script>

<template>
  <AStepperRoot>
    <AStepperItem>
      <AStepperTrigger />
      <AStepperIndicator />

      <AStepperTitle />
      <AStepperDescription />

      <AStepperSeparator />
    </AStepperItem>
  </AStepperRoot>
</template>
```

## Pohon

::docs-akar-to-pohon
---
to: https://akar.vinicunca.dev/docs/pohon/components/stepper
---
::

## API Reference

### Root

Contains all the stepper component parts.

::docs-component-meta{name="a-stepper-root"}
::

::docs-data-attributes-table
---
data:
  - attribute: "[data-orientation]"
    values:
      - vertical
      - horizontal
  - attribute: "[data-linear]"
    values: Present when linear
---
::

### Item

The step item component.

::docs-component-meta{name="a-stepper-item"}
::

::docs-data-attributes-table
---
data:
  - attribute: "[data-state]"
    values:
      - active
      - inactive
      - completed
  - attribute: "[data-disabled]"
    values: Present when disabled
  - attribute: "[data-orientation]"
    values:
      - vertical
      - horizontal
---
::

### Trigger

The trigger that toggles the step.

::docs-component-meta{name="a-stepper-trigger"}
::

::docs-data-attributes-table
---
data:
  - attribute: "[data-state]"
    values:
      - active
      - inactive
      - completed
  - attribute: "[data-disabled]"
    values: Present when disabled
  - attribute: "[data-orientation]"
    values:
      - vertical
      - horizontal
---
::

### Indicator

The indicator for the step.

::docs-component-meta{name="a-stepper-indicator"}
::

### Title

An accessible title to be announced when the stepper trigger is focused.

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

::docs-component-meta{name="a-stepper-title"}
::

### Description

An optional accessible description to be announced when the stepper trigger is focused.

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 `AStepperTrigger`.

::docs-component-meta{name="a-stepper-item"}
::

## Examples

### Vertical

You can create vertical steps by using the `orientation` prop.

```vue {8}
<script setup>
import { AStepperDescription, AStepperIndicator, AStepperItem, AStepperRoot, AStepperTitle } from 'akar';
</script>

<template>
  <AStepperRoot
    :default-value="1"
    orientation="vertical"
  >
    <AStepperItem>
      <AStepperIndicator />
      <AStepperTitle />
      <AStepperDescription />
    </AStepperItem>
    <AStepperItem>
      <AStepperIndicator />
      <AStepperTitle />
      <AStepperDescription />
    </AStepperItem>
  </AStepperRoot>
</template>
```

### With controls

You can add additional controls for the stepper using buttons and access the typed component instance using `useTemplateRef`.

```vue {8}
<script setup lang="ts">
const stepper = useTemplateRef('stepper');
</script>

<template>
  <AStepperRoot
    ref="stepper"
    :default-value="1"
  >
    <AStepperItem>
      <AStepperIndicator />
      <AStepperTitle />
      <AStepperDescription />
    </AStepperItem>
    <AStepperItem>
      <AStepperIndicator />
      <AStepperTitle />
      <AStepperDescription />
    </AStepperItem>
  </AStepperRoot>

  <div class="mt-4 flex gap-2 justify-between">
    <button
      :disabled="!stepper?.hasPrev()"
      @click="stepper?.prevStep()"
    >
      Prev
    </button>

    <button
      :disabled="!stepper?.hasNext()"
      @click="stepper?.nextStep()"
    >
      Next
    </button>
  </div>
</template>
```

## Accessibility

### Keyboard Interactions

::docs-keyboard-table
---
data:
  - keys:
      - Tab
    description: When focus moves onto the steps, focuses the first step
  - keys:
      - ArrowDown
    description: Moves focus to the next step depending on `orientation`
  - keys:
      - ArrowRight
    description: Moves focus to the next step depending on `orientation`
  - keys:
      - ArrowUp
    description: Moves focus to the previous step depending on `orientation`
  - keys:
      - ArrowLeft
    description: Moves focus to the previous step depending on `orientation`
  - keys:
      - Enter
      - Space
    description: Selects the focused step.
name: keyboard-a-stepper
---
::


# Switch

::docs-component-example{name="a-switch"}
::

## Features

::docs-highlights
---
features:
  - Full keyboard navigation.
  - Can be controlled or uncontrolled.
---
::

## Anatomy

Import all parts and piece them together.

```vue
<script setup>
import { ASwitchRoot, ASwitchThumb } from 'akar';
</script>

<template>
  <ASwitchRoot>
    <ASwitchThumb />
  </ASwitchRoot>
</template>
```

## Pohon

::docs-akar-to-pohon
---
to: https://akar.vinicunca.dev/docs/pohon/components/switch
---
::

## 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.

::docs-component-meta{name="a-switch-root"}
::

::docs-data-attributes-table
---
data:
  - attribute: "[data-state]"
    values:
      - checked
      - unchecked
  - attribute: "[data-disabled]"
    values: Present when disabled
---
::

### Thumb

The thumb that is used to visually indicate whether the switch is on or off.

::docs-component-meta{name="a-switch-thumb"}
::

::docs-data-attributes-table
---
data:
  - attribute: "[data-state]"
    values:
      - checked
      - unchecked
  - attribute: "[data-disabled]"
    values: Present when disabled
---
::

## Accessibility

Adheres to the [`switch` role requirements](https://www.w3.org/WAI/ARIA/apg/patterns/switch){rel="nofollow"}.

### Keyboard Interactions

::docs-keyboard-table
---
data:
  - keys:
      - Space
    description: Toggles the component's state.
  - keys:
      - Enter
    description: Toggles the component's state.
name: keyboard-a-switch
---
::


# Tabs

::docs-component-example{name="a-tabs"}
::

## Features

::docs-highlights
---
features:
  - Can be controlled or uncontrolled.
  - Supports horizontal/vertical orientation.
  - Supports automatic/manual activation.
  - Full keyboard navigation.
---
::

## Anatomy

Import all parts and piece them together.

```vue
<script setup>
import { ATabsContent, ATabsIndicator, ATabsList, ATabsRoot, ATabsTrigger } from 'akar';
</script>

<template>
  <ATabsRoot>
    <ATabsList>
      <ATabsIndicator />
      <ATabsTrigger />
    </ATabsList>
    <ATabsContent />
  </ATabsRoot>
</template>
```

## Pohon

::docs-akar-to-pohon{to="https://akar.vinicunca.dev/docs/pohon/components/tabs"}
::

## API Reference

### Root

Contains all the tabs component parts.

::docs-component-meta{name="a-tabs-root"}
::

::docs-data-attributes-table
---
data:
  - attribute: "[data-orientation]"
    values:
      - vertical
      - horizontal
---
::

### List

Contains the triggers that are aligned along the edge of the active content.

::docs-component-meta{name="a-tabs-list"}
::

::docs-data-attributes-table
---
data:
  - attribute: "[data-orientation]"
    values:
      - vertical
      - horizontal
---
::

### Trigger

The button that activates its associated content.

::docs-component-meta{name="a-tabs-trigger"}
::

::docs-data-attributes-table
---
data:
  - attribute: "[data-state]"
    values:
      - active
      - inactive
  - attribute: "[data-disabled]"
    values: Present when disabled
  - attribute: "[data-orientation]"
    values:
      - vertical
      - horizontal
---
::

### Indicator

The indicator that highlights the current active tab.

::docs-component-meta{name="a-tabs-indicator"}
::

::docs-css-variables-table
---
data:
  - cssVariable: --akar-tabs-indicator-size
    description: The size of the indicator
  - cssVariable: --akar-tabs-indicator-position
    description: The position of the indicator
---
::

### Content

Contains the content associated with each trigger.

::docs-presence-tip
::

::docs-component-meta{name="a-tabs-content"}
::

::docs-data-attributes-table
---
data:
  - attribute: "[data-state]"
    values:
      - active
      - inactive
  - attribute: "[data-orientation]"
    values:
      - vertical
      - horizontal
---
::

## Examples

### Vertical

You can create vertical tabs by using the `orientation` prop.

```vue {8}
<script setup>
import { ATabsContent, ATabsList, ATabsRoot, ATabsTrigger } from 'akar';
</script>

<template>
  <ATabsRoot
    default-value="tab1"
    orientation="vertical"
  >
    <ATabsList aria-label="tabs example">
      <ATabsTrigger value="tab1">
        One
      </ATabsTrigger>
      <ATabsTrigger value="tab2">
        Two
      </ATabsTrigger>
      <ATabsTrigger value="tab3">
        Three
      </ATabsTrigger>
    </ATabsList>
    <ATabsContent value="tab1">
      Tab one content
    </ATabsContent>
    <ATabsContent value="tab2">
      Tab two content
    </ATabsContent>
    <ATabsContent value="tab3">
      Tab three content
    </ATabsContent>
  </ATabsRoot>
</template>
```

## Accessibility

Adheres to the [ATabs WAI-ARIA design pattern](https://www.w3.org/WAI/ARIA/apg/patterns/tabpanel){rel="nofollow"}.

### Keyboard Interactions

::docs-keyboard-table
---
data:
  - keys:
      - Tab
    description: When focus moves onto the tabs, focuses the active trigger. When a
      trigger is focused, moves focus to the active content.
  - keys:
      - ArrowDown
    description: Moves focus to the next trigger depending on `orientation` and
      activates its associated content.
  - keys:
      - ArrowRight
    description: Moves focus to the next trigger depending on `orientation` and
      activates its associated content.
  - keys:
      - ArrowUp
    description: Moves focus to the previous trigger depending on `orientation` and
      activates its associated content.
  - keys:
      - ArrowLeft
    description: Moves focus to the previous trigger depending on `orientation` and
      activates its associated content.
  - keys:
      - Home
    description: Moves focus to the first trigger and activates its associated content.
  - keys:
      - End
    description: Moves focus to the last trigger and activates its associated content.
name: keyboard-a-tabs
---
::


# Tags Input

::docs-component-example{name="a-tags-input"}
::

## Features

::docs-highlights
---
features:
  - Can be controlled or uncontrolled.
  - Full keyboard navigation.
  - Limit the number of tags.
  - Accept value from clipboard.
  - Clear button to reset all tags values.
---
::

## Anatomy

Import all parts and piece them together.

```vue
<script setup>
import { ATagsInputClear, ATagsInputInput, ATagsInputItem, ATagsInputItemDelete, ATagsInputItemText, ATagsInputRoot } from 'akar';
</script>

<template>
  <ATagsInputRoot>
    <ATagsInputItem>
      <ATagsInputItemText />
      <ATagsInputItemDelete />
    </ATagsInputItem>

    <ATagsInputInput />
    <ATagsInputClear />
  </ATagsInputRoot>
</template>
```

## Pohon

::docs-akar-to-pohon
---
to: https://akar.vinicunca.dev/docs/pohon/components/input-tags
---
::

## API Reference

### Root

Contains all the tags input component parts.

::docs-component-meta{name="a-tags-input-root"}
::

::docs-data-attributes-table
---
data:
  - attribute: "[data-disabled]"
    values: Present when disabled
  - attribute: "[data-focused]"
    values: Present when focus on input
  - attribute: "[data-invalid]"
    values: Present when input value is invalid
---
::

### Item

The component that contains the tag.

::docs-component-meta{name="a-tags-input-item"}
::

::docs-data-attributes-table
---
data:
  - attribute: "[data-state]"
    values:
      - active
      - inactive
  - attribute: "[data-disabled]"
    values: Present when disabled
---
::

### ItemText

The textual part of the tag. Important for accessibility.

::docs-component-meta{name="a-tags-input-item-text"}
::

### ItemDelete

The button that delete the associate tag.

::docs-component-meta{name="a-tags-input-item-delete"}
::

::docs-data-attributes-table
---
data:
  - attribute: "[data-state]"
    values:
      - active
      - inactive
  - attribute: "[data-disabled]"
    values: Present when disabled
---
::

### Input

The input element for the tags input.

::docs-component-meta{name="a-tags-input-input"}
::

::docs-data-attributes-table
---
data:
  - attribute: "[data-invalid]"
    values: Present when input value is invalid
---
::

### Clear

The button that remove all tags.

::docs-component-meta{name="a-tags-input-clear"}
::

::docs-data-attributes-table
---
data:
  - attribute: "[data-disabled]"
    values: Present when disabled
---
::

## Examples

### Paste behavior

You can automatically add tags on paste by passing the `add-on-paste` prop.

```vue {8}
<script setup lang="ts">
import { ATagsInputRoot } from 'akar';
</script>

<template>
  <ATagsInputRoot
    v-model="modelValue"
    add-on-paste
  >
    …
  </ATagsInputRoot>
</template>
```

### Multiple delimiters

You can pass `RegExp` as `delimiter` to allow multiple characters to trigger addition of a new tag. When `add-on-paste` is passed it will be also used to split tags for `@paste` event.

```vue {4-5,11}
<script setup lang="ts">
import { ATagsInputInput, ATagsInputItem, ATagsInputItemDelete, ATagsInputItemText, ATagsInputRoot } from 'akar';

// split by space, comma, semicolon, tab, or newline
const delimiter = /[ ,;\t\n\r]+/;
</script>

<template>
  <ATagsInputRoot
    v-model="modelValue"
    :delimiter="delimiter"
    add-on-paste
  >
    …
  </ATagsInputRoot>
</template>
```

## Accessibility

### Keyboard Interactions

::docs-keyboard-table
---
data:
  - keys:
      - Delete
    description: When tag is active, remove it and set the tag on right active.
  - keys:
      - Backspace
    description: When tag is active, remove it and set the tag on left active. If
      there are no tags to the left, either the next tags gets focus, or the
      input.
  - keys:
      - ArrowRight
    description: Set the next tag active.
  - keys:
      - ArrowLeft
    description: Set the previous tag active.
  - keys:
      - Home
    description: Set the first tag active.
  - keys:
      - End
    description: Set the last tag active.
name: keyboard-a-switch
---
::


# Time Field

::docs-component-example{name="a-time-field"}
::

## Features

::docs-highlights
---
features:
  - Full keyboard navigation.
  - Can be controlled or uncontrolled.
  - Focus is fully managed.
  - Localization support.
  - Highly composable.
  - Accessible by default.
---
::

## Preface

The component depends on the [@internationalized/date](https://react-spectrum.adobe.com/internationalized/date/index.html){rel="nofollow"} package, which solves a lot of the problems that come with working with dates and times in JavaScript.

We highly recommend reading through the documentation for the package to get a solid feel for how it works, and you'll need to install it in your project to use the date-related components.

## Installation

Install the date package.

::code-group{sync="pm"}
```bash [pnpm]
pnpm add @internationalized/date
```

```bash [npm]
npm install @internationalized/date
```

```bash [bun]
bun add @internationalized/date
```
::

## Anatomy

Import all parts and piece them together.

```vue
<script setup>
import {
  ATimeFieldInput,
  ATimeFieldRoot,
} from 'akar';
</script>

<template>
  <ATimeFieldRoot>
    <ATimeFieldInput />
  </ATimeFieldRoot>
</template>
```

## Pohon

::docs-akar-to-pohon
---
to: https://akar.vinicunca.dev/docs/pohon/components/input-time
---
::

## API Reference

### Root

Contains all the parts of a time field

::docs-component-meta{name="a-time-field-root"}
::

::data-attributes-table
---
data:
  - attribute: "[data-readonly]"
    values: Present when readonly
  - attribute: "[data-disabled]"
    values: Present when disabled
  - attribute: "[data-invalid]"
    values: Present when invalid
---
::

### Input

Contains the time field segments

::docs-component-meta{name="a-time-field-input"}
::

::docs-data-attributes-table
---
data:
  - attribute: "[data-disabled]"
    values: Present when disabled
  - attribute: "[data-invalid]"
    values: Present when invalid
  - attribute: "[data-placeholder]"
    values: Present when no value is set
---
::

## Accessibility

### Keyboard Interactions

::docs-keyboard-table
---
data:
  - keys:
      - Tab
    description: When focus moves onto the time field, focuses the first segment.
  - keys:
      - ArrowLeft
      - ArrowRight
    description: Navigates between the time field segments.
  - keys:
      - ArrowUp
      - ArrowDown
    description: Increments/changes the value of the segment.
  - keys:
      - 0-9
    description: When the focus is on a numeric `ATimeFieldInput`, it types in
      number and focuses the next segment if the next input would result in an
      invalid value.
  - keys:
      - Backspace
    description: Deletes a digit from the focused numeric segments.
  - keys:
      - A
      - P
    description: When the focus is on the day period, it sets it to AM or PM.
name: keyboard-a-time-field
---
::


# Toast

::docs-component-example{name="a-toast"}
::

## Features

::docs-highlights
---
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.
---
::

## Anatomy

Import the component.

```vue
<script setup lang="ts">
import { AToastAction, AToastClose, AToastDescription, AToastProvider, AToastRoot, AToastTitle, AToastViewport } from 'akar';
</script>

<template>
  <AToastProvider>
    <AToastRoot>
      <AToastTitle />
      <AToastDescription />
      <AToastAction />
      <AToastClose />
    </AToastRoot>

    <AToastViewport />
  </AToastProvider>
</template>
```

## Pohon

::docs-akar-to-pohon
---
to: https://akar.vinicunca.dev/docs/pohon/components/toast
---
::

## API Reference

### Provider

The provider that wraps your toasts and toast viewport. It usually wraps the application.

::docs-component-meta{name="a-toast-provider"}
::

### 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.

::docs-component-meta{name="a-toast-viewport"}
::

### Root

The toast that automatically closes. It should not be held open to [acquire a user response](https://akar.vinicunca.dev/docs/akar/components/toast#action).

::docs-presence-tip
::

::docs-component-meta{name="a-toast-root"}
::

::docs-data-attributes-table
---
data:
  - attribute: "[data-state]"
    values:
      - open
      - closed
  - attribute: "[data-swipe-direction]"
    values:
      - up
      - down
      - left
      - right
  - attribute: "[data-swipe]"
    values:
      - start
      - move
      - cancel
      - end
---
::

::docs-css-variables-table
---
data:
  - cssVariable: --akar-toast-swipe-move-x
    description: The offset position of the toast when horizontally swiping
  - cssVariable: --akar-toast-swipe-move-y
    description: The offset position of the toast when vertically swiping
  - cssVariable: --akar-toast-swipe-end-x
    description: The offset end position of the toast after horizontally swiping
  - cssVariable: --akar-toast-swipe-end-y
    description: The offset end position of the toast after vertically swiping
---
::

### Portal

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

::docs-component-meta{name="a-toast-portal"}
::

### Title

An optional title for the toast

::docs-component-meta{name="a-toast-title"}
::

### Description

The toast message.

::docs-component-meta{name="a-toast-description"}
::

### 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](https://www.w3.org/TR/UNDERSTANDING-WCAG20/time-limits-required-behaviors.html){rel="nofollow"}.

When obtaining a user response is necessary, portal an ["AlertDialog"](https://akar.vinicunca.dev/docs/akar/components/alert-dialog) styled as a toast into the viewport instead.

::docs-component-meta{name="a-toast-action"}
::

### Close

A button that allows users to dismiss the toast before its duration has elapsed.

::docs-component-meta{name="a-toast-close"}
::

## Examples

### Custom hotkey

Override the default hotkey using the `event.code` value for each key from [keycode.info](https://keycode.info/){rel="nofollow"}.

```vue {4}
<template>
  <AToastProvider>
    ...
    <AToastViewport :hotkey="['altKey', 'KeyT']" />
  </AToastProvider>
</template>
```

### Custom duration

Customise the duration of a toast to override the provider value.

```vue {2}
<template>
  <AToastRoot :duration="3000">
    <AToastDescription>Saved!</AToastDescription>
  </AToastRoot>
</template>
```

### 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](https://akar.vinicunca.dev/docs/akar/components/toast#imperative-api).

```vue {3,8}
<template>
  <div>
    <form @submit="count++">
      ...
      <button>save</button>
    </form>

    <AToastRoot
      v-for="(_, index) in count"
      :key="index"
    >
      <AToastDescription>Saved!</AToastDescription>
    </AToastRoot>
  </div>
</template>
```

### Animating swipe gesture

Combine `--akar-toast-swipe-move-[x|y]` and `--akar-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:

```vue {2}
<template>
  <AToastProvider swipe-direction="right">
    <AToastRoot class="AToastRoot">
      ...
    </AToastRoot>
    <AToastViewport />
  </AToastProvider>
</template>
```

```css {2-3,5,9,15}
/* styles.css */
.AToastRoot[data-swipe='move'] {
  transform: translateX(var(--akar-toast-swipe-move-x));
}
.AToastRoot[data-swipe='cancel'] {
  transform: translateX(0);
  transition: transform 200ms ease-out;
}
.AToastRoot[data-swipe='end'] {
  animation: slideRight 100ms ease-out;
}

@keyframes slideRight {
  from {
    transform: translateX(var(--akar-toast-swipe-end-x));
  }
  to {
    transform: translateX(100%);
  }
}
```

## Accessibility

Adheres to the [`aria-live` requirements](https://www.w3.org/TR/wai-aria/#aria-live){rel="nofollow"}.

### 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`. AToasts 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.

```vue {2,7}
<template>
  <AToastRoot type="foreground">
    <AToastDescription>File removed successfully.</AToastDescription>
    <AToastClose>Dismiss</AToastClose>
  </AToastRoot>

  <AToastRoot type="background">
    <AToastDescription>We've just released akar</AToastDescription>
    <AToastClose>Dismiss</AToastClose>
  </AToastRoot>
</template>
```

### 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.

```vue {5,11,13}
<template>
  <AToastRoot type="background">
    <AToastTitle>Upgrade Available!</AToastTitle>
    <AToastDescription>We've just released akar</AToastDescription>
    <AToastAction alt-text="Goto account settings to upgrade">
      Upgrade
    </AToastAction>
    <AToastClose>Dismiss</AToastClose>
  </AToastRoot>

  <AToastRoot
    type="foreground"
    :duration="10000"
  >
    <AToastDescription>File removed successfully.</AToastDescription>
    <AToastAction alt-text="Undo (Alt+U)">
      Undo <kbd>Alt</kbd>+<kbd>U</kbd>
    </AToastAction>
    <AToastClose>Dismiss</AToastClose>
  </AToastRoot>
</template>
```

### Close icon button

When providing an icon (or font icon), remember to label it correctly for screen reader users.

```vue {4-5}
<template>
  <AToastRoot type="foreground">
    <AToastDescription>Saved!</AToastDescription>
    <AToastClose aria-label="Close">
      <span aria-hidden="true">×</span>
    </AToastClose>
  </AToastRoot>
</template>
```

### Keyboard Interactions

::docs-keyboard-table
---
data:
  - keys:
      - F8
    description: Focuses toasts viewport.
  - keys:
      - Tab
    description: Moves focus to the next focusable element.
  - keys:
      - Shift + Tab
    description: Moves focus to the previous focusable element.
  - keys:
      - Space
    description: When focus is on a `AToastAction` or `AToastClose`, closes the toast.
  - keys:
      - Enter
    description: When focus is on a `AToastAction` or `AToastClose`, closes the toast.
  - keys:
      - Esc
    description: When focus is on a `AToast`, closes the toast.
name: keyboard-a-toast
---
::

## Custom APIs

### Abstract parts

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

#### Usage

```vue
<script setup lang="ts">
import AToast from './your-toast.vue';
</script>

<template>
  <AToast
    title="Upgrade available"
    content="We've just released Radix 3.0!"
  >
    <button @click="handleUpgrade">
      Upgrade
    </button>
  </AToast>
</template>
```

#### Implementation

```vue
// your-toast.vue
<script setup lang="ts">
import { AToastAction, AToastClose, AToastDescription, AToastRoot, AToastTitle } from 'akar';

defineProps<{
  title: string;
  content: string;
}>();
</script>

<template>
  <AToastRoot>
    <AToastTitle v-if="title">
      {{ title }}
    </AToastTitle>
    <AToastDescription v-if="content">
      {{ content }}
    </AToastDescription>
    <AToastAction
      as-child
      alt-text="toast"
    >
      <slot />
    </AToastAction>
    <AToastClose aria-label="Close">
      <span aria-hidden="true">×</span>
    </AToastClose>
  </AToastRoot>
</template>
```

### Imperative API

Create your own imperative API to allow [toast duplication](https://akar.vinicunca.dev/docs/akar/components/toast#duplicate-toasts) if preferred.

#### Usage

```vue
<script setup lang="ts">
import AToast from './your-toast.vue';

const savedRef = ref<InstanceType<typeof AToast>>();
</script>

<template>
  <div>
    <form @submit="savedRef.publish()">
      ...
    </form>
    <AToast ref="savedRef">
      Saved successfully!
    </AToast>
  </div>
</template>
```

#### Implementation

```vue
// your-toast.vue
<script setup lang="ts">
import { AToastClose, AToastDescription, AToastRoot } from 'akar';
import { ref } from 'vue';

const count = ref(0);

function publish() {
  count.value++;
}

defineExpose({
  publish
});
</script>

<template>
  <AToastRoot
    v-for="index in count"
    :key="index"
  >
    <AToastDescription>
      <slot />
    </AToastDescription>
    <AToastClose>Dismiss</AToastClose>
  </AToastRoot>
</template>
```


# Toggle

::docs-component-example{name="a-toggle"}
::

## Features

::docs-highlights
---
features:
  - Full keyboard navigation.
  - Can be controlled or uncontrolled.
---
::

## Anatomy

Import the component.

```vue
<script setup>
import { AToggle } from 'akar';
</script>

<template>
  <AToggle />
</template>
```

## API Reference

### Root

The toggle.

::docs-component-meta{name="a-toggle"}
::

::docs-data-attribute-table
---
data:
  - attribute: "[data-state]"
    values:
      - on
      - off
  - attribute: "[data-disabled]"
    values: Present when disabled
---
::

## Accessibility

### Keyboard Interactions

::docs-keyboard-table
---
data:
  - keys:
      - Space
    description: Activates/deactivates the toggle.
  - keys:
      - Enter
    description: Activates/deactivates the toggle.
name: keyboard-a-toggle
---
::


# Toggle Group

::docs-component-example{name="a-toggle-group"}
::

## Features

::docs-highlights
---
features:
  - Full keyboard navigation.
  - Supports horizontal/vertical orientation.
  - Support single and multiple pressed buttons.
  - Can be controlled or uncontrolled.
---
::

## Anatomy

Import the component.

```vue
<script setup>
import { AToggleGroupItem, AToggleGroupRoot } from 'akar';
</script>

<template>
  <AToggleGroupRoot>
    <AToggleGroupItem />
  </AToggleGroupRoot>
</template>
```

## API Reference

### Root

Contains all the parts of a toggle group.

::docs-component-meta{name="a-toggle-group-root"}
::

::docs-data-attribute-table
---
data:
  - attribute: "[data-orientation]"
    values:
      - vertical
      - horizontal
---
::

### Item

An item in the group.

::docs-component-meta{name="a-toggle-group-item"}
::

::docs-data-attribute-table
---
data:
  - attribute: "[data-state]"
    values:
      - on
      - off
  - attribute: "[data-disabled]"
    values: Present when disabled
  - attribute: "[data-orientation]"
    values:
      - vertical
      - horizontal
---
::

## Examples

### Ensuring there is always a value

You can control the component to ensure a value.

```vue {5,10-13}
<script setup>
import { AToggleGroupItem, AToggleGroupRoot } from 'akar';
import { ref } from 'vue';

const value = ref('left');
</script>

<template>
  <AToggleGroupRoot
    :model-value="value"
    @update:model-value="(val) => {
      if (val) value = val
    }"
  >
    <AToggleGroupItem value="left">
      <TextAlignLeftIcon />
    </AToggleGroupItem>
    <AToggleGroupItem value="center">
      <TextAlignCenterIcon />
    </AToggleGroupItem>
    <AToggleGroupItem value="right">
      <TextAlignRightIcon />
    </AToggleGroupItem>
  </AToggleGroupRoot>
</template>
```

## Accessibility

Uses [roving tabindex](https://www.w3.org/TR/wai-aria-practices-1.2/examples/radio/radio.html){rel="nofollow"} to manage focus movement among items.

### Keyboard Interactions

::docs-keyboard-table
---
data:
  - keys:
      - Tab
    description: Moves focus to either the pressed item or the first item in the group.
  - keys:
      - Space
    description: Activates/deactivates the item.
  - keys:
      - Enter
    description: Activates/deactivates the item.
  - keys:
      - ArrowDown
    description: Moves focus to the next item in the group.
  - keys:
      - ArrowRight
    description: Moves focus to the next item in the group.
  - keys:
      - ArrowUp
    description: Moves focus to the previous item in the group.
  - keys:
      - ArrowLeft
    description: Moves focus to the previous item in the group.
  - keys:
      - Home
    description: Moves focus to the first item.
  - keys:
      - End
    description: Moves focus to the last item.
name: keyboard-a-toggle-group
---
::


# Tooltip

::docs-component-example{name="a-tooltip"}
::

## Features

::docs-highlights
---
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.
---
::

## Anatomy

Import all parts and piece them together.

```vue
<script setup lang="ts">
import { ATooltipArrow, ATooltipContent, ATooltipPortal, ATooltipProvider, ATooltipRoot, ATooltipTrigger } from 'akar';
</script>

<template>
  <ATooltipProvider>
    <ATooltipRoot>
      <ATooltipTrigger />
      <ATooltipPortal>
        <ATooltipContent>
          <ATooltipArrow />
        </ATooltipContent>
      </ATooltipPortal>
    </ATooltipRoot>
  </ATooltipProvider>
</template>
```

## Pohon

::docs-akar-to-pohon
---
to: https://akar.vinicunca.dev/docs/pohon/components/tooltip
---
::

## API Reference

### Provider

Wraps your app to provide global functionality to your tooltips.

::docs-component-meta{name="a-tooltip-provider"}
::

### Root

Contains all the parts of a tooltip.

::docs-component-meta{name="a-tooltip-root"}
::

### Trigger

The button that toggles the tooltip. By default, the `ATooltipContent` will position itself against the trigger.

::docs-component-meta{name="a-tooltip-trigger"}
::

::docs-data-attributes-table
---
data:
  - attribute: "[data-state]"
    values:
      - closed
      - delayed-open
      - instant-open
---
::

### Portal

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

::docs-component-meta{name="a-tooltip-portal"}
::

### Content

The component that pops out when the tooltip is open.

::docs-presence-tip
::

::docs-component-meta{name="a-tooltip-content"}
::

::docs-data-attributes-table
---
data:
  - attribute: "[data-state]"
    values:
      - closed
      - delayed-open
      - instant-open
  - attribute: "[data-side]"
    values:
      - left
      - right
      - bottom
      - top
  - attribute: "[data-align]"
    values:
      - start
      - end
      - center
---
::

::docs-css-variables-table
---
data:
  - cssVariable: --akar-tooltip-content-transform-origin
    description: The `transform-origin` computed from the content and arrow
      positions/offsets
  - cssVariable: --akar-tooltip-content-available-width
    description: The remaining width between the trigger and the boundary edge
  - cssVariable: --akar-tooltip-content-available-height
    description: The remaining height between the trigger and the boundary edge
  - cssVariable: --akar-tooltip-trigger-width
    description: The width of the trigger
  - cssVariable: --akar-tooltip-trigger-height
    description: 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 `ATooltipContent`. Must be rendered inside `ATooltipContent`.

::docs-component-meta{name="a-tooltip-arrow"}
::

## Examples

### Configure globally

Use the `Provider` to control `delayDuration` and `skipDelayDuration` globally.

```vue {7-8}
<script setup>
import { ATooltipContent, ATooltipProvider, ATooltipRoot, ATooltipTrigger } from 'akar';
</script>

<template>
  <ATooltipProvider
    :delay-duration="800"
    :skip-delay-duration="500"
  >
    <ATooltipRoot>
      <ATooltipTrigger>…</ATooltipTrigger>
      <ATooltipContent>…</ATooltipContent>
    </ATooltipRoot>
    <ATooltipRoot>
      <ATooltipTrigger>…</ATooltipTrigger>
      <ATooltipContent>…</ATooltipContent>
    </ATooltipRoot>
  </ATooltipProvider>
</template>
```

### Show instantly

Use the `delayDuration` prop to control the time it takes for the tooltip to open.

```vue {6}
<script setup>
import { ATooltipContent, ATooltipRoot, ATooltipTrigger } from 'akar';
</script>

<template>
  <ATooltipRoot :delay-duration="0">
    <ATooltipTrigger>…</ATooltipTrigger>
    <ATooltipContent>…</ATooltipContent>
  </ATooltipRoot>
</template>
```

### Displaying a tooltip from a disabled button

Since disabled buttons don't fire events, you need to:

- Render the `Trigger` as `span`.
- Ensure the `button` has no `pointerEvents`.

```vue {7-11}
<script setup>
import { ATooltipContent, ATooltipRoot, ATooltipTrigger } from 'akar';
</script>

<template>
  <ATooltipRoot>
    <ATooltipTrigger as-child>
      <span tabindex="0">
        <button
          disabled
          style="{ pointerEvents: 'none' }"
        >…</button>
      </span>
    </ATooltipTrigger>
    <ATooltipContent>…</ATooltipContent>
  </ATooltipRoot>
</template>
```

### 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 `--akar-tooltip-trigger-width` and `--akar-tooltip-content-available-height` to support this. Use them to constrain the content dimensions.

```vue {10}
<script setup>
import { ATooltipContent, ATooltipRoot, ATooltipTrigger } from 'akar';
</script>

<template>
  <ATooltipRoot>
    <ATooltipTrigger>…</ATooltipTrigger>
    <ATooltipPortal>
      <ATooltipContent
        class="ATooltipContent"
        :side-offset="5"
      >
        …
      </ATooltipContent>
    </ATooltipPortal>
  </ATooltipRoot>
</template>
```

```css {3-4}
/* styles.css */
.ATooltipContent {
  width: var(--akar-tooltip-trigger-width);
  max-height: var(--akar-tooltip-content-available-height);
}
```

### Origin-aware animations

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

```vue {8}
<script setup>
import { ATooltipContent, ATooltipRoot, ATooltipTrigger } from 'akar';
</script>

<template>
  <ATooltipRoot>
    <ATooltipTrigger>…</ATooltipTrigger>
    <ATooltipContent class="ATooltipContent">
      …
    </ATooltipContent>
  </ATooltipRoot>
</template>
```

```css {3-4}
/* styles.css */
.ATooltipContent {
  transform-origin: var(--akar-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.

```vue {8}
<script setup>
import { ATooltipContent, ATooltipRoot, ATooltipTrigger } from 'akar';
</script>

<template>
  <ATooltipRoot>
    <ATooltipTrigger>…</ATooltipTrigger>
    <ATooltipContent class="ATooltipContent">
      …
    </ATooltipContent>
  </ATooltipRoot>
</template>
```

```css {6,9}
/* styles.css */
.ATooltipContent {
  animation-duration: 0.6s;
  animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
}
.ATooltipContent[data-side='top'] {
  animation-name: slideUp;
}
.ATooltipContent[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

::docs-keyboard-table
---
data:
  - keys:
      - Tab
    description: Opens/closes the tooltip without delay.
  - keys:
      - Space
    description: If open, closes the tooltip without delay.
  - keys:
      - Enter
    description: If open, closes the tooltip without delay.
  - keys:
      - Escape
    description: If open, closes the tooltip without delay.
name: keyboard-a-tooltip
---
::

## 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 `ATooltip` parts and introduces a new `content` prop.

#### Usage

```vue
<script setup lang="ts">
import { ATooltip } from './your-tooltip';
</script>

<template>
  <ATooltip content="ATooltip content">
    <button>ATooltip trigger</button>
  </ATooltip>
</template>
```

#### Implementation

Use the [`asChild` prop](https://akar.vinicunca.dev/docs/akar/guides/composition) to convert the trigger part into a slottable area. It will replace the trigger with the child that gets passed to it.

```vue {13-15}
<!-- your-tooltip.vue  -->
<script setup lang="ts">
import type { ATooltipRootEmits, ATooltipRootProps } from 'akar';
import { ATooltipArrow, ATooltipContent, ATooltipRoot, ATooltipTrigger, useForwardPropsEmits } from 'akar';

const props = defineProps<ATooltipRootProps & { content?: string }>();
const emits = defineEmits<ATooltipRootEmits>();

const forward = useForwardPropsEmits(props, emits);
</script>

<template>
  <ATooltipRoot v-bind="forward">
    <ATooltipTrigger as-child>
      <slot />
    </ATooltipTrigger>
    <ATooltipContent
      side="top"
      align="center"
    >
      {{ content }}
      <ATooltipArrow
        :width="11"
        :height="5"
      />
    </ATooltipContent>
  </ATooltipRoot>
</template>
```


# Tree

::docs-component-example{name="a-tree"}
::

## Features

::docs-highlights
---
features:
  - Can be controlled or uncontrolled.
  - Focus is fully managed.
  - Full keyboard navigation.
  - Supports Right to Left direction.
  - Supports multiple selection.
  - Different selection behavior.
---
::

## Anatomy

Import all parts and piece them together.

```vue
<script setup>
import { ATreeItem, ATreeRoot, ATreeVirtualizer } from 'akar';
</script>

<template>
  <ATreeRoot>
    <ATreeItem />

    <!-- or with virtual -->
    <ATreeVirtualizer>
      <ATreeItem />
    </ATreeVirtualizer>
  </ATreeRoot>
</template>
```

## Pohon

::docs-akar-to-pohon{to="https://akar.vinicunca.dev/docs/pohon/components/tree"}
::

## API Reference

### Root

Contains all the parts of a tree.

::docs-component-meta{name="a-tree-root"}
::

### Item

The item component.

::docs-component-meta{name="a-tree-item"}
::

::docs-data-attributes-table
---
data:
  - attribute: "[data-indent]"
    values: Number
  - attribute: "[data-expanded]"
    values: Present when expanded
  - attribute: "[data-selected]"
    values: Present when selected
---
::

### Virtualizer

Virtual container to achieve list virtualization.

::docs-component-meta{name="a-tree-virtualizer"}
::

## Examples

### Selecting multiple items

The `ATree` component allows you to select multiple items. You can enable this by providing an array of values instead of a single value and set `multiple="true"`.

```vue {12,17-18}
<script setup lang="ts">
import { ATreeRoot } from 'akar';
import { ref } from 'vue';

const people = [
  { id: 1, name: 'Durward Reynolds' },
  { id: 2, name: 'Kenton Towne' },
  { id: 3, name: 'Therese Wunsch' },
  { id: 4, name: 'Benedict Kessler' },
  { id: 5, name: 'Katelyn Rohan' },
];
const selectedPeople = ref([people[0], people[1]]);
</script>

<template>
  <ATreeRoot
    v-model="selectedPeople"
    multiple
  >
    ...
  </ATreeRoot>
</template>
```

### Virtual List

Rendering a long list of item can slow down the app, thus using virtualization would significantly improve the performance.

See the [virtualization guide](https://akar.vinicunca.dev/docs/akar/guides/virtualization.md) for more general info on virtualization.

```vue {8-15}
<script setup lang="ts">
import { ATreeItem, ATreeRoot, ATreeVirtualizer } from 'akar';
import { ref } from 'vue';
</script>

<template>
  <ATreeRoot :items>
    <ATreeVirtualizer
      v-slot="{ item }"
      :text-content="(opt) => opt.name"
    >
      <ATreeItem v-bind="item.bind">
        {{ person.name }}
      </ATreeItem>
    </ATreeVirtualizer>
  </ATreeRoot>
</template>
```

### With Checkbox

Some `ATree` component might want to show `toggled/indeterminate` checkbox. We can change the behavior of the `ATree` component by using a few props and `preventDefault` event.

We set `propagateSelect` to `true` because we want the parent checkbox to select/deselect it's descendants. Then, we add a checkbox that triggers `select` event.

```vue {10-11,17-25,27-30}
<script setup lang="ts">
import { ATreeItem, ATreeRoot } from 'akar';
import { ref } from 'vue';
</script>

<template>
  <ATreeRoot
    v-slot="{ flattenItems }"
    :items
    multiple
    propagate-select
  >
    <ATreeItem
      v-for="item in flattenItems"
      :key="item._id"
      v-bind="item.bind"
      v-slot="{ handleSelect, isSelected, isIndeterminate }"
      @select="(event) => {
        if (event.detail.originalEvent.type === 'click')
          event.preventDefault()
      }"
      @toggle="(event) => {
        if (event.detail.originalEvent.type === 'keydown')
          event.preventDefault()
      }"
    >
      <Icon
        v-if="item.hasChildren"
        icon="radix-icons:chevron-down"
      />

      <button
        tabindex="-1"
        @click.stop
        @change="handleSelect"
      >
        <Icon
          v-if="isSelected"
          icon="radix-icons:check"
        />
        <Icon
          v-else-if="isIndeterminate"
          icon="radix-icons:dash"
        />
        <Icon
          v-else
          icon="radix-icons:box"
        />
      </button>

      <div class="pl-2">
        {{ item.value.title }}
      </div>
    </ATreeItem>
  </ATreeRoot>
</template>
```

### Nested ATree Node

The default example shows flatten tree items and nodes, this enables [Virtualization](https://akar.vinicunca.dev/docs/akar/components/tree.html#virtual-list) and custom feature such as Drag & Drop easier. However, you can also build it to have nested DOM node.

In `ATree.vue`,

```vue
<script setup lang="ts">
import { ATreeItem } from 'akar';

interface ATreeNode {
  title: string;
  icon: string;
  children?: Array<ATreeNode>;
}

withDefaults(defineProps<{
  treeItems: Array<ATreeNode>;
  level?: number;
}>(), { level: 0 });
</script>

<template>
  <li
    v-for=" tree in treeItems"
    :key="tree.title"
  >
    <ATreeItem
      v-slot="{ isExpanded }"
      as-child
      :level="level"
      :value="tree"
    >
      <button>…</button>

      <ul v-if="isExpanded && tree.children">
        <ATree
          :tree-items="tree.children"
          :level="level + 1"
        />
      </ul>
    </ATreeItem>
  </li>
</template>
```

In `CustomATree.vue`

```vue
<template>
  <ATreeRoot
    :items="items"
    :get-key="(item) => item.title"
  >
    <ATree :tree-items="items" />
  </ATreeRoot>
</template>
```

### Custom children schema

By default, `<ATreeRoot />` expects you to provide the list of node's children by passing a list of `children` for every node. You can override that by providing the `getChildren` prop.

::note
If the node doesn't have any children, `getChildren` should return `undefined` instead of an empty array.
::

```vue {22}
<script setup lang="ts">
import { ATreeRoot } from 'akar';
import { ref } from 'vue';

interface FileNode {
  title: string;
  icon: string;
}

interface DirectoryNode {
  title: string;
  icon: string;
  directories?: Array<DirectoryNode>;
  files?: Array<FileNode>;
}
</script>

<template>
  <ATreeRoot
    :items="items"
    :get-key="(item) => item.title"
    :get-children="(item) => (!item.files) ? item.directories : (!item.directories) ? item.files : [...item.directories, ...item.files]"
  >
    ...
  </ATreeRoot>
</template>
```

### Draggable/Sortable ATree

For more complex draggable `ATree` component, in this example we will be using [pragmatic-drag-and-drop](https://github.com/atlassian/pragmatic-drag-and-drop){rel="nofollow"}, as the core package for handling dnd.

## Accessibility

Adheres to the [ATree WAI-ARIA design pattern](https://www.w3.org/WAI/ARIA/apg/patterns/treeview/){rel="nofollow"}.

### Keyboard Interactions

::docs-keyboard-table
---
data:
  - keys:
      - Enter
      - Space
    description: When highlight on <code>ATreeItem</code>, selects the focused item.
  - keys:
      - ArrowDown
    description: When focus is on <code>ATreeItem</code>, moves focus to the next item.
  - keys:
      - ArrowUp
    description: When focus is on <code>ATreeItem</code>, moves focus to the previous item.
  - keys:
      - ArrowRight
    description: When focus is on a closed <code>ATreeItem</code> (node), it opens
      the node without moving focus. When on an open node, it moves focus to the
      first child node. When on an end node, it does nothing.
  - keys:
      - ArrowLeft
    description: When focus is on an open <code>ATreeItem</code> (node), closes the
      node. When focus is on a child node that is also either an end node or a
      closed node, moves focus to its parent node. When focus is on a root node
      that is also either an end node or a closed node, does nothing.
  - keys:
      - Home
      - PageUp
    description: <span>Moves focus first <code>ATreeItem</code></span>
  - keys:
      - End
      - PageDown
    description: <span>Moves focus last <code>ATreeItem</code></span>
name: keyboard-a-tree
---
::


# Config Provider

::docs-highlights
---
features:
  - Enables all primitives to inherit global reading direction.
  - Enables changing the behavior of scroll body when setting body lock.
  - Much more controls to prevent layout shifts.
---
::

## Anatomy

Import the component.

```vue
<script setup lang="ts">
import { AConfigProvider } from 'akar';
</script>

<template>
  <AConfigProvider>
    <slot />
  </AConfigProvider>
</template>
```

## API Reference

### Config Provider

When creating localized apps that require right-to-left (RTL) reading direction, you need to wrap your application with the `AConfigProvider` component to ensure all of the primitives adjust their behavior based on the `dir` prop.

You can also change the global behavior of `bodylock` for components such as `AAlert`, `ADropdownMenu` and etc to fit your layout to prevent any content shifts.

::docs-component-meta{name="a-config-provider"}
::

## Example

Use the config provider.

Set global direction to `rtl`, and scroll body behavior to `false` (will not set any padding/margin).

```vue
<script setup lang="ts">
import { AConfigProvider } from 'akar';
</script>

<template>
  <AConfigProvider
    dir="rtl"
    :scroll-body="false"
  >
    <slot />
  </AConfigProvider>
</template>
```


# Focus Scope

Focus Scope provides enhanced control over keyboard focus management within component boundaries. It can trap focus within its container and optionally loop focus navigation, making it ideal for modal interfaces and other interactive components that need to manage focus states.

## API Reference

::docs-component-meta{name="a-focus-scope"}
::

## Example

Basic usage with focus trapping

```vue {2}
<template>
  <AFocusScope :trapped="true">
    <div>
      <button>Action 1</button>
      <button>Action 2</button>
      <button>Close</button>
    </div>
  </AFocusScope>
</template>
```

### With Focus Looping

Enable both trapping and looping for complete focus management:

```vue {2}
<template>
  <AFocusScope
    :trapped="true"
    :loop="true"
  >
    <div>
      <button
        v-for="item in items"
        :key="item.id"
      >
        {{ item.label }}
      </button>
    </div>
  </AFocusScope>
</template>
```

### Handling Focus Event

```vue {2-5}
<script setup>
function handleMountFocus(event) {
  // Prevent default auto-focus behavior if needed
  event.preventDefault();
}
</script>

<template>
  <AFocusScope
    @mount-auto-focus="handleMountFocus"
    @unmount-auto-focus="handleUnmountFocus"
  >
    <div>
      …
    </div>
  </AFocusScope>
</template>
```

:br

::warning
When using trapped mode, ensure there is always at least one focusable element within the scope to prevent focus from being trapped in an inaccessible state.
::


# Presence

::note
The difference between this component from [Vue Transition](https://vuejs.org/guide/built-ins/transition.html#transition){rel="nofollow"} is it accepts css animation, and control the visibility of element.
::

Presence component provides enhanced control over element mounting/unmounting. It ensures animations and transitions complete before removing elements from the DOM, making it perfect for animated UI components.

## API Reference

::docs-props-table
---
meta-props:
  - name: present
    description: <p>Conditional to mount or unmount the child element. Similar to
      <code>v-if</code></p>
    type: boolean
    required: true
  - name: forceMount
    description: <p>Force the element to render all the time.\n\nUseful for
      programmatically render grandchild component with the exposed
      <code>present</code></p>
    type: boolean
    required: false
    default: false
---
::

::docs-emits-table
---
meta-events:
  - name: enter
    description: <p>Event handler called when the enter animation has started</p>
    type: CustomEvent
  - name: after-enter
    description: <p>Event handler called when the enter animation has finished</p>
    type: CustomEvent
  - name: leave
    description: <p>Event handler called when the leave animation has started</p>
    type: CustomEvent
  - name: after-leave
    description: <p>Event handler called when the leave animation has finished</p>
    type: CustomEvent
---
::

::tip
Read our [Animation Guide](https://akar.vinicunca.dev/docs/akar/guides/animation) to learn more about implementing animations with Presence component.
::

## Example

```vue {2,4-5}
<template>
  <APresence :present="isVisible">
    <div
      :data-state="isVisible ? 'open' : 'closed'"
      class="data-[state=open]:animate-fadeIn data-[state=closed]:animate-fadeOut"
    >
      <slot />
    </div>
  </APresence>
</template>
```

### Force Mount

When you need to ensure content is always rendered regardless of the present state:

```vue
<template>
  <APresence
    v-slot="{ present }"
    :present="isVisible"
    :force-mount="true"
  >
    <div>
      This content will always be rendered

      <div v-if="present">
        This content is hidden
      </div>
    </div>
  </APresence>
</template>
```


# Primitive

::description
Compose Akar's functionality onto alternative element types or your own Vue components.

::

When you are building a component, in some cases you might want to allow user to compose some functionalities onto the underlying element, or alternative element. This is where `Primitive` comes in handy as it expose this capability to the user.

## API Reference

::docs-props-table
---
meta-props:
  - name: as
    description: The element or component the current element should render as. Can
      be overwrite by `asChild`
    type: string | Component
    required: false
    default: div
  - name: asChild
    description: Change the default rendered element for the one passed as a child,
      merging their props and behavior.<br><br>Read our
      [Composition](/docs/akar/guides/composition) guide for more details.
    type: boolean
    required: false
    default: false
---
::

## Usage

### Changing `as` value

If you want to change the default element or component being render, you can set the default `as` when defining the props.

```vue
<script setup lang="ts">
import type { APrimitiveProps } from 'akar';
import { APrimitive } from 'akar';

const props = withDefaults(defineProps<APrimitiveProps>(), {
  as: 'span'
});
</script>

<template>
  <!-- Now this element will be rendered as `span` by default -->
  <APrimitive v-bind="props">
    ...
  </APrimitive>
</template>
```

### Render `asChild`

Change the default rendered element for the one passed as a child, merging their props and behavior. :br:br Read our [Composition](https://akar.vinicunca.dev/docs/akar/guides/composition) guide for more details.


# Roving Focus

::docs-component-example{name="a-roving-focus"}
::

::note
Learn more about roving tabindex in [Keyboard Navigation Inside Composite Components](https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/#x6-6-keyboard-navigation-inside-components){rel="nofollow"}
::

## Anatomy

Import all parts and piece them together.

```vue
<script setup>
import { ARovingFocusGroup, ARovingFocusItem } from 'akar';
</script>

<template>
  <ARovingFocusGroup>
    <ARovingFocusItem />
  </ARovingFocusGroup>
</template>
```

## API Reference

### Group

Contains all the parts of a Roving Focus

::docs-component-meta{name="a-roving-focus-group"}
::

::docs-data-attributes-table
---
data:
  - attribute: "[data-orientation]"
    values:
      - vertical
      - horizontal
      - undefined
---
::

### Item

The item that would inherit the roving tabindex

::docs-component-meta{name="a-roving-focus-item"}
::

::docs-data-attributes-table
---
data:
  - attribute: "[data-active]"
    values: Present when not active
  - attribute: "[data-disabled]"
    values: Present when not focusable
  - attribute: "[data-orientation]"
    values:
      - vertical
      - horizontal
      - undefined
---
::

## Examples

### Vertical orientation

```vue {2}
<template>
  <ARovingFocusGroup :orientation="'vertical'">
    …
  </ARovingFocusGroup>
</template>
```

### Loop

Use `loop` property to enable roving from last item to the first item, and vice versa.

```vue {2}
<template>
  <ARovingFocusGroup loop>
    …
  </ARovingFocusGroup>
</template>
```

### Initial focus item

Set `active` prop to item to initially focused item.

```vue {4}
<template>
  <ARovingFocusGroup>
    <ARovingFocusItem>1</ARovingFocusItem>
    <ARovingFocusItem active>2</ARovingFocusItem>
    <ARovingFocusItem>3</ARovingFocusItem>
  </ARovingFocusGroup>
</template>
```

### Unfocusable item

Set `focusable="false"` prop to item will prevent them from being focused.

```vue {4}
<template>
  <ARovingFocusGroup>
    <ARovingFocusItem>1</ARovingFocusItem>
    <ARovingFocusItem :focusable="false">2</ARovingFocusItem>
    <ARovingFocusItem>3</ARovingFocusItem>
  </ARovingFocusGroup>
</template>
```

## Accessibility

Adheres to the [Keyboard Navigation Inside Composite Components](https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/#x6-6-keyboard-navigation-inside-components){rel="nofollow"}.

### Keyboard Interactions

::docs-keyboard-table
---
data:
  - keys:
      - ArrowDown
    description: Moves focus to the next roving focus item in the group.
  - keys:
      - ArrowRight
    description: Moves focus to the next roving focus item in the group.
  - keys:
      - ArrowUp
    description: Moves focus to the previous roving focus item in the group.
  - keys:
      - ArrowLeft
    description: Moves focus to the previous roving focus item in the group.
  - keys:
      - Space
      - Enter
    description: Triggers click on the roving focus item.
name: keyboard-a-checkbox
---
::


# Slot

::note
The different between this component from [Vue native slot](https://vuejs.org/guide/components/slots.html){rel="nofollow"} is how it handles the `attributes` assigned to it.
::

Native slot treat any binded value as [Scoped Slots](https://vuejs.org/guide/components/slots.html#scoped-slots){rel="nofollow"}, where the values will be exposed to the parent template and be consumed.

But Akar's slot behave differently, it would merge all the assigned attributes onto it's immediate child.

## Example

Say we want to assign an `id` attribute to whatever component/element that was rendered, but Native slot will convert it into a scoped slot, and you will need to assign that id manually.

```vue
<!-- Native Slot -->
<!-- comp.vue -->
<template>
  <slot id="akar-01">
    ...
  </slot>
</template>

<!-- parent template -->
<template>
  <Comp v-slot="slotProps">
    <button :id="slotProps.id">...<button>
  <Comp>
<template>
```

(You can check out
[Vue SFC Playground](https://play.vuejs.org/#eNp9UrFOwzAQ/ZWTly4oUelWhUgFdYABKmD0EpJr45LYln1JK1X5d84OTQEB2/m9d+fnez6JlbVJ36FYisyXTlkCj9TZXGrVWuMITuBwCwNsnWlhxtLZRN2Z1o64FEkaTmGUFFKD1Fk6zuNJfCBsbVMQ8gkgq+f5xhnr0xWRU28doQelwTeG4FB4PSMoC+cUVmB6dFnKDbEx3BErrrmNjM4VO65N11RQFz2Cqm6kmF8vpMjST0XsjPa4zNLJirgS5Eujt2qX7L3RvINT0EpRslY16J4sKaO9FEuITOCKpjGHh4iR6/DqjJc1lu+/4Ht/DJgUG4ceXc/7mTgq3A5ppNcvj3jkeiJbU3UNq/8hn9GbpgseR9ltpyu2/UUX3d7HuJTevfr1kVD786OC0aAcol4KTi+s6a+nX+wukkXsk3rgLZ6TD5/oW9C895jpJZScvwUjP4IYPgAfN9Yc){rel="nofollow"} and see that the `id` wasn't being inherited.)

This would be troublesome if you want to ensure some attributes are being passed onto certain element, maybe for accessibility reason.

---

Alternatively, If you use `Slot` from Akar, the attributes assigned to the Slot component will be inherited by the immediate child element, but you will no longer have access to the `Scoped Slot`,

```vue
<!-- Akar Slot -->
<script setup lang="ts">
import { APrimitiveSlot } from 'akar';
</script>

<!-- comp.vue -->
<template>
  <APrimitiveSlot id="akar-01">
    ...
  </APrimitiveSlot>
</template>

<!-- parent template -->
<template>
  <Comp>
    <!-- id will be inherited -->
    <button>...<button>
  <Comp>
<template>
```


# Visually Hidden

::docs-highlights
---
features:
  - Visually hides content while preserving it for assistive technology.
---
::

## Anatomy

Import the component.

```vue
<script setup lang="ts">
import { AVisuallyHidden } from 'akar';
</script>

<template>
  <AVisuallyHidden>
    <slot />
  </AVisuallyHidden>
</template>
```

## Basic example

Use the visually hidden primitive.

```vue
<script setup lang="ts">
import { GearIcon } from '@radix-icons/vue';
import { AVisuallyHidden } from 'akar';
</script>

<template>
  <button>
    <GearIcon />
    <AVisuallyHidden>Settings</AVisuallyHidden>
  </button>
</template>
```

## API Reference

### Root

Anything you put inside this component will be hidden from the screen but will be announced by screen readers.

::docs-props-table
---
meta-props:
  - name: as
    description: The element or component the current element should render as. Can
      be overwrite by `asChild`
    type: string | Component
    default: span
  - name: asChild
    description: Change the default rendered element for the one passed as a child,
      merging their props and behavior.<br><br>Read our
      [Composition](/docs/akar/guides/composition) guide for more details.
    type: boolean
    default: false
---
::

## Accessibility

This is useful in certain scenarios as an alternative to traditional labelling with `aria-label` or `aria-labelledby`.


# useDateFormatter

More information on the DateFormatter [here](https://react-spectrum.adobe.com/internationalized/date/DateFormatter.html){rel="nofollow"}.

## Usage

```vue
<script setup lang="ts">
import type { DateValue } from '@internationalized/date';
import type { Ref } from 'vue';
import { CalendarDate, getLocalTimeZone } from '@internationalized/date';
import { toDate, useDateFormatter } from 'akar';
import { ref } from 'vue';

const value = ref(new CalendarDate(1995, 8, 18)) as Ref<DateValue>;
// provide the locale
const formatter = useDateFormatter('en');
</script>

<template>
  <span>
    <!-- output the month in short format. e.g.: Jan, Feb, etc. -->
    {{ formatter.custom(value.toDate(getLocalTimeZone()), { month: 'short' }) }}
  </span>
</template>
```


# useDirection

## Usage

```ts
import { useDirection } from 'akar';

// With ConfigProvider setup as follows
// <ConfigProvider dir="rtl">
const locale = useDirection(); // rtl
```

```ts
import { useDirection } from 'akar';

// With ConfigProvider setup as follows
// <ConfigProvider dir="rtl">
const locale = useDirection('ltr'); // ltr
```


# useLocale

## Usage

```ts
import { useLocale } from 'akar';

// With ConfigProvider setup as follows
// <ConfigProvider locale="fr-FR">
const locale = useLocale(); // fr-FR
```

```ts
import { useLocale } from 'akar';

// With ConfigProvider setup as follows
// <ConfigProvider locale="fr-FR">
const locale = useLocale('en-US'); // en-US
```


# useEmitAsProps

When you are building a wrapper for a component, one of the biggest painpoint is to forward all the emitted events from components.

By using this composables, it will convert the `emits` you've declared into an object of handlers that is acceptable by Vue component.

## Usage

```vue
<script setup lang="ts">
import { useEmitAsProps } from 'akar';

const emits = defineEmits<CompEmitType>();
const emitsAsProps = useEmitAsProps(emits);
</script>

<template>
  <Comp v-bind="emitsAsProps">
    ...
  </Comp>
</template>
```


# useFilter

`useFilter` provides utility functions for performing locale-aware string filtering using Intl.Collator. It ensures proper Unicode handling and allows customization via Intl.CollatorOptions.

## Options

You can customize the behavior using `Intl.CollatorOptions`. See [MDN Docs](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/Collator/Collator#options){rel="nofollow"} for more details.

```ts
const { startsWith } = useFilter({ sensitivity: 'base' });
console.log(startsWith('Résumé', 'resume')); // true (case-insensitive)
```

## Usage

### Example Usage

```ts
import { useFilter } from 'akar';

const { startsWith, endsWith, contains } = useFilter();

console.log(startsWith('hello', 'he')); // true
console.log(endsWith('hello', 'lo')); // true
console.log(contains('hello', 'ell')); // true
```

## Using `useFilter` in a Vue Component

```vue
<script setup>
import { ref } from 'vue';
import { useFilter } from '@/composables/useFilter';

const { contains } = useFilter();
const searchQuery = ref('');
const items = ref(['Apple', 'Banana', 'Cherry', 'Date']);

const filteredItems = computed(() =>
  items.value.filter((item) => contains(item, searchQuery.value))
);
</script>

<template>
  <div>
    <input
      v-model="searchQuery"
      placeholder="Search..."
    >
    <ul>
      <li
        v-for="item in filteredItems"
        :key="item"
      >
        {{ item }}
      </li>
    </ul>
  </div>
</template>
```


# useForwardExpose

When building a component, if we have a non-single root node component, the template refs will not return the DOM element via `$el` ([read more](https://vuejs.org/api/component-instance.html#el){rel="nofollow"}) , thus, we need to forward the `$el` in template ref for this component manually. Or in some case you want to target certain element as the expose element..

Furthermore, this composable extend the missing exposed `props` from the template refs.

## Usage

```vue
<script setup lang="ts">
import { useForwardExpose } from 'akar';

const selectedElementId = ref(1);
const { forwardRef } = useForwardExpose();
</script>

<template>
  <span>
    <!-- We want to expose div as the template ref's element -->
    <div :ref="forwardRef">
      ...
    </div>
  </span>
</template>
```


# useForwardProps

When you are building a wrapper for a component, in some cases you want to ignore Vue [Props Boolean Casting](https://vuejs.org/guide/components/props.html#boolean-casting){rel="nofollow"}.

You can either set default value as `undefined` for all the boolean field, or you can use this composable.

## Usage

```vue
<script setup lang="ts">
import { useForwardProps } from 'akar';

const props = defineProps<CompEmitProps>();
const forwarded = useForwardProps(props);
</script>

<template>
  <Comp v-bind="forwarded">
    ...
  </Comp>
</template>
```


# useForwardPropsEmits

This composable is just a wrapper for [useForwardProps](https://akar.vinicunca.dev/docs/akar/utilities/use-forward-props) & [useEmitAsProps](https://akar.vinicunca.dev/docs/akar/utilities/use-emit-as-props.html) composables. Doing so it returns only 1 object that is designed to be use with `v-bind` directly.

## Usage

```vue
<script setup lang="ts">
import { useForwardPropsEmits } from 'akar';

const props = defineProps<CompEmitProps>();
const emits = defineEmits<CompEmitEmits>();
const forwarded = useForwardPropsEmits(props, emits);
</script>

<template>
  <Comp v-bind="forwarded">
    ...
  </Comp>
</template>
```


# Accordion

## Usage

Use the Accordion component to display a list of collapsible items.

::docs-pohon-preview
---
external:
  - items
hide:
  - class
  - pohon
  - defaultValue
ignore:
  - items
  - pohon.content
props:
  defaultValue: "0"
  class: max-w-lg
  pohon:
    content: color-text-muted
  items:
    - label: Is it accessible?
      content: Yes. It adheres to the WAI-ARIA design pattern.
    - label: Is it unstyled?
      content: Yes. It's unstyled by default, giving you freedom over the look and feel.
    - label: Can it be animated?
      content: Yes! You can use the transition prop to configure the animation.
---
::

### Items

Use the `items` prop as an array of objects with the following properties:

- `label?: string`
- `icon?: string`
- `trailingIcon?: string`
- `content?: string`
- `value?: string`
- `disabled?: boolean`
- [`slot?: string`](https://akar.vinicunca.dev/#with-custom-slot)
- `class?: any`
- `pohon?: { item?: ClassNameValue; header?: ClassNameValue; trigger?: ClassNameValue; leadingIcon?: ClassNameValue; label?: ClassNameValue; trailingIcon?: ClassNameValue; content?: ClassNameValue; body?: ClassNameValue }`

::docs-pohon-preview
---
external:
  - items
externalTypes:
  - PAccordionItem[]
ignore:
  - items
props:
  items:
    - label: Is it accessible?
      icon: i-lucide:smile
      content: Yes. It adheres to the WAI-ARIA design pattern.
    - label: Is it unstyled?
      icon: i-lucide:swatch-book
      content: Yes. It's unstyled by default, giving you freedom over the look and feel.
    - label: Can it be animated?
      icon: i-lucide:box
      content: Yes! You can use the transition prop to configure the animation.
---
::

### Multiple

Set the `type` prop to `multiple` to allow multiple items to be active at the same time. Defaults to `single`.

::docs-pohon-preview
---
external:
  - items
externalTypes:
  - PAccordionItem[]
ignore:
  - type
  - items
props:
  type: multiple
  items:
    - label: Is it accessible?
      icon: i-lucide:smile
      content: Yes. It adheres to the WAI-ARIA design pattern.
    - label: Is it unstyled?
      icon: i-lucide:swatch-book
      content: Yes. It's unstyled by default, giving you freedom over the look and feel.
    - label: Can it be animated?
      icon: i-lucide:box
      content: Yes! You can use the transition prop to configure the animation.
---
::

### Collapsible

When `type` is `single`, you can set the `collapsible` prop to `false` to prevent the **active** item from collapsing.

::docs-pohon-preview
---
external:
  - items
externalTypes:
  - PAccordionItem[]
ignore:
  - collapsible
  - items
props:
  collapsible: false
  items:
    - label: Is it accessible?
      icon: i-lucide:smile
      content: Yes. It adheres to the WAI-ARIA design pattern.
    - label: Is it unstyled?
      icon: i-lucide:swatch-book
      content: Yes. It's unstyled by default, giving you freedom over the look and feel.
    - label: Can it be animated?
      icon: i-lucide:box
      content: Yes! You can use the transition prop to configure the animation.
---
::

### Unmount

Use the `unmount-on-hide` prop to prevent the content from being unmounted when the accordion is collapsed. Defaults to `true`.

::docs-pohon-preview
---
external:
  - items
externalTypes:
  - PAccordionItem[]
ignore:
  - items
props:
  unmountOnHide: false
  items:
    - label: Is it accessible?
      icon: i-lucide:smile
      content: Yes. It adheres to the WAI-ARIA design pattern.
    - label: Is it unstyled?
      icon: i-lucide:swatch-book
      content: Yes. It's unstyled by default, giving you freedom over the look and feel.
    - label: Can it be animated?
      icon: i-lucide:box
      content: Yes! You can use the transition prop to configure the animation.
---
::

::note
You can inspect the DOM to see each item's content being rendered.
::

### Disabled

Use the `disabled` property to disable the Accordion.

You can also disable a specific item by using the `disabled` property in the item object.

::docs-pohon-preview
---
external:
  - items
externalTypes:
  - PAccordionItem[]
ignore:
  - items
props:
  disabled: true
  items:
    - label: Is it accessible?
      icon: i-lucide:smile
      content: Yes. It adheres to the WAI-ARIA design pattern.
    - label: Is it unstyled?
      icon: i-lucide:swatch-book
      content: Yes. It's unstyled by default, giving you freedom over the look and feel.
    - label: Can it be animated?
      icon: i-lucide:box
      content: Yes! You can use the transition prop to configure the animation.
---
::

### Trailing Icon

Use the `trailing-icon` prop to customize the trailing [Icon](https://akar.vinicunca.dev/docs/pohon/components/icon) of each item. Defaults to `i-lucide:chevron-down`.

::tip
You can also set an icon for a specific item by using the `trailingIcon` property in the item object.
::

::docs-pohon-preview
---
external:
  - items
externalTypes:
  - PAccordionItem[]
ignore:
  - items
props:
  trailingIcon: i-lucide:arrow-down
  items:
    - label: Is it accessible?
      icon: i-lucide:smile
      content: Yes. It adheres to the WAI-ARIA design pattern.
    - label: Is it unstyled?
      icon: i-lucide:swatch-book
      content: Yes. It's unstyled by default, giving you freedom over the look and feel.
    - label: Can it be animated?
      icon: i-lucide:box
      content: Yes! You can use the transition prop to configure the animation.
---
::

::docs-framework-only
#nuxt
  :::tip
  ---
  to: https://akar.vinicunca.dev/docs/pohon/getting-started/integrations/icons/nuxt#theme
  ---
  You can customize this icon globally in your `app.config.ts` under `pohon.icons.chevronDown` key.
  :::

#vue
  :::tip
  ---
  to: https://akar.vinicunca.dev/docs/pohon/getting-started/integrations/icons/vue#theme
  ---
  You can customize this icon globally in your `vite.config.ts` under `pohon.icons.chevronDown` key.
  :::
::

## Examples

### Control active item(s)

You can control the active item by using the `default-value` prop or the `v-model` directive with the `value` of the item. If no `value` is provided, it defaults to the index **as a string**.

::docs-component-example{name="accordion-model-value-example"}
::

::caution
When `type="multiple"`, ensure to pass an array to the `default-value` prop or the `v-model` directive.
::

### With drag and drop

Use the [`useSortable`](https://vueuse.org/integrations/useSortable/){rel="nofollow"} composable from [`@vueuse/integrations`](https://vueuse.org/integrations/README.html){rel="nofollow"} to enable drag and drop functionality on the Accordion. This integration wraps [Sortable.js](https://sortablejs.github.io/Sortable/){rel="nofollow"} to provide a seamless drag and drop experience.

::docs-component-example{name="accordion-drag-and-drop-example"}
::

### With body slot

Use the `#body` slot to customize the body of each item.

::docs-component-example{name="accordion-body-slot-example"}
::

::tip
The `#body` slot includes some pre-defined styles, use the [`#content` slot](https://akar.vinicunca.dev/#with-content-slot) if you want to start from scratch.
::

### With content slot

Use the `#content` slot to customize the content of each item.

::docs-component-example{name="accordion-content-slot-example"}
::

### With custom slot

Use the `slot` property to customize a specific item.

You will have access to the following slots:

- `#{{ item.slot }}`
- `#{{ item.slot }}-body`

::docs-component-example{name="accordion-custom-slot-example"}
::

### With markdown content

You can use the [MDC](https://github.com/nuxt-modules/mdc?tab=readme-ov-file#mdc){rel="nofollow"} component from `@nuxtjs/mdc` to render markdown in the accordion items.

::docs-component-example{name="accordion-markdown-example"}
::

## API

### Props

::docs-pohon-props
::

### Emits

::docs-pohon-emits
::

### Slots

::docs-pohon-slots
::

## Theme

::docs-pohon-theme
::

### Anatomy

Here is the anatomy of themeable parts of the Accordion component:

Coming soon...

## Akar

::docs-akar-to-pohon
---
mode: pohon
to: https://akar.vinicunca.dev/docs/akar/components/accordion
---
::

## Changelog

::docs-component-changelog
::


# Alert

## Usage

### Title

Use the `title` prop to set the title of the Alert.

::docs-pohon-preview{:props='{"title":"Heads up!"}'}
::

### Description

Use the `description` prop to set the description of the Alert.

::docs-pohon-preview
---
prettier: true
props:
  title: Heads up!
  description: You can change the primary color in your app config.
---
::

### Icon

Use the `icon` prop to show an [Icon](https://akar.vinicunca.dev/docs/pohon/components/icon).

::docs-pohon-preview
---
ignore:
  - title
  - description
prettier: true
props:
  title: Heads up!
  description: You can change the primary color in your app config.
  icon: i-lucide:terminal
---
::

### Avatar

Use the `avatar` prop to show an [Avatar](https://akar.vinicunca.dev/docs/pohon/components/avatar).

::docs-pohon-preview
---
ignore:
  - title
  - description
prettier: true
props:
  title: Heads up!
  description: You can change the primary color in your app config.
  avatar:
    src: https://github.com/nuxt.png
---
::

### Color

Use the `color` prop to change the color of the Alert.

::docs-pohon-preview
---
ignore:
  - title
  - description
  - icon
prettier: true
props:
  color: neutral
  title: Heads up!
  description: You can change the primary color in your app config.
  icon: i-lucide:terminal
---
::

### Variant

Use the `variant` prop to change the variant of the Alert.

::docs-pohon-preview
---
ignore:
  - title
  - description
  - icon
prettier: true
props:
  color: neutral
  variant: subtle
  title: Heads up!
  description: You can change the primary color in your app config.
  icon: i-lucide:terminal
---
::

### Close

Use the `close` prop to display a [Button](https://akar.vinicunca.dev/docs/pohon/components/button) to dismiss the Alert.

::tip
An `update:open` event will be emitted when the close button is clicked.
::

::docs-pohon-preview
---
ignore:
  - title
  - description
  - close
  - color
  - variant
prettier: true
props:
  title: Heads up!
  description: You can change the primary color in your app config.
  color: neutral
  variant: outline
  close: true
---
::

You can pass any property from the [Button](https://akar.vinicunca.dev/docs/pohon/components/button) component to customize it.

::docs-pohon-preview
---
ignore:
  - title
  - description
  - close.color
  - close.variant
  - color
  - variant
prettier: true
props:
  title: Heads up!
  description: You can change the primary color in your app config.
  color: neutral
  variant: outline
  close:
    color: primary
    variant: outline
    class: akar:rounded-full
---
::

### Close Icon

Use the `close-icon` prop to customize the close button [Icon](https://akar.vinicunca.dev/docs/pohon/components/icon). Defaults to `i-lucide:x`.

::docs-pohon-preview
---
ignore:
  - title
  - description
  - close
  - color
  - variant
prettier: true
props:
  title: Heads up!
  description: You can change the primary color in your app config.
  color: neutral
  variant: outline
  close: true
  closeIcon: i-lucide:arrow-right
---
::

::docs-framework-only
#nuxt
  :::tip
  ---
  to: https://akar.vinicunca.dev/docs/pohon/getting-started/integrations/icons/nuxt#theme
  ---
  You can customize this icon globally in your `app.config.ts` under `pohon.icons.close` key.
  :::

#vue
  :::tip
  ---
  to: https://akar.vinicunca.dev/docs/pohon/getting-started/integrations/icons/vue#theme
  ---
  You can customize this icon globally in your `vite.config.ts` under `pohon.icons.close` key.
  :::
::

### Actions

Use the `actions` prop to add some [Button](https://akar.vinicunca.dev/docs/pohon/components/button) actions to the Alert.

::docs-pohon-preview
---
ignore:
  - title
  - actions
  - color
  - variant
prettier: true
props:
  title: Heads up!
  description: You can change the primary color in your app config.
  color: neutral
  variant: outline
  actions:
    - label: Action 1
    - label: Action 2
      color: neutral
      variant: subtle
---
::

### Orientation

Use the `orientation` prop to change the orientation of the Alert.

::docs-pohon-preview
---
ignore:
  - title
  - actions
  - color
  - variant
prettier: true
props:
  title: Heads up!
  description: You can change the primary color in your app config.
  color: neutral
  variant: outline
  orientation: horizontal
  actions:
    - label: Action 1
    - label: Action 2
      color: neutral
      variant: subtle
---
::

## Examples

### `class` prop

Use the `class` prop to override the base styles of the Alert.

::docs-pohon-preview
---
ignore:
  - title
  - description
prettier: true
props:
  title: Heads up!
  description: You can change the primary color in your app config.
  class: rounded-none
---
::

### `pohon` prop

Use the `pohon` prop to override the slots styles of the Alert.

::docs-pohon-preview
---
ignore:
  - pohon
  - title
  - description
  - icon
prettier: true
props:
  title: Heads up!
  description: You can change the primary color in your app config.
  icon: i-lucide:rocket
  pohon:
    icon: akar:size-11
---
::

## API

### Props

::docs-pohon-props
::

### Slots

::docs-pohon-slots
::

### Emits

::docs-pohon-emits
::

## Theme

::docs-pohon-theme
::

## Changelog

::docs-component-changelog
::


# App

## Usage

This component implements Akar's [ConfigProvider](https://akar.vinicunca.dev/docs/akar/utilities/config-provider) to provide global configuration to all components:

- Enables all primitives to inherit global reading direction.
- Enables changing the behavior of scroll body when setting body lock.
- Much more controls to prevent layout shifts.

It's also using [ToastProvider](https://akar.vinicunca.dev/docs/akar/components/toast#provider) and [TooltipProvider](https://akar.vinicunca.dev/docs/akar/components/tooltip#provider) to provide global toasts and tooltips, as well as programmatic modals and slideovers.

Wrap your entire application with the App component in your `app.vue` file:

```vue [app.vue]
<template>
  <PApp>
    <NuxtPage />
  </PApp>
</template>
```

::docs-framework-only
#nuxt
  :::tip
  ---
  to: https://akar.vinicunca.dev/docs/pohon/getting-started/integrations/i18n/nuxt#locale
  ---
  Learn how to use the `locale` prop to change the locale of your app.
  :::

#vue
  :::tip
  ---
  to: https://akar.vinicunca.dev/docs/pohon/getting-started/integrations/i18n/vue#locale
  ---
  Learn how to use the `locale` prop to change the locale of your app.
  :::
::

## API

### Props

::docs-pohon-props
::

### Slots

::docs-pohon-slots
::

## Changelog

::docs-component-changelog
::


# Avatar

## Usage

::docs-pohon-preview
---
ignore:
  - src
props:
  src: https://github.com/praburangki.png
---
::

::note
You can pass any property from the HTML `<img>` element such as `alt`, `loading`, etc.
::

### Src

Use the `src` prop to set the image URL.

::docs-pohon-preview{:props='{"src":"https://github.com/praburangki.png"}'}
::

### Size

Use the `size` prop to set the size of the Avatar.

::docs-pohon-preview
---
ignore:
  - src
props:
  src: https://github.com/praburangki.png
  size: xl
---
::

::note
The `<img>` element's `width` and `height` are automatically set based on the `size` prop.
::

### Icon

Use the `icon` prop to display a fallback [Icon](https://akar.vinicunca.dev/docs/pohon/components/icon).

::docs-pohon-preview{:props='{"icon":"i-lucide:image","size":"md"}'}
::

### Text

Use the `text` prop to display a fallback text.

::docs-pohon-preview{:props='{"text":"+1","size":"md"}'}
::

### Alt

When no icon or text is provided, the **initials** of the `alt` prop is used as fallback.

::docs-pohon-preview{:props='{"alt":"bebedag","size":"md"}'}
::

::note
The `alt` prop is passed to the `img` element as the `alt` attribute.
::

### Chip

Use the `chip` prop to display a chip around the Avatar.

::docs-pohon-preview
---
ignore:
  - src
  - chip.inset
prettier: true
props:
  src: https://github.com/praburangki.png
  chip:
    inset: true
---
::

## Examples

### With tooltip

You can use a [Tooltip](https://akar.vinicunca.dev/docs/pohon/components/tooltip) component to display a tooltip when hovering the Avatar.

::docs-component-example{name="avatar-tooltip-example"}
::

### With mask

You can use a CSS mask to display an Avatar with a custom shape instead of a simple circle.

::docs-component-example{name="avatar-mask-example"}
::

## API

### Props

::docs-pohon-props
::

::callout
---
icon: i-simple-icons:mdnwebdocs
target: _blank
to: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attributes
---
This component also supports all native `<img>` HTML attributes.
::

## Theme

::docs-pohon-theme
::

## Akar

::docs-akar-to-pohon
---
mode: pohon
to: https://akar.vinicunca.dev/docs/akar/components/avatar
---
::

## Changelog

::docs-component-changelog
::


# AvatarGroup

## Usage

Wrap multiple [Avatar](https://akar.vinicunca.dev/docs/pohon/components/avatar) within an AvatarGroup to stack them.

::docs-pohon-preview
---
prettier: true
slots:
  default: |
    
    <PAvatar src="https://github.com/praburangki.png" alt="praburangki" />
    <PAvatar src="https://github.com/wahyu-ivan.png" alt="Wahyu Ivan" />
    <PAvatar src="https://github.com/GunawanAhmad.png" alt="Gunawan Ahmad" />
---
  :::p-avatar{alt="praburangki" src="https://github.com/praburangki.png"}
  :::

  :::p-avatar{alt="Wahyu Ivan" src="https://github.com/wahyu-ivan.png"}
  :::

  :::p-avatar{alt="Gunawan Ahmad" src="https://github.com/GunawanAhmad.png"}
  :::
::

### Size

Use the `size` prop to change the size of all the avatars.

::docs-pohon-preview
---
prettier: true
props:
  size: xl
slots:
  default: |
    
    <PAvatar src="https://github.com/praburangki.png" alt="praburangki" />
    <PAvatar src="https://github.com/wahyu-ivan.png" alt="Wahyu Ivan" />
    <PAvatar src="https://github.com/GunawanAhmad.png" alt="Gunawan Ahmad" />
---
  :::p-avatar{alt="praburangki" src="https://github.com/praburangki.png"}
  :::

  :::p-avatar{alt="Wahyu Ivan" src="https://github.com/wahyu-ivan.png"}
  :::

  :::p-avatar{alt="Gunawan Ahmad" src="https://github.com/GunawanAhmad.png"}
  :::
::

### Max

Use the `max` prop to limit the number of avatars displayed. The rest is displayed as an `+X` avatar.

::docs-pohon-preview
---
prettier: true
props:
  max: 2
slots:
  default: |
    
    <PAvatar src="https://github.com/praburangki.png" alt="praburangki" />
    <PAvatar src="https://github.com/wahyu-ivan.png" alt="Wahyu Ivan" />
    <PAvatar src="https://github.com/GunawanAhmad.png" alt="Gunawan Ahmad" />
---
  :::p-avatar{alt="praburangki" src="https://github.com/praburangki.png"}
  :::

  :::p-avatar{alt="Wahyu Ivan" src="https://github.com/wahyu-ivan.png"}
  :::

  :::p-avatar{alt="Gunawan Ahmad" src="https://github.com/GunawanAhmad.png"}
  :::
::

## Examples

### With tooltip

Wrap each avatar with a [Tooltip](https://akar.vinicunca.dev/docs/pohon/components/tooltip) to display a tooltip on hover.

::docs-component-example{name="avatar-group-tooltip-example"}
::

### With chip

Wrap each avatar with a [Chip](https://akar.vinicunca.dev/docs/pohon/components/chip) to display a chip around the avatar.

::docs-component-example{name="avatar-group-chip-example"}
::

### With link

Wrap each avatar with a [Link](https://akar.vinicunca.dev/docs/pohon/components/link) to make them clickable.

::docs-component-example{name="avatar-group-link-example"}
::

### With mask

Wrap an avatar with a CSS mask to display it with a custom shape.

::docs-component-example{name="avatar-group-mask-example"}
::

::warning
The `chip` prop does not work correctly when using a mask. Chips may be cut depending on the mask shape.
::

## API

### Props

::docs-pohon-props
::

### Slots

::docs-pohon-slots
::

## Theme

::docs-pohon-theme
::

## Changelog

::docs-component-changelog
::


# Badge

## Usage

Use the default slot to set the label of the Badge.

::docs-pohon-preview{:slots='{"default":"Badge"}'}
::

### Label

Use the `label` prop to set the label of the Badge.

::docs-pohon-preview{:props='{"label":"Badge"}'}
::

### Color

Use the `color` prop to change the color of the Badge.

::docs-pohon-preview{:props='{"color":"neutral"}' :slots='{"default":"Badge"}'}
::

### Variant

Use the `variant` props to change the variant of the Badge.

::docs-pohon-preview
---
props:
  color: neutral
  variant: outline
slots:
  default: Badge
---
::

### Size

Use the `size` prop to change the size of the Badge.

::docs-pohon-preview{:props='{"size":"xl"}' :slots='{"default":"Badge"}'}
::

### Icon

Use the `icon` prop to show an [Icon](https://akar.vinicunca.dev/docs/pohon/components/icon) inside the Badge.

::docs-pohon-preview
---
props:
  icon: i-lucide:rocket
  size: md
  color: primary
  variant: solid
slots:
  default: Badge
---
::

Use the `leading` and `trailing` props to set the icon position or the `leading-icon` and `trailing-icon` props to set a different icon for each position.

::docs-pohon-preview
---
props:
  trailingIcon: i-lucide:arrow-right
  size: md
slots:
  default: Badge
---
::

### Avatar

Use the `avatar` prop to show an [Avatar](https://akar.vinicunca.dev/docs/pohon/components/avatar) inside the Badge.

::docs-pohon-preview
---
prettier: true
props:
  avatar:
    src: https://github.com/nuxt.png
  size: md
  color: neutral
  variant: outline
slots:
  default: |
    
    Badge
---
::

## Examples

### `class` prop

Use the `class` prop to override the base styles of the Badge.

::docs-pohon-preview
---
props:
  class: font-bold rounded-full
slots:
  default: Badge
---
::

## API

### Props

::docs-pohon-props
::

### Slots

::docs-pohon-slots
::

## Theme

::docs-pohon-theme
::

## Changelog

::docs-component-changelog
::


# Banner

## Usage

### Title

Use the `title` prop to display a title on the Banner.

::docs-pohon-preview
---
prettier: true
props:
  title: This is a banner with an important message.
class: akar:p-0
---
::

### Icon

Use the `icon` prop to display an icon on the Banner.

::docs-pohon-preview
---
ignore:
  - title
prettier: true
props:
  icon: i-lucide:info
  title: This is a banner with an icon.
class: akar:p-0
---
::

### Color

Use the `color` prop to change the color of the Banner.

::docs-pohon-preview
---
ignore:
  - icon
  - title
prettier: true
props:
  color: neutral
  icon: i-lucide:info
  title: This is a banner with an icon.
class: akar:p-0
---
::

### Close

Use the `close` prop to display a [Button](https://akar.vinicunca.dev/docs/pohon/components/button) to dismiss the Banner. Defaults to `false`.

::tip
A `close` event will be emitted when the close button is clicked.
::

::docs-component-example
---
iframe:
  style: "height: 48px;"
overflowHidden: true
name: banner-example
---
#code
```vue
<template>
  <PBanner id="example" title="This is a closable banner." close />
</template>
```
::

::note
When closed, `banner-${id}` will be stored in the local storage to prevent it from being displayed again. :br For the example above, `banner-example` will be stored in the local storage.
::

### Close Icon

Use the `close-icon` prop to customize the close button [Icon](https://akar.vinicunca.dev/docs/pohon/components/icon). Defaults to `i-lucide:x`.

::docs-component-example
---
iframe:
  style: "height: 48px;"
overflowHidden: true
props:
  title: This is a closable banner with a custom close icon.
  closeIcon: i-lucide:x-circle
name: banner-example
---
#code
```vue
<template>
  <PBanner
    title="This is a closable banner with a custom close icon."
    close
    close-icon="i-lucide:x-circle"
  />
</template>
```
::

::docs-framework-only
#nuxt
  :::tip
  ---
  to: https://akar.vinicunca.dev/docs/pohon/getting-started/integrations/icons/nuxt#theme
  ---
  You can customize this icon globally in your `app.config.ts` under `pohon.icons.close` key.
  :::

#vue
  :::tip
  ---
  to: https://akar.vinicunca.dev/docs/pohon/getting-started/integrations/icons/vue#theme
  ---
  You can customize this icon globally in your `vite.config.ts` under `pohon.icons.close` key.
  :::
::

### Actions

Use the `actions` prop to add some [Button](https://akar.vinicunca.dev/docs/pohon/components/button) actions to the Banner.

::docs-pohon-preview
---
external:
  - actions
ignore:
  - title
  - actions
  - variant
prettier: true
props:
  title: This is a banner with actions.
  actions:
    - label: Action 1
      variant: outline
    - label: Action 2
      trailingIcon: i-lucide:arrow-right
class: akar:p-0
---
::

::note
The action buttons default to `color="neutral"` and `size="xs"`. You can customize these values by passing them directly to each action button.
::

### Link

You can pass any property from the [`<NuxtLink>`](https://nuxt.com/docs/api/components/nuxt-link){rel="nofollow"} component such as `to`, `target`, `rel`, etc.

::docs-pohon-preview
---
ignore:
  - title
  - target
overflowHidden: true
prettier: true
props:
  to: https://nuxtlabs.com/
  target: _blank
  title: NuxtLabs is joining Vercel!
  color: primary
class: akar:p-0
---
::

::note
The `NuxtLink` component will inherit all other attributes you pass to the `User` component.
::

## Examples

### Within `app.vue`

Use the Banner component in your `app.vue` or in a layout:

```vue [app.vue] {3}
<template>
  <PApp>
    <PBanner icon="i-lucide:construction" title="Pohon UI v4 has been released!" />

    <PHeader />

    <PMain>
      <NuxtLayout>
        <NuxtPage />
      </NuxtLayout>
    </PMain>

    <PFooter />
  </PApp>
</template>
```

## API

### Props

::docs-pohon-props
::

### Slots

::docs-pohon-slots
::

### Emits

::docs-pohon-emits
::

## Theme

::docs-pohon-theme
::

## Changelog

::docs-component-changelog
::


# Breadcrumb

## Usage

Use the Breadcrumb component to show the current page's location in your site's hierarchy.

::docs-pohon-preview
---
collapse: true
external:
  - items
ignore:
  - items
props:
  items:
    - label: Docs
      icon: i-lucide:book-open
      to: /docs/pohon
    - label: Components
      icon: i-lucide:box
      to: /docs/pohon/components
    - label: Breadcrumb
      icon: i-lucide:link
      to: /docs/pohon/components/breadcrumb
---
::

### Items

Use the `items` prop as an array of objects with the following properties:

- `label?: string`
- `icon?: string`
- `avatar?: AvatarProps`
- [`slot?: string`](https://akar.vinicunca.dev/#with-custom-slot)
- `class?: any`
- `pohon?: { item?: ClassNameValue, link?: ClassNameValue, linkLeadingIcon?: ClassNameValue, linkLeadingAvatar?: ClassNameValue, linkLabel?: ClassNameValue, separator?: ClassNameValue, separatorIcon?: ClassNameValue }`

You can pass any property from the [Link](https://akar.vinicunca.dev/docs/pohon/components/link#props) component such as `to`, `target`, etc.

::docs-pohon-preview
---
external:
  - items
externalTypes:
  - PBreadcrumbItem[]
ignore:
  - items
props:
  items:
    - label: Docs
      icon: i-lucide:book-open
      to: /docs/pohon
    - label: Components
      icon: i-lucide:box
      to: /docs/pohon/components
    - label: Breadcrumb
      icon: i-lucide:link
      to: /docs/pohon/components/breadcrumb
---
::

::note
A `span` is rendered instead of a link when the `to` property is not defined.
::

### Separator Icon

Use the `separator-icon` prop to customize the [Icon](https://akar.vinicunca.dev/docs/pohon/components/icon) between each item. Defaults to `i-lucide:chevron-right`.

::docs-pohon-preview
---
external:
  - items
externalTypes:
  - PBreadcrumbItem[]
ignore:
  - items
props:
  separatorIcon: i-lucide:arrow-right
  items:
    - label: Docs
      icon: i-lucide:book-open
      to: /docs/pohon
    - label: Components
      icon: i-lucide:box
      to: /docs/pohon/components
    - label: Breadcrumb
      icon: i-lucide:link
      to: /docs/pohon/components/breadcrumb
---
::

::docs-framework-only
#nuxt
  :::tip
  ---
  to: https://akar.vinicunca.dev/docs/pohon/getting-started/integrations/icons/nuxt#theme
  ---
  You can customize this icon globally in your `app.config.ts` under `pohon.icons.chevronRight` key.
  :::

#vue
  :::tip
  ---
  to: https://akar.vinicunca.dev/docs/pohon/getting-started/integrations/icons/vue#theme
  ---
  You can customize this icon globally in your `vite.config.ts` under `pohon.icons.chevronRight` key.
  :::
::

## Examples

### With separator slot

Use the `#separator` slot to customize the separator between each item.

::docs-component-example{name="breadcrumb-separator-slot-example"}
::

### With custom slot

Use the `slot` property to customize a specific item.

You will have access to the following slots:

- `#{{ item.slot }}`
- `#{{ item.slot }}-leading`
- `#{{ item.slot }}-label`
- `#{{ item.slot }}-trailing`

::docs-component-example{name="breadcrumb-custom-slot-example"}
::

::tip{to="https://akar.vinicunca.dev/#slots"}
You can also use the `#item`, `#item-leading`, `#item-label` and `#item-trailing` slots to customize all items.
::

## API

### Props

::docs-pohon-props
::

### Slots

::docs-pohon-slots
::

## Theme

::docs-pohon-theme
::

## Changelog

::docs-component-changelog
::


# Button

## Usage

Use the default slot to set the label of the Button.

::docs-pohon-preview{:slots='{"default":"Button"}'}
::

### Label

Use the `label` prop to set the label of the Button.

::docs-pohon-preview{:props='{"label":"Button"}'}
::

### Color

Use the `color` prop to change the color of the Button.

::docs-pohon-preview{:props='{"color":"neutral"}' :slots='{"default":"Button"}'}
::

### Variant

Use the `variant` prop to change the variant of the Button.

::docs-pohon-preview
---
props:
  color: neutral
  variant: outline
slots:
  default: Button
---
::

### Size

Use the `size` prop to change the size of the Button.

::docs-pohon-preview{:props='{"size":"xl"}' :slots='{"default":"Button"}'}
::

### Icon

Use the `icon` prop to show an [Icon](https://akar.vinicunca.dev/docs/pohon/components/icon) inside the Button.

::docs-pohon-preview
---
props:
  icon: i-lucide:rocket
  size: md
  color: primary
  variant: solid
slots:
  default: Button
---
::

Use the `leading` and `trailing` props to set the icon position or the `leading-icon` and `trailing-icon` props to set a different icon for each position.

::docs-pohon-preview
---
props:
  trailingIcon: i-lucide:arrow-right
  size: md
slots:
  default: Button
---
::

The `label` as prop or slot is optional so you can use the Button as an icon-only button.

::docs-pohon-preview
---
props:
  icon: i-lucide:search
  size: md
  color: primary
  variant: solid
---
::

### Avatar

Use the `avatar` prop to show an [Avatar](https://akar.vinicunca.dev/docs/pohon/components/avatar) inside the Button.

::docs-pohon-preview
---
prettier: true
props:
  avatar:
    src: https://github.com/nuxt.png
  size: md
  color: neutral
  variant: outline
slots:
  default: |
    
    Button
---
::

The `label` as prop or slot is optional so you can use the Button as an avatar-only button.

::docs-pohon-preview
---
prettier: true
props:
  avatar:
    src: https://github.com/nuxt.png
  size: md
  color: neutral
  variant: outline
---
::

### Link

You can pass any property from the [Link](https://akar.vinicunca.dev/docs/pohon/components/link#props) component such as `to`, `target`, etc.

::docs-pohon-preview
---
ignore:
  - target
props:
  to: https://github.com/nuxt/ui
  target: _blank
slots:
  default: Button
---
::

When the Button is a link or when using the `active` prop, you can use the `active-color` and `active-variant` props to customize the active state.

::docs-pohon-preview
---
ignore:
  - color
  - variant
items:
  activeColor:
    - primary
    - secondary
    - success
    - info
    - warning
    - error
    - neutral
  activeVariant:
    - solid
    - outline
    - soft
    - subtle
    - ghost
    - link
prettier: true
props:
  active: true
  color: neutral
  variant: outline
  activeColor: primary
  activeVariant: solid
slots:
  default: |
    
    Button
---
Button
::

You can also use the `active-class` and `inactive-class` props to customize the active state.

::docs-pohon-preview
---
props:
  active: true
  activeClass: font-bold
  inactiveClass: font-light
slots:
  default: Button
---
Button
::

::tip
You can configure these styles globally in your `app.config.ts` file under the `pohon.button.variants.active` key.

```ts
export default defineAppConfig({
  pohon: {
    button: {
      variants: {
        active: {
          true: {
            base: 'font-bold'
          }
        }
      }
    }
  }
})
```
::

### Loading

Use the `loading` prop to show a loading icon and disable the Button.

::docs-pohon-preview
---
props:
  loading: true
  trailing: false
slots:
  default: Button
---
Button
::

Use the `loading-auto` prop to show the loading icon automatically while the `@click` promise is pending.

::docs-component-example{name="button-loading-auto-example"}
::

This also works with the [Form](https://akar.vinicunca.dev/docs/pohon/components/form) component.

::docs-component-example{name="button-loading-auto-form-example"}
::

### Loading Icon

Use the `loading-icon` prop to customize the loading icon. Defaults to `i-lucide:loader-circle`.

::docs-pohon-preview
---
props:
  loading: true
  loadingIcon: i-lucide:loader
slots:
  default: Button
---
Button
::

::docs-framework-only
#nuxt
  :::tip
  ---
  to: https://akar.vinicunca.dev/docs/pohon/getting-started/integrations/icons/nuxt#theme
  ---
  You can customize this icon globally in your `app.config.ts` under `pohon.icons.loading` key.
  :::

#vue
  :::tip
  ---
  to: https://akar.vinicunca.dev/docs/pohon/getting-started/integrations/icons/vue#theme
  ---
  You can customize this icon globally in your `vite.config.ts` under `pohon.icons.loading` key.
  :::
::

### Disabled

Use the `disabled` prop to disable the Button.

::docs-pohon-preview{:props='{"disabled":true}' :slots='{"default":"Button"}'}
Button
::

## Examples

### `class` prop

Use the `class` prop to override the base styles of the Button.

::docs-pohon-preview
---
props:
  class: akar:font-bold akar:rounded-full
slots:
  default: Button
---
::

### `pohon` prop

Use the `pohon` prop to override the slots styles of the Button.

::docs-pohon-preview
---
ignore:
  - pohon
  - color
  - variant
  - icon
prettier: true
props:
  icon: i-lucide:rocket
  color: neutral
  variant: outline
  pohon:
    leadingIcon: color-primary
slots:
  default: |
    
    Button
---
::

## API

### Props

::docs-pohon-props
::

::callout
---
icon: i-simple-icons:github
to: https://github.com/vinicunca/akar/blob/main/packages/pohon/src/runtime/components/link.vue#L13
---
The `Button` component extends the `Link` component. Check out the source code on GitHub.
::

### Slots

::docs-pohon-slots
::

::callout
---
icon: i-simple-icons:mdnwebdocs
target: _blank
to: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attributes
---
This component also supports all native `<button>` HTML attributes.
::

## Theme

::docs-pohon-theme
::

## Changelog

::docs-component-changelog
::


# Calendar

## Usage

Use the `v-model` directive to control the selected date.

::docs-pohon-preview
---
cast:
  modelValue: DateValue
external:
  - modelValue
ignore:
  - modelValue
props:
  modelValue:
    - 2022
    - 2
    - 3
---
::

Use the `default-value` prop to set the initial value when you do not need to control its state.

::docs-pohon-preview
---
cast:
  defaultValue: DateValue
external:
  - defaultValue
ignore:
  - defaultValue
props:
  defaultValue:
    - 2022
    - 2
    - 6
---
::

::note
This component relies on the [`@internationalized/date`](https://react-spectrum.adobe.com/internationalized/date/index.html){rel="nofollow"} package which provides objects and functions for representing and manipulating dates and times in a locale-aware manner.
::

### Multiple

Use the `multiple` prop to allow multiple selections.

::docs-pohon-preview
---
cast:
  modelValue: DateValue[]
external:
  - modelValue
ignore:
  - multiple
  - modelValue
prettier: true
props:
  multiple: true
  modelValue:
    - - 2022
      - 2
      - 4
    - - 2022
      - 2
      - 6
    - - 2022
      - 2
      - 8
---
::

### Range

Use the `range` prop to select a range of dates.

::docs-pohon-preview
---
cast:
  modelValue: DateRange
external:
  - modelValue
ignore:
  - range
  - modelValue.start
  - modelValue.end
prettier: true
props:
  range: true
  modelValue:
    start:
      - 2022
      - 2
      - 3
    end:
      - 2022
      - 2
      - 20
---
::

### Color

Use the `color` prop to change the color of the calendar.

::docs-pohon-preview{:props='{"color":"neutral"}'}
::

### Variant

Use the `variant` prop to change the variant of the calendar.

::docs-pohon-preview
---
cast:
  defaultValue: DateRange
hide:
  - range
  - defaultValue
  - defaultValue.start
  - defaultValue.end
props:
  variant: subtle
  range: true
  defaultValue:
    start:
      - 2022
      - 2
      - 3
    end:
      - 2022
      - 2
      - 20
---
::

### Size

Use the `size` prop to change the size of the calendar.

::docs-pohon-preview{:props='{"size":"xl"}'}
::

### Disabled

Use the `disabled` prop to disable the calendar.

::docs-pohon-preview{:props='{"disabled":true}'}
::

### Number Of Months

Use the `numberOfMonths` prop to change the number of months in the calendar.

::docs-pohon-preview{:props='{"numberOfMonths":3}'}
::

### Month Controls

Use the `month-controls` prop to show the month controls. Defaults to `true`.

::docs-pohon-preview{:props='{"monthControls":false}'}
::

### Year Controls

Use the `year-controls` prop to show the year controls. Defaults to `true`.

::docs-pohon-preview{:props='{"yearControls":false}'}
::

### Fixed Weeks

Use the `fixed-weeks` prop to display the calendar with fixed weeks.

::docs-pohon-preview{:props='{"fixedWeeks":false}'}
::

## Examples

### With chip events

Use the [Chip](https://akar.vinicunca.dev/docs/pohon/components/chip) component to add events to specific days.

::docs-component-example{name="calendar-events-example"}
::

### With disabled dates

Use the `is-date-disabled` prop with a function to mark specific dates as disabled.

::docs-component-example{name="calendar-disabled-dates-example"}
::

### With unavailable dates

Use the `is-date-unavailable` prop with a function to mark specific dates as unavailable.

::docs-component-example{name="calendar-unavailable-dates-example"}
::

### With min/max dates

Use the `min-value` and `max-value` props to limit the dates.

::docs-component-example{name="calendar-min-max-dates-example"}
::

### With other calendar systems

You can use other calenders from `@internationalized/date` to implement a different calendar system.

::docs-component-example{name="calendar-other-system-example"}
::

::note
---
to: https://react-spectrum.adobe.com/internationalized/date/Calendar.html#implementations
---
You can check all the available calendars on `@internationalized/date` docs.
::

### With external controls

You can control the calendar with external controls by manipulating the date passed in the `v-model`.

::docs-component-example{name="calendar-external-controls-example"}
::

## API

### Props

::docs-pohon-props
::

### Slots

::docs-pohon-slots
::

### Emits

::docs-pohon-emits
::

## Theme

::docs-pohon-theme
::

## Akar

::docs-akar-to-pohon
---
mode: pohon
to: https://akar.vinicunca.dev/docs/akar/components/calendar
---
::

## Changelog

::docs-component-changelog
::


# Card

## Usage

Use the `header`, `default` and `footer` slots to add content to the Card.

::docs-component-example
---
collapse: true
props:
  class: w-full
name: card-example
---
::

### Variant

Use the `variant` prop to change the variant of the Card.

::docs-pohon-preview
---
hide:
  - class
prettier: true
props:
  variant: subtle
  class: w-full
slots:
  header: |
    
    <CorePlaceholder class="h-8" />
  default: |
    
    <CorePlaceholder class="h-32" />
  footer: |
    
    <CorePlaceholder class="h-8" />
---
  :::core-placeholder{.h-32}
  :::

#header
  :::core-placeholder{.h-8}
  :::

#footer
  :::core-placeholder{.h-8}
  :::
::

## API

### Props

::docs-pohon-props
::

### Slots

::docs-pohon-slots
::

## Theme

::docs-pohon-theme
::

## Changelog

::docs-component-changelog
::


# Carousel

## Usage

Use the Carousel component to display a list of items in a carousel.

::docs-component-example{.p-8 collapse name="carousel-items-example"}
::

::note
Use your mouse to drag the carousel horizontally on desktop.
::

### Items

Use the `items` prop as an array and render each item using the default slot:

::docs-component-example{.p-8 name="carousel-items-example"}
::

You can also pass an array of objects with the following properties:

- `class?: any`
- `pohon?: { item?: ClassNameValue }`

You can control how many items are visible by using the flex-basis or width utility classes on the `item`:

::docs-component-example{.p-8.px-16 name="carousel-items-multiple-example"}
::

### Orientation

Use the `orientation` prop to change the orientation of the Progress. Defaults to `horizontal`.

::note
Use your mouse to drag the carousel vertically on desktop.
::

::docs-component-example{.p-8 name="carousel-orientation-example"}
::

::caution
You need to specify a `height` on the container in vertical orientation.
::

### Arrows

Use the `arrows` prop to display prev and next buttons.

::docs-component-example{.p-8 name="carousel-arrows-example"}
::

### Prev / Next

Use the `prev` and `next` props to customize the prev and next buttons with any [Button](https://akar.vinicunca.dev/docs/pohon/components/button) props.

::docs-component-example{.p-8 name="carousel-prev-next-example"}
::

### Prev / Next Icons

Use the `prev-icon` and `next-icon` props to customize the buttons [Icon](https://akar.vinicunca.dev/docs/pohon/components/icon). Defaults to `i-lucide:arrow-left` / `i-lucide:arrow-right`.

::docs-component-example
---
options:
  - name: prevIcon
    label: prevIcon
    default: i-lucide:chevron-left
  - name: nextIcon
    label: nextIcon
    default: i-lucide:chevron-right
class: p-8
name: carousel-prev-next-icon-example
---
::

::docs-framework-only
#nuxt
  :::tip
  ---
  to: https://akar.vinicunca.dev/docs/pohon/getting-started/integrations/icons/nuxt#theme
  ---
  You can customize these icons globally in your `app.config.ts` under `pohon.icons.arrowLeft` / `pohon.icons.arrowRight` key.
  :::

#vue
  :::tip
  ---
  to: https://akar.vinicunca.dev/docs/pohon/getting-started/integrations/icons/vue#theme
  ---
  You can customize these icons globally in your `vite.config.ts` under `pohon.icons.arrowLeft` / `pohon.icons.arrowRight` key.
  :::
::

### Dots

Use the `dots` prop to display a list of dots to scroll to a specific slide.

::docs-component-example{.p-8.pb-12 name="carousel-dots-example"}
::

The number of dots is based on the number of slides displayed in the view:

::docs-component-example{.p-8.px-16.pb-12 name="carousel-dots-multiple-example"}
::

## Plugins

The Carousel component implements the official [Embla Carousel plugins](https://www.embla-carousel.com/plugins/){rel="nofollow"}.

### Autoplay

This plugin is used to extend Embla Carousel with **autoplay** functionality.

Use the `autoplay` prop as a boolean or an object to configure the [Autoplay plugin](https://www.embla-carousel.com/plugins/autoplay/){rel="nofollow"}.

::docs-component-example{.p-8.px-16.pb-12 name="carousel-autoplay-example"}
::

::note
In this example, we're using the `loop` prop for an infinite carousel.
::

### Auto Scroll

This plugin is used to extend Embla Carousel with **auto scroll** functionality.

Use the `auto-scroll` prop as a boolean or an object to configure the [Auto Scroll plugin](https://www.embla-carousel.com/plugins/auto-scroll/){rel="nofollow"}.

::docs-component-example{.p-8.px-16.pb-12 name="carousel-auto-scroll-example"}
::

::note
In this example, we're using the `loop` prop for an infinite carousel.
::

### Auto Height

This plugin is used to extend Embla Carousel with **auto height** functionality. It changes the height of the carousel container to fit the height of the highest slide in view.

Use the `auto-height` prop as a boolean or an object to configure the [Auto Height plugin](https://www.embla-carousel.com/plugins/auto-height/){rel="nofollow"}.

::docs-component-example{.p-8.pt-16 name="carousel-auto-height-example"}
::

::note
In this example, we add the `transition-[height]` class on the container to animate the height change.
::

### Class Names

Class Names is a **class name toggle** utility plugin for Embla Carousel that enables you to automate the toggling of class names on your carousel.

Use the `class-names` prop as a boolean or an object to configure the [Class Names plugin](https://www.embla-carousel.com/plugins/class-names/){rel="nofollow"}.

::docs-component-example{.p-8 name="carousel-class-names-example"}
::

::note
In this example, we add the `transition-opacity [&:not(.is-snapped)]:opacity-10` classes on the `item` to animate the opacity change.
::

### Fade

This plugin is used to replace the Embla Carousel scroll functionality with **fade transitions**.

Use the `fade` prop as a boolean or an object to configure the [Fade plugin](https://www.embla-carousel.com/plugins/fade/){rel="nofollow"}.

::docs-component-example{.p-8.pb-12 name="carousel-fade-example"}
::

### Wheel Gestures

This plugin is used to extend Embla Carousel with the ability to **use the mouse/trackpad wheel** to navigate the carousel.

Use the `wheel-gestures` prop as a boolean or an object to configure the [Wheel Gestures plugin](https://www.embla-carousel.com/plugins/wheel-gestures/){rel="nofollow"}.

::note
Use your mouse wheel to scroll the carousel.
::

::docs-component-example{.p-8.px-16 name="carousel-wheel-gestures-example"}
::

## Examples

### With thumbnails

You can use the [`emblaApi`](https://akar.vinicunca.dev/#expose) function [scrollTo](https://www.embla-carousel.com/api/methods/#scrollto){rel="nofollow"} to display thumbnails under the carousel that allows you to navigate to a specific slide.

::docs-component-example{.p-8.px-16 name="carousel-thumbnails-example"}
::

## API

### Props

::docs-pohon-props
::

### Slots

::docs-pohon-slots
::

### Emits

::docs-pohon-emits
::

### Expose

You can access the typed component instance using [`useTemplateRef`](https://vuejs.org/api/composition-api-helpers.html#usetemplateref){rel="nofollow"}.

```vue
<script setup lang="ts">
const carousel = useTemplateRef('carousel');
</script>

<template>
  <PCarousel ref="carousel" />
</template>
```

This will give you access to the following:

| Name       | Type                                                                                                      |
| ---------- | --------------------------------------------------------------------------------------------------------- |
| `emblaRef` | `Ref<HTMLElement | null>`                                                                                 |
| `emblaApi` | [`Ref<EmblaCarouselType | null>`](https://www.embla-carousel.com/api/methods/#typescript){rel="nofollow"} |

## Theme

::docs-pohon-theme
::

## Changelog

::docs-component-changelog
::


# Checkbox

## Usage

Use the `v-model` directive to control the checked state of the Checkbox.

::docs-pohon-preview
---
external:
  - modelValue
ignore:
  - modelValue
props:
  modelValue: true
---
::

Use the `default-value` prop to set the initial value when you do not need to control its state.

::docs-pohon-preview{:ignore='["defaultValue"]' :props='{"defaultValue":true}'}
::

### Indeterminate

Use the `indeterminate` value in the `v-model` directive or `default-value` prop to set the Checkbox to an [indeterminate state](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox#indeterminate_state_checkboxes){rel="nofollow"}.

::docs-pohon-preview
---
ignore:
  - defaultValue
props:
  defaultValue: indeterminate
---
::

### Indeterminate Icon

Use the `indeterminate-icon` prop to customize the indeterminate icon. Defaults to `i-lucide:minus`.

::docs-pohon-preview
---
ignore:
  - defaultValue
props:
  defaultValue: indeterminate
  indeterminateIcon: i-lucide:plus
---
::

::docs-framework-only
#nuxt
  :::tip
  ---
  to: https://akar.vinicunca.dev/docs/pohon/getting-started/integrations/icons/nuxt#theme
  ---
  You can customize this icon globally in your `app.config.ts` under `pohon.icons.minus` key.
  :::

#vue
  :::tip
  ---
  to: https://akar.vinicunca.dev/docs/pohon/getting-started/integrations/icons/vue#theme
  ---
  You can customize this icon globally in your `vite.config.ts` under `pohon.icons.minus` key.
  :::
::

### Label

Use the `label` prop to set the label of the Checkbox.

::docs-pohon-preview{:props='{"label":"Check me"}'}
::

When using the `required` prop, an asterisk is added next to the label.

::docs-pohon-preview
---
ignore:
  - label
props:
  required: true
  label: Check me
---
::

### Description

Use the `description` prop to set the description of the Checkbox.

::docs-pohon-preview
---
ignore:
  - label
props:
  label: Check me
  description: This is a checkbox.
---
::

### Icon

Use the `icon` prop to set the icon of the Checkbox when it is checked. Defaults to `i-lucide:check`.

::docs-pohon-preview
---
ignore:
  - label
  - defaultValue
props:
  icon: i-lucide:heart
  defaultValue: true
  label: Check me
---
::

::docs-framework-only
#nuxt
  :::tip
  ---
  to: https://akar.vinicunca.dev/docs/pohon/getting-started/integrations/icons/nuxt#theme
  ---
  You can customize this icon globally in your `app.config.ts` under `pohon.icons.check` key.
  :::

#vue
  :::tip
  ---
  to: https://akar.vinicunca.dev/docs/pohon/getting-started/integrations/icons/vue#theme
  ---
  You can customize this icon globally in your `vite.config.ts` under `pohon.icons.check` key.
  :::
::

### Color

Use the `color` prop to change the color of the Checkbox.

::docs-pohon-preview
---
ignore:
  - label
  - defaultValue
props:
  color: neutral
  defaultValue: true
  label: Check me
---
::

### Variant

Use the `variant` prop to change the variant of the Checkbox.

::docs-pohon-preview
---
ignore:
  - label
  - defaultValue
props:
  color: primary
  variant: card
  defaultValue: true
  label: Check me
---
::

### Size

Use the `size` prop to change the size of the Checkbox.

::docs-pohon-preview
---
ignore:
  - label
  - defaultValue
props:
  size: xl
  variant: list
  defaultValue: true
  label: Check me
---
::

### Indicator

Use the `indicator` prop to change the position or hide the indicator. Defaults to `start`.

::docs-pohon-preview
---
ignore:
  - label
  - defaultValue
props:
  indicator: end
  variant: card
  defaultValue: true
  label: Check me
---
::

### Disabled

Use the `disabled` prop to disable the Checkbox.

::docs-pohon-preview
---
ignore:
  - label
props:
  disabled: true
  label: Check me
---
::

## API

### Props

::docs-pohon-props
::

### Slots

::docs-pohon-slots
::

### Emits

::docs-pohon-emits
::

::callout
---
icon: i-simple-icons:mdnwebdocs
target: _blank
to: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attributes
---
This component also supports all native `<button>` HTML attributes.
::

## Theme

::docs-pohon-theme
::

## Akar

::docs-akar-to-pohon
---
mode: pohon
to: https://akar.vinicunca.dev/docs/akar/components/checkbox
---
::

## Changelog

::docs-component-changelog
::


# CheckboxGroup

## Usage

Use the `v-model` directive to control the value of the CheckboxGroup or the `default-value` prop to set the initial value when you do not need to control its state.

::docs-pohon-preview
---
external:
  - items
  - modelValue
ignore:
  - modelValue
  - items
prettier: true
props:
  modelValue:
    - System
  items:
    - System
    - Light
    - Dark
---
::

### Items

Use the `items` prop as an array of strings or numbers:

::docs-pohon-preview
---
external:
  - items
  - modelValue
ignore:
  - modelValue
  - items
prettier: true
props:
  modelValue:
    - System
  items:
    - System
    - Light
    - Dark
---
::

You can also pass an array of objects with the following properties:

- `label?: string`
- `description?: string`
- [`value?: string`](https://akar.vinicunca.dev/#value-key)
- `disabled?: boolean`
- `class?: any`
- `pohon?: { item?: ClassNameValue, container?: ClassNameValue, base?: ClassNameValue, 'indicator'?: ClassNameValue, icon?: ClassNameValue, wrapper?: ClassNameValue, label?: ClassNameValue, description?: ClassNameValue }`

::docs-pohon-preview
---
external:
  - items
  - modelValue
externalTypes:
  - PCheckboxGroupItem[]
ignore:
  - modelValue
  - items
props:
  modelValue:
    - system
  items:
    - label: System
      description: This is the first option.
      value: system
    - label: Light
      description: This is the second option.
      value: light
    - label: Dark
      description: This is the third option.
      value: dark
---
::

::caution
When using objects, you need to reference the `value` property of the object in the `v-model` directive or the `default-value` prop.
::

### Value Key

You can change the property that is used to set the value by using the `value-key` prop. Defaults to `value`.

::docs-pohon-preview
---
external:
  - items
  - modelValue
externalTypes:
  - PCheckboxGroupItem[]
ignore:
  - modelValue
  - items
  - valueKey
props:
  modelValue:
    - light
  valueKey: id
  items:
    - label: System
      description: This is the first option.
      id: system
    - label: Light
      description: This is the second option.
      id: light
    - label: Dark
      description: This is the third option.
      id: dark
---
::

### Legend

Use the `legend` prop to set the legend of the CheckboxGroup.

::docs-pohon-preview
---
external:
  - items
ignore:
  - defaultValue
  - items
prettier: true
props:
  legend: Theme
  defaultValue:
    - System
  items:
    - System
    - Light
    - Dark
---
::

### Color

Use the `color` prop to change the color of the CheckboxGroup.

::docs-pohon-preview
---
external:
  - items
ignore:
  - defaultValue
  - items
items:
  color:
    - primary
    - secondary
    - success
    - info
    - warning
    - error
    - neutral
prettier: true
props:
  color: neutral
  defaultValue:
    - System
  items:
    - System
    - Light
    - Dark
---
::

### Variant

Use the `variant` prop to change the variant of the CheckboxGroup.

::docs-pohon-preview
---
external:
  - items
ignore:
  - defaultValue
  - items
items:
  color:
    - primary
    - secondary
    - success
    - info
    - warning
    - error
    - neutral
  variant:
    - list
    - card
    - table
prettier: true
props:
  color: primary
  variant: card
  defaultValue:
    - System
  items:
    - System
    - Light
    - Dark
---
::

### Size

Use the `size` prop to change the size of the CheckboxGroup.

::docs-pohon-preview
---
external:
  - items
ignore:
  - defaultValue
  - items
items:
  variant:
    - list
    - card
    - table
prettier: true
props:
  size: xl
  variant: list
  defaultValue:
    - System
  items:
    - System
    - Light
    - Dark
---
::

### Orientation

Use the `orientation` prop to change the orientation of the CheckboxGroup. Defaults to `vertical`.

::docs-pohon-preview
---
external:
  - items
ignore:
  - defaultValue
  - items
items:
  variant:
    - list
    - card
    - table
prettier: true
props:
  orientation: horizontal
  variant: list
  defaultValue:
    - System
  items:
    - System
    - Light
    - Dark
---
::

### Indicator

Use the `indicator` prop to change the position or hide the indicator. Defaults to `start`.

::docs-pohon-preview
---
external:
  - items
ignore:
  - defaultValue
  - items
items:
  indicator:
    - start
    - end
    - hidden
  variant:
    - list
    - card
    - table
prettier: true
props:
  indicator: end
  variant: card
  defaultValue:
    - System
  items:
    - System
    - Light
    - Dark
---
::

### Disabled

Use the `disabled` prop to disable the CheckboxGroup.

::docs-pohon-preview
---
external:
  - items
ignore:
  - defaultValue
  - items
prettier: true
props:
  disabled: true
  defaultValue:
    - System
  items:
    - System
    - Light
    - Dark
---
::

## API

### Props

::docs-pohon-props
::

### Slots

::docs-pohon-slots
::

### Emits

::docs-pohon-emits
::

## Theme

::docs-pohon-theme
::

## Changelog

::docs-component-changelog
::


# Chip

## Usage

Wrap any component with a Chip to display an indicator.

::docs-pohon-preview
---
prettier: true
slots:
  default: |
    
    <PButton icon="i-lucide:mail" color="neutral" variant="subtle" />
---
  :::p-button{color="neutral" icon="i-lucide:mail" variant="subtle"}
  :::
::

### Color

Use the `color` prop to change the color of the Chip.

::docs-pohon-preview
---
prettier: true
props:
  color: neutral
slots:
  default: |
    
    <PButton icon="i-lucide:mail" color="neutral" variant="subtle" />
---
  :::p-button{color="neutral" icon="i-lucide:mail" variant="subtle"}
  :::
::

### Size

Use the `size` prop to change the size of the Chip.

::docs-pohon-preview
---
prettier: true
props:
  size: 3xl
slots:
  default: |
    
    <PButton icon="i-lucide:mail" color="neutral" variant="subtle" />
---
  :::p-button{color="neutral" icon="i-lucide:mail" variant="subtle"}
  :::
::

### Text

Use the `text` prop to set the text of the Chip.

::docs-pohon-preview
---
prettier: true
props:
  text: 5
  size: 3xl
slots:
  default: |
    
    <PButton icon="i-lucide:mail" color="neutral" variant="subtle" />
---
  :::p-button{color="neutral" icon="i-lucide:mail" variant="subtle"}
  :::
::

### Position

Use the `position` prop to change the position of the Chip.

::docs-pohon-preview
---
prettier: true
props:
  position: bottom-left
slots:
  default: |
    
    <PButton icon="i-lucide:mail" color="neutral" variant="subtle" />
---
  :::p-button{color="neutral" icon="i-lucide:mail" variant="subtle"}
  :::
::

### Inset

Use the `inset` prop to display the Chip inside the component. This is useful when dealing with rounded components.

::docs-pohon-preview
---
prettier: true
props:
  inset: true
slots:
  default: |
    
    <PAvatar src="https://github.com/praburangki.png" />
---
  :::p-avatar{src="https://github.com/praburangki.png"}
  :::
::

### Standalone

Use the `standalone` prop alongside the `inset` prop to display the Chip inline.

::docs-pohon-preview{:props='{"standalone":true,"inset":true}'}
::

::note
It's used this way in the [`CommandPalette`](https://akar.vinicunca.dev/docs/pohon/components/command-palette), [`InputMenu`](https://akar.vinicunca.dev/docs/pohon/components/input-menu), [`Select`](https://akar.vinicunca.dev/docs/pohon/components/select) or [`SelectMenu`](https://akar.vinicunca.dev/docs/pohon/components/select-menu) components for example.
::

## Examples

### Control visibility

You can control the visibility of the Chip using the `show` prop.

::docs-component-example{name="chip-show-example"}
::

::note
In this example, the Chip has a color per status and is displayed when the status is not `offline`.
::

## API

### Props

::docs-pohon-props
::

### Slots

::docs-pohon-slots
::

### Emits

::docs-pohon-emits
::

## Theme

::docs-pohon-theme
::

## Changelog

::docs-component-changelog
::


# Collapsible

## Usage

Use a [PButton](https://akar.vinicunca.dev/docs/pohon/components/button) or **any other component** in the default slot of the Collapsible.

Then, use the `#content` slot to add the content displayed when the Collapsible is open.

::docs-pohon-preview
---
ignore:
  - class
prettier: true
props:
  class: flex flex-col gap-2 w-48 bg-background p-4 rounded-md
slots:
  default: >
    
    <PButton label="Open" color="neutral" variant="subtle"
    trailing-icon="i-lucide:chevron-down" block />
  content: |
    
    <CorePlaceholder class="h-48" />
---
  :::p-button
  ---
  block: true
  color: neutral
  label: Open
  trailing-icon: i-lucide:chevron-down
  variant: subtle
  ---
  :::

#content
  :::core-placeholder{.h-48}
  :::
::

### Unmount

Use the `unmount-on-hide` prop to prevent the content from being unmounted when the Collapsible is collapsed. Defaults to `true`.

::docs-pohon-preview
---
ignore:
  - class
prettier: true
props:
  unmountOnHide: false
  class: flex flex-col gap-2 w-48 bg-background p-4 rounded-md
slots:
  default: >
    
    <PButton label="Open" color="neutral" variant="subtle"
    trailing-icon="i-lucide:chevron-down" block />
  content: |
    
    <CorePlaceholder class="h-48" />
---
  :::p-button
  ---
  block: true
  color: neutral
  label: Open
  trailing-icon: i-lucide:chevron-down
  variant: subtle
  ---
  :::

#content
  :::core-placeholder{.h-48}
  :::
::

::note
You can inspect the DOM to see the content being rendered.
::

### Disabled

Use the `disabled` prop to disable the Collapsible.

::docs-pohon-preview
---
ignore:
  - class
prettier: true
props:
  class: flex flex-col gap-2 w-48 bg-background p-4 rounded-md
  disabled: true
slots:
  default: >
    
    <PButton label="Open" color="neutral" variant="subtle"
    trailing-icon="i-lucide:chevron-down" block />
  content: |
    
    <CorePlaceholder class="h-48" />
---
  :::p-button
  ---
  block: true
  color: neutral
  label: Open
  trailing-icon: i-lucide:chevron-down
  variant: subtle
  ---
  :::

#content
  :::core-placeholder{.h-48}
  :::
::

## Examples

### Control open state

You can control the open state by using the `default-open` prop or the `v-model:open` directive.

::docs-component-example{name="collapsible-open-example"}
::

::note
In this example, leveraging [`defineShortcuts`](https://akar.vinicunca.dev/docs/pohon/composables/define-shortcuts), you can toggle the Collapsible by pressing ``.
::

::tip
This allows you to move the trigger outside of the Collapsible or remove it entirely.
::

### With rotating icon

Here is an example with a rotating icon in the Button that indicates the open state of the Collapsible.

::docs-component-example{name="collapsible-icon-example"}
::

## API

### Props

::docs-pohon-props
::

### Emits

::docs-pohon-emits
::

### Slots

::docs-pohon-slots
::

## Theme

::docs-pohon-theme
::

### Anatomy

Here is the anatomy of themeable parts of the Collapsible component:

Coming soon...

## Akar

::docs-akar-to-pohon
---
mode: pohon
to: https://akar.vinicunca.dev/docs/akar/components/calendar
---
::

## Changelog

::docs-component-changelog
::


# ColorModeAvatar

## Usage

The ColorModeAvatar component extends the [Avatar](https://akar.vinicunca.dev/docs/pohon/components/avatar) component, so you can pass any property such as `size`, `icon`, etc.

Use the `light` and `dark` props to define the source for light and dark mode.

::docs-pohon-preview
---
props:
  light: https://github.com/vuejs.png
  dark: https://github.com/nuxt.png
prefix: color-mode
---
::

::note
Switch between light and dark mode to see the different images: :p-color-mode-select{size="sm"}
::

## API

### Props

::docs-pohon-props
::

::callout
---
icon: i-simple-icons:mdnwebdocs
target: _blank
to: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attributes
---
This component also supports all native `<img>` HTML attributes.
::

## Changelog

::docs-component-changelog{prefix="color-mode"}
::


# ColorModeButton

## Usage

The ColorModeButton component extends the [Button](https://akar.vinicunca.dev/docs/pohon/components/button) component, so you can pass any property such as `color`, `variant`, `size`, etc.

::docs-pohon-preview{prefix="color-mode"}
::

::note
The button defaults to `color="neutral"` and `variant="ghost"`.
::

## Examples

### With custom icons

::docs-framework-only
#nuxt
  :::div
  Use the `app.config.ts` to customize the icon with the `pohon.icons` property:
  
  ```ts [app.config.ts]
  export default defineAppConfig({
    pohon: {
      icons: {
        light: 'i-ph:sun',
        dark: 'i-ph:moon'
      }
    }
  })
  ```
  :::

#vue
  :::div
  Use the `vite.config.ts` to customize the icon with the `pohon.icons` property:
  
  ```ts [vite.config.ts]
  import { defineConfig } from 'vite'
  import vue from '@vitejs/plugin-vue'
  import pohon from '@nuxt/ui/vite'
  
  export default defineConfig({
    plugins: [
      vue(),
      pohon({
        pohon: {
          icons: {
            light: 'i-ph:sun',
            dark: 'i-ph:moon'
          }
        }
      })
    ]
  })
  ```
  :::
::

### With fallback slot

As the button is wrapped in a [ClientOnly](https://nuxt.com/docs/api/components/client-only){rel="nofollow"} component, you can pass a `fallback` slot to display a placeholder while the component is loading.

::docs-pohon-preview
---
prettier: true
slots:
  fallback: |
    
    <PButton loading variant="ghost" color="neutral" />
prefix: color-mode
---
#fallback
  :::p-button{loading color="neutral" variant="ghost"}
  :::
::

## API

### Props

::docs-pohon-props
::

::callout
---
icon: i-simple-icons:mdnwebdocs
target: _blank
to: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attributes
---
This component also supports all native `<button>` HTML attributes.
::

### Slots

::docs-pohon-slots
::

## Changelog

::docs-component-changelog{prefix="color-mode"}
::


# ColorModeImage

## Usage

::docs-pohon-preview
---
ignore:
  - width
  - height
prettier: true
props:
  light: https://picsum.photos/id/29/400
  dark: https://picsum.photos/id/46/400
  width: 200
  height: 200
prefix: color-mode
---
::

::note
Switch between light and dark mode to see the different images: :p-color-mode-select{size="sm"}
::

## API

### Props

::docs-pohon-props
::

::callout
---
icon: i-simple-icons:mdnwebdocs
target: _blank
to: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attributes
---
This component also supports all native `<img>` HTML attributes.
::

## Changelog

::docs-component-changelog{prefix="color-mode"}
::


# ColorModeSelect

## Usage

The ColorModeSelect component extends the [SelectMenu](https://akar.vinicunca.dev/docs/pohon/components/select-menu) component, so you can pass any property such as `color`, `variant`, `size`, etc.

::docs-pohon-preview{prefix="color-mode"}
::

## Examples

### With custom icons

::docs-framework-only
#nuxt
  :::div
  Use the `app.config.ts` to customize the icon with the `pohon.icons` property:
  
  ```ts [app.config.ts]
  export default defineAppConfig({
    pohon: {
      icons: {
        system: 'i-ph:desktop',
        light: 'i-ph:sun',
        dark: 'i-ph:moon'
      }
    }
  })
  ```
  :::

#vue
  :::div
  Use the `vite.config.ts` to customize the icon with the `pohon.icons` property:
  
  ```ts [vite.config.ts]
  import { defineConfig } from 'vite'
  import vue from '@vitejs/plugin-vue'
  import pohon from '@nuxt/ui/vite'
  
  export default defineConfig({
    plugins: [
      vue(),
      pohon({
        pohon: {
          icons: {
            light: 'i-ph:sun',
            dark: 'i-ph:moon'
          }
        }
      })
    ]
  })
  ```
  :::
::

## API

### Props

::docs-pohon-props
::

## Changelog

::docs-component-changelog{prefix="color-mode"}
::


# ColorModeSwitch

## Usage

The ColorModeSwitch component extends the [Switch](https://akar.vinicunca.dev/docs/pohon/components/switch) component, so you can pass any property such as `color`, `size`, etc.

::docs-pohon-preview{prefix="color-mode"}
::

## Examples

### With custom icons

::docs-framework-only
#nuxt
  :::div
  Use the `app.config.ts` to customize the icon with the `pohon.icons` property:
  
  ```ts [app.config.ts]
  export default defineAppConfig({
    pohon: {
      icons: {
        light: 'i-ph:sun',
        dark: 'i-ph:moon'
      }
    }
  })
  ```
  :::

#vue
  :::div
  Use the `vite.config.ts` to customize the icon with the `pohon.icons` property:
  
  ```ts [vite.config.ts]
  import { defineConfig } from 'vite'
  import vue from '@vitejs/plugin-vue'
  import pohon from '@nuxt/ui/vite'
  
  export default defineConfig({
    plugins: [
      vue(),
      pohon({
        pohon: {
          icons: {
            light: 'i-ph:sun',
            dark: 'i-ph:moon'
          }
        }
      })
    ]
  })
  ```
  :::
::

## API

### Props

::docs-pohon-props
::

## Changelog

::docs-component-changelog{prefix="color-mode"}
::


# ColorPicker

## Usage

Use the `v-model` directive to control the value of the ColorPicker.

::docs-pohon-preview
---
external:
  - modelValue
ignore:
  - modelValue
props:
  modelValue: "#00C16A"
---
::

Use the `default-value` prop to set the initial value when you do not need to control its state.

::docs-pohon-preview
---
ignore:
  - defaultValue
props:
  defaultValue: "#00BCD4"
---
::

### RGB Format

Use the `format` prop to set `rgb` value of the ColorPicker.

::docs-pohon-preview
---
external:
  - modelValue
ignore:
  - modelValue
  - format
props:
  format: rgb
  modelValue: rgb(0, 193, 106)
---
::

### HSL Format

Use the `format` prop to set `hsl` value of the ColorPicker.

::docs-pohon-preview
---
external:
  - modelValue
ignore:
  - modelValue
  - format
props:
  format: hsl
  modelValue: hsl(153, 100%, 37.8%)
---
::

### CMYK Format

Use the `format` prop to set `cmyk` value of the ColorPicker.

::docs-pohon-preview
---
external:
  - modelValue
ignore:
  - modelValue
  - format
props:
  format: cmyk
  modelValue: cmyk(100%, 0%, 45.08%, 24.31%)
---
::

### CIELab Format

Use the `format` prop to set `lab` value of the ColorPicker.

::docs-pohon-preview
---
external:
  - modelValue
ignore:
  - modelValue
  - format
props:
  format: lab
  modelValue: lab(68.88% -60.41% 32.55%)
---
::

### Throttle

Use the `throttle` prop to set the throttle value of the ColorPicker.

::docs-pohon-preview
---
external:
  - modelValue
ignore:
  - modelValue
props:
  throttle: 100
  modelValue: "#00C16A"
---
::

### Size

Use the `size` prop to set the size of the ColorPicker.

::docs-pohon-preview{:props='{"size":"xl"}'}
::

### Disabled

Use the `disabled` prop to disable the ColorPicker.

::docs-pohon-preview{:props='{"disabled":true}'}
::

## Examples

### As a Color chooser

Use a [Button](https://akar.vinicunca.dev/docs/pohon/components/button) and a [Popover](https://akar.vinicunca.dev/docs/pohon/components/popover) component to create a color chooser.

::docs-component-example{name="color-picker-chooser-example"}
::

## API

### Props

::docs-pohon-props
::

### Emits

::docs-pohon-emits
::

## Theme

::docs-pohon-theme
::

## Changelog

::docs-component-changelog
::


# CommandPalette

## Usage

Use the `v-model` directive to control the value of the CommandPalette or the `default-value` prop to set the initial value when you do not need to control its state.

::docs-pohon-preview
---
collapse: true
external:
  - groups
  - modelValue
hide:
  - autofocus
ignore:
  - groups
  - modelValue
  - class
props:
  modelValue: {}
  autofocus: false
  groups:
    - id: users
      label: Users
      items:
        - label: praburangki
          suffix: praburangki
          avatar:
            src: https://github.com/praburangki.png
        - label: Wahyu Ivan
          suffix: wahyu-ivan
          avatar:
            src: https://github.com/wahyu-ivan.png
        - label: Sébastien Chopin
          suffix: atinux
          avatar:
            src: https://github.com/atinux.png
        - label: Hugo Richard
          suffix: HugoRCD
          avatar:
            src: https://github.com/HugoRCD.png
        - label: Sandro Circi
          suffix: sandros94
          avatar:
            src: https://github.com/sandros94.png
        - label: Daniel Roe
          suffix: danielroe
          avatar:
            src: https://github.com/danielroe.png
        - label: Jakub Michálek
          suffix: J-Michalek
          avatar:
            src: https://github.com/J-Michalek.png
        - label: Eugen Istoc
          suffix: genu
          avatar:
            src: https://github.com/genu.png
  class: flex-1 h-80
class: akar:p-0
---
::

::tip{to="https://akar.vinicunca.dev/#control-selected-items"}
You can also use the `@update:model-value` event to listen to the selected item(s).
::

### Groups

The CommandPalette component filters groups and ranks matching commands by relevance as users type. It provides dynamic, instant search results for efficient command discovery. Use the `groups` prop as an array of objects with the following properties:

- `id: string`
- `label?: string`
- `slot?: string`
- `items?: PCommandPaletteItem[]`
- [`ignoreFilter?: boolean`](https://akar.vinicunca.dev/#with-ignore-filter)
- [`postFilter?: (searchTerm: string, items: T[]) => T[]`](https://akar.vinicunca.dev/#with-post-filtered-items)
- `highlightedIcon?: string`

::caution
You must provide an `id` for each group otherwise the group will be ignored.
::

Each group contains an `items` array of objects that define the commands. Each item can have the following properties:

- `prefix?: string`
- `label?: string`
- `suffix?: string`
- `icon?: string`
- `avatar?: AvatarProps`
- `chip?: ChipProps`
- `kbds?: string[] | KbdProps[]`
- `active?: boolean`
- `loading?: boolean`
- `disabled?: boolean`
- [`slot?: string`](https://akar.vinicunca.dev/#with-custom-slot)
- `placeholder?: string`
- `children?: PCommandPaletteItem[]`
- `onSelect?: (e: Event) => void`
- `class?: any`
- `pohon?: { item?: ClassNameValue, itemLeadingIcon?: ClassNameValue, itemLeadingAvatarSize?: ClassNameValue, itemLeadingAvatar?: ClassNameValue, itemLeadingChipSize?: ClassNameValue, itemLeadingChip?: ClassNameValue, itemLabel?: ClassNameValue, itemLabelPrefix?: ClassNameValue, itemLabelBase?: ClassNameValue, itemLabelSuffix?: ClassNameValue, itemTrailing?: ClassNameValue, itemTrailingKbds?: ClassNameValue, itemTrailingKbdsSize?: ClassNameValue, itemTrailingHighlightedIcon?: ClassNameValue, itemTrailingIcon?: ClassNameValue }`

You can pass any property from the [Link](https://akar.vinicunca.dev/docs/pohon/components/link#props) component such as `to`, `target`, etc.

::docs-pohon-preview
---
collapse: true
external:
  - groups
  - modelValue
hide:
  - autofocus
ignore:
  - groups
  - modelValue
  - class
props:
  modelValue: {}
  autofocus: false
  groups:
    - id: users
      label: Users
      items:
        - label: praburangki
          suffix: praburangki
          avatar:
            src: https://github.com/praburangki.png
        - label: Wahyu Ivan
          suffix: wahyu-ivan
          avatar:
            src: https://github.com/wahyu-ivan.png
        - label: Sébastien Chopin
          suffix: atinux
          avatar:
            src: https://github.com/atinux.png
        - label: Hugo Richard
          suffix: HugoRCD
          avatar:
            src: https://github.com/HugoRCD.png
        - label: Sandro Circi
          suffix: sandros94
          avatar:
            src: https://github.com/sandros94.png
        - label: Daniel Roe
          suffix: danielroe
          avatar:
            src: https://github.com/danielroe.png
        - label: Jakub Michálek
          suffix: J-Michalek
          avatar:
            src: https://github.com/J-Michalek.png
        - label: Eugen Istoc
          suffix: genu
          avatar:
            src: https://github.com/genu.png
  class: flex-1
class: akar:p-0
---
::

::tip{to="https://akar.vinicunca.dev/#with-children-in-items"}
Each item can take a `children` array of objects with the following properties to create submenus:
::

### Multiple

Use the `multiple` prop to allow multiple selections.

::docs-pohon-preview
---
collapse: true
external:
  - groups
  - modelValue
hide:
  - autofocus
ignore:
  - groups
  - modelValue
  - multiple
  - class
props:
  multiple: true
  autofocus: false
  modelValue: []
  groups:
    - id: users
      label: Users
      items:
        - label: praburangki
          suffix: praburangki
          avatar:
            src: https://github.com/praburangki.png
        - label: Wahyu Ivan
          suffix: wahyu-ivan
          avatar:
            src: https://github.com/wahyu-ivan.png
        - label: Sébastien Chopin
          suffix: atinux
          avatar:
            src: https://github.com/atinux.png
        - label: Hugo Richard
          suffix: HugoRCD
          avatar:
            src: https://github.com/HugoRCD.png
        - label: Sandro Circi
          suffix: sandros94
          avatar:
            src: https://github.com/sandros94.png
        - label: Daniel Roe
          suffix: danielroe
          avatar:
            src: https://github.com/danielroe.png
        - label: Jakub Michálek
          suffix: J-Michalek
          avatar:
            src: https://github.com/J-Michalek.png
        - label: Eugen Istoc
          suffix: genu
          avatar:
            src: https://github.com/genu.png
  class: flex-1
class: akar:p-0
---
::

::caution
Ensure to pass an array to the `default-value` prop or the `v-model` directive.
::

### Placeholder

Use the `placeholder` prop to change the placeholder text.

::docs-pohon-preview
---
collapse: true
external:
  - groups
hide:
  - autofocus
ignore:
  - class
  - groups
props:
  autofocus: false
  placeholder: Search an app...
  groups:
    - id: apps
      items:
        - label: Calendar
          icon: i-lucide:calendar
        - label: Music
          icon: i-lucide:music
        - label: Maps
          icon: i-lucide:map
  class: flex-1
class: akar:p-0
---
::

### Icon

Use the `icon` prop to customize the input [Icon](https://akar.vinicunca.dev/docs/pohon/components/icon). Defaults to `i-lucide:search`.

::docs-pohon-preview
---
collapse: true
external:
  - groups
hide:
  - autofocus
ignore:
  - class
  - groups
props:
  autofocus: false
  icon: i-lucide:box
  groups:
    - id: apps
      items:
        - label: Calendar
          icon: i-lucide:calendar
        - label: Music
          icon: i-lucide:music
        - label: Maps
          icon: i-lucide:map
  class: flex-1
class: akar:p-0
---
::

::docs-framework-only
#nuxt
  :::tip
  ---
  to: https://akar.vinicunca.dev/docs/pohon/getting-started/integrations/icons/nuxt#theme
  ---
  You can customize this icon globally in your `app.config.ts` under `pohon.icons.search` key.
  :::

#vue
  :::tip
  ---
  to: https://akar.vinicunca.dev/docs/pohon/getting-started/integrations/icons/vue#theme
  ---
  You can customize this icon globally in your `vite.config.ts` under `pohon.icons.search` key.
  :::
::

### Selected Icon

Use the `selected-icon` prop to customize the selected item [Icon](https://akar.vinicunca.dev/docs/pohon/components/icon). Defaults to `i-lucide:check`.

::docs-pohon-preview
---
collapse: true
external:
  - groups
  - modelValue
hide:
  - autofocus
ignore:
  - groups
  - modelValue
  - multiple
  - class
props:
  multiple: true
  autofocus: false
  modelValue:
    - label: praburangki
      suffix: praburangki
      avatar:
        src: https://github.com/praburangki.png
  selectedIcon: i-lucide:circle-check
  groups:
    - id: users
      label: Users
      items:
        - label: praburangki
          suffix: praburangki
          avatar:
            src: https://github.com/praburangki.png
        - label: Wahyu Ivan
          suffix: wahyu-ivan
          avatar:
            src: https://github.com/wahyu-ivan.png
        - label: Sébastien Chopin
          suffix: atinux
          avatar:
            src: https://github.com/atinux.png
        - label: Hugo Richard
          suffix: HugoRCD
          avatar:
            src: https://github.com/HugoRCD.png
        - label: Sandro Circi
          suffix: sandros94
          avatar:
            src: https://github.com/sandros94.png
        - label: Daniel Roe
          suffix: danielroe
          avatar:
            src: https://github.com/danielroe.png
        - label: Jakub Michálek
          suffix: J-Michalek
          avatar:
            src: https://github.com/J-Michalek.png
        - label: Eugen Istoc
          suffix: genu
          avatar:
            src: https://github.com/genu.png
  class: flex-1
class: akar:p-0
---
::

::docs-framework-only
#nuxt
  :::tip
  ---
  to: https://akar.vinicunca.dev/docs/pohon/getting-started/integrations/icons/nuxt#theme
  ---
  You can customize this icon globally in your `app.config.ts` under `pohon.icons.check` key.
  :::

#vue
  :::tip
  ---
  to: https://akar.vinicunca.dev/docs/pohon/getting-started/integrations/icons/vue#theme
  ---
  You can customize this icon globally in your `vite.config.ts` under `pohon.icons.check` key.
  :::
::

### Trailing Icon

Use the `trailing-icon` prop to customize the trailing [Icon](https://akar.vinicunca.dev/docs/pohon/components/icon) when an item has children. Defaults to `i-lucide:chevron-right`.

::docs-pohon-preview
---
collapse: true
external:
  - groups
hide:
  - autofocus
ignore:
  - groups
  - class
prettier: true
props:
  autofocus: false
  trailingIcon: i-lucide:arrow-right
  groups:
    - id: actions
      items:
        - label: Share
          icon: i-lucide:share
          children:
            - label: Email
              icon: i-lucide:mail
            - label: Copy
              icon: i-lucide:copy
            - label: Link
              icon: i-lucide:link
  class: flex-1
class: akar:p-0
---
::

::docs-framework-only
#nuxt
  :::tip
  ---
  to: https://akar.vinicunca.dev/docs/pohon/getting-started/integrations/icons/nuxt#theme
  ---
  You can customize this icon globally in your `app.config.ts` under `pohon.icons.chevronRight` key.
  :::

#vue
  :::tip
  ---
  to: https://akar.vinicunca.dev/docs/pohon/getting-started/integrations/icons/vue#theme
  ---
  You can customize this icon globally in your `vite.config.ts` under `pohon.icons.chevronRight` key.
  :::
::

### Loading

Use the `loading` prop to show a loading icon on the CommandPalette.

::docs-pohon-preview
---
collapse: true
external:
  - groups
hide:
  - autofocus
ignore:
  - class
  - groups
props:
  autofocus: false
  loading: true
  groups:
    - id: apps
      items:
        - label: Calendar
          icon: i-lucide:calendar
        - label: Music
          icon: i-lucide:music
        - label: Maps
          icon: i-lucide:map
  class: flex-1
class: akar:p-0
---
::

### Loading Icon

Use the `loading-icon` prop to customize the loading icon. Defaults to `i-lucide:loader-circle`.

::docs-pohon-preview
---
collapse: true
external:
  - groups
hide:
  - autofocus
ignore:
  - class
  - groups
props:
  autofocus: false
  loading: true
  loadingIcon: i-lucide:loader
  groups:
    - id: apps
      items:
        - label: Calendar
          icon: i-lucide:calendar
        - label: Music
          icon: i-lucide:music
        - label: Maps
          icon: i-lucide:map
  class: flex-1
class: akar:p-0
---
::

::docs-framework-only
#nuxt
  :::tip
  ---
  to: https://akar.vinicunca.dev/docs/pohon/getting-started/integrations/icons/nuxt#theme
  ---
  You can customize this icon globally in your `app.config.ts` under `pohon.icons.loading` key.
  :::

#vue
  :::tip
  ---
  to: https://akar.vinicunca.dev/docs/pohon/getting-started/integrations/icons/vue#theme
  ---
  You can customize this icon globally in your `vite.config.ts` under `pohon.icons.loading` key.
  :::
::

### Close

Use the `close` prop to display a [Button](https://akar.vinicunca.dev/docs/pohon/components/button) to dismiss the CommandPalette.

::tip
An `update:open` event will be emitted when the close button is clicked.
::

::docs-pohon-preview
---
collapse: true
external:
  - groups
hide:
  - autofocus
ignore:
  - class
  - groups
  - close
props:
  autofocus: false
  close: true
  groups:
    - id: apps
      items:
        - label: Calendar
          icon: i-lucide:calendar
        - label: Music
          icon: i-lucide:music
        - label: Maps
          icon: i-lucide:map
  class: flex-1
class: akar:p-0
---
::

You can pass any property from the [Button](https://akar.vinicunca.dev/docs/pohon/components/button) component to customize it.

::docs-pohon-preview
---
collapse: true
external:
  - groups
hide:
  - autofocus
ignore:
  - close.color
  - close.variant
  - groups
  - class
prettier: true
props:
  autofocus: false
  close:
    color: primary
    variant: outline
    class: rounded-full
  groups:
    - id: apps
      items:
        - label: Calendar
          icon: i-lucide:calendar
        - label: Music
          icon: i-lucide:music
        - label: Maps
          icon: i-lucide:map
  class: flex-1
class: akar:p-0
---
::

### Close Icon

Use the `close-icon` prop to customize the close button [Icon](https://akar.vinicunca.dev/docs/pohon/components/icon). Defaults to `i-lucide:x`.

::docs-pohon-preview
---
collapse: true
external:
  - groups
hide:
  - autofocus
ignore:
  - class
  - groups
  - close
props:
  autofocus: false
  close: true
  closeIcon: i-lucide:arrow-right
  groups:
    - id: apps
      items:
        - label: Calendar
          icon: i-lucide:calendar
        - label: Music
          icon: i-lucide:music
        - label: Maps
          icon: i-lucide:map
  class: flex-1
class: akar:p-0
---
::

::docs-framework-only
#nuxt
  :::tip
  ---
  to: https://akar.vinicunca.dev/docs/pohon/getting-started/integrations/icons/nuxt#theme
  ---
  You can customize this icon globally in your `app.config.ts` under `pohon.icons.close` key.
  :::

#vue
  :::tip
  ---
  to: https://akar.vinicunca.dev/docs/pohon/getting-started/integrations/icons/vue#theme
  ---
  You can customize this icon globally in your `vite.config.ts` under `pohon.icons.close` key.
  :::
::

### Back

Use the `back` prop to customize or hide the back button (with `false` value) displayed when navigating into a submenu.

You can pass any property from the [Button](https://akar.vinicunca.dev/docs/pohon/components/button) component to customize it.

::docs-pohon-preview
---
collapse: true
external:
  - groups
hide:
  - autofocus
ignore:
  - back.color
  - groups
  - class
prettier: true
props:
  autofocus: false
  back:
    color: primary
  groups:
    - id: actions
      items:
        - label: Share
          icon: i-lucide:share
          children:
            - label: Email
              icon: i-lucide:mail
            - label: Copy
              icon: i-lucide:copy
            - label: Link
              icon: i-lucide:link
  class: flex-1
class: akar:p-0
---
::

### Back Icon

Use the `back-icon` prop to customize the back button [Icon](https://akar.vinicunca.dev/docs/pohon/components/icon). Defaults to `i-lucide:arrow-left`.

::docs-pohon-preview
---
collapse: true
external:
  - groups
hide:
  - autofocus
ignore:
  - class
  - groups
  - back
props:
  autofocus: false
  back: true
  backIcon: i-lucide:house
  groups:
    - id: actions
      items:
        - label: Share
          icon: i-lucide:share
          children:
            - label: Email
              icon: i-lucide:mail
            - label: Copy
              icon: i-lucide:copy
            - label: Link
              icon: i-lucide:link
  class: flex-1
class: akar:p-0
---
::

::docs-framework-only
#nuxt
  :::tip
  ---
  to: https://akar.vinicunca.dev/docs/pohon/getting-started/integrations/icons/nuxt#theme
  ---
  You can customize this icon globally in your `app.config.ts` under `pohon.icons.arrowLeft` key.
  :::

#vue
  :::tip
  ---
  to: https://akar.vinicunca.dev/docs/pohon/getting-started/integrations/icons/vue#theme
  ---
  You can customize this icon globally in your `vite.config.ts` under `pohon.icons.arrowLeft` key.
  :::
::

### Disabled

Use the `disabled` prop to disable the CommandPalette.

::docs-pohon-preview
---
collapse: true
external:
  - groups
hide:
  - autofocus
ignore:
  - groups
  - class
props:
  autofocus: false
  disabled: true
  groups:
    - id: apps
      items:
        - label: Calendar
          icon: i-lucide:calendar
        - label: Music
          icon: i-lucide:music
        - label: Maps
          icon: i-lucide:map
  class: flex-1
class: akar:p-0
---
::

## Examples

### Control selected item(s)

You can control the selected item(s) by using the `default-value` prop or the `v-model` directive, by using the `onSelect` field on each item or by using the `@update:model-value` event.

::docs-component-example
---
collapse: true
props:
  autofocus: false
class: akar:p-0
name: command-palette-select-example
---
::

### Control search term

Use the `v-model:search-term` directive to control the search term.

::docs-component-example
---
collapse: true
props:
  autofocus: false
class: akar:p-0
name: command-palette-search-term-example
---
::

::note
This example uses the `@update:model-value` event to reset the search term when an item is selected.
::

### With children in items

You can create hierarchical menus by using the `children` property in items. When an item has children, it will automatically display a chevron icon and enable navigation into a submenu.

::docs-component-example
---
collapse: true
prettier: true
props:
  autofocus: false
class: akar:p-0
name: command-palette-items-children-example
---
::

::note
When navigating into a submenu:

- The search term is reset
- A back button appears in the input
- You can go back to the previous group by pressing the `` key
::

### With fetched items

You can fetch items from an API and use them in the CommandPalette.

::docs-component-example
---
collapse: true
props:
  autofocus: false
class: akar:p-0
name: command-palette-fetch-example
---
::

### With ignore filter

You can set the `ignoreFilter` field to `true` on a group to disable the internal search and use your own search logic.

::docs-component-example
---
collapse: true
props:
  autofocus: false
class: akar:p-0
name: command-palette-ignore-filter-example
---
::

::note
This example uses [`refDebounced`](https://vueuse.org/shared/refDebounced/#refdebounced){rel="nofollow"} to debounce the API calls.
::

### With post-filtered items

You can use the `postFilter` field on a group to filter items after the search happened.

::docs-component-example
---
collapse: true
props:
  autofocus: false
class: akar:p-0
name: command-palette-post-filter-example
---
::

::note
Start typing to see items with higher level appear.
::

### With custom fuse search

You can use the `fuse` prop to override the options of [useFuse](https://vueuse.org/integrations/useFuse){rel="nofollow"} which defaults to:

```ts
{
  fuseOptions: {
    ignoreLocation: true,
    threshold: 0.1,
    keys: ['label', 'suffix']
  },
  resultLimit: 12,
  matchAllWhenSearchEmpty: true
}
```

::tip
The `fuseOptions` are the options of [Fuse.js](https://www.fusejs.io/api/options.html){rel="nofollow"}, the `resultLimit` is the maximum number of results to return and the `matchAllWhenSearchEmpty` is a boolean to match all items when the search term is empty.
::

You can for example set `{ fuseOptions: { includeMatches: true } }` to highlight the search term in the items.

::docs-component-example
---
collapse: true
props:
  autofocus: false
class: akar:p-0
name: command-palette-fuse-example
---
::

### With virtualization

Use the `virtualize` prop to enable virtualization for large lists as a boolean or an object with options like `{ estimateSize: 32, overscan: 12 }`.
When enabled, all groups are flattened into a single list due to a limitation of Akar.

::docs-component-example
---
collapse: true
props:
  autofocus: false
class: akar:p-0
name: command-palette-virtualize-example
---
::

### Within a Popover

You can use the CommandPalette component inside a [Popover](https://akar.vinicunca.dev/docs/pohon/components/popover)'s content.

::docs-component-example
---
collapse: true
props:
  autofocus: false
name: popover-command-palette-example
---
::

### Within a Modal

You can use the CommandPalette component inside a [Modal](https://akar.vinicunca.dev/docs/pohon/components/dialog)'s content.

::docs-component-example
---
collapse: true
props:
  autofocus: false
name: modal-command-palette-example
---
::

### Within a Drawer

You can use the CommandPalette component inside a [Drawer](https://akar.vinicunca.dev/docs/pohon/components/drawer)'s content.

::docs-component-example
---
collapse: true
props:
  autofocus: false
name: drawer-command-palette-example
---
::

### Listen open state

When using the `close` prop, you can listen to the `update:open` event when the button is clicked.

::docs-component-example
---
collapse: true
props:
  autofocus: false
name: command-palette-open-example
---
::

::note
This can be useful when using the CommandPalette inside a [`Modal`](https://akar.vinicunca.dev/docs/pohon/components/dialog) for example.
::

### With footer slot

Use the `#footer` slot to add custom content at the bottom of the CommandPalette, such as keyboard shortcuts help or additional actions.

::docs-component-example
---
collapse: true
props:
  autofocus: false
class: akar:p-0
name: command-palette-footer-slot-example
---
::

### With custom slot

Use the `slot` property to customize a specific item or group.

You will have access to the following slots:

- `#{{ item.slot }}`
- `#{{ item.slot }}-leading`
- `#{{ item.slot }}-label`
- `#{{ item.slot }}-trailing`
- `#{{ group.slot }}`
- `#{{ group.slot }}-leading`
- `#{{ group.slot }}-label`
- `#{{ group.slot }}-trailing`

::docs-component-example
---
collapse: true
props:
  autofocus: false
class: akar:p-0
name: command-palette-custom-slot-example
---
::

::tip{to="https://akar.vinicunca.dev/#slots"}
You can also use the `#item`, `#item-leading`, `#item-label` and `#item-trailing` slots to customize all items.
::

## API

### Props

::docs-pohon-props
::

### Slots

::docs-pohon-slots
::

### Emits

::docs-pohon-emits
::

## Theme

::docs-pohon-theme
::

## Changelog

::docs-component-changelog
::


# Container

## Usage

Use the default slot to center and constrain the width of your content.

::docs-component-example{:props='{"class":"w-full"}' name="container-example"}
::

::tip
In this example, its max width is controlled by the `max-w-$container-8xl` class,
which `8xl` is defined in the UnoCSS theme.
::

## API

### Props

::docs-pohon-props
::

### Slots

::docs-pohon-slots
::

## Theme

::docs-pohon-theme
::

## Changelog

::docs-component-changelog
::


# ContentNavigation

::warning
---
to: https://akar.vinicunca.dev/docs/pohon/getting-started/integrations/content
---
This component is only available when the `@nuxt/content` module is installed.
::

## Usage

Use the `navigation` prop with the `navigation` value you get when fetching the navigation of your app.

::docs-component-example
---
overflowHidden: true
props:
  class: w-full
class: h-96 overflow-y-auto
name: content-navigation-example
---
::

### Type

Set the `type` prop to `single` to only allow one item to be open at a time. Defaults to `multiple`.

::docs-pohon-preview
---
collapse: true
external:
  - navigation
hide:
  - class
  - navigation
items:
  type:
    - single
    - multiple
prettier: true
props:
  class: w-full
  type: single
  navigation:
    - title: Guide
      icon: i-lucide:book-open
      path: "#getting-started"
      children:
        - title: Introduction
          path: "#introduction"
          active: true
        - title: Installation
          path: "#installation"
    - title: Composables
      icon: i-lucide:database
      path: "#composables"
      children:
        - title: defineShortcuts
          path: "#defineshortcuts"
        - title: useModal
          path: "#usemodal"
prefix: content
---
::

### Color

Use the `color` prop to change the color of the navigation links.

::docs-pohon-preview
---
collapse: true
external:
  - navigation
hide:
  - class
  - navigation
prettier: true
props:
  class: w-full
  color: neutral
  navigation:
    - title: Guide
      icon: i-lucide:book-open
      path: "#getting-started"
      children:
        - title: Introduction
          path: "#introduction"
          active: true
        - title: Installation
          path: "#installation"
    - title: Composables
      icon: i-lucide:database
      path: "#composables"
      children:
        - title: defineShortcuts
          path: "#defineshortcuts"
        - title: useModal
          path: "#usemodal"
prefix: content
---
::

### Variant

Use the `variant` prop to change the variant of the navigation links.

::docs-pohon-preview
---
collapse: true
external:
  - navigation
hide:
  - class
  - navigation
items:
  variant:
    - link
    - pill
prettier: true
props:
  class: w-full
  variant: link
  navigation:
    - title: Guide
      icon: i-lucide:book-open
      path: "#getting-started"
      children:
        - title: Introduction
          path: "#introduction"
          active: true
        - title: Installation
          path: "#installation"
    - title: Composables
      icon: i-lucide:database
      path: "#composables"
      children:
        - title: defineShortcuts
          path: "#defineshortcuts"
        - title: useModal
          path: "#usemodal"
prefix: content
---
::

### Highlight

Use the `highlight` prop to display a highlighted border for the active link.

Use the `highlight-color` prop to change the color of the border. It defaults to the `color` prop.

::docs-pohon-preview
---
collapse: true
external:
  - navigation
hide:
  - class
  - navigation
prettier: true
props:
  class: w-full
  highlight: true
  highlightColor: primary
  color: primary
  variant: pill
  navigation:
    - title: Guide
      icon: i-lucide:book-open
      path: "#getting-started"
      children:
        - title: Introduction
          path: "#introduction"
          active: true
        - title: Installation
          path: "#installation"
    - title: Composables
      icon: i-lucide:database
      path: "#composables"
      children:
        - title: defineShortcuts
          path: "#defineshortcuts"
        - title: useModal
          path: "#usemodal"
prefix: content
---
::

### Trailing Icon

::docs-pohon-preview
---
collapse: true
external:
  - navigation
hide:
  - class
  - navigation
prettier: true
props:
  class: w-full
  trailingIcon: i-lucide:arrow-up
  navigation:
    - title: Guide
      icon: i-lucide:book-open
      path: "#getting-started"
      children:
        - title: Introduction
          path: "#introduction"
          active: true
        - title: Installation
          path: "#installation"
    - title: Composables
      icon: i-lucide:database
      path: "#composables"
      children:
        - title: defineShortcuts
          path: "#defineshortcuts"
        - title: useModal
          path: "#usemodal"
prefix: content
---
::

## Examples

### Within a layout

```vue [layouts/docs.vue] {11}
<script setup lang="ts">
import type { ContentNavigationItem } from '@nuxt/content';

const navigation = inject<Ref<Array<ContentNavigationItem>>>('navigation');
</script>

<template>
  <ExampleLayout>
    <template #left>
      <div>
        <PContentNavigation
          :navigation="navigation"
          highlight
        />
      </div>
    </template>

    <slot />
  </ExampleLayout>
</template>
```

### Within a header

Use the ContentNavigation component inside the `content` slot of a [Header](https://akar.vinicunca.dev/docs/pohon/components/header) component to display the navigation of the page on mobile:

```vue [components/Header.vue] {9-11}
<script setup lang="ts">
import type { ContentNavigationItem } from '@nuxt/content';

const navigation = inject<Ref<Array<ContentNavigationItem>>>('navigation');
</script>

<template>
  <PHeader>
    <template #body>
      <PContentNavigation
        :navigation="navigation"
        highlight
      />
    </template>
  </PHeader>
</template>
```

## API

### Props

::docs-pohon-props
::

### Slots

::docs-pohon-slots
::

### Emits

::docs-pohon-emits
::

## Theme

::docs-pohon-theme
::

## Changelog

::docs-component-changelog{prefix="content"}
::


# ContentSearch

::warning
---
to: https://akar.vinicunca.dev/docs/pohon/getting-started/integrations/content
---
This component is only available when the `@nuxt/content` module is installed.
::

## Usage

The ContentSearch component extends the [CommandPalette](https://akar.vinicunca.dev/docs/pohon/components/command-palette) component, so you can pass any property such as `icon`, `placeholder`, etc.

Use the `files` and `navigation` props with the `files` and `navigation` values you fetched using the `queryCollectionSearchSections` and `queryCollectionNavigation` composables from `@nuxt/content`.

::docs-component-example
---
iframe:
  height: 500px;
iframeMobile: true
overflowHidden: true
source: false
name: content-search-example
---
::

::tip
You can open the CommandPalette by pressing `` ``, by using the [ContentSearchButton](https://akar.vinicunca.dev/docs/pohon/components/content-search-button) component or by using the `useContentSearch` composable: `const { open } = useContentSearch()`{.shiki,shiki-themes,one-dark-pro,one-dark-pro lang="ts"}.
::

### Shortcut

Use the `shortcut` prop to change the shortcut used in [defineShortcuts](https://akar.vinicunca.dev/docs/pohon/composables/define-shortcuts) to open the ContentSearch component. Defaults to `meta_k` (`` ``).

```vue [app.vue] {6}
<template>
  <PApp>
    <ClientOnly>
      <LazyUContentSearch
        v-model:search-term="searchTerm"
        shortcut="meta_k"
        :files="files"
        :navigation="navigation"
        :fuse="{ resultLimit: 42 }"
      />
    </ClientOnly>
  </PApp>
</template>
```

### Color Mode

By default, a group of commands will be added to the command palette so you can switch between light and dark mode. This will only take effect if the `colorMode` is not forced in a specific page which can be achieved through `definePageMeta`:

```vue [pages/index.vue]
<script setup lang="ts">
definePageMeta({
  colorMode: 'dark'
});
</script>
```

You can disable this behavior by setting the `color-mode` prop to `false`:

```vue [app.vue] {6}
<template>
  <PApp>
    <ClientOnly>
      <LazyUContentSearch
        v-model:search-term="searchTerm"
        :color-mode="false"
        :files="files"
        :navigation="navigation"
        :fuse="{ resultLimit: 42 }"
      />
    </ClientOnly>
  </PApp>
</template>
```

## Examples

### Within `app.vue`

Use the ContentSearch component in your `app.vue` or in a layout:

```vue [app.vue]
<script setup lang="ts">
const { data: navigation } = await useAsyncData('navigation', () => queryCollectionNavigation('content'));
const { data: files } = useLazyAsyncData('search', () => queryCollectionSearchSections('content'), {
  server: false
});

const links = [{
  label: 'Docs',
  icon: 'i-lucide:book',
  to: '/docs/pohon/getting-started'
}, {
  label: 'Components',
  icon: 'i-lucide:box',
  to: '/docs/pohon/components'
}, {
  label: 'Showcase',
  icon: 'i-lucide:presentation',
  to: '/showcase'
}];

const searchTerm = ref('');
</script>

<template>
  <PApp>
    <ClientOnly>
      <LazyUContentSearch
        v-model:search-term="searchTerm"
        :files="files"
        shortcut="meta_k"
        :navigation="navigation"
        :links="links"
        :fuse="{ resultLimit: 42 }"
      />
    </ClientOnly>
  </PApp>
</template>
```

::tip
It is recommended to wrap the `ContentSearch` component in a [ClientOnly](https://nuxt.com/docs/api/components/client-only){rel="nofollow"} component so it's not rendered on the server.
::

## API

### Props

::docs-pohon-props
::

### Slots

::docs-pohon-slots
::

### Emits

::docs-pohon-emits
::

### Expose

When accessing the component via a template ref, you can use the following:

| Name                | Type                                               |
| ------------------- | -------------------------------------------------- |
| `commandPaletteRef` | `Ref<InstanceType<typeof PCommandPalette> | null>` |

## Theme

::docs-pohon-theme
::

## Changelog

::docs-component-changelog{prefix="content"}
::


# ContentSearchButton

::warning
---
to: https://akar.vinicunca.dev/docs/pohon/getting-started/integrations/content
---
This component is only available when the `@nuxt/content` module is installed.
::

## Usage

The ContentSearchButton component is used to open the [ContentSearch](https://akar.vinicunca.dev/docs/pohon/components/content-search) modal.

::docs-pohon-preview{prefix="content"}
::

It extends the [Button](https://akar.vinicunca.dev/docs/pohon/components/button) component, so you can pass any property such as `color`, `variant`, `size`, etc.

::docs-pohon-preview
---
ignore:
  - variant
props:
  variant: subtle
prefix: content
---
::

::note{to="https://akar.vinicunca.dev/#collapsed"}
The button defaults to `color="neutral"` and `variant="outline"` when not collapsed, `variant="ghost"` when collapsed.
::

### Collapsed

Use the `collapsed` prop to show the button's label and [kbds](https://akar.vinicunca.dev/#kbds). Defaults to `true`.

::docs-pohon-preview{prettier :props='{"collapsed":false}' prefix="content"}
::

### Kbds

Use the `kbds` prop to display keyboard keys in the button. Defaults to `['meta', 'K']` to match the default shortcut of the [ContentSearch](https://akar.vinicunca.dev/docs/pohon/components/content-search#shortcut) component.

::docs-pohon-preview
---
ignore:
  - kbds
prettier: true
props:
  collapsed: false
  kbds:
    - alt
    - O
prefix: content
---
::

## API

### Props

::docs-pohon-props
::

::callout
---
icon: i-simple-icons:mdnwebdocs
target: _blank
to: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attributes
---
This component also supports all native `<button>` HTML attributes.
::

### Slots

::docs-pohon-slots
::

## Theme

::docs-pohon-theme
::

## Changelog

::docs-component-changelog{prefix="content"}
::


# ContentSurround

::warning
---
to: https://akar.vinicunca.dev/docs/pohon/getting-started/integrations/content
---
This component is only available when the `@nuxt/content` module is installed.
::

## Usage

Use the `surround` prop with the `surround` value you get when fetching a page surround.

::docs-component-example
---
props:
  class: w-full
name: content-surround-example
---
::

### Prev / Next

Use the `prev-icon` and `next-icon` props to customize the buttons [Icon](https://akar.vinicunca.dev/docs/pohon/components/icon).

::docs-pohon-preview
---
collapse: true
external:
  - surround
ignore:
  - surround
prettier: true
props:
  prevIcon: i-lucide:chevron-left
  nextIcon: i-lucide:chevron-right
  surround:
    - title: ContentSearchButton
      path: /docs/pohon/components/content-search-button
      stem: 3.components/content-search-button
      description: A pre-styled Button to open the ContentSearch modal.
    - title: ContentToc
      path: /docs/pohon/components/content-toc
      stem: 3.components/content-toc
      description: A sticky Table of Contents with customizable slots.
prefix: content
---
::

## Examples

### Within a page

Use the ContentSurround component in a page to display the prev and next links:

```vue [pages/[...slug\\].vue] {19}
<script setup lang="ts">
const route = useRoute();

const { data: page } = await useAsyncData(route.path, () => queryCollection('docs').path(route.path).first());
if (!page.value) {
  throw createError({ statusCode: 404, statusMessage: 'Page not found', fatal: true });
}
</script>

<template>
  <ExamplePage v-if="page">
    <ExamplePageHeader :title="page.title" />

    <ExamplePageBody>
      <ContentRenderer
        v-if="page.body"
        :value="page"
      />

      <PSeparator v-if="surround?.filter(Boolean).length" />

      <PContentSurround :surround="(surround as any)" />
    </ExamplePageBody>

    <template
      v-if="page?.body?.toc?.links?.length"
      #right
    >
      <PContentToc :links="page.body.toc.links" />
    </template>
  </ExamplePage>
</template>
```

## API

### Props

::docs-pohon-props
::

### Slots

::docs-pohon-slots
::

## Theme

::docs-pohon-theme
::

## Changelog

::docs-component-changelog{prefix="content"}
::


# ContentToc

::warning
---
to: https://akar.vinicunca.dev/docs/pohon/getting-started/integrations/content
---
This component is only available when the `@nuxt/content` module is installed.
::

## Usage

Use the `links` prop with the `page?.body?.toc?.links` you get when fetching a page.

::docs-component-example{:props='{"class":"w-full"}' name="content-toc-example"}
::

### Title

Use the `title` prop to change the title of the Table of Contents.

::docs-pohon-preview
---
collapse: true
external:
  - links
hide:
  - class
ignore:
  - links
prettier: true
props:
  title: On this page
  class: w-full
  links:
    - id: usage
      depth: 2
      text: Usage
      children:
        - id: title
          depth: 3
          text: Title
        - id: color
          depth: 3
          text: Color
        - id: highlight
          depth: 3
          text: Highlight
    - id: api
      depth: 2
      text: API
      children:
        - id: props
          depth: 3
          text: Props
        - id: slots
          depth: 3
          text: Slots
    - id: theme
      depth: 2
      text: Theme
prefix: content
---
::

### Color

Use the `color` prop to change the color of the links.

::docs-pohon-preview
---
collapse: true
external:
  - links
hide:
  - class
ignore:
  - links
prettier: true
props:
  color: neutral
  class: w-full
  links:
    - id: usage
      depth: 2
      text: Usage
      children:
        - id: title
          depth: 3
          text: Title
        - id: color
          depth: 3
          text: Color
        - id: highlight
          depth: 3
          text: Highlight
prefix: content
---
::

### Highlight

Use the `highlight` prop to display a highlighted border for the active item.

Use the `highlight-color` prop to change the color of the border. It defaults to the `color` prop.

::docs-pohon-preview
---
collapse: true
external:
  - links
hide:
  - class
ignore:
  - links
prettier: true
props:
  highlight: true
  highlightColor: neutral
  color: neutral
  class: w-full
  links:
    - id: usage
      depth: 2
      text: Usage
      children:
        - id: title
          depth: 3
          text: Title
        - id: color
          depth: 3
          text: Color
        - id: highlight
          depth: 3
          text: Highlight
prefix: content
---
::

## Examples

### Within a page

Use the ContentToc component in a page to display the Table of Contents:

```vue [pages/[...slug\\].vue] {22-24}
<script setup lang="ts">
const route = useRoute();

const { data: page } = await useAsyncData(route.path, () => queryCollection('docs').path(route.path).first());
if (!page.value) {
  throw createError({ statusCode: 404, statusMessage: 'Page not found', fatal: true });
}
</script>

<template>
  <ExamplePage v-if="page">
    <ExamplePageHeader :title="page.title" />

    <ExamplePageBody>
      <ContentRenderer
        v-if="page.body"
        :value="page"
      />

      <PSeparator v-if="surround?.filter(Boolean).length" />

      <PContentSurround :surround="(surround as any)" />
    </ExamplePageBody>

    <template
      v-if="page?.body?.toc?.links?.length"
      #right
    >
      <PContentToc :links="page.body.toc.links" />
    </template>
  </ExamplePage>
</template>
```

## API

### Props

::docs-pohon-props
::

### Slots

::docs-pohon-slots
::

### Emits

::docs-pohon-emits
::

## Theme

::docs-pohon-theme
::

## Changelog

::docs-component-changelog{prefix="content"}
::


# ContextMenu

## Usage

Use anything you like in the default slot of the ContextMenu, and right-click on it to display the menu.

::docs-pohon-preview
---
collapse: true
external:
  - items
ignore:
  - items
  - pohon.content
prettier: true
props:
  items:
    - - label: Appearance
        children:
          - label: System
            icon: i-lucide:monitor
          - label: Light
            icon: i-lucide:sun
          - label: Dark
            icon: i-lucide:moon
    - - label: Show Sidebar
        kbds:
          - meta
          - s
      - label: Show Toolbar
        kbds:
          - shift
          - meta
          - d
      - label: Collapse Pinned Tabs
        disabled: true
    - - label: Refresh the Page
      - label: Clear Cookies and Refresh
      - label: Clear Cache and Refresh
      - type: separator
      - label: Developer
        children:
          - - label: View Source
              kbds:
                - meta
                - shift
                - u
            - label: Developer Tools
              kbds:
                - option
                - meta
                - i
            - label: Inspect Elements
              kbds:
                - option
                - meta
                - c
          - - label: JavaScript Console
              kbds:
                - option
                - meta
                - j
slots:
  default: >
    
    <div class="flex items-center justify-center rounded-md border border-dashed
    border-border-accented text-sm aspect-video w-72">
      Right click here
    </div>
---
  :::div
  ---
  class: flex items-center justify-center rounded-md border border-dashed
    border-border-accented text-sm aspect-video w-72
  ---
  Right click here
  :::
::

### Items

Use the `items` prop as an array of objects with the following properties:

- `label?: string`
- `icon?: string`
- `avatar?: AvatarProps`
- `kbds?: string[] | KbdProps[]`
- [`type?: "link" | "label" | "separator" | "checkbox"`](https://akar.vinicunca.dev/#with-checkbox-items)
- [`color?: "error" | "primary" | "secondary" | "success" | "info" | "warning" | "neutral"`](https://akar.vinicunca.dev/#with-color-items)
- [`checked?: boolean`](https://akar.vinicunca.dev/#with-checkbox-items)
- `disabled?: boolean`
- [`slot?: string`](https://akar.vinicunca.dev/#with-custom-slot)
- `onSelect?: (e: Event) => void`
- [`onUpdateChecked?: (checked: boolean) => void`](https://akar.vinicunca.dev/#with-checkbox-items)
- `children?: PContextMenuItem[] | PContextMenuItem[][]`
- `class?: any`
- `pohon?: { item?: ClassNameValue, label?: ClassNameValue, separator?: ClassNameValue, itemLeadingIcon?: ClassNameValue, itemLeadingAvatarSize?: ClassNameValue, itemLeadingAvatar?: ClassNameValue, itemLabel?: ClassNameValue, itemLabelExternalIcon?: ClassNameValue, itemTrailing?: ClassNameValue, itemTrailingIcon?: ClassNameValue, itemTrailingKbds?: ClassNameValue, itemTrailingKbdsSize?: ClassNameValue }`

You can pass any property from the [Link](https://akar.vinicunca.dev/docs/pohon/components/link#props) component such as `to`, `target`, etc.

::docs-pohon-preview
---
collapse: true
external:
  - items
externalTypes:
  - PContextMenuItem[][]
ignore:
  - items
  - pohon.content
prettier: true
props:
  items:
    - - label: Appearance
        children:
          - label: System
            icon: i-lucide:monitor
          - label: Light
            icon: i-lucide:sun
          - label: Dark
            icon: i-lucide:moon
    - - label: Show Sidebar
        kbds:
          - meta
          - s
      - label: Show Toolbar
        kbds:
          - shift
          - meta
          - d
      - label: Collapse Pinned Tabs
        disabled: true
    - - label: Refresh the Page
      - label: Clear Cookies and Refresh
      - label: Clear Cache and Refresh
      - type: separator
      - label: Developer
        children:
          - - label: View Source
              kbds:
                - meta
                - shift
                - u
            - label: Developer Tools
              kbds:
                - option
                - meta
                - i
            - label: Inspect Elements
              kbds:
                - option
                - meta
                - c
          - - label: JavaScript Console
              kbds:
                - option
                - meta
                - j
  pohon:
    content: w-48
slots:
  default: >
    
    <div class="flex items-center justify-center rounded-md border border-dashed
    border-border-accented text-sm aspect-video w-72">
      Right click here
    </div>
---
  :::div
  ---
  class: flex items-center justify-center rounded-md border border-dashed
    border-border-accented text-sm aspect-video w-72
  ---
  Right click here
  :::
::

::note
You can also pass an array of arrays to the `items` prop to create separated groups of items.
::

::tip
Each item can take a `children` array of objects with the same properties as the `items` prop to create a nested menu which can be controlled using the `open`, `defaultOpen` and `content` properties.
::

### Size

Use the `size` prop to change the size of the ContextMenu.

::docs-pohon-preview
---
external:
  - items
externalTypes:
  - PContextMenuItem[]
ignore:
  - items
  - pohon.content
prettier: true
props:
  size: xl
  items:
    - label: System
      icon: i-lucide:monitor
    - label: Light
      icon: i-lucide:sun
    - label: Dark
      icon: i-lucide:moon
  pohon:
    content: w-48
slots:
  default: >
    
    <div class="flex items-center justify-center rounded-md border border-dashed
    border-border-accented text-sm aspect-video w-72">
      Right click here
    </div>
---
  :::div
  ---
  class: flex items-center justify-center rounded-md border border-dashed
    border-border-accented text-sm aspect-video w-72
  ---
  Right click here
  :::
::

### Modal

Use the `modal` prop to control whether the ContextMenu blocks interaction with outside content. Defaults to `true`.

::docs-pohon-preview
---
external:
  - items
externalTypes:
  - PContextMenuItem[]
ignore:
  - items
  - poihon.content
prettier: true
props:
  modal: false
  items:
    - label: System
      icon: i-lucide:monitor
    - label: Light
      icon: i-lucide:sun
    - label: Dark
      icon: i-lucide:moon
  pohon:
    content: w-48
slots:
  default: >
    
    <div class="flex items-center justify-center rounded-md border border-dashed
    border-accented text-sm aspect-video w-72">
      Right click here
    </div>
---
  :::div
  ---
  class: flex items-center justify-center rounded-md border border-dashed
    border-accented text-sm aspect-video w-72
  ---
  Right click here
  :::
::

### Disabled

Use the `disabled` prop to disable the ContextMenu.

::docs-pohon-preview
---
external:
  - items
externalTypes:
  - PContextMenuItem[]
ignore:
  - items
  - pohon.content
prettier: true
props:
  disabled: true
  items:
    - label: System
      icon: i-lucide:monitor
    - label: Light
      icon: i-lucide:sun
    - label: Dark
      icon: i-lucide:moon
  pohon:
    content: w-48
slots:
  default: >
    
    <div class="flex items-center justify-center rounded-md border border-dashed
    border-border-accented text-sm aspect-video w-72">
      Right click here
    </div>
---
  :::div
  ---
  class: flex items-center justify-center rounded-md border border-dashed
    border-border-accented text-sm aspect-video w-72
  ---
  Right click here
  :::
::

## Examples

### With checkbox items

You can use the `type` property with `checkbox` and use the `checked` / `onUpdateChecked` properties to control the checked state of the item.

::docs-component-example{collapse name="context-menu-checkbox-items-example"}
::

::note
To ensure reactivity for the `checked` state of items, it's recommended to wrap your `items` array inside a `computed`.
::

### With color items

You can use the `color` property to highlight certain items with a color.

::docs-component-example{name="context-menu-color-items-example"}
::

### With custom slot

Use the `slot` property to customize a specific item.

You will have access to the following slots:

- `#{{ item.slot }}`
- `#{{ item.slot }}-leading`
- `#{{ item.slot }}-label`
- `#{{ item.slot }}-trailing`

::docs-component-example{name="context-menu-custom-slot-example"}
::

::tip{to="https://akar.vinicunca.dev/#slots"}
You can also use the `#item`, `#item-leading`, `#item-label` and `#item-trailing` slots to customize all items.
::

### Extract shortcuts

When you have some items with `kbds` property (displaying some [Kbd](https://akar.vinicunca.dev/docs/pohon/components/kbd)), you can easily make them work with the [defineShortcuts](https://akar.vinicunca.dev/docs/pohon/composables/define-shortcuts) composable.

Inside the `defineShortcuts` composable, there is an `extractShortcuts` utility that will extract the shortcuts recursively from the items and return an object that you can pass to `defineShortcuts`. It will automatically call the `select` function of the item when the shortcut is pressed.

```vue
<script setup lang="ts">
const items = [
  [{
    label: 'Show Sidebar',
    kbds: ['meta', 'S'],
    onSelect() {
      console.log('Show Sidebar clicked');
    }
  }, {
    label: 'Show Toolbar',
    kbds: ['shift', 'meta', 'D'],
    onSelect() {
      console.log('Show Toolbar clicked');
    }
  }, {
    label: 'Collapse Pinned Tabs',
    disabled: true
  }],
  [{
    label: 'Refresh the Page'
  }, {
    label: 'Clear Cookies and Refresh'
  }, {
    label: 'Clear Cache and Refresh'
  }, {
    type: 'separator' as const
  }, {
    label: 'Developer',
    children: [[{
      label: 'View Source',
      kbds: ['option', 'meta', 'U'],
      onSelect() {
        console.log('View Source clicked');
      }
    }, {
      label: 'Developer Tools',
      kbds: ['option', 'meta', 'I'],
      onSelect() {
        console.log('Developer Tools clicked');
      }
    }], [{
      label: 'Inspect Elements',
      kbds: ['option', 'meta', 'C'],
      onSelect() {
        console.log('Inspect Elements clicked');
      }
    }], [{
      label: 'JavaScript Console',
      kbds: ['option', 'meta', 'J'],
      onSelect() {
        console.log('JavaScript Console clicked');
      }
    }]]
  }]
];

defineShortcuts(extractShortcuts(items));
</script>
```

::note
In this example, `` ``, `` `` ``, `` `` ``, `` `` ``, `` `` `` and `` `` `` would trigger the `select` function of the corresponding item.
::

## API

### Props

::docs-pohon-props
::

### Slots

::docs-pohon-slots
::

### Emits

::docs-pohon-emits
::

## Theme

::docs-pohon-theme
::

## Akar

::docs-akar-to-pohon
---
mode: pohon
to: https://akar.vinicunca.dev/docs/akar/components/context-menu
---
::

## Changelog

::docs-component-changelog
::


# DashboardGroup

## Usage

The DashboardGroup component is the main layout that wraps the [DashboardSidebar](https://akar.vinicunca.dev/docs/pohon/components/dashboard-sidebar) and [DashboardPanel](https://akar.vinicunca.dev/docs/pohon/components/dashboard-panel) components to create a responsive dashboard interface.

Use it in a layout or in your `app.vue`:

```vue [layouts/dashboard.vue] {2,6}
<template>
  <PDashboardGroup>
    <PDashboardSidebar />

    <slot />
  </PDashboardGroup>
</template>
```

## API

### Props

::docs-pohon-props
::

### Slots

::docs-pohon-slots
::

## Theme

::docs-pohon-theme
::

## Changelog

::docs-component-changelog
::


# DashboardNavbar

## Usage

The DashboardNavbar component is a responsive navigation bar that integrates with the [DashboardSidebar](https://akar.vinicunca.dev/docs/pohon/components/dashboard-sidebar) component. It includes a mobile toggle button to enable responsive navigation in dashboard layouts.

Use it inside the `header` slot of the [DashboardPanel](https://akar.vinicunca.dev/docs/pohon/components/dashboard-panel) component:

```vue [pages/index.vue] {9-11}
<script setup lang="ts">
definePageMeta({
  layout: 'dashboard'
});
</script>

<template>
  <PDashboardPanel>
    <template #header>
      <PDashboardNavbar />
    </template>
  </PDashboardPanel>
</template>
```

Use the `left`, `default` and `right` slots to customize the navbar.

::docs-component-example
---
prettier: true
props:
  class: w-full
class: akar:px-0 akar:pt-0
name: dashboard-navbar-example
---
::

::note
In this example, we use the [Tabs](https://akar.vinicunca.dev/docs/pohon/components/tabs) component in the right slot to display some tabs.
::

### Title

Use the `title` prop to set the title of the navbar.

::docs-pohon-preview
---
hide:
  - class
props:
  title: Dashboard
  class: w-full
class: akar:px-0 akar:pt-0
---
::

### Icon

Use the `icon` prop to set the icon of the navbar.

::docs-pohon-preview
---
hide:
  - class
ignore:
  - title
props:
  title: Dashboard
  icon: i-lucide:house
  class: w-full
class: akar:px-0 akar:pt-0
---
::

### Toggle

Use the `toggle` prop to customize the toggle button displayed on mobile that opens the [DashboardSidebar](https://akar.vinicunca.dev/docs/pohon/components/dashboard-sidebar) component.

You can pass any property from the [Button](https://akar.vinicunca.dev/docs/pohon/components/button) component to customize it.

::docs-component-example
---
iframe: true
iframeMobile: true
overflowHidden: true
props:
  class: w-full
name: dashboard-navbar-toggle-example
---
::

### Toggle Side

Use the `toggle-side` prop to change the side of the toggle button. Defaults to `right`.

::docs-component-example
---
iframe: true
iframeMobile: true
overflowHidden: true
props:
  class: w-full
name: dashboard-navbar-toggle-side-example
---
::

## API

### Props

::docs-pohon-props
::

### Slots

::docs-pohon-slots
::

## Theme

::docs-pohon-theme
::

## Changelog

::docs-component-changelog
::


# DashboardPanel

## Usage

The DashboardPanel component is used to display a panel. Its state (size, collapsed, etc.) will be saved based on the `storage` and `storage-key` props you provide to the [DashboardGroup](https://akar.vinicunca.dev/docs/pohon/components/dashboard-group#props) component.

Use it inside the default slot of the [DashboardGroup](https://akar.vinicunca.dev/docs/pohon/components/dashboard-group) component, you can put multiple panels next to each other:

```vue [pages/index.vue] {8,10}
<script setup lang="ts">
definePageMeta({
  layout: 'dashboard'
});
</script>

<template>
  <PDashboardPanel
    id="inbox-1"
    resizable
  />

  <PDashboardPanel
    id="inbox-2"
    class="hidden lg:flex"
  />
</template>
```

::caution
It is recommended to set an `id` when using multiple panels in different pages to avoid conflicts.
::

::warning
This component does not have a single root element when using the `resizable` prop, so wrap it in a container (e.g., `<div class="flex flex-1">`) if you use page transitions or require a single root for layout.
::

Use the `header`, `body` and `footer` slots to customize the panel or the default slot if you don't want a scrollable body with padding.

::docs-component-example
---
collapse: true
props:
  minSize: 22
  defaultSize: 35
  maxSize: 40
  class: akar:min-h-96 h-136
class: akar:p-0 akar:justify-start
name: dashboard-panel-example
---
::

::note
Most of the time, you will use the [`DashboardNavbar`](https://akar.vinicunca.dev/docs/pohon/components/dashboard-navbar) component in the `header` slot.
::

### Resizable

Use the `resizable` prop to make the panel resizable.

::docs-pohon-preview
---
hide:
  - minSize
  - defaultSize
  - maxSize
  - class
prettier: true
props:
  resizable: true
  minSize: 22
  defaultSize: 35
  maxSize: 40
  class: akar:min-h-96
slots:
  body: |
    
    <CorePlaceholder class="h-96" />
class: akar:p-0 akar:justify-start
---
#body
  :::core-placeholder{.h-96}
  :::
::

### Size

Use the `min-size`, `max-size` and `default-size` props to customize the size of the panel.

::docs-pohon-preview
---
hide:
  - class
ignore:
  - resizable
prettier: true
props:
  resizable: true
  minSize: 22
  defaultSize: 35
  maxSize: 40
  class: akar:min-h-96
slots:
  body: |
    
    <CorePlaceholder class="h-96" />
class: akar:p-0 akar:justify-start
---
#body
  :::core-placeholder{.h-96}
  :::
::

::tip
---
to: https://akar.vinicunca.dev/docs/pohon/components/dashboard-group#props
---
Sizes are calculated as percentages by default. You can change this using the `unit` prop on the `DashboardGroup` component.
::

## API

### Props

::docs-pohon-props
::

### Slots

::docs-pohon-slots
::

## Theme

::docs-pohon-theme
::

## Changelog

::docs-component-changelog
::


# DashboardResizeHandle

## Usage

The DashboardResizeHandle component is used by the [DashboardSidebar](https://akar.vinicunca.dev/docs/pohon/components/dashboard-sidebar) and [DashboardPanel](https://akar.vinicunca.dev/docs/pohon/components/dashboard-panel) components.

It is automatically displayed when the `resizable` prop is set, **you don't have to add it manually**.

## Examples

### Within `resize-handle` slot

Even though this component is automatically displayed when the `resizable` prop is set, you can use the `resize-handle` slot of the [DashboardSidebar](https://akar.vinicunca.dev/docs/pohon/components/dashboard-sidebar) and [DashboardPanel](https://akar.vinicunca.dev/docs/pohon/components/dashboard-panel) components to customize the handle.

::code-group
```vue [layouts/dashboard.vue] {4-10}
<template>
  <PDashboardGroup>
    <PDashboardSidebar resizable>
      <template #resize-handle="{ onMouseDown, onTouchStart, onDoubleClick }">
        <PDashboardResizeHandle
          class="hover:after:bg---ui-border-accented after:w-px after:transition after:inset-y-0 after:right-0 after:absolute"
          @mousedown="onMouseDown"
          @touchstart="onTouchStart"
          @dblclick="onDoubleClick"
        />
      </template>
    </PDashboardSidebar>

    <slot />
  </PDashboardGroup>
</template>
```

```vue [pages/index.vue] {9-15}
<script setup lang="ts">
definePageMeta({
  layout: 'dashboard'
});
</script>

<template>
  <PDashboardPanel resizable>
    <template #resize-handle="{ onMouseDown, onTouchStart, onDoubleClick }">
      <PDashboardResizeHandle
        class="hover:after:bg---ui-border-accented after:w-px after:transition after:inset-y-0 after:right-0 after:absolute"
        @mousedown="onMouseDown"
        @touchstart="onTouchStart"
        @dblclick="onDoubleClick"
      />
    </template>
  </PDashboardPanel>
</template>
```
::

::note
In this example, we add an `after` pseudo-element to display a vertical line on hover.
::

## API

### Props

::docs-pohon-props
::

### Slots

::docs-pohon-slots
::

## Theme

::docs-pohon-theme
::

## Changelog

::docs-component-changelog
::


# DashboardSearch

## Usage

The DashboardSearch component extends the [CommandPalette](https://akar.vinicunca.dev/docs/pohon/components/command-palette) component, so you can pass any property such as `icon`, `placeholder`, etc.

Use it inside the default slot of the [DashboardGroup](https://akar.vinicunca.dev/docs/pohon/components/dashboard-group) component:

```vue [layouts/dashboard.vue] {3}
<template>
  <PDashboardGroup>
    <PDashboardSidebar>
      <PDashboardSearchButton />
    </PDashboardSidebar>

    <PDashboardSearch />

    <slot />
  </PDashboardGroup>
</template>
```

::tip
You can open the CommandPalette by pressing `` ``, by using the [DashboardSearchButton](https://akar.vinicunca.dev/docs/pohon/components/dashboard-search-button) component or by using a `v-model:open`{.shiki,shiki-themes,one-dark-pro,one-dark-pro lang="ts"} directive.
::

### Shortcut

Use the `shortcut` prop to change the shortcut used in [defineShortcuts](https://akar.vinicunca.dev/docs/pohon/composables/define-shortcuts) to open the ContentSearch component. Defaults to `meta_k` (`` ``).

```vue [app.vue] {4}
<template>
  <PDashboardSearch
    v-model:search-term="searchTerm"
    shortcut="meta_k"
    :groups="groups"
    :fuse="{ resultLimit: 42 }"
  />
</template>
```

### Color Mode

By default, a group of commands will be added to the command palette so you can switch between light and dark mode. This will only take effect if the `colorMode` is not forced in a specific page which can be achieved through `definePageMeta`:

```vue [pages/index.vue]
<script setup lang="ts">
definePageMeta({
  colorMode: 'dark'
});
</script>
```

You can disable this behavior by setting the `color-mode` prop to `false`:

```vue [app.vue] {4}
<template>
  <PDashboardSearch
    v-model:search-term="searchTerm"
    :color-mode="false"
    :groups="groups"
    :fuse="{ resultLimit: 42 }"
  />
</template>
```

## API

### Props

::docs-pohon-props
::

### Slots

::docs-pohon-slots
::

### Emits

::docs-pohon-emits
::

### Expose

When accessing the component via a template ref, you can use the following:

| Name                | Type                                               |
| ------------------- | -------------------------------------------------- |
| `commandPaletteRef` | `Ref<InstanceType<typeof PCommandPalette> | null>` |

## Theme

::docs-pohon-theme
::

## Changelog

::docs-component-changelog
::


# DashboardSearchButton

## Usage

The DashboardSearchButton component is used to open the [DashboardSearch](https://akar.vinicunca.dev/docs/pohon/components/dashboard-search) modal.

::docs-pohon-preview
::

It extends the [Button](https://akar.vinicunca.dev/docs/pohon/components/button) component, so you can pass any property such as `color`, `variant`, `size`, etc.

::docs-pohon-preview{:ignore='["variant"]' :props='{"variant":"subtle"}'}
::

::note{to="https://akar.vinicunca.dev/#collapsed"}
The button defaults to `color="neutral"` and `variant="outline"` when not collapsed, `variant="ghost"` when collapsed.
::

### Collapsed

Use the `collapsed` prop to hide the button's label and [kbds](https://akar.vinicunca.dev/#kbds). Defaults to `false`.

::docs-pohon-preview{prettier :props='{"collapsed":true}'}
::

::tip
---
to: https://akar.vinicunca.dev/docs/pohon/components/dashboard-sidebar#slots
---
When using the button in the **DashboardSidebar** component, use the `collapsed` slot prop directly.
::

### Kbds

Use the `kbds` prop to display keyboard keys in the button. Defaults to `['meta', 'K']` to match the default shortcut of the [DashboardSearch](https://akar.vinicunca.dev/docs/pohon/components/dashboard-search#shortcut) component.

::docs-pohon-preview
---
ignore:
  - kbds
prettier: true
props:
  collapsed: false
  kbds:
    - alt
    - O
---
::

## API

### Props

::docs-pohon-props
::

::callout
---
icon: i-simple-icons:mdnwebdocs
target: _blank
to: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attributes
---
This component also supports all native `<button>` HTML attributes.
::

### Slots

::docs-pohon-slots
::

## Theme

::docs-pohon-theme
::

## Changelog

::docs-component-changelog
::


# DashboardSidebar

## Usage

The DashboardSidebar component is used to display a sidebar. Its state (size, collapsed, etc.) will be saved based on the `storage` and `storage-key` props you provide to the [DashboardGroup](https://akar.vinicunca.dev/docs/pohon/components/dashboard-group#props) component.

Use it inside the default slot of the [DashboardGroup](https://akar.vinicunca.dev/docs/pohon/components/dashboard-group) component:

```vue [layouts/dashboard.vue] {3}
<template>
  <PDashboardGroup>
    <PDashboardSidebar />

    <slot />
  </PDashboardGroup>
</template>
```

::warning
This component does not have a single root element when using the `resizable` prop, so wrap it in a container (e.g., `<div class="flex flex-1">`) if you use page transitions or require a single root for layout.
::

Use the `left`, `default` and `right` slots to customize the sidebar and the `body` or `content` slots to customize the sidebar menu.

::docs-component-example
---
collapse: true
props:
  minSize: 22
  defaultSize: 35
  maxSize: 40
  class: akar:min-h-96 h-136
class: akar:p-0 akar:justify-start
name: dashboard-sidebar-example
---
::

::note
Drag the sidebar near the left edge of the screen to collapse it.
::

### Resizable

Use the `resizable` prop to make the sidebar resizable.

::docs-pohon-preview
---
hide:
  - minSize
  - defaultSize
  - maxSize
  - class
prettier: true
props:
  resizable: true
  minSize: 22
  defaultSize: 35
  maxSize: 40
  class: akar:min-h-96
slots:
  default: |
    
    <CorePlaceholder class="h-96" />
class: akar:p-0 akar:justify-start
---
  :::core-placeholder{.h-96}
  :::
::

### Collapsible

Use the `collapsible` prop to make the sidebar collapsible when dragging near the edge of the screen.

::warning
The [`DashboardSidebarCollapse`](https://akar.vinicunca.dev/docs/pohon/components/dashboard-sidebar-collapse) component will have no effect if the sidebar is not **collapsible**.
::

::docs-pohon-preview
---
hide:
  - minSize
  - defaultSize
  - maxSize
  - class
ignore:
  - resizable
prettier: true
props:
  resizable: true
  collapsible: true
  minSize: 22
  defaultSize: 35
  maxSize: 40
  class: akar:min-h-96
slots:
  default: |
    
    <CorePlaceholder class="h-96" />
class: akar:p-0 akar:justify-start
---
  :::core-placeholder{.h-96}
  :::
::

::tip{to="https://akar.vinicunca.dev/#slots"}
You can access the `collapsed` state in the slot props to customize the content of the sidebar when it is collapsed.
::

### Size

Use the `min-size`, `max-size`, `default-size` and `collapsed-size` props to customize the size of the sidebar.

::docs-pohon-preview
---
hide:
  - class
ignore:
  - resizable
  - collapsible
prettier: true
props:
  resizable: true
  collapsible: true
  minSize: 22
  defaultSize: 35
  maxSize: 40
  collapsedSize: 0
  class: akar:min-h-96
slots:
  default: |
    
    <CorePlaceholder class="h-96" />
class: akar:p-0 akar:justify-start
---
  :::core-placeholder{.h-96}
  :::
::

::tip
---
to: https://akar.vinicunca.dev/docs/pohon/components/dashboard-group#props
---
Sizes are calculated as percentages by default. You can change this using the `unit` prop on the `DashboardGroup` component.
::

::note
The `collapsed-size` prop is set to `0` by default but the sidebar has a `min-w-16` to make sure it is visible.
::

### Side

Use the `side` prop to change the side of the sidebar. Defaults to `left`.

::docs-pohon-preview
---
hide:
  - minSize
  - defaultSize
  - maxSize
  - class
ignore:
  - resizable
  - collapsible
prettier: true
props:
  side: right
  resizable: true
  collapsible: true
  minSize: 22
  defaultSize: 35
  maxSize: 40
  class: akar:min-h-96
slots:
  default: |
    
    <CorePlaceholder class="h-96" />
class: akar:p-0 akar:justify-end
---
  :::core-placeholder{.h-96}
  :::
::

### Mode

Use the `mode` prop to change the mode of the sidebar menu. Defaults to `slideover`.

Use the `body` slot to fill the menu body (under the header) or the `content` slot to fill the entire menu.

::tip{to="https://akar.vinicunca.dev/#props"}
You can use the `menu` prop to customize the menu of the sidebar, it will adapt depending on the mode you choose.
::

::docs-component-example
---
collapse: true
iframe:
  height: 500px;
iframeMobile: true
options:
  - name: mode
    label: mode
    default: drawer
    items:
      - dialog
      - slideover
      - drawer
overflowHidden: true
props:
  class: w-full
name: dashboard-sidebar-mode-example
---
::

::note
These examples contain the [`DashboardGroup`](https://akar.vinicunca.dev/docs/pohon/components/dashboard-group), [`DashboardPanel`](https://akar.vinicunca.dev/docs/pohon/components/dashboard-panel) and [`DashboardNavbar`](https://akar.vinicunca.dev/docs/pohon/components/dashboard-navbar) components as they are required to demonstrate the sidebar on mobile.
::

### Toggle

Use the `toggle` prop to customize the [DashboardSidebarToggle](https://akar.vinicunca.dev/docs/pohon/components/dashboard-sidebar-toggle) component displayed on mobile.

You can pass any property from the [Button](https://akar.vinicunca.dev/docs/pohon/components/button) component to customize it.

::docs-component-example
---
collapse: true
iframe:
  height: 500px;
iframeMobile: true
overflowHidden: true
props:
  class: w-full
name: dashboard-sidebar-toggle-example
---
::

### Toggle Side

Use the `toggle-side` prop to change the side of the toggle button. Defaults to `left`.

::docs-component-example
---
collapse: true
iframe:
  height: 500px;
iframeMobile: true
overflowHidden: true
props:
  class: w-full
name: dashboard-sidebar-toggle-side-example
---
::

## Examples

### Control open state

You can control the open state by using the `open` prop or the `v-model:open` directive.

::docs-component-example
---
iframe:
  height: 500px;
iframeMobile: true
overflowHidden: true
class: akar:p-0 akar:justify-start
name: dashboard-sidebar-open-example
---
::

::note
In this example, leveraging [`defineShortcuts`](https://akar.vinicunca.dev/docs/pohon/composables/define-shortcuts), you can toggle the open state of the DashboardSidebar by pressing ``.
::

### Control collapsed state

You can control the collapsed state by using the `collapsed` prop or the `v-model:collapsed` directive.

::docs-component-example
---
props:
  minSize: 22
  defaultSize: 35
  maxSize: 40
  class: akar:min-h-96 h-136
class: akar:p-0 akar:justify-start
name: dashboard-sidebar-collapsed-example
---
::

::note
In this example, leveraging [`defineShortcuts`](https://akar.vinicunca.dev/docs/pohon/composables/define-shortcuts), you can toggle the collapsed state of the DashboardSidebar by pressing ``.
::

## API

### Props

::docs-pohon-props
::

### Slots

::docs-pohon-slots
::

## Theme

::docs-pohon-theme
::

## Changelog

::docs-component-changelog
::


# DashboardSidebarCollapse

## Usage

The DashboardSidebarCollapse component is used to collapse/expand the [DashboardSidebar](https://akar.vinicunca.dev/docs/pohon/components/dashboard-sidebar) component **when its `collapsible` prop is set**.

::docs-pohon-preview
::

It extends the [Button](https://akar.vinicunca.dev/docs/pohon/components/button) component, so you can pass any property such as `color`, `variant`, `size`, etc.

::docs-pohon-preview{:ignore='["variant"]' :props='{"variant":"subtle"}'}
::

::note
The button defaults to `color="neutral"` and `variant="ghost"`.
::

## Examples

### Within `header` slot

You can put this component in the `header` slot of the [DashboardSidebar](https://akar.vinicunca.dev/docs/pohon/components/dashboard-sidebar) component and use the `collapsed` prop to hide the left part of the header for example:

```vue [layouts/dashboard.vue] {4-8}
<template>
  <PDashboardGroup>
    <PDashboardSidebar collapsible>
      <template #header="{ collapsed }">
        <BaseLogo v-if="!collapsed" />

        <PDashboardSidebarCollapse variant="subtle" />
      </template>
    </PDashboardSidebar>

    <slot />
  </PDashboardGroup>
</template>
```

### Within `leading` slot

You can put this component in the `leading` slot of the [DashboardNavbar](https://akar.vinicunca.dev/docs/pohon/components/dashboard-navbar) component to display it before the title for example:

```vue [pages/index.vue] {11-13}
<script setup lang="ts">
definePageMeta({
  layout: 'dashboard'
});
</script>

<template>
  <PDashboardPanel>
    <template #header>
      <PDashboardNavbar title="Home">
        <template #leading>
          <PDashboardSidebarCollapse variant="subtle" />
        </template>
      </PDashboardNavbar>
    </template>
  </PDashboardPanel>
</template>
```

## API

### Props

::docs-pohon-props
::

::callout
---
icon: i-simple-icons:mdnwebdocs
target: _blank
to: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attributes
---
This component also supports all native `<button>` HTML attributes.
::

## Theme

::docs-pohon-theme
::

## Changelog

::docs-component-changelog
::


# DashboardSidebarToggle

## Usage

The DashboardSidebarToggle component is used by the [DashboardNavbar](https://akar.vinicunca.dev/docs/pohon/components/dashboard-navbar) and [DashboardSidebar](https://akar.vinicunca.dev/docs/pohon/components/dashboard-sidebar) components.

It is automatically displayed on mobile to toggle the sidebar, **you don't have to add it manually**.

::docs-pohon-preview{:hide='["class"]' :props='{"class":"lg:flex"}'}
::

It extends the [Button](https://akar.vinicunca.dev/docs/pohon/components/button) component, so you can pass any property such as `color`, `variant`, `size`, etc.

::docs-pohon-preview
---
hide:
  - class
ignore:
  - variant
props:
  variant: subtle
  class: lg:flex
---
::

::note
The button defaults to `color="neutral"` and `variant="ghost"`.
::

## Examples

### Within `toggle` slot

Even though this component is automatically displayed on mobile, you can use the `toggle` slot of the [DashboardNavbar](https://akar.vinicunca.dev/docs/pohon/components/dashboard-navbar) and [DashboardSidebar](https://akar.vinicunca.dev/docs/pohon/components/dashboard-sidebar) components to customize the button.

::code-group
```vue [layouts/dashboard.vue] {4-6}
<template>
  <PDashboardGroup>
    <PDashboardSidebar>
      <template #toggle>
        <PDashboardSidebarToggle variant="subtle" />
      </template>
    </PDashboardSidebar>

    <slot />
  </PDashboardGroup>
</template>
```

```vue [pages/index.vue] {11-13}
<script setup lang="ts">
definePageMeta({
  layout: 'dashboard'
});
</script>

<template>
  <PDashboardPanel>
    <template #header>
      <PDashboardNavbar title="Home">
        <template #toggle>
          <PDashboardSidebarToggle variant="subtle" />
        </template>
      </PDashboardNavbar>
    </template>
  </PDashboardPanel>
</template>
```
::

::tip
When using the `toggle-side` prop of the `DashboardSidebar` and `DashboardNavbar` components, the button will be displayed on the specified side.
::

## API

### Props

::docs-pohon-props
::

::callout
---
icon: i-simple-icons:mdnwebdocs
target: _blank
to: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attributes
---
This component also supports all native `<button>` HTML attributes.
::

## Theme

::docs-pohon-theme
::

## Changelog

::docs-component-changelog
::


# DashboardToolbar

## Usage

The DashboardToolbar component is used to display a toolbar under the [DashboardNavbar](https://akar.vinicunca.dev/docs/pohon/components/dashboard-navbar) component.

Use it inside the `header` slot of the [DashboardPanel](https://akar.vinicunca.dev/docs/pohon/components/dashboard-panel) component:

```vue [pages/index.vue] {9-13}
<script setup lang="ts">
definePageMeta({
  layout: 'dashboard'
});
</script>

<template>
  <PDashboardPanel>
    <template #header>
      <PDashboardNavbar />

      <PDashboardToolbar />
    </template>
  </PDashboardPanel>
</template>
```

Use the `left`, `default` and `right` slots to customize the toolbar.

::docs-component-example
---
prettier: true
props:
  class: w-full
class: akar:px-0 akar:pt-0
name: dashboard-toolbar-example
---
::

::note
In this example, we use the [NavigationMenu](https://akar.vinicunca.dev/docs/pohon/components/navigation-menu) component to render some links.
::

## API

### Props

::docs-pohon-props
::

### Slots

::docs-pohon-slots
::

## Theme

::docs-pohon-theme
::

## Changelog

::docs-component-changelog
::


# Dialog

## Usage

Use a [Button](https://akar.vinicunca.dev/docs/pohon/components/button) or any other component in the default slot of the Modal.

Then, use the `#content` slot to add the content displayed when the Modal is open.

::docs-pohon-preview
---
prettier: true
slots:
  default: |
    
    <PButton label="Open" color="neutral" variant="subtle" />
  content: |
    
    <CorePlaceholder class="h-48 m-4" />
---
  :::p-button{color="neutral" label="Open" variant="subtle"}
  :::

#content
  :::core-placeholder{.h-48.m-4}
  :::
::

You can also use the `#header`, `#body` and `#footer` slots to customize the Modal's content.

### Title

Use the `title` prop to set the title of the Modal's header.

::docs-pohon-preview
---
prettier: true
props:
  title: Modal with title
slots:
  default: |
    
    <PButton label="Open" color="neutral" variant="subtle" />
  body: |
    
    <CorePlaceholder class="h-48" />
---
  :::p-button{color="neutral" label="Open" variant="subtle"}
  :::

#body
  :::core-placeholder{.h-48}
  :::
::

### Description

Use the `description` prop to set the description of the Modal's header.

::docs-pohon-preview
---
ignore:
  - title
prettier: true
props:
  title: Modal with description
  description: Lorem ipsum dolor sit amet, consectetur adipiscing elit.
slots:
  default: |
    
    <PButton label="Open" color="neutral" variant="subtle" />
  body: |
    
    <CorePlaceholder class="h-48" />
---
  :::p-button{color="neutral" label="Open" variant="subtle"}
  :::

#body
  :::core-placeholder{.h-48}
  :::
::

### Close

Use the `close` prop to customize or hide the close button (with `false` value) displayed in the Modal's header.

You can pass any property from the [Button](https://akar.vinicunca.dev/docs/pohon/components/button) component to customize it.

::docs-pohon-preview
---
ignore:
  - title
  - close.color
  - close.variant
prettier: true
props:
  title: Modal with close button
  close:
    color: primary
    variant: outline
    class: rounded-full
slots:
  default: |
    
    <PButton label="Open" color="neutral" variant="subtle" />
  body: |
    
    <CorePlaceholder class="h-48" />
---
  :::p-button{color="neutral" label="Open" variant="subtle"}
  :::

#body
  :::core-placeholder{.h-48}
  :::
::

::tip
The close button is not displayed if the `#content` slot is used as it's a part of the header.
::

### Close Icon

Use the `close-icon` prop to customize the close button [Icon](https://akar.vinicunca.dev/docs/pohon/components/icon). Defaults to `i-lucide:x`.

::docs-pohon-preview
---
ignore:
  - title
prettier: true
props:
  title: Modal with close button
  closeIcon: i-lucide:arrow-right
slots:
  default: |
    
    <PButton label="Open" color="neutral" variant="subtle" />
  body: |
    
    <CorePlaceholder class="h-48" />
---
  :::p-button{color="neutral" label="Open" variant="subtle"}
  :::

#body
  :::core-placeholder{.h-48}
  :::
::

::docs-framework-only
#nuxt
  :::tip
  ---
  to: https://akar.vinicunca.dev/docs/pohon/getting-started/integrations/icons/nuxt#theme
  ---
  You can customize this icon globally in your `app.config.ts` under `pohon.icons.close` key.
  :::

#vue
  :::tip
  ---
  to: https://akar.vinicunca.dev/docs/pohon/getting-started/integrations/icons/vue#theme
  ---
  You can customize this icon globally in your `vite.config.ts` under `pohon.icons.close` key.
  :::
::

### Overlay

Use the `overlay` prop to control whether the Modal has an overlay or not. Defaults to `true`.

::docs-pohon-preview
---
ignore:
  - title
prettier: true
props:
  overlay: false
  title: Modal without overlay
slots:
  default: |
    
    <PButton label="Open" color="neutral" variant="subtle" />
  body: |
    
    <CorePlaceholder class="h-48" />
---
  :::p-button{color="neutral" label="Open" variant="subtle"}
  :::

#body
  :::core-placeholder{.h-48}
  :::
::

### Modal

Use the `modal` prop to control whether the Modal blocks interaction with outside content. Defaults to `true`.

::note
When `modal` is set to `false`, the overlay is automatically disabled and outside content becomes interactive.
::

::docs-pohon-preview
---
ignore:
  - title
prettier: true
props:
  modal: false
  title: Modal interactive
slots:
  default: |
    
    <PButton label="Open" color="neutral" variant="subtle" />
  body: |
    
    <CorePlaceholder class="h-48" />
---
  :::p-button{color="neutral" label="Open" variant="subtle"}
  :::

#body
  :::core-placeholder{.h-48}
  :::
::

### Dismissible

Use the `dismissible` prop to control whether the Modal is dismissible when clicking outside of it or pressing escape. Defaults to `true`.

::note
A `close:prevent` event will be emitted when the user tries to close it.
::

::tip
You can combine `modal: false` with `dismissible: false` to make the Modal's background interactive without closing it.
::

::docs-pohon-preview
---
ignore:
  - title
prettier: true
props:
  dismissible: false
  modal: true
  title: Modal non-dismissible
slots:
  default: |
    
    <PButton label="Open" color="neutral" variant="subtle" />
  body: |
    
    <CorePlaceholder class="h-48" />
---
  :::p-button{color="neutral" label="Open" variant="subtle"}
  :::

#body
  :::core-placeholder{.h-48}
  :::
::

### Fullscreen

Use the `fullscreen` prop to make the Modal fullscreen.

::docs-pohon-preview
---
ignore:
  - title
  - fullscreen
prettier: true
props:
  fullscreen: true
  title: Modal fullscreen
slots:
  default: |
    
    <PButton label="Open" color="neutral" variant="subtle" />
  body: |
    
    <CorePlaceholder class="h-full" />
---
  :::p-button{color="neutral" label="Open" variant="subtle"}
  :::

#body
  :::core-placeholder{.h-full}
  :::
::

## Examples

### Control open state

You can control the open state by using the `default-open` prop or the `v-model:open` directive.

::docs-component-example{name="modal-open-example"}
::

::note
In this example, leveraging [`defineShortcuts`](https://akar.vinicunca.dev/docs/pohon/composables/define-shortcuts), you can toggle the Modal by pressing ``.
::

::tip
This allows you to move the trigger outside of the Modal or remove it entirely.
::

### Programmatic usage

You can use the [`useOverlay`](https://akar.vinicunca.dev/docs/pohon/composables/use-overlay) composable to open a Modal programmatically.

::warning
Make sure to wrap your app with the [`App`](https://akar.vinicunca.dev/docs/pohon/components/app) component which uses the [`OverlayProvider`](https://github.com/vinicunca/akar/blob/main/packages/pohon/src/runtime/components/overlay-provider.vue){rel="nofollow"} component.
::

First, create a modal component that will be opened programmatically:

::docs-component-example{prettier :preview='false' name="modal-example"}
::

::note
We are emitting a `close` event when the modal is closed or dismissed here. You can emit any data through the `close` event, however, the event must be emitted in order to capture the return value.
::

Then, use it in your app:

::docs-component-example{name="modal-programmatic-example"}
::

::tip
You can close the modal within the modal component by emitting `emit('close')`.
::

### Nested modals

You can nest modals within each other.

::docs-component-example{name="modal-nested-example"}
::

### With footer slot

Use the `#footer` slot to add content after the Modal's body.

::docs-component-example{name="modal-footer-slot-example"}
::

### With command palette

You can use a [CommandPalette](https://akar.vinicunca.dev/docs/pohon/components/command-palette) component inside the Modal's content.

::docs-component-example{collapse name="modal-command-palette-example"}
::

## API

### Props

::docs-pohon-props
::

### Slots

::docs-pohon-slots
::

### Emits

::docs-pohon-emits
::

## Theme

::docs-pohon-theme
::

## Akar

::docs-akar-to-pohon
---
mode: pohon
to: https://akar.vinicunca.dev/docs/akar/components/dialog
---
::

## Changelog

::docs-component-changelog
::


# Drawer

## Usage

Use a [Button](https://akar.vinicunca.dev/docs/pohon/components/button) or any other component in the default slot of the Drawer.

Then, use the `#content` slot to add the content displayed when the Drawer is open.

::docs-pohon-preview
---
prettier: true
slots:
  default: >
    
    <PButton label="Open" color="neutral" variant="subtle"
    trailing-icon="i-lucide:chevron-up" />
  content: |
    
    <CorePlaceholder class="h-48 m-4" />
---
  :::p-button
  ---
  color: neutral
  label: Open
  trailing-icon: i-lucide:chevron-up
  variant: subtle
  ---
  :::

#content
  :::core-placeholder{.h-48.m-4}
  :::
::

You can also use the `#header`, `#body` and `#footer` slots to customize the Drawer's content.

### Title

Use the `title` prop to set the title of the Drawer's header.

::docs-pohon-preview
---
prettier: true
props:
  title: Drawer with title
slots:
  default: >
    
    <PButton label="Open" color="neutral" variant="subtle"
    trailing-icon="i-lucide:chevron-up" />
  body: |
    
    <CorePlaceholder class="h-48" />
---
  :::p-button
  ---
  color: neutral
  label: Open
  trailing-icon: i-lucide:chevron-up
  variant: subtle
  ---
  :::

#body
  :::core-placeholder{.h-48}
  :::
::

### Description

Use the `description` prop to set the description of the Drawer's header.

::docs-pohon-preview
---
ignore:
  - title
prettier: true
props:
  title: Drawer with description
  description: Lorem ipsum dolor sit amet, consectetur adipiscing elit.
slots:
  default: >
    
    <PButton label="Open" color="neutral" variant="subtle"
    trailing-icon="i-lucide:chevron-up" />
  body: |
    
    <CorePlaceholder class="h-48" />
---
  :::p-button
  ---
  color: neutral
  label: Open
  trailing-icon: i-lucide:chevron-up
  variant: subtle
  ---
  :::

#body
  :::core-placeholder{.h-48}
  :::
::

### Direction

Use the `direction` prop to control the direction of the Drawer. Defaults to `bottom`.

::docs-pohon-preview
---
prettier: true
props:
  direction: right
slots:
  default: >
    
    <PButton label="Open" color="neutral" variant="subtle"
    trailing-icon="i-lucide:chevron-up" />
  content: |
    
    <CorePlaceholder class="min-w-96 min-h-96 size-full m-4" />
---
  :::p-button
  ---
  color: neutral
  label: Open
  trailing-icon: i-lucide:chevron-up
  variant: subtle
  ---
  :::

#content
  :::core-placeholder{.min-w-96.min-h-96.size-full.m-4}
  :::
::

### Inset

Use the `inset` prop to inset the Drawer from the edges.

::docs-pohon-preview
---
prettier: true
props:
  direction: right
  inset: true
slots:
  default: >
    
    <PButton label="Open" color="neutral" variant="subtle"
    trailing-icon="i-lucide:chevron-up" />
  content: |
    
    <CorePlaceholder class="min-w-96 min-h-96 size-full m-4" />
---
  :::p-button
  ---
  color: neutral
  label: Open
  trailing-icon: i-lucide:chevron-up
  variant: subtle
  ---
  :::

#content
  :::core-placeholder{.min-w-96.min-h-96.size-full.m-4}
  :::
::

### Handle

Use the `handle` prop to control whether the Drawer has a handle or not. Defaults to `true`.

::docs-pohon-preview
---
prettier: true
props:
  handle: false
slots:
  default: >
    
    <PButton label="Open" color="neutral" variant="subtle"
    trailing-icon="i-lucide:chevron-up" />
  content: |
    
    <CorePlaceholder class="h-48 m-4" />
---
  :::p-button
  ---
  color: neutral
  label: Open
  trailing-icon: i-lucide:chevron-up
  variant: subtle
  ---
  :::

#content
  :::core-placeholder{.h-48.m-4}
  :::
::

### Handle Only

Use the `handle-only` prop to only allow the Drawer to be dragged by the handle.

::docs-pohon-preview
---
prettier: true
props:
  handleOnly: true
slots:
  default: >
    
    <PButton label="Open" color="neutral" variant="subtle"
    trailing-icon="i-lucide:chevron-up" />
  content: |
    
    <CorePlaceholder class="h-48 m-4" />
---
  :::p-button
  ---
  color: neutral
  label: Open
  trailing-icon: i-lucide:chevron-up
  variant: subtle
  ---
  :::

#content
  :::core-placeholder{.h-48.m-4}
  :::
::

### Overlay

Use the `overlay` prop to control whether the Drawer has an overlay or not. Defaults to `true`.

::docs-pohon-preview
---
prettier: true
props:
  overlay: false
slots:
  default: >
    
    <PButton label="Open" color="neutral" variant="subtle"
    trailing-icon="i-lucide:chevron-up" />
  content: |
    
    <CorePlaceholder class="h-48 m-4" />
---
  :::p-button
  ---
  color: neutral
  label: Open
  trailing-icon: i-lucide:chevron-up
  variant: subtle
  ---
  :::

#content
  :::core-placeholder{.h-48.m-4}
  :::
::

### Modal

Use the `modal` prop to control whether the Drawer blocks interaction with outside content. Defaults to `true`.

::note
When `modal` is set to `false`, the overlay is automatically disabled and outside content becomes interactive.
::

::docs-pohon-preview
---
prettier: true
props:
  modal: false
slots:
  default: >
    
    <PButton label="Open" color="neutral" variant="subtle"
    trailing-icon="i-lucide:chevron-up" />
  content: |
    
    <CorePlaceholder class="h-48 m-4" />
---
  :::p-button
  ---
  color: neutral
  label: Open
  trailing-icon: i-lucide:chevron-up
  variant: subtle
  ---
  :::

#content
  :::core-placeholder{.h-48.m-4}
  :::
::

### Dismissible

Use the `dismissible` prop to control whether the Drawer is dismissible when clicking outside of it or pressing escape. Defaults to `true`.

::note
A `close:prevent` event will be emitted when the user tries to close it.
::

::tip
You can combine `modal: false` with `dismissible: false` to make the Drawer's background interactive without closing it.
::

::docs-component-example{prettier name="drawer-dismissible-example"}
::

### Scale Background

Use the `should-scale-background` prop to scale the background when the Drawer is open, creating a visual depth effect. You can set the `set-background-color-on-scale` prop to `false` to prevent changing the background color.

::docs-pohon-preview
---
prettier: true
props:
  shouldScaleBackground: true
  setBackgroundColorOnScale: true
slots:
  default: >
    
    <PButton label="Open" color="neutral" variant="subtle"
    trailing-icon="i-lucide:chevron-up" />
  content: |
    
    <CorePlaceholder class="h-48 m-4" />
---
  :::p-button
  ---
  color: neutral
  label: Open
  trailing-icon: i-lucide:chevron-up
  variant: subtle
  ---
  :::

#content
  :::core-placeholder{.h-screen.m-4}
  :::
::

::warning
Make sure to add the `data-vaul-drawer-wrapper` directive to a parent element of your app to make this work.

```vue [app.vue]
<template>
  <PApp>
    <div
      class="bg-background"
      data-vaul-drawer-wrapper
    >
      <NuxtLayout>
        <NuxtPage />
      </NuxtLayout>
    </div>
  </PApp>
</template>
```

```ts [nuxt.config.ts]
export default defineNuxtConfig({
  app: {
    rootAttrs: {
      'data-vaul-drawer-wrapper': '',
      'class': 'bg-background'
    }
  }
});
```
::

## Examples

### Control open state

You can control the open state by using the `default-open` prop or the `v-model:open` directive.

::docs-component-example{prettier name="drawer-open-example"}
::

::note
In this example, leveraging [`defineShortcuts`](https://akar.vinicunca.dev/docs/pohon/composables/define-shortcuts), you can toggle the Drawer by pressing ``.
::

::tip
This allows you to move the trigger outside of the Drawer or remove it entirely.
::

### Responsive drawer

You can render a [Dialog](https://akar.vinicunca.dev/docs/pohon/components/dialog) component on desktop and a Drawer on mobile for example.

::docs-component-example{prettier name="drawer-responsive-example"}
::

### Nested drawers

You can nest drawers within each other by using the `nested` prop.

::docs-component-example{prettier name="drawer-nested-example"}
::

### With footer slot

Use the `#footer` slot to add content after the Drawer's body.

::docs-component-example{collapse prettier name="drawer-footer-slot-example"}
::

### With command palette

You can use a [CommandPalette](https://akar.vinicunca.dev/docs/pohon/components/command-palette) component inside the Drawer's content.

::docs-component-example{collapse name="drawer-command-palette-example"}
::

## API

### Props

::docs-pohon-props
::

### Slots

::docs-pohon-slots
::

### Emits

::docs-pohon-emits
::

## Theme

::docs-pohon-theme
::

## Changelog

::docs-component-changelog
::


# DropdownMenu

## Usage

Use a [Button](https://akar.vinicunca.dev/docs/pohon/components/button) or any other component in the default slot of the DropdownMenu.

::docs-pohon-preview
---
collapse: true
external:
  - items
ignore:
  - items
  - pohon.content
prettier: true
props:
  items:
    - - label: Benjamin
        avatar:
          src: https://github.com/praburangki.png
        type: label
    - - label: Profile
        icon: i-lucide:user
      - label: Billing
        icon: i-lucide:credit-card
      - label: Settings
        icon: i-lucide:cog
        kbds:
          - ","
      - label: Keyboard shortcuts
        icon: i-lucide:monitor
    - - label: Team
        icon: i-lucide:users
      - label: Invite users
        icon: i-lucide:user-plus
        children:
          - - label: Email
              icon: i-lucide:mail
            - label: Message
              icon: i-lucide:message-square
          - - label: More
              icon: i-lucide:circle-plus
      - label: New team
        icon: i-lucide:plus
        kbds:
          - meta
          - n
    - - label: GitHub
        icon: i-simple-icons:github
        to: https://github.com/nuxt/ui
        target: _blank
      - label: Support
        icon: i-lucide:life-buoy
        to: /docs/pohon/components/dropdown-menu
      - label: API
        icon: i-lucide:cloud
        disabled: true
    - - label: Logout
        icon: i-lucide:log-out
        kbds:
          - shift
          - meta
          - q
slots:
  default: |
    
    <PButton icon="i-lucide:menu" color="neutral" variant="outline" />
---
  :::p-button{color="neutral" icon="i-lucide:menu" variant="outline"}
  :::
::

### Items

Use the `items` prop as an array of objects with the following properties:

- `label?: string`
- `icon?: string`
- `avatar?: AvatarProps`
- `kbds?: string[] | KbdProps[]`
- [`type?: "link" | "label" | "separator" | "checkbox"`](https://akar.vinicunca.dev/#with-checkbox-items)
- [`color?: "error" | "primary" | "secondary" | "success" | "info" | "warning" | "neutral"`](https://akar.vinicunca.dev/#with-color-items)
- [`checked?: boolean`](https://akar.vinicunca.dev/#with-checkbox-items)
- `disabled?: boolean`
- [`slot?: string`](https://akar.vinicunca.dev/#with-custom-slot)
- `onSelect?: (e: Event) => void`
- [`onUpdateChecked?: (checked: boolean) => void`](https://akar.vinicunca.dev/#with-checkbox-items)
- `children?: DropdownMenuItem[] | DropdownMenuItem[][]`
- `class?: any`
- `pohon?: { item?: ClassNameValue, label?: ClassNameValue, separator?: ClassNameValue, itemLeadingIcon?: ClassNameValue, itemLeadingAvatarSize?: ClassNameValue, itemLeadingAvatar?: ClassNameValue, itemLabel?: ClassNameValue, itemLabelExternalIcon?: ClassNameValue, itemTrailing?: ClassNameValue, itemTrailingIcon?: ClassNameValue, itemTrailingKbds?: ClassNameValue, itemTrailingKbdsSize?: ClassNameValue }`

You can pass any property from the [Link](https://akar.vinicunca.dev/docs/pohon/components/link#props) component such as `to`, `target`, etc.

::docs-pohon-preview
---
collapse: true
external:
  - items
externalTypes:
  - PDropdownMenuItem[][]
ignore:
  - items
  - pohon.content
prettier: true
props:
  items:
    - - label: Benjamin
        avatar:
          src: https://github.com/praburangki.png
        type: label
    - - label: Profile
        icon: i-lucide:user
      - label: Billing
        icon: i-lucide:credit-card
      - label: Settings
        icon: i-lucide:cog
        kbds:
          - ","
      - label: Keyboard shortcuts
        icon: i-lucide:monitor
    - - label: Team
        icon: i-lucide:users
      - label: Invite users
        icon: i-lucide:user-plus
        children:
          - - label: Email
              icon: i-lucide:mail
            - label: Message
              icon: i-lucide:message-square
          - - label: More
              icon: i-lucide:circle-plus
      - label: New team
        icon: i-lucide:plus
        kbds:
          - meta
          - n
    - - label: GitHub
        icon: i-simple-icons:github
        to: https://github.com/nuxt/ui
        target: _blank
      - label: Support
        icon: i-lucide:life-buoy
        to: /docs/pohon/components/dropdown-menu
      - label: API
        icon: i-lucide:cloud
        disabled: true
    - - label: Logout
        icon: i-lucide:log-out
        kbds:
          - shift
          - meta
          - q
  pohon:
    content: w-48
slots:
  default: |
    
    <PButton icon="i-lucide:menu" color="neutral" variant="outline" />
---
  :::p-button{color="neutral" icon="i-lucide:menu" variant="outline"}
  :::
::

::note
You can also pass an array of arrays to the `items` prop to create separated groups of items.
::

::tip
Each item can take a `children` array of objects with the same properties as the `items` prop to create a nested menu which can be controlled using the `open`, `defaultOpen` and `content` properties.
::

### Content

Use the `content` prop to control how the DropdownMenu content is rendered, like its `align` or `side` for example.

::docs-pohon-preview
---
external:
  - items
externalTypes:
  - PDropdownMenuItem[]
ignore:
  - items
  - pohon.content
items:
  content:
    align:
      - start
      - center
      - end
    side:
      - right
      - left
      - top
      - bottom
prettier: true
props:
  items:
    - label: Profile
      icon: i-lucide:user
    - label: Billing
      icon: i-lucide:credit-card
    - label: Settings
      icon: i-lucide:cog
  content:
    align: start
    side: bottom
    sideOffset: 8
  pohon:
    content: w-48
slots:
  default: >
    
    <PButton label="Open" icon="i-lucide:menu" color="neutral" variant="outline"
    />
---
  :::p-button{color="neutral" icon="i-lucide:menu" label="Open" variant="outline"}
  :::
::

### Arrow

Use the `arrow` prop to display an arrow on the DropdownMenu.

::docs-pohon-preview
---
external:
  - items
externalTypes:
  - PDropdownMenuItem[]
ignore:
  - arrow
  - items
  - pohon.content
prettier: true
props:
  arrow: true
  items:
    - label: Profile
      icon: i-lucide:user
    - label: Billing
      icon: i-lucide:credit-card
    - label: Settings
      icon: i-lucide:cog
  pohon:
    content: w-48
slots:
  default: >
    
    <PButton label="Open" icon="i-lucide:menu" color="neutral" variant="outline"
    />
---
  :::p-button{color="neutral" icon="i-lucide:menu" label="Open" variant="outline"}
  :::
::

### Size

Use the `size` prop to control the size of the DropdownMenu.

::docs-pohon-preview
---
external:
  - items
externalTypes:
  - PDropdownMenuItem[]
ignore:
  - items
  - content.align
  - pohon.content
prettier: true
props:
  size: xl
  items:
    - label: Profile
      icon: i-lucide:user
    - label: Billing
      icon: i-lucide:credit-card
    - label: Settings
      icon: i-lucide:cog
  content:
    align: start
  pohon:
    content: w-48
slots:
  default: >
    
    <PButton size="xl" label="Open" icon="i-lucide:menu" color="neutral"
    variant="outline" />
---
  :::p-button
  ---
  color: neutral
  icon: i-lucide:menu
  label: Open
  size: xl
  variant: outline
  ---
  :::
::

::warning
The `size` prop will not be proxied to the Button, you need to set it yourself.
::

::note
When using the same size, the DropdownMenu items will be perfectly aligned with the Button.
::

### Modal

Use the `modal` prop to control whether the DropdownMenu blocks interaction with outside content. Defaults to `true`.

::docs-pohon-preview
---
external:
  - items
externalTypes:
  - PDropdownMenuItem[]
ignore:
  - items
  - pohon.content
prettier: true
props:
  modal: false
  items:
    - label: Profile
      icon: i-lucide:user
    - label: Billing
      icon: i-lucide:credit-card
    - label: Settings
      icon: i-lucide:cog
  pohon:
    content: w-48
slots:
  default: >
    
    <PButton label="Open" icon="i-lucide:menu" color="neutral" variant="outline"
    />
---
  :::p-button{color="neutral" icon="i-lucide:menu" label="Open" variant="outline"}
  :::
::

### Disabled

Use the `disabled` prop to disable the DropdownMenu.

::docs-pohon-preview
---
external:
  - items
externalTypes:
  - PDropdownMenuItem[]
ignore:
  - items
  - pohon.content
prettier: true
props:
  disabled: true
  items:
    - label: Profile
      icon: i-lucide:user
    - label: Billing
      icon: i-lucide:credit-card
    - label: Settings
      icon: i-lucide:cog
  pohon:
    content: w-48
slots:
  default: >
    
    <PButton label="Open" icon="i-lucide:menu" color="neutral" variant="outline"
    />
---
  :::p-button{color="neutral" icon="i-lucide:menu" label="Open" variant="outline"}
  :::
::

## Examples

### With checkbox items

You can use the `type` property with `checkbox` and use the `checked` / `onUpdateChecked` properties to control the checked state of the item.

::docs-component-example{collapse name="dropdown-menu-checkbox-items-example"}
::

::note
To ensure reactivity for the `checked` state of items, it's recommended to wrap your `items` array inside a `computed`.
::

### With color items

You can use the `color` property to highlight certain items with a color.

::docs-component-example{name="dropdown-menu-color-items-example"}
::

### Control open state

You can control the open state by using the `default-open` prop or the `v-model:open` directive.

::docs-component-example{name="dropdown-menu-open-example"}
::

::note
In this example, leveraging [`defineShortcuts`](https://akar.vinicunca.dev/docs/pohon/composables/define-shortcuts), you can toggle the DropdownMenu by pressing ``.
::

### With custom slot

Use the `slot` property to customize a specific item.

You will have access to the following slots:

- `#{{ item.slot }}`
- `#{{ item.slot }}-leading`
- `#{{ item.slot }}-label`
- `#{{ item.slot }}-trailing`

::docs-component-example{name="dropdown-menu-custom-slot-example"}
::

::tip{to="https://akar.vinicunca.dev/#slots"}
You can also use the `#item`, `#item-leading`, `#item-label` and `#item-trailing` slots to customize all items.
::

### With trigger content width

You can expand the content to the full width of its button by adding the `w-$akar-dropdown-menu-trigger-width` class on the `pohon.content` slot.

::docs-component-example{collapse name="dropdown-menu-content-width-example"}
::

::tip
You can also change the content width globally in your `app.config.ts`:

```text
export default defineAppConfig({
  pohon: {
    dropdownMenu: {
      slots: {
        content: 'w-$akar-dropdown-menu-trigger-width'
      }
    }
  }
})
```
::

### Extract shortcuts

When you have some items with `kbds` property (displaying some [Kbd](https://akar.vinicunca.dev/docs/pohon/components/kbd)), you can easily make them work with the [defineShortcuts](https://akar.vinicunca.dev/docs/pohon/composables/define-shortcuts) composable.

Inside the `defineShortcuts` composable, there is an `extractShortcuts` utility that will extract the shortcuts recursively from the items and return an object that you can pass to `defineShortcuts`. It will automatically call the `select` function of the item when the shortcut is pressed.

```vue
<script setup lang="ts">
import type { DropdownMenuItem } from 'pohon-ui';

const items: Array<DropdownMenuItem> = [{
  label: 'Invite users',
  icon: 'i-lucide:user-plus',
  children: [{
    label: 'Invite by email',
    icon: 'i-lucide:send-horizontal',
    kbds: ['meta', 'e'],
    onSelect() {
      console.log('Invite by email clicked');
    }
  }, {
    label: 'Invite by link',
    icon: 'i-lucide:link',
    kbds: ['meta', 'i'],
    onSelect() {
      console.log('Invite by link clicked');
    }
  }]
}, {
  label: 'New team',
  icon: 'i-lucide:plus',
  kbds: ['meta', 'n'],
  onSelect() {
    console.log('New team clicked');
  }
}];

defineShortcuts(extractShortcuts(items));
</script>
```

::note
In this example, `` ``, `` `` and `` `` would trigger the `select` function of the corresponding item.
::

## API

### Props

::docs-pohon-props
::

### Slots

::docs-pohon-slots
::

### Emits

::docs-pohon-emits
::

## Theme

::docs-pohon-theme
::

## Akar

::docs-akar-to-pohon
---
mode: pohon
to: https://akar.vinicunca.dev/docs/akar/components/dropdown-menu
---
::

## Changelog

::docs-component-changelog
::


# Empty

## Usage

::code-preview
  :::p-empty
  ---
  actions:
    - icon: i-lucide:plus
      label: Create new
    - icon: i-lucide:refresh-cw
      label: Refresh
      color: neutral
      variant: subtle
  description: It looks like you haven't added any projects. Create one to get started.
  icon: i-lucide:file
  title: No projects found
  ---
  :::
::

### Title

Use the `title` prop to set the title of the empty state.

::docs-pohon-preview{:props='{"title":"No projects found"}'}
::

### Description

Use the `description` prop to set the description of the empty state.

::docs-pohon-preview
---
ignore:
  - title
prettier: true
props:
  title: No projects found
  description: It looks like you haven't added any projects. Create one to get started.
---
::

### Icon

Use the `icon` prop to set the icon of the empty state.

::docs-pohon-preview
---
ignore:
  - title
  - description
prettier: true
props:
  icon: i-lucide:file
  title: No projects found
  description: It looks like you haven't added any projects. Create one to get started.
---
::

### Avatar

Use the `avatar` prop to set the avatar of the empty state.

::docs-pohon-preview
---
ignore:
  - icon
  - title
  - description
prettier: true
props:
  avatar:
    src: https://github.com/nuxt.png
  title: No projects found
  description: It looks like you haven't added any projects. Create one to get started.
---
::

### Actions

Use the `actions` prop to add some [Button](https://akar.vinicunca.dev/docs/pohon/components/button) actions to the empty state.

::docs-pohon-preview
---
ignore:
  - icon
  - title
  - description
  - actions
prettier: true
props:
  icon: i-lucide:file
  title: No projects found
  description: It looks like you haven't added any projects. Create one to get started.
  actions:
    - icon: i-lucide:plus
      label: Create new
    - icon: i-lucide:refresh-cw
      label: Refresh
      color: neutral
      variant: subtle
---
::

### Variant

Use the `variant` prop to change the variant of the empty state.

::docs-pohon-preview
---
ignore:
  - icon
  - title
  - description
  - actions
prettier: true
props:
  variant: naked
  icon: i-lucide:bell
  title: No notifications
  description: You're all caught up. New notifications will appear here.
  actions:
    - icon: i-lucide:refresh-cw
      label: Refresh
      color: neutral
      variant: subtle
---
::

### Size

Use the `size` prop to change the size of the empty state.

::docs-pohon-preview
---
ignore:
  - icon
  - title
  - description
  - actions
prettier: true
props:
  size: xl
  icon: i-lucide:bell
  title: No notifications
  description: You're all caught up. New notifications will appear here.
  actions:
    - icon: i-lucide:refresh-cw
      label: Refresh
      color: neutral
      variant: subtle
---
::

## Examples

### With slots

Use the available slots to create a more complex empty state.

::docs-component-example{collapse name="empty-slots-example"}
::

## API

### Props

::docs-pohon-props
::

### Slots

::docs-pohon-slots
::

## Theme

::docs-pohon-theme
::

## Changelog

::docs-component-changelog
::


# Error

## Usage

The Error component works together with the [Header](https://akar.vinicunca.dev/docs/pohon/components/header) component to create a full-height layout that extends to the viewport's available height.

### Error

Use the `error` prop to display an error message.

::note
---
target: _blank
to: https://nuxt.com/docs/guide/directory-structure/error
---
In most cases, you will receive the `error` prop in your `error.vue` file.
::

::docs-pohon-preview
---
hide:
  - class
prettier: true
props:
  error:
    statusCode: 404
    statusMessage: Page not found
    message: The page you are looking for does not exist.
  class: akar:min-h-96
---
::

### Clear

Use the `clear` prop to customize or hide the clear button (with `false` value).

You can pass any property from the [Button](https://akar.vinicunca.dev/docs/pohon/components/button) component to customize it.

::docs-pohon-preview
---
hide:
  - class
ignore:
  - error.statusCode
  - error.statusMessage
  - error.message
  - clear.color
  - clear.size
  - clear.icon
  - clear.class
prettier: true
props:
  clear:
    color: neutral
    size: xl
    icon: i-lucide:arrow-left
    class: akar:rounded-full
  error:
    statusCode: 404
    statusMessage: Page not found
    message: The page you are looking for does not exist.
  class: akar:min-h-96
---
::

### Redirect

Use the `redirect` prop to redirect the user to a different page when the clear button is clicked. Defaults to `/`.

::docs-pohon-preview
---
hide:
  - class
ignore:
  - error.statusCode
  - error.statusMessage
  - error.message
prettier: true
props:
  redirect: /docs/pohon/getting-started
  error:
    statusCode: 404
    statusMessage: Page not found
    message: The page you are looking for does not exist.
  class: akar:min-h-96
---
::

## Examples

### Within `error.vue`

Use the Error component in your `error.vue`:

```vue [error.vue] {13}
<script setup lang="ts">
import type { NuxtError } from '#app';

const props = defineProps<{
  error: NuxtError;
}>();
</script>

<template>
  <PApp>
    <PHeader />

    <PError :error="error" />

    <PFooter />
  </PApp>
</template>
```

::tip
You might want to replicate the code of your `app.vue` inside your `error.vue` file to have the same layout and features, here is an example: <https://github.com/vinicunca/akar/blob/main/docs/app/error.vue>{rel="nofollow"}
::

::note
You can read more about how to handle errors in the [Nuxt documentation](https://nuxt.com/docs/getting-started/error-handling#error-page){rel="nofollow"}, but when using `nuxt generate` it is recommended to add `fatal: true` inside your `createError` call to make sure the error page is displayed:

```vue [pages/[...slug\\].vue]
<script setup lang="ts">
const route = useRoute();

const { data: page } = await useAsyncData(route.path, () => {
  return queryCollection('docs').path(route.path).first();
});
if (!page.value) {
  throw createError({ statusCode: 404, statusMessage: 'Page not found', fatal: true });
}
</script>
```
::

## API

### Props

::docs-pohon-props
::

### Slots

::docs-pohon-slots
::

## Theme

::docs-pohon-theme
::

## Changelog

::docs-component-changelog
::


# FieldGroup

## Usage

Wrap multiple [Button](https://akar.vinicunca.dev/docs/pohon/components/button) within a FieldGroup to group them together.

::docs-pohon-preview
---
prettier: true
slots:
  default: |
    
    <PButton color="neutral" variant="subtle" label="Button" />
    <PButton color="neutral" variant="outline" icon="i-lucide:chevron-down" />
---
  :::p-button{color="neutral" label="Button" variant="subtle"}
  :::

  :::p-button{color="neutral" icon="i-lucide:chevron-down" variant="outline"}
  :::
::

### Size

Use the `size` prop to change the size of all the buttons.

::docs-pohon-preview
---
prettier: true
props:
  size: xl
slots:
  default: |
    
    <PButton color="neutral" variant="subtle" label="Button" />
    <PButton color="neutral" variant="outline" icon="i-lucide:chevron-down" />
---
  :::p-button{color="neutral" label="Button" variant="subtle"}
  :::

  :::p-button{color="neutral" icon="i-lucide:chevron-down" variant="outline"}
  :::
::

### Orientation

Use the `orientation` prop to change the orientation of the buttons. Defaults to `horizontal`.

::docs-pohon-preview
---
prettier: true
props:
  orientation: vertical
slots:
  default: |
    
    <PButton color="neutral" variant="subtle" label="Submit" />
    <PButton color="neutral" variant="outline" label="Cancel" />
---
  :::p-button{color="neutral" label="Submit" variant="subtle"}
  :::

  :::p-button{color="neutral" label="Cancel" variant="outline"}
  :::
::

## Examples

### With input

You can use components like [Input](https://akar.vinicunca.dev/docs/pohon/components/input), [InputMenu](https://akar.vinicunca.dev/docs/pohon/components/input-menu), [Select](https://akar.vinicunca.dev/docs/pohon/components/select) [SelectMenu](https://akar.vinicunca.dev/docs/pohon/components/select-menu), etc. within a field group.

::docs-pohon-preview
---
prettier: true
slots:
  default: |
    
    <PInput color="neutral" variant="outline" placeholder="Enter token" />

    <PButton color="neutral" variant="subtle" icon="i-lucide:clipboard" />
---
  :::p-input{color="neutral" placeholder="Enter token" variant="outline"}
  :::

  :::p-button{color="neutral" icon="i-lucide:clipboard" variant="subtle"}
  :::
::

### With tooltip

You can use a [Tooltip](https://akar.vinicunca.dev/docs/pohon/components/tooltip) within a field group.

::docs-component-example{name="field-group-tooltip-example"}
::

### With dropdown

You can use a [DropdownMenu](https://akar.vinicunca.dev/docs/pohon/components/dropdown-menu) within a field group.

::docs-component-example{name="field-group-dropdown-example"}
::

### With badge

You can use a [Badge](https://akar.vinicunca.dev/docs/pohon/components/badge) within a field group.

::docs-component-example{name="field-group-badge-example"}
::

## API

### Props

::docs-pohon-props
::

### Slots

::docs-pohon-slots
::

## Theme

::docs-pohon-theme
::

## Changelog

::docs-component-changelog
::


# FileUpload

## Usage

Use the `v-model` directive to control the value of the FileUpload.

::docs-pohon-preview
---
external:
  - modelValue
ignore:
  - modelValue
  - class
props:
  modelValue: null
  class: w-96 min-h-48
---
::

### Multiple

Use the `multiple` prop to allow multiple files to be selected.

::docs-pohon-preview
---
ignore:
  - class
props:
  multiple: true
  class: w-96 min-h-48
---
::

### Dropzone

Use the `dropzone` prop to enable/disable the droppable area. Defaults to `true`.

::docs-pohon-preview
---
ignore:
  - class
props:
  dropzone: false
  class: w-96 min-h-48
---
::

### Interactive

Use the `interactive` prop to enable/disable the clickable area. Defaults to `true`.

::tip{to="https://akar.vinicunca.dev/#with-files-bottom-slot"}
This can be useful when adding a [`Button`](https://akar.vinicunca.dev/docs/pohon/components/button) component in the `#actions` slot.
::

::docs-pohon-preview
---
ignore:
  - class
props:
  interactive: false
  class: w-96 min-h-48
---
::

### Accept

Use the `accept` prop to specify the allowed file types for the input. Provide a comma-separated list of [MIME types](https://developer.mozilla.org/en-US/docs/Web/HTTP/Guides/MIME_types){rel="nofollow"} or file extensions (e.g., `image/png,application/pdf,.jpg`). Defaults to `*` (all file types).

::docs-pohon-preview
---
ignore:
  - accept
  - class
props:
  accept: image/*
  class: w-96 min-h-48
---
::

### Label

Use the `label` prop to set the label of the FileUpload.

::docs-pohon-preview
---
ignore:
  - class
prettier: true
props:
  label: Drop your image here
  class: w-96 min-h-48
---
::

### Description

Use the `description` prop to set the description of the FileUpload.

::docs-pohon-preview
---
ignore:
  - label
  - class
prettier: true
props:
  label: Drop your image here
  description: SVG, PNG, JPG or GIF (max. 2MB)
  class: w-96 min-h-48
---
::

### Icon

Use the `icon` prop to set the icon of the FileUpload. Defaults to `i-lucide:upload`.

::docs-pohon-preview
---
ignore:
  - label
  - description
  - class
prettier: true
props:
  icon: i-lucide:image
  label: Drop your image here
  description: SVG, PNG, JPG or GIF (max. 2MB)
  class: w-96 min-h-48
---
::

::docs-framework-only
#nuxt
  :::tip
  ---
  to: https://akar.vinicunca.dev/docs/pohon/getting-started/integrations/icons/nuxt#theme
  ---
  You can customize this icon globally in your `app.config.ts` under `pohon.icons.upload` key.
  :::

#vue
  :::tip
  ---
  to: https://akar.vinicunca.dev/docs/pohon/getting-started/integrations/icons/vue#theme
  ---
  You can customize this icon globally in your `vite.config.ts` under `pohon.icons.upload` key.
  :::
::

### Color

Use the `color` prop to change the color of the FileUpload.

::docs-pohon-preview
---
ignore:
  - label
  - description
  - class
prettier: true
props:
  color: neutral
  highlight: true
  label: Drop your image here
  description: SVG, PNG, JPG or GIF (max. 2MB)
  class: w-96 min-h-48
---
::

::note
The `highlight` prop is used here to show the focus state. It's used internally when a validation error occurs.
::

### Variant

Use the `variant` prop to change the variant of the FileUpload.

::docs-pohon-preview{:ignore='["class"]' :props='{"variant":"button"}'}
::

### Size

Use the `size` prop to change the size of the FileUpload.

::docs-pohon-preview
---
ignore:
  - label
  - description
  - class
prettier: true
props:
  size: xl
  variant: area
  label: Drop your image here
  description: SVG, PNG, JPG or GIF (max. 2MB)
---
::

### Layout

Use the `layout` prop to change how the files are displayed in the FileUpload. Defaults to `grid`.

::warning
This prop only works when `variant` is `area`.
::

::docs-pohon-preview
---
ignore:
  - label
  - description
  - multiple
  - class
  - pohon.base
prettier: true
props:
  layout: list
  multiple: true
  label: Drop your images here
  description: SVG, PNG, JPG or GIF (max. 2MB)
  class: w-96
  pohon:
    base: min-h-48
---
::

### Position

Use the `position` prop to change the position of the files in the FileUpload. Defaults to `outside`.

::warning
This prop only works when `variant` is `area` and when `layout` is `list`.
::

::docs-pohon-preview
---
ignore:
  - label
  - description
  - multiple
  - layout
  - class
  - pohon.base
prettier: true
props:
  position: inside
  layout: list
  multiple: true
  label: Drop your images here
  description: SVG, PNG, JPG or GIF (max. 2MB)
  class: w-96
  pohon:
    base: min-h-48
---
::

## Examples

### With Form validation

You can use the FileUpload within a [Form](https://akar.vinicunca.dev/docs/pohon/components/form) and [FormField](https://akar.vinicunca.dev/docs/pohon/components/form-field) components to handle validation and error handling.

::docs-component-example
---
collapse: true
prettier: true
name: file-upload-form-validation-example
---
::

### With default slot

You can use the default slot to make your own FileUpload component.

::docs-component-example
---
collapse: true
prettier: true
name: file-upload-default-slot-example
---
::

### With files-bottom slot

You can use the `files-bottom` slot to add a [Button](https://akar.vinicunca.dev/docs/pohon/components/button) under the files list to remove all files for example.

::docs-component-example
---
collapse: true
prettier: true
name: file-upload-files-bottom-slot-example
---
::

::note{to="https://akar.vinicunca.dev/#interactive"}
The `interactive` prop is set to `false` in this example to prevent the default clickable area.
::

### With files-top slot

You can use the `files-top` slot to add a [Button](https://akar.vinicunca.dev/docs/pohon/components/button) above the files list to add new files for example.

::docs-component-example
---
collapse: true
prettier: true
name: file-upload-files-top-slot-example
---
::

## API

### Props

::docs-pohon-props
::

::callout
---
icon: i-simple-icons:mdnwebdocs
target: _blank
to: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attributes
---
This component also supports all native `<input>` HTML attributes.
::

### Slots

::docs-pohon-slots
::

### Emits

::docs-pohon-emits
::

### Expose

When accessing the component via a template ref, you can use the following:

| Name          | Type                           |
| ------------- | ------------------------------ |
| `inputRef`    | `Ref<HTMLInputElement | null>` |
| `dropzoneRef` | `Ref<HTMLDivElement | null>`   |

## Theme

::docs-pohon-theme
::

## Changelog

::docs-component-changelog
::


# Footer

## Usage

The Footer component renders a `<footer>` element.

Use the `left`, `default` and `right` slots to customize the footer.

::docs-component-example
---
collapse: true
prettier: true
props:
  class: w-full
class: akar:p-0
name: footer-example
---
::

::note
In this example, we use the [NavigationMenu](https://akar.vinicunca.dev/docs/pohon/components/navigation-menu) component to render the footer links in the center.
::

::tip{to="https://akar.vinicunca.dev/docs/pohon/components/footer-columns"}
You can use the [FooterColumns](https://akar.vinicunca.dev/docs/pohon/components/footer-columns) component to display a list of links inside the `top` slot.
::

## Examples

### Within `app.vue`

Use the Footer component in your `app.vue` or in a layout:

```vue [app.vue] {32-67}
<script setup lang="ts">
import type { PNavigationMenuItem } from 'pohon-ui'

const items: PNavigationMenuItem[] = [{
  label: 'Figma Kit',
  to: 'https://go.vinicunca.dev/figma-ui',
  target: '_blank'
}, {
  label: 'Playground',
  to: 'https://stackblitz.com/edit/pohon-ui',
  target: '_blank'
}, {
  label: 'Releases',
  to: 'https://github.com/vinicunca/akar/releases',
  target: '_blank'
}]
</script>

<template>
  <PApp>
    <PHeader />

    <PMain>
      <NuxtLayout>
        <NuxtPage />
      </NuxtLayout>
    </PMain>

    <PSeparator icon="i-simple-icons:nuxtdotjs" type="dashed" class="h-px" />

    <PFooter>
      <template #left>
        <p class="text-muted text-sm">
          Copyright © {{ new Date().getFullYear() }}
        </p>
      </template>

      <PNavigationMenu :items="items" variant="link" />

      <template #right>
        <PButton
          icon="i-simple-icons:discord"
          color="neutral"
          variant="ghost"
          to="https://akar.vinicunca.dev/discord"
          target="_blank"
          aria-label="Discord"
        />
        <PButton
          icon="i-simple-icons:x"
          color="neutral"
          variant="ghost"
          to="https://akar.vinicunca.dev/x"
          target="_blank"
          aria-label="X"
        />
        <PButton
          icon="i-simple-icons:github"
          color="neutral"
          variant="ghost"
          to="https://github.com/nuxt/nuxt"
          target="_blank"
          aria-label="GitHub"
        />
      </template>
    </PFooter>
  </PApp>
</template>
```

::note
In this example, we use the [Separator](https://akar.vinicunca.dev/docs/pohon/components/separator) component to add a border above the footer.
::

## API

### Props

::docs-pohon-props
::

### Slots

::docs-pohon-slots
::

## Theme

::docs-pohon-theme
::

## Changelog

::docs-component-changelog
::


# FooterColumns

## Usage

The FooterColumns component renders a list of columns to display in your Footer.

Use it in the `top` slot of the [Footer](https://akar.vinicunca.dev/docs/pohon/components/footer) component:

```vue {3-7}
<template>
  <PFooter>
    <template #top>
      <PContainer>
        <PFooterColumns />
      </PContainer>
    </template>
  </PFooter>
</template>
```

### Columns

Use the `columns` prop as an array of objects with the following properties:

- `label: string`
- `children?: FooterColumnLink[]`

Each column contains a `children` array of objects that define the links. Each link can have the following properties:

- `label?: string`
- `icon?: string`
- `class?: any`
- `pohon?: { item?: ClassNameValue, link?: ClassNameValue, linkLabel?: ClassNameValue, linkLabelExternalIcon?: ClassNameValue, linkLeadingIcon?: ClassNameValue }`

You can pass any property from the [Link](https://akar.vinicunca.dev/docs/pohon/components/link#props) component such as `to`, `target`, etc.

::docs-component-example
---
prettier: true
props:
  class: w-full
class: p-8
name: footer-columns-example
---
::

## API

### Props

::docs-pohon-props
::

### Slots

::docs-pohon-slots
::

## Theme

::docs-pohon-theme
::

## Changelog

::docs-component-changelog
::


# Form

## Usage

Use the Form component to validate form data using any validation library supporting [Standard Schema](https://github.com/standard-schema/standard-schema){rel="nofollow"} such as [Valibot](https://github.com/fabian-hiller/valibot){rel="nofollow"}, [Zod](https://github.com/colinhacks/zod){rel="nofollow"}, [Yup](https://github.com/jquense/yup){rel="nofollow"}, [Joi](https://github.com/hapijs/joi){rel="nofollow"} or [Superstruct](https://github.com/ianstormtaylor/superstruct){rel="nofollow"} or your own validation logic.

It works with the [FormField](https://akar.vinicunca.dev/docs/pohon/components/form-field) component to display error messages around form elements automatically.

### Schema validation

It requires two props:

- `state` - a reactive object holding the form's state.
- `schema` - any [Standard Schema](https://github.com/standard-schema/standard-schema){rel="nofollow"} or [Superstruct](https://github.com/ianstormtaylor/superstruct){rel="nofollow"}.

::warning
**No validation library is included** by default, ensure you **install the one you need**.
::

::tabs{.gap-0}
  :::docs-component-example
  ---
  props:
    class: w-60
  label: Valibot
  name: form-example-valibot
  ---
  :::

  :::docs-component-example
  ---
  props:
    class: w-60
  label: Zod
  name: form-example-zod
  ---
  :::

  :::docs-component-example
  ---
  props:
    class: w-60
  label: Yup
  name: form-example-yup
  ---
  :::

  :::docs-component-example
  ---
  props:
    class: w-60
  label: Joi
  name: form-example-joi
  ---
  :::

  :::docs-component-example
  ---
  props:
    class: w-60
  label: Superstruct
  name: form-example-superstruct
  ---
  :::
::

Errors are reported directly to the [FormField](https://akar.vinicunca.dev/docs/pohon/components/form-field) component based on the `name` or `error-pattern` prop. This means the validation rules defined for the `email` attribute in your schema will be applied to `<FormField name="email">`{.shiki,shiki-themes,one-dark-pro,one-dark-pro lang="vue"}.

Nested validation rules are handled using dot notation. For example, a rule like `{ user: z.object({ email: z.string() }) }`{.shiki,shiki-themes,one-dark-pro,one-dark-pro lang="ts"} will be applied to `<FormField name="user.email">`{.shiki,shiki-themes,one-dark-pro,one-dark-pro lang="vue"}.

### Custom validation

Use the `validate` prop to apply your own validation logic.

The validation function must return a list of errors with the following attributes:

- `message` - the error message to display.
- `name` - the `name` of the `FormField` to send the error to.

::tip
It can be used alongside the `schema` prop to handle complex use cases.
::

::docs-component-example{:props='{"class":"w-60"}' name="form-example-basic"}
::

### Input events

The Form component automatically triggers validation when an input emits an `input`, `change`, or `blur` event.

- Validation on `input` occurs **as you type**.
- Validation on `change` occurs when you **commit to a value**.
- Validation on `blur` happens when an input **loses focus**.

You can control when validation happens this using the `validate-on` prop.

::tip
The form always validates on submit.
::

::docs-component-example
---
options:
  - name: validate-on
    label: validate-on
    items:
      - input
      - change
      - blur
    default:
      - input
      - change
      - blur
    multiple: true
source: false
label: Default
name: form-example-elements
---
::

::tip
You can use the [`useFormField`](https://akar.vinicunca.dev/docs/pohon/composables/use-form-field) composable to implement this inside your own components.
::

### Error event

You can listen to the `@error` event to handle errors. This event is triggered when the form is submitted and contains an array of `FormError` objects with the following fields:

- `id` - the input's `id`.
- `name` - the `name` of the `FormField`
- `message` - the error message to display.

Here's an example that focuses the first input element with an error after the form is submitted:

::docs-component-example
---
collapse: true
props:
  class: w-60
name: form-example-on-error
---
::

### Nesting forms

Use the `nested` prop to nest multiple Form components and link their validation functions. In this case, validating the parent form will automatically validate all the other forms inside it.

Nested forms directly inherit their parent's state, so you don't need to define a separate state for them. You can use the `name` prop to target a nested attribute within the parent's state.

It can be used to dynamically add fields based on user's input:

::docs-component-example{collapse name="form-example-nested"}
::

Or to validate list inputs:

::docs-component-example{collapse name="form-example-nested-list"}
::

## API

### Props

::docs-pohon-props
::

::callout
---
icon: i-simple-icons:mdnwebdocs
target: _blank
to: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form#attributes
---
This component also supports all native `<form>` HTML attributes.
::

### Slots

::docs-pohon-slots
::

### Emits

::docs-pohon-emits
::

### Expose

You can access the typed component instance using [`useTemplateRef`](https://vuejs.org/api/composition-api-helpers.html#usetemplateref){rel="nofollow"}.

```vue
<script setup lang="ts">
const form = useTemplateRef('form')
</script>

<template>
  <PForm ref="form" />
</template>
```

This will give you access to the following:

| Name                                                                                                        | Type                                                                                                                                                             |
| ----------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `submit()`                                                                                                  | `Promise<void>` :br ::div{.text-toned,mt-1}
Triggers form submission.
::                                                                                         |
| `validate(opts: { name?: keyof T | (keyof T)[], silent?: boolean, nested?: boolean, transform?: boolean })` | `Promise<T>` :br ::div{.text-toned,mt-1}
Triggers form validation. Will raise any errors unless `opts.silent` is set to true.
::                                 |
| `clear(path?: keyof T | RegExp)`                                                                            | `void` :br ::div{.text-toned,mt-1}
Clears form errors associated with a specific path. If no path is provided, clears all form errors.
::                        |
| `getErrors(path?: keyof T RegExp)`                                                                          | `FormError[]` :br ::div{.text-toned,mt-1}
Retrieves form errors associated with a specific path. If no path is provided, returns all form errors.
::             |
| `setErrors(errors: FormError[], name?: keyof T RegExp)`                                                     | `void` :br ::div{.text-toned,mt-1}
Sets form errors for a given path. If no path is provided, overrides all errors.
::                                           |
| `errors`                                                                                                    | `Ref<FormError[]>` :br ::div{.text-toned,mt-1}
A reference to the array containing validation errors. Use this to access or manipulate the error information.
:: |
| `disabled`                                                                                                  | `Ref<boolean>`                                                                                                                                                   |
| `dirty`                                                                                                     | `Ref<boolean>` `true` if at least one form field has been updated by the user.                                                                                   |
| `dirtyFields`                                                                                               | `DeepReadonly<Set<keyof T>>` Tracks fields that have been modified by the user.                                                                                  |
| `touchedFields`                                                                                             | `DeepReadonly<Set<keyof T>>` Tracks fields that the user interacted with.                                                                                        |
| `blurredFields`                                                                                             | `DeepReadonly<Set<keyof T>>` Tracks fields blurred by the user.                                                                                                  |

## Theme

::docs-pohon-theme
::

## Changelog

::docs-component-changelog
::


# FormField

## Usage

Wrap any form component with a FormField. Used in a [Form](https://akar.vinicunca.dev/docs/pohon/components/form), it provides validation and error handling.

### Label

Use the `label` prop to set the label for the form control.

::docs-pohon-preview
---
prettier: true
props:
  label: Email
slots:
  default: |
    
    <PInput placeholder="Enter your email" />
---
  :::p-input{placeholder="Enter your email"}
  :::
::

::note
The label `for` attribute and the form control are associated with a unique `id` if not provided.
::

When using the `required` prop, an asterisk is added next to the label.

::docs-pohon-preview
---
ignore:
  - label
prettier: true
props:
  label: Email
  required: true
slots:
  default: |
    
    <PInput placeholder="Enter your email" />
---
  :::p-input{placeholder="Enter your email"}
  :::
::

### Description

Use the `description` prop to provide additional information below the label.

::docs-pohon-preview
---
ignore:
  - label
prettier: true
props:
  label: Email
  description: We'll never share your email with anyone else.
slots:
  default: |
    
    <PInput placeholder="Enter your email" class="w-full" />
---
  :::p-input{.w-full placeholder="Enter your email"}
  :::
::

### Hint

Use the `hint` prop to display a hint message next to the label.

::docs-pohon-preview
---
ignore:
  - label
prettier: true
props:
  label: Email
  hint: Optional
slots:
  default: |
    
    <PInput placeholder="Enter your email" />
---
  :::p-input{placeholder="Enter your email"}
  :::
::

### Help

Use the `help` prop to display a help message below the form control.

::docs-pohon-preview
---
ignore:
  - label
prettier: true
props:
  label: Email
  help: Please enter a valid email address.
slots:
  default: |
    
    <PInput placeholder="Enter your email" class="w-full" />
---
  :::p-input{.w-full placeholder="Enter your email"}
  :::
::

### Error

Use the `error` prop to display an error message below the form control. When used together with the `help` prop, the `error` prop takes precedence.

When used inside a [Form](https://akar.vinicunca.dev/docs/pohon/components/form), this is automatically set when a validation error occurs.

::docs-pohon-preview
---
ignore:
  - label
prettier: true
props:
  label: Email
  error: Please enter a valid email address.
slots:
  default: |
    
    <PInput placeholder="Enter your email" class="w-full" />
---
  :::p-input{.w-full placeholder="Enter your email"}
  :::
::

### Size

Use the `size` prop to change the size of the FormField, the `size` is proxied to the form control.

::docs-pohon-preview
---
ignore:
  - label
  - description
  - hint
  - help
prettier: true
props:
  label: Email
  description: We'll never share your email with anyone else.
  hint: Optional
  help: Please enter a valid email address.
  size: xl
slots:
  default: |
    
    <PInput placeholder="Enter your email" class="w-full" />
---
  :::p-input{.w-full placeholder="Enter your email"}
  :::
::

## API

### Props

::docs-pohon-props
::

### Slots

::docs-pohon-slots
::

## Theme

::docs-pohon-theme
::

## Changelog

::docs-component-changelog
::


# Header

## Usage

The Header component renders a `<header>` element.

Use the `left`, `default` and `right` slots to customize the header and the `body` or `content` slots to customize the header menu.

::docs-component-example
---
collapse: true
overflowHidden: true
prettier: true
props:
  class: w-full
class: akar:px-0 akar:pt-0
name: header-example
---
::

::note
In this example, we use the [NavigationMenu](https://akar.vinicunca.dev/docs/pohon/components/navigation-menu) component to render the header links in the center.
::

### Title

Use the `title` prop to change the title of the header. Defaults to `Akar`.

::docs-pohon-preview
---
hide:
  - class
props:
  title: Akar
  class: w-full
class: akar:px-0 akar:pt-0
---
::

You can also use the `title` slot to add your own logo.

::tip{to="https://akar.vinicunca.dev/#props"}
You should still add the `title` prop to replace the default `aria-label` of the link.
::

::docs-pohon-preview
---
hide:
  - class
overflowHidden: true
prettier: true
props:
  class: w-full
slots:
  title: |
    
    <BaseLogo class="h-6 w-auto" />
class: akar:px-0 akar:pt-0
---
#title
  :::base-logo{.h-6.w-auto}
  :::
::

### To

Use the `to` prop to change the link of the title. Defaults to `/`.

::docs-pohon-preview
---
hide:
  - class
props:
  to: /docs/pohon
  class: w-full
class: akar:px-0 akar:pt-0
---
::

You can also use the `left` slot to override the link entirely.

::docs-pohon-preview
---
hide:
  - class
overflowHidden: true
prettier: true
props:
  class: w-full
slots:
  left: |
    
    <NuxtLink to="/docs/pohon">
      <BaseLogo class="h-6 w-auto" />
    </NuxtLink>
class: akar:px-0 akar:pt-0
---
#left
  :::nuxt-link{to="https://akar.vinicunca.dev/docs/pohon"}
    ::::base-logo{.h-6.w-auto}
    ::::
  :::
::

### Mode

Use the `mode` prop to change the mode of the header menu. Defaults to `dialog`.

Use the `body` slot to fill the menu body (under the header) or the `content` slot to fill the entire menu.

::tip{to="https://akar.vinicunca.dev/#props"}
You can use the `menu` prop to customize the menu of the header, it will adapt depending on the mode you choose.
::

::docs-component-example
---
collapse: true
iframe:
  height: 300px;
iframeMobile: true
options:
  - name: mode
    label: mode
    default: dialog
    items:
      - dialog
      - slideover
      - drawer
overflowHidden: true
props:
  class: w-full
name: header-menu-example
---
::

### Toggle

Use the `toggle` prop to customize the toggle button displayed on mobile.

You can pass any property from the [Button](https://akar.vinicunca.dev/docs/pohon/components/button) component to customize it.

::docs-component-example
---
collapse: true
iframe:
  height: 300px;
iframeMobile: true
overflowHidden: true
props:
  class: w-full
name: header-toggle-example
---
::

### Toggle Side

Use the `toggle-side` prop to change the side of the toggle button. Defaults to `right`.

::docs-component-example
---
collapse: true
iframe:
  height: 300px;
iframeMobile: true
overflowHidden: true
props:
  class: w-full
name: header-toggle-side-example
---
::

## Examples

### Within `app.vue`

Use the Header component in your `app.vue` or in a layout:

```vue [app.vue] {28-51}
<script setup lang="ts">
import type { PNavigationMenuItem } from 'pohon-ui';

const route = useRoute();

const items = computed<Array<PNavigationMenuItem>>(() => [{
  label: 'Docs',
  to: '/docs/pohon/getting-started',
  active: route.path.startsWith('/docs/pohon/getting-started')
}, {
  label: 'Components',
  to: '/docs/pohon/components',
  active: route.path.startsWith('/docs/pohon/components')
}, {
  label: 'Figma',
  to: 'https://akar.vinicunca.dev/figma-ui',
  target: '_blank'
}, {
  label: 'Releases',
  to: 'https://github.com/nuxt/ui/releases',
  target: '_blank'
}]);
</script>

<template>
  <PApp>
    <PHeader>
      <template #title>
        <LayoutHeaderLogo class="h-6 w-auto" />
      </template>

      <PNavigationMenu :items="items" />

      <template #right>
        <PColorModeButton />

        <PButton
          color="neutral"
          variant="ghost"
          to="https://github.com/nuxt/ui"
          target="_blank"
          icon="i-simple-icons:github"
          aria-label="GitHub"
        />
      </template>

      <template #body>
        <PNavigationMenu
          :items="items"
          orientation="vertical"
          class="-mx-2.5"
        />
      </template>
    </PHeader>

    <PMain>
      <NuxtLayout>
        <NuxtPage />
      </NuxtLayout>
    </PMain>

    <PFooter />
  </PApp>
</template>
```

## API

### Props

::docs-pohon-props
::

### Slots

::docs-pohon-slots
::

### Emits

::docs-pohon-emits
::

## Theme

::docs-pohon-theme
::

## Changelog

::docs-component-changelog
::


# Icon

## Usage

Use the `name` prop to display an icon:

::docs-pohon-preview{:props='{"name":"i-lucide:lightbulb","class":"size-5"}'}
::

::docs-framework-only
#nuxt
  :::caution
  ---
  to: https://akar.vinicunca.dev/docs/pohon/getting-started/integrations/icons/nuxt#collections
  ---
  It's highly recommended to install the icons collections you need, read more about this.
  :::
::

## Examples

### SVG

You can also pass a Vue component into the `name` prop:

::docs-component-example{name="icon-svg-example"}
::

You can define your icon components yourself, or use [`unplugin-icons`](https://github.com/unplugin/unplugin-icons){rel="nofollow"} to import them directly from SVG files:

```vue
<script setup lang="ts">
import IconLightbulb from '~icons/lucide/lightbulb'
</script>

<template>
  <PIcon :name="IconLightbulb" class="size-5" />
</template>
```

## API

### Props

::docs-pohon-props
::

## Changelog

::docs-component-changelog
::


# Input

## Usage

Use the `v-model` directive to control the value of the Input.

::docs-pohon-preview
---
external:
  - modelValue
ignore:
  - modelValue
props:
  modelValue: ""
---
::

### Type

Use the `type` prop to change the input type. Defaults to `text`.

Some types have been implemented in their own components such as [Checkbox](https://akar.vinicunca.dev/docs/pohon/components/checkbox), [Radio](https://akar.vinicunca.dev/docs/pohon/components/radio-group), [InputNumber](https://akar.vinicunca.dev/docs/pohon/components/input-number) etc. and others have been styled like `file` for example.

::docs-pohon-preview
---
items:
  type:
    - text
    - number
    - password
    - search
    - file
props:
  type: file
---
::

::callout
---
icon: i-simple-icons:mdnwebdocs
target: _blank
to: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#input_types
---
You can check all the available types on the MDN Web Docs.
::

### Placeholder

Use the `placeholder` prop to set a placeholder text.

::docs-pohon-preview{:props='{"placeholder":"Search..."}'}
::

### Color

Use the `color` prop to change the ring color when the Input is focused.

::docs-pohon-preview
---
ignore:
  - placeholder
props:
  color: neutral
  highlight: true
  placeholder: Search...
---
::

::note
The `highlight` prop is used here to show the focus state. It's used internally when a validation error occurs.
::

### Variant

Use the `variant` prop to change the variant of the Input.

::docs-pohon-preview
---
ignore:
  - placeholder
props:
  color: neutral
  variant: subtle
  highlight: false
  placeholder: Search...
---
::

### Size

Use the `size` prop to change the size of the Input.

::docs-pohon-preview
---
ignore:
  - placeholder
props:
  size: xl
  placeholder: Search...
---
::

### Icon

Use the `icon` prop to show an [Icon](https://akar.vinicunca.dev/docs/pohon/components/icon) inside the Input.

::docs-pohon-preview
---
ignore:
  - placeholder
prettier: true
props:
  icon: i-lucide:search
  size: md
  variant: outline
  placeholder: Search...
---
::

Use the `leading` and `trailing` props to set the icon position or the `leading-icon` and `trailing-icon` props to set a different icon for each position.

::docs-pohon-preview
---
ignore:
  - placeholder
prettier: true
props:
  trailingIcon: i-lucide:at-sign
  placeholder: Enter your email
  size: md
---
::

### Avatar

Use the `avatar` prop to show an [Avatar](https://akar.vinicunca.dev/docs/pohon/components/avatar) inside the Input.

::docs-pohon-preview
---
ignore:
  - placeholder
prettier: true
props:
  avatar:
    src: https://github.com/nuxt.png
  size: md
  variant: outline
  placeholder: Search...
---
::

### Loading

Use the `loading` prop to show a loading icon on the Input.

::docs-pohon-preview
---
ignore:
  - placeholder
props:
  loading: true
  trailing: false
  placeholder: Search...
---
::

### Loading Icon

Use the `loading-icon` prop to customize the loading icon. Defaults to `i-lucide:loader-circle`.

::docs-pohon-preview
---
ignore:
  - placeholder
props:
  loading: true
  loadingIcon: i-lucide:loader
  placeholder: Search...
---
::

::docs-framework-only
#nuxt
  :::tip
  ---
  to: https://akar.vinicunca.dev/docs/pohon/getting-started/integrations/icons/nuxt#theme
  ---
  You can customize this icon globally in your `app.config.ts` under `pohon.icons.loading` key.
  :::

#vue
  :::tip
  ---
  to: https://akar.vinicunca.dev/docs/pohon/getting-started/integrations/icons/vue#theme
  ---
  You can customize this icon globally in your `vite.config.ts` under `pohon.icons.loading` key.
  :::
::

### Disabled

Use the `disabled` prop to disable the Input.

::docs-pohon-preview
---
ignore:
  - placeholder
props:
  disabled: true
  placeholder: Search...
---
::

## Examples

### With clear button

You can put a [Button](https://akar.vinicunca.dev/docs/pohon/components/button) inside the `#trailing` slot to clear the Input.

::docs-component-example{name="input-clear-button-example"}
::

### With copy button

You can put a [Button](https://akar.vinicunca.dev/docs/pohon/components/button) inside the `#trailing` slot to copy the value to the clipboard.

::docs-component-example{name="input-copy-button-example"}
::

### With password toggle

You can put a [Button](https://akar.vinicunca.dev/docs/pohon/components/button) inside the `#trailing` slot to toggle the password visibility.

::docs-component-example{name="input-password-toggle-example"}
::

### With password strength indicator

You can use the [Progress](https://akar.vinicunca.dev/docs/pohon/components/progress) component to display the password strength indicator.

::docs-component-example
---
collapse: true
name: input-password-strength-indicator-example
---
::

### With character limit

You can use the `#trailing` slot to add a character limit to the Input.

::docs-component-example{name="input-character-limit-example"}
::

### With keyboard shortcut

You can use the [Kbd](https://akar.vinicunca.dev/docs/pohon/components/kbd) component inside the `#trailing` slot to add a keyboard shortcut to the Input.

::docs-component-example{name="input-kbd-example"}
::

::note{to="https://akar.vinicunca.dev/docs/pohon/composables/define-shortcuts"}
This example uses the `defineShortcuts` composable to focus the Input when the `` key is pressed.
::

### With mask

There's no built-in support for masks, but you can use libraries like [maska](https://github.com/beholdr/maska){rel="nofollow"} to mask the Input.

::docs-component-example{name="input-mask-example"}
::

### Within a FormField

You can use the Input within a [FormField](https://akar.vinicunca.dev/docs/pohon/components/form-field) component to display a label, help text, required indicator, etc.

::docs-component-example{name="input-form-field-example"}
::

::tip{to="https://akar.vinicunca.dev/docs/pohon/components/form"}
It also provides validation and error handling when used within a **Form** component.
::

### Within a FieldGroup

You can use the Input within a [FieldGroup](https://akar.vinicunca.dev/docs/pohon/components/field-group) component to group multiple elements together.

::docs-component-example{name="input-field-group-example"}
::

## API

### Props

::docs-pohon-props
::

::callout
---
icon: i-simple-icons:mdnwebdocs
target: _blank
to: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attributes
---
This component also supports all native `<input>` HTML attributes.
::

### Slots

::docs-pohon-slots
::

### Emits

::docs-pohon-emits
::

### Expose

When accessing the component via a template ref, you can use the following:

| Name       | Type                           |
| ---------- | ------------------------------ |
| `inputRef` | `Ref<HTMLInputElement | null>` |

## Theme

::docs-pohon-theme
::

## Changelog

::docs-component-changelog
::


# InputDate

## Usage

Use the `v-model` directive to control the selected date.

::docs-pohon-preview
---
cast:
  modelValue: DateValue
external:
  - modelValue
ignore:
  - modelValue
props:
  modelValue:
    - 2022
    - 2
    - 3
---
::

Use the `default-value` prop to set the initial value when you do not need to control its state.

::docs-pohon-preview
---
cast:
  defaultValue: DateValue
external:
  - defaultValue
ignore:
  - defaultValue
props:
  defaultValue:
    - 2022
    - 2
    - 6
---
::

### Range

Use the `range` prop to select a range of dates.

::docs-pohon-preview
---
cast:
  modelValue: DateRange
external:
  - modelValue
ignore:
  - range
  - modelValue.start
  - modelValue.end
prettier: true
props:
  range: true
  modelValue:
    start:
      - 2022
      - 2
      - 3
    end:
      - 2022
      - 2
      - 20
---
::

### Color

Use the `color` prop to change the color of the InputDate.

::docs-pohon-preview{:props='{"color":"neutral","highlight":true}'}
::

### Variant

Use the `variant` prop to change the variant of the InputDate.

::docs-pohon-preview{:props='{"variant":"subtle"}'}
::

### Size

Use the `size` prop to change the size of the InputDate.

::docs-pohon-preview{:props='{"size":"xl"}'}
::

### Separator Icon

Use the `separator-icon` prop to change the icon of the range separator.

::docs-pohon-preview
---
props:
  range: true
  separatorIcon: i-lucide-arrow-right
---
::

### Disabled

Use the `disabled` prop to disable the InputDate.

::docs-pohon-preview{:props='{"disabled":true}'}
::

## Examples

### With unavailable dates

Use the `is-date-unavailable` prop with a function to mark specific dates as unavailable.

::docs-component-example{name="input-date-unavailable-dates-example"}
::

### With min/max dates

Use the `min-value` and `max-value` props to limit the dates.

::docs-component-example{name="input-date-min-max-dates-example"}
::

### As a DatePicker

Use a [Calendar](https://akar.vinicunca.dev/docs/pohon/components/calendar) and a [Popover](https://akar.vinicunca.dev/docs/pohon/components/popover) component to create a date picker.

::docs-component-example{name="input-date-date-picker-example"}
::

### As a DateRangePicker

Use a [Calendar](https://akar.vinicunca.dev/docs/pohon/components/calendar) and a [Popover](https://akar.vinicunca.dev/docs/pohon/components/popover) component to create a date range picker.

::docs-component-example{name="input-date-date-range-picker-example"}
::

## API

### Props

::docs-pohon-props
::

### Slots

::docs-pohon-slots
::

### Emits

::docs-pohon-emits
::

## Theme

::docs-pohon-theme
::

## Akar

::docs-akar-to-pohon
---
mode: pohon
to: https://akar.vinicunca.dev/docs/akar/components/date-field
---
::

## Changelog

::docs-component-changelog
::


# InputMenu

## Usage

Use the `v-model` directive to control the value of the InputMenu or the `default-value` prop to set the initial value when you do not need to control its state.

::docs-pohon-preview
---
external:
  - items
  - modelValue
ignore:
  - modelValue
  - items
prettier: true
props:
  modelValue: Backlog
  items:
    - Backlog
    - Todo
    - In Progress
    - Done
---
::

::tip
Use this over an [`Input`](https://akar.vinicunca.dev/docs/pohon/components/input) to take advantage of Akar's [`ACombobox`](https://akar.vinicunca.dev/docs/akar/components/combobox) component that offers autocomplete capabilities.
::

::note
This component is similar to the [`SelectMenu`](https://akar.vinicunca.dev/docs/pohon/components/select-menu) but it's using an Input instead of a Select.
::

### Items

Use the `items` prop as an array of strings, numbers or booleans:

::docs-pohon-preview
---
external:
  - items
  - modelValue
ignore:
  - modelValue
  - items
prettier: true
props:
  modelValue: Backlog
  items:
    - Backlog
    - Todo
    - In Progress
    - Done
---
::

You can also pass an array of objects with the following properties:

- `label?: string`
- [`type?: "label" | "separator" | "item"`](https://akar.vinicunca.dev/#with-items-type)
- [`icon?: string`](https://akar.vinicunca.dev/#with-icons-in-items)
- [`avatar?: AvatarProps`](https://akar.vinicunca.dev/#with-avatar-in-items)
- [`chip?: ChipProps`](https://akar.vinicunca.dev/#with-chip-in-items)
- `disabled?: boolean`
- `onSelect?: (e: Event) => void`
- `class?: any`
- `pohon?: { tagsItem?: ClassNameValue, tagsItemText?: ClassNameValue, tagsItemDelete?: ClassNameValue, tagsItemDeleteIcon?: ClassNameValue, label?: ClassNameValue, separator?: ClassNameValue, item?: ClassNameValue, itemLeadingIcon?: ClassNameValue, itemLeadingAvatarSize?: ClassNameValue, itemLeadingAvatar?: ClassNameValue, itemLeadingChip?: ClassNameValue, itemLeadingChipSize?: ClassNameValue, itemLabel?: ClassNameValue, itemTrailing?: ClassNameValue, itemTrailingIcon?: ClassNameValue }`

::docs-pohon-preview
---
external:
  - items
  - modelValue
externalTypes:
  - InputMenuItem[]
ignore:
  - modelValue.label
  - items
props:
  modelValue:
    label: Todo
  items:
    - label: Backlog
    - label: Todo
    - label: In Progress
    - label: Done
---
::

You can also pass an array of arrays to the `items` prop to display separated groups of items.

::docs-pohon-preview
---
external:
  - items
  - modelValue
ignore:
  - modelValue
  - items
prettier: true
props:
  modelValue: Apple
  items:
    - - Apple
      - Banana
      - Blueberry
      - Grapes
      - Pineapple
    - - Aubergine
      - Broccoli
      - Carrot
      - Courgette
      - Leek
---
::

### Value Key

You can choose to bind a single property of the object rather than the whole object by using the `value-key` prop. Defaults to `undefined`.

::docs-pohon-preview
---
collapse: true
external:
  - items
  - modelValue
externalTypes:
  - InputMenuItem[]
ignore:
  - modelValue
  - valueKey
  - items
props:
  modelValue: todo
  valueKey: id
  items:
    - label: Backlog
      id: backlog
    - label: Todo
      id: todo
    - label: In Progress
      id: in_progress
    - label: Done
      id: done
---
::

### Multiple

Use the `multiple` prop to allow multiple selections, the selected items will be displayed as tags.

::docs-pohon-preview
---
external:
  - items
  - modelValue
ignore:
  - modelValue
  - items
  - multiple
prettier: true
props:
  modelValue:
    - Backlog
    - Todo
  multiple: true
  items:
    - Backlog
    - Todo
    - In Progress
    - Done
---
::

::caution
Ensure to pass an array to the `default-value` prop or the `v-model` directive.
::

### Delete Icon

With `multiple`, use the `delete-icon` prop to customize the delete [Icon](https://akar.vinicunca.dev/docs/pohon/components/icon) in the tags. Defaults to `i-lucide:x`.

::docs-pohon-preview
---
external:
  - items
  - modelValue
ignore:
  - modelValue
  - items
  - multiple
prettier: true
props:
  modelValue:
    - Backlog
    - Todo
  multiple: true
  deleteIcon: i-lucide:trash
  items:
    - Backlog
    - Todo
    - In Progress
    - Done
---
::

::docs-framework-only
#nuxt
  :::tip
  ---
  to: https://akar.vinicunca.dev/docs/pohon/getting-started/integrations/icons/nuxt#theme
  ---
  You can customize this icon globally in your `app.config.ts` under `pohon.icons.close` key.
  :::

#vue
  :::tip
  ---
  to: https://akar.vinicunca.dev/docs/pohon/getting-started/integrations/icons/vue#theme
  ---
  You can customize this icon globally in your `vite.config.ts` under `pohon.icons.close` key.
  :::
::

### Placeholder

Use the `placeholder` prop to set a placeholder text.

::docs-pohon-preview
---
external:
  - items
ignore:
  - items
prettier: true
props:
  placeholder: Select status
  items:
    - Backlog
    - Todo
    - In Progress
    - Done
---
::

### Content

Use the `content` prop to control how the InputMenu content is rendered, like its `align` or `side` for example.

::docs-pohon-preview
---
external:
  - items
  - modelValue
ignore:
  - items
  - modelValue
items:
  content:
    align:
      - start
      - center
      - end
    side:
      - right
      - left
      - top
      - bottom
prettier: true
props:
  modelValue: Backlog
  content:
    align: center
    side: bottom
    sideOffset: 8
  items:
    - Backlog
    - Todo
    - In Progress
    - Done
---
::

### Arrow

Use the `arrow` prop to display an arrow on the InputMenu.

::docs-pohon-preview
---
external:
  - items
  - modelValue
ignore:
  - items
  - modelValue
  - arrow
prettier: true
props:
  modelValue: Backlog
  arrow: true
  items:
    - Backlog
    - Todo
    - In Progress
    - Done
---
::

### Color

Use the `color` prop to change the ring color when the InputMenu is focused.

::docs-pohon-preview
---
external:
  - items
  - modelValue
ignore:
  - items
  - modelValue
prettier: true
props:
  modelValue: Backlog
  color: neutral
  highlight: true
  items:
    - Backlog
    - Todo
    - In Progress
    - Done
---
::

::note
The `highlight` prop is used here to show the focus state. It's used internally when a validation error occurs.
::

### Variant

Use the `variant` prop to change the variant of the InputMenu.

::docs-pohon-preview
---
external:
  - items
  - modelValue
ignore:
  - items
  - modelValue
prettier: true
props:
  modelValue: Backlog
  color: neutral
  variant: subtle
  highlight: false
  items:
    - Backlog
    - Todo
    - In Progress
    - Done
---
::

### Size

Use the `size` prop to change the size of the InputMenu.

::docs-pohon-preview
---
external:
  - items
  - modelValue
ignore:
  - items
  - modelValue
prettier: true
props:
  modelValue: Backlog
  size: xl
  items:
    - Backlog
    - Todo
    - In Progress
    - Done
---
::

### Icon

Use the `icon` prop to show an [Icon](https://akar.vinicunca.dev/docs/pohon/components/icon) inside the InputMenu.

::docs-pohon-preview
---
external:
  - items
  - modelValue
ignore:
  - items
  - modelValue
prettier: true
props:
  modelValue: Backlog
  icon: i-lucide:search
  size: md
  items:
    - Backlog
    - Todo
    - In Progress
    - Done
---
::

### Trailing Icon

Use the `trailing-icon` prop to customize the trailing [Icon](https://akar.vinicunca.dev/docs/pohon/components/icon). Defaults to `i-lucide:chevron-down`.

::docs-pohon-preview
---
external:
  - items
  - modelValue
ignore:
  - items
  - modelValue
prettier: true
props:
  modelValue: Backlog
  trailingIcon: i-lucide:arrow-down
  size: md
  items:
    - Backlog
    - Todo
    - In Progress
    - Done
---
::

::docs-framework-only
#nuxt
  :::tip
  ---
  to: https://akar.vinicunca.dev/docs/pohon/getting-started/integrations/icons/nuxt#theme
  ---
  You can customize this icon globally in your `app.config.ts` under `pohon.icons.chevronDown` key.
  :::

#vue
  :::tip
  ---
  to: https://akar.vinicunca.dev/docs/pohon/getting-started/integrations/icons/vue#theme
  ---
  You can customize this icon globally in your `vite.config.ts` under `pohon.icons.chevronDown` key.
  :::
::

### Selected Icon

Use the `selected-icon` prop to customize the icon when an item is selected. Defaults to `i-lucide:check`.

::docs-pohon-preview
---
external:
  - items
  - modelValue
ignore:
  - items
  - modelValue
prettier: true
props:
  modelValue: Backlog
  selectedIcon: i-lucide:flame
  size: md
  items:
    - Backlog
    - Todo
    - In Progress
    - Done
---
::

::docs-framework-only
#nuxt
  :::tip
  ---
  to: https://akar.vinicunca.dev/docs/pohon/getting-started/integrations/icons/nuxt#theme
  ---
  You can customize this icon globally in your `app.config.ts` under `pohon.icons.check` key.
  :::

#vue
  :::tip
  ---
  to: https://akar.vinicunca.dev/docs/pohon/getting-started/integrations/icons/vue#theme
  ---
  You can customize this icon globally in your `vite.config.ts` under `pohon.icons.check` key.
  :::
::

### Avatar

Use the `avatar` prop to show an [Avatar](https://akar.vinicunca.dev/docs/pohon/components/avatar) inside the InputMenu.

::docs-pohon-preview
---
external:
  - items
  - modelValue
ignore:
  - items
  - modelValue
prettier: true
props:
  modelValue: Nuxt
  avatar:
    src: https://github.com/nuxt.png
  items:
    - Nuxt
    - NuxtHub
    - NuxtLabs
    - Nuxt Modules
    - Nuxt Community
---
::

### Loading

Use the `loading` prop to show a loading icon on the InputMenu.

::docs-pohon-preview
---
external:
  - items
  - modelValue
ignore:
  - items
  - modelValue
prettier: true
props:
  modelValue: Backlog
  loading: true
  trailing: false
  items:
    - Backlog
    - Todo
    - In Progress
    - Done
---
::

### Loading Icon

Use the `loading-icon` prop to customize the loading icon. Defaults to `i-lucide:loader-circle`.

::docs-pohon-preview
---
external:
  - items
  - modelValue
ignore:
  - items
  - modelValue
prettier: true
props:
  modelValue: Backlog
  loading: true
  loadingIcon: i-lucide:loader
  items:
    - Backlog
    - Todo
    - In Progress
    - Done
---
::

::docs-framework-only
#nuxt
  :::tip
  ---
  to: https://akar.vinicunca.dev/docs/pohon/getting-started/integrations/icons/nuxt#theme
  ---
  You can customize this icon globally in your `app.config.ts` under `pohon.icons.loading` key.
  :::

#vue
  :::tip
  ---
  to: https://akar.vinicunca.dev/docs/pohon/getting-started/integrations/icons/vue#theme
  ---
  You can customize this icon globally in your `vite.config.ts` under `pohon.icons.loading` key.
  :::
::

### Disabled

Use the `disabled` prop to disable the InputMenu.

::docs-pohon-preview
---
external:
  - items
ignore:
  - items
  - placeholder
prettier: true
props:
  disabled: true
  placeholder: Select status
  items:
    - Backlog
    - Todo
    - In Progress
    - Done
---
::

## Examples

### With items type

You can use the `type` property with `separator` to display a separator between items or `label` to display a label.

::docs-pohon-preview
---
collapse: true
external:
  - items
  - modelValue
externalTypes:
  - InputMenuItem[]
ignore:
  - modelValue
  - items
props:
  modelValue: Apple
  items:
    - type: label
      label: Fruits
    - Apple
    - Banana
    - Blueberry
    - Grapes
    - Pineapple
    - type: separator
    - type: label
      label: Vegetables
    - Aubergine
    - Broccoli
    - Carrot
    - Courgette
    - Leek
---
::

### With icon in items

You can use the `icon` property to display an [Icon](https://akar.vinicunca.dev/docs/pohon/components/icon) inside the items.

::docs-component-example{collapse name="input-menu-items-icon-example"}
::

::tip
You can also use the `#leading` slot to display the selected icon.
::

### With avatar in items

You can use the `avatar` property to display an [Avatar](https://akar.vinicunca.dev/docs/pohon/components/avatar) inside the items.

::docs-component-example{collapse name="input-menu-items-avatar-example"}
::

::tip
You can also use the `#leading` slot to display the selected avatar.
::

### With chip in items

You can use the `chip` property to display a [Chip](https://akar.vinicunca.dev/docs/pohon/components/chip) inside the items.

::docs-component-example{collapse name="input-menu-items-chip-example"}
::

::note
In this example, the `#leading` slot is used to display the selected chip.
::

### Control open state

You can control the open state by using the `default-open` prop or the `v-model:open` directive.

::docs-component-example{name="input-menu-open-example"}
::

::note
In this example, leveraging [`defineShortcuts`](https://akar.vinicunca.dev/docs/pohon/composables/define-shortcuts), you can toggle the InputMenu by pressing ``.
::

### Control open state on focus

You can use the `open-on-focus` or `open-on-click` props to open the menu when the input is focused or clicked.

::docs-component-example{name="input-menu-open-focus-example"}
::

### Control search term

Use the `v-model:search-term` directive to control the search term.

::docs-component-example{name="input-menu-search-term-example"}
::

### With rotating icon

Here is an example with a rotating icon that indicates the open state of the InputMenu.

::docs-component-example{name="input-menu-icon-example"}
::

### With create item

Use the `create-item` prop to enable users to add custom values that aren't in the predefined options.

::docs-component-example{collapse name="input-menu-create-item-example"}
::

::note
The create option shows when no match is found by default. Set it to `always` to show it even when similar values exist.
::

::tip{to="https://akar.vinicunca.dev/#emits"}
Use the `@create` event to handle the creation of the item. You will receive the event and the item as arguments.
::

### With fetched items

You can fetch items from an API and use them in the InputMenu.

::docs-component-example{collapse name="input-menu-fetch-example"}
::

### With ignore filter

Set the `ignore-filter` prop to `true` to disable the internal search and use your own search logic.

::docs-component-example{collapse name="input-menu-ignore-filter-example"}
::

::note
This example uses [`refDebounced`](https://vueuse.org/shared/refDebounced/#refdebounced){rel="nofollow"} to debounce the API calls.
::

### With filter fields

Use the `filter-fields` prop with an array of fields to filter on. Defaults to `[labelKey]`.

::docs-component-example{collapse name="input-menu-filter-fields-example"}
::

### With virtualization

Use the `virtualize` prop to enable virtualization for large lists as a boolean or an object with options like `{ estimateSize: 32, overscan: 12 }`.

When enabled, all groups are flattened into a single list due to a limitation of Akar.

::docs-component-example{prettier name="input-menu-virtualize-example"}
::

### With full content width

You can expand the content to the full width of its items by adding the `min-w-fit` class on the `pohon.content` slot.

::docs-component-example{collapse name="input-menu-content-width-example"}
::

::tip
You can also change the content width globally in your `app.config.ts`:

```text
export default defineAppConfig({
  pohon: {
    inputMenu: {
      slots: {
        content: 'min-w-fit'
      }
    }
  }
})
```
::

### As a CountryPicker

This example demonstrates using the InputMenu as a country picker with lazy loading - countries are only fetched when the menu is opened.

::docs-component-example{collapse name="input-menu-countries-example"}
::

## API

### Props

::docs-pohon-props
::

::callout
---
icon: i-simple-icons:mdnwebdocs
target: _blank
to: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attributes
---
This component also supports all native `<input>` HTML attributes.
::

### Slots

::docs-pohon-slots
::

### Emits

::docs-pohon-emits
::

### Expose

When accessing the component via a template ref, you can use the following:

| Name       | Type                           |
| ---------- | ------------------------------ |
| `inputRef` | `Ref<HTMLInputElement | null>` |

## Theme

::docs-pohon-theme
::

## Akar

::docs-akar-to-pohon
---
mode: pohon
to: https://akar.vinicunca.dev/docs/akar/components/combobox
---
::

## Changelog

::docs-component-changelog
::


# InputNumber

## Usage

Use the `v-model` directive to control the value of the InputNumber.

::docs-pohon-preview
---
external:
  - modelValue
ignore:
  - modelValue
props:
  modelValue: 5
---
::

Use the `default-value` prop to set the initial value when you do not need to control its state.

::docs-pohon-preview{:ignore='["defaultValue"]' :props='{"defaultValue":5}'}
::

::note
This component relies on the [`@internationalized/number`](https://react-spectrum.adobe.com/internationalized/number/index.html){rel="nofollow"} package which provides utilities for formatting and parsing numbers across locales and numbering systems.
::

### Min / Max

Use the `min` and `max` props to set the minimum and maximum values of the InputNumber.

::docs-pohon-preview
---
external:
  - modelValue
ignore:
  - modelValue
props:
  modelValue: 5
  min: 0
  max: 10
---
::

### Step

Use the `step` prop to set the step value of the InputNumber.

::docs-pohon-preview
---
external:
  - modelValue
ignore:
  - modelValue
props:
  modelValue: 5
  step: 2
---
::

### Orientation

Use the `orientation` prop to change the orientation of the InputNumber.

::docs-pohon-preview
---
external:
  - modelValue
ignore:
  - modelValue
props:
  modelValue: 5
  orientation: vertical
---
::

### Placeholder

Use the `placeholder` prop to set a placeholder text.

::docs-pohon-preview{:props='{"placeholder":"Enter a number"}'}
::

### Color

Use the `color` prop to change the ring color when the InputNumber is focused.

::docs-pohon-preview
---
external:
  - modelValue
ignore:
  - modelValue
props:
  modelValue: 5
  color: neutral
  highlight: true
---
::

### Variant

Use the `variant` prop to change the variant of the InputNumber.

::docs-pohon-preview
---
external:
  - modelValue
ignore:
  - modelValue
props:
  modelValue: 5
  variant: subtle
  color: neutral
  highlight: false
---
::

### Size

Use the `size` prop to change the size of the InputNumber.

::docs-pohon-preview
---
external:
  - modelValue
ignore:
  - modelValue
props:
  modelValue: 5
  size: xl
---
::

### Disabled

Use the `disabled` prop to disable the InputNumber.

::docs-pohon-preview
---
external:
  - modelValue
ignore:
  - modelValue
props:
  modelValue: 5
  disabled: true
---
::

### Increment / Decrement

Use the `increment` and `decrement` props to customize the increment and decrement buttons with any [Button](https://akar.vinicunca.dev/docs/pohon/components/button) props. Defaults to `{ variant: 'link' }`.

::docs-pohon-preview
---
external:
  - modelValue
ignore:
  - modelValue
  - increment.size
  - increment.color
  - increment.variant
  - decrement.size
  - decrement.color
  - decrement.variant
prettier: true
props:
  modelValue: 5
  increment:
    color: neutral
    variant: solid
    size: xs
  decrement:
    color: neutral
    variant: solid
    size: xs
---
::

### Increment / Decrement Icons

Use the `increment-icon` and `decrement-icon` props to customize the buttons [Icon](https://akar.vinicunca.dev/docs/pohon/components/icon). Defaults to `i-lucide:plus` / `i-lucide:minus`.

::docs-pohon-preview
---
external:
  - modelValue
ignore:
  - modelValue
prettier: true
props:
  modelValue: 5
  incrementIcon: i-lucide:arrow-right
  decrementIcon: i-lucide:arrow-left
---
::

## Examples

### With decimal format

Use the `format-options` prop to customize the format of the value.

::docs-component-example{name="input-number-decimal-example"}
::

### With percentage format

Use the `format-options` prop with `style: 'percent'` to customize the format of the value.

::docs-component-example{name="input-number-percentage-example"}
::

### With currency format

Use the `format-options` prop with `style: 'currency'` to customize the format of the value.

::docs-component-example{name="input-number-currency-example"}
::

### Within a FormField

You can use the InputNumber within a [FormField](https://akar.vinicunca.dev/docs/pohon/components/form-field) component to display a label, help text, required indicator, etc.

::docs-component-example{name="input-number-form-field-example"}
::

### With slots

Use the `#increment` and `#decrement` slots to customize the buttons.

::docs-component-example{name="input-number-slots-example"}
::

## API

### Props

::docs-pohon-props
::

::callout
---
icon: i-simple-icons:mdnwebdocs
target: _blank
to: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attributes
---
This component also supports all native `<input>` HTML attributes.
::

### Slots

::docs-pohon-slots
::

### Emits

::docs-pohon-emits
::

### Expose

When accessing the component via a template ref, you can use the following:

| Name       | Type                           |
| ---------- | ------------------------------ |
| `inputRef` | `Ref<HTMLInputElement | null>` |

## Theme

::docs-pohon-theme
::

## Akar

::docs-akar-to-pohon
---
mode: pohon
to: https://akar.vinicunca.dev/docs/akar/components/number-field
---
::

## Changelog

::docs-component-changelog
::


# InputTags

## Usage

Use the `v-model` directive to control the value of the InputTags.

::docs-pohon-preview
---
external:
  - modelValue
ignore:
  - modelValue
prettier: true
props:
  modelValue:
    - Vue
---
::

Use the `default-value` prop to set the initial value when you do not need to control its state.

::docs-pohon-preview
---
ignore:
  - defaultValue
prettier: true
props:
  defaultValue:
    - Vue
---
::

### Placeholder

Use the `placeholder` prop to set a placeholder text.

::docs-pohon-preview{:props='{"placeholder":"Enter tags..."}'}
::

### Max Length

Use the `max-length` prop to set the maximum number of characters allowed in a tag.

::docs-pohon-preview{:props='{"maxLength":4}'}
::

### Color

Use the `color` prop to change the ring color when the InputTags is focused.

::docs-pohon-preview
---
external:
  - modelValue
ignore:
  - modelValue
prettier: true
props:
  modelValue:
    - Vue
  color: neutral
  highlight: true
---
::

::note
The `highlight` prop is used here to show the focus state. It's used internally when a validation error occurs.
::

### Variants

Use the `variant` prop to change the appearance of the InputTags.

::docs-pohon-preview
---
external:
  - modelValue
ignore:
  - modelValue
prettier: true
props:
  modelValue:
    - Vue
  variant: subtle
  color: neutral
  highlight: false
---
::

### Sizes

Use the `size` prop to adjust the size of the InputTags.

::docs-pohon-preview
---
external:
  - modelValue
ignore:
  - modelValue
prettier: true
props:
  modelValue:
    - Vue
  size: xl
---
::

### Icon

Use the `icon` prop to show an [Icon](https://akar.vinicunca.dev/docs/pohon/components/icon) inside the InputTags.

::docs-pohon-preview
---
external:
  - modelValue
ignore:
  - modelValue
prettier: true
props:
  modelValue:
    - Vue
  icon: i-lucide:search
  size: md
  variant: outline
---
::

::note
Use the `leading` and `trailing` props to set the icon position or the `leading-icon` and `trailing-icon` props to set a different icon for each position.
::

### Avatar

Use the `avatar` prop to show an [Avatar](https://akar.vinicunca.dev/docs/pohon/components/avatar) inside the InputTags.

::docs-pohon-preview
---
external:
  - modelValue
ignore:
  - modelValue
prettier: true
props:
  modelValue:
    - Vue
  avatar:
    src: https://github.com/vuejs.png
  size: md
  variant: outline
---
::

### Delete Icon

Use the `delete-icon` prop to customize the delete [Icon](https://akar.vinicunca.dev/docs/pohon/components/icon) in the tags. Defaults to `i-lucide:x`.

::docs-pohon-preview
---
external:
  - modelValue
ignore:
  - modelValue
prettier: true
props:
  modelValue:
    - Vue
  deleteIcon: i-lucide:trash
---
::

::docs-framework-only
#nuxt
  :::tip
  ---
  to: https://akar.vinicunca.dev/docs/pohon/getting-started/integrations/icons/nuxt#theme
  ---
  You can customize this icon globally in your `app.config.ts` under `pohon.icons.close` key.
  :::

#vue
  :::tip
  ---
  to: https://akar.vinicunca.dev/docs/pohon/getting-started/integrations/icons/vue#theme
  ---
  You can customize this icon globally in your `vite.config.ts` under `pohon.icons.close` key.
  :::
::

### Loading

Use the `loading` prop to show a loading icon on the InputTags.

::docs-pohon-preview
---
external:
  - modelValue
ignore:
  - modelValue
prettier: true
props:
  modelValue:
    - Vue
  loading: true
  trailing: false
---
::

### Loading Icon

Use the `loading-icon` prop to customize the loading icon. Defaults to `i-lucide:loader-circle`.

::docs-pohon-preview
---
external:
  - modelValue
ignore:
  - modelValue
prettier: true
props:
  modelValue:
    - Vue
  loading: true
  loadingIcon: i-lucide:loader
---
::

::docs-framework-only
#nuxt
  :::tip
  ---
  to: https://akar.vinicunca.dev/docs/pohon/getting-started/integrations/icons/nuxt#theme
  ---
  You can customize this icon globally in your `app.config.ts` under `pohon.icons.loading` key.
  :::

#vue
  :::tip
  ---
  to: https://akar.vinicunca.dev/docs/pohon/getting-started/integrations/icons/vue#theme
  ---
  You can customize this icon globally in your `vite.config.ts` under `pohon.icons.loading` key.
  :::
::

### Disabled

Use the `disabled` prop to disable the InputTags.

::docs-pohon-preview
---
external:
  - modelValue
ignore:
  - modelValue
prettier: true
props:
  modelValue:
    - Vue
  disabled: true
---
::

## Examples

### Within a FormField

You can use the InputTags within a [FormField](https://akar.vinicunca.dev/docs/pohon/components/form-field) component to display a label, help text, required indicator, etc.

::docs-component-example{name="input-tags-form-field-example"}
::

## API

### Props

::docs-pohon-props
::

::callout
---
icon: i-simple-icons:mdnwebdocs
target: _blank
to: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attributes
---
This component also supports all native `<input>` HTML attributes.
::

### Slots

::docs-pohon-slots
::

### Emits

::docs-pohon-emits
::

### Expose

When accessing the component via a template ref, you can use the following:

| Name       | Type                           |
| ---------- | ------------------------------ |
| `inputRef` | `Ref<HTMLInputElement | null>` |

## Theme

::docs-pohon-theme
::

## Akar

::docs-akar-to-pohon
---
mode: pohon
to: https://akar.vinicunca.dev/docs/akar/components/tags-input
---
::

## Changelog

::docs-component-changelog
::


# InputTime

## Usage

Use the `v-model` directive to control the selected date.

::docs-pohon-preview
---
cast:
  modelValue: TimeValue
external:
  - modelValue
ignore:
  - modelValue
props:
  modelValue:
    - 12
    - 30
    - 0
---
::

Use the `default-value` prop to set the initial value when you do not need to control its state.

::docs-pohon-preview
---
cast:
  defaultValue: TimeValue
external:
  - defaultValue
ignore:
  - defaultValue
props:
  defaultValue:
    - 12
    - 30
    - 0
---
::

::note
This component relies on the [`@internationalized/date`](https://react-spectrum.adobe.com/internationalized/date/index.html){rel="nofollow"} package which provides objects and functions for representing and manipulating dates and times in a locale-aware manner.
::

### Hour Cycle

Use the `hour-cycle` prop to change the hour cycle of the InputTime. Defaults to `12`.

::docs-pohon-preview
---
cast:
  defaultValue: TimeValue
external:
  - defaultValue
ignore:
  - hourCycle
  - defaultValue
props:
  hourCycle: 24
  defaultValue:
    - 16
    - 30
    - 0
---
::

### Color

Use the `color` prop to change the color of the InputTime.

::docs-pohon-preview{:props='{"color":"neutral","highlight":true}'}
::

::note
The `highlight` prop is used here to show the focus state. It's used internally when a validation error occurs.
::

### Variant

Use the `variant` prop to change the variant of the InputTime.

::docs-pohon-preview{:props='{"variant":"subtle"}'}
::

### Size

Use the `size` prop to change the size of the InputTime.

::docs-pohon-preview{:props='{"size":"xl"}'}
::

### Icon

Use the `icon` prop to show an [Icon](https://akar.vinicunca.dev/docs/pohon/components/icon) inside the InputTime.

::docs-pohon-preview{:props='{"icon":"i-lucide-clock"}'}
::

::note
Use the `leading` and `trailing` props to set the icon position or the `leading-icon` and `trailing-icon` props to set a different icon for each position.
::

### Avatar

Use the `avatar` prop to show an [Avatar](https://akar.vinicunca.dev/docs/pohon/components/avatar) inside the InputTime.

::docs-pohon-preview
---
prettier: true
props:
  avatar:
    src: https://github.com/vuejs.png
  size: md
  variant: outline
---
::

### Disabled

Use the `disabled` prop to disable the InputTime.

::docs-pohon-preview{:props='{"disabled":true}'}
::

## Examples

### Within a FormField

You can use the InputTime within a [FormField](https://akar.vinicunca.dev/docs/pohon/components/form-field) component to display a label, help text, required indicator, etc.

::docs-component-example{name="input-time-form-field-example"}
::

## API

### Props

::docs-pohon-props
::

### Slots

::docs-pohon-slots
::

### Emits

::docs-pohon-emits
::

## Theme

::docs-pohon-theme
::

## Akar

::docs-akar-to-pohon
---
mode: pohon
to: https://akar.vinicunca.dev/docs/akar/components/time-field
---
::

## Changelog

::docs-component-changelog
::


# Kbd

## Usage

Use the default slot to set the value of the Kbd.

::docs-pohon-preview{:slots='{"default":"K"}'}
::

### Value

Use the `value` prop to set the value of the Kbd.

::docs-pohon-preview{:props='{"value":"K"}'}
::

You can pass special keys to the `value` prop that goes through the [`useKbd`](https://github.com/vinicunca/akar/blob/main/packages/pohon/src/runtime/composables/useKbd.ts){rel="nofollow"} composable. For example, the `meta` key displays as `⌘` on macOS and `Ctrl` on other platforms.

::docs-pohon-preview
---
items:
  value:
    - meta
    - win
    - command
    - shift
    - ctrl
    - option
    - alt
    - enter
    - delete
    - backspace
    - escape
    - tab
    - capslock
    - arrowup
    - arrowright
    - arrowdown
    - arrowleft
    - pageup
    - pagedown
    - home
    - end
props:
  value: meta
---
::

### Color

Use the `color` prop to change the color of the Kbd.

::docs-pohon-preview{:props='{"color":"neutral"}' :slots='{"default":"K"}'}
::

### Variant

Use the `variant` prop to change the variant of the Kbd.

::docs-pohon-preview
---
props:
  color: neutral
  variant: solid
slots:
  default: K
---
::

### Size

Use the `size` prop to change the size of the Kbd.

::docs-pohon-preview{:props='{"size":"lg"}' :slots='{"default":"K"}'}
::

## Examples

### `class` prop

Use the `class` prop to override the base styles of the Badge.

::docs-pohon-preview
---
props:
  class: akar:font-bold akar:rounded-full
  variant: subtle
slots:
  default: K
---
::

## API

### Props

::docs-pohon-props
::

### Slots

::docs-pohon-slots
::

## Theme

::docs-pohon-theme
::

## Changelog

::docs-component-changelog
::


# Link

## Usage

The Link component is a wrapper around [`<NuxtLink>`](https://nuxt.com/docs/api/components/nuxt-link){rel="nofollow"} using the [`custom`](https://router.vuejs.org/api/interfaces/RouterLinkProps.html#Properties-custom){rel="nofollow"} prop. It provides a few extra props:

- `inactive-class` prop to set a class when the link is inactive, `active-class` is used when active.
- `exact` prop to style with `active-class` when the link is active and the route is exactly the same as the current route.
- `exact-query` and `exact-hash` props to style with `active-class` when the link is active and the query or hash is exactly the same as the current query or hash.


  - use `exact-query="partial"` to style with `active-class` when the link is active and the query partially match the current query.

The incentive behind this is to provide the same API as NuxtLink back in Nuxt 2 / Vue 2. You can read more about it in the Vue Router [migration from Vue 2](https://router.vuejs.org/guide/migration/#removal-of-the-exact-prop-in-router-link){rel="nofollow"} guide.

::note
It is used by the [`Breadcrumb`](https://akar.vinicunca.dev/docs/pohon/components/breadcrumb), [`Button`](https://akar.vinicunca.dev/docs/pohon/components/button), [`ContextMenu`](https://akar.vinicunca.dev/docs/pohon/components/context-menu), [`DropdownMenu`](https://akar.vinicunca.dev/docs/pohon/components/dropdown-menu) and [`NavigationMenu`](https://akar.vinicunca.dev/docs/pohon/components/navigation-menu) components.
::

### Tag

The `Link` components renders an `<a>` tag when a `to` prop is provided, otherwise it renders a `<button>` tag. You can use the `as` prop to change fallback tag.

::docs-pohon-preview
---
props:
  to: ""
  as: button
slots:
  default: Link
---
::

::note
You can inspect the rendered HTML by changing the `to` prop.
::

### Style

By default, the link has default active and inactive styles, check out the [#theme](https://akar.vinicunca.dev/#theme) section.

::docs-pohon-preview
---
props:
  to: /docs/pohon/components/link
slots:
  default: Link
---
::

::note
Try changing the `to` prop to see the active and inactive states.
::

You can override this behavior by using the `raw` prop and provide your own styles using `class`, `active-class` and `inactive-class`.

::docs-pohon-preview
---
ignore:
  - raw
props:
  raw: true
  to: /docs/pohon/components/link
  activeClass: font-bold
  inactiveClass: text-muted
slots:
  default: Link
---
Link
::

## API

### Props

::docs-pohon-props{:ignore='["custom"]'}
::

::callout
---
icon: i-simple-icons:mdnwebdocs
target: _blank
to: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#attributes
---
This component also supports all native `<a>` HTML attributes.
::

### Slots

::docs-pohon-slots
::

## Theme

::docs-pohon-theme
::

## Changelog

::docs-component-changelog
::


# LocaleSelect

## Usage

The LocaleSelect component extends the [SelectMenu](https://akar.vinicunca.dev/docs/pohon/components/select-menu) component, so you can pass any property such as `color`, `variant`, `size`, etc.

::docs-framework-only
#nuxt
  :::note
  ---
  to: https://akar.vinicunca.dev/docs/pohon/getting-started/integrations/i18n/nuxt
  ---
  This component is meant to be used with the **i18n** system. Learn more about it in the guide.
  :::

#vue
  :::note
  ---
  to: https://akar.vinicunca.dev/docs/pohon/getting-started/integrations/i18n/vue
  ---
  This component is meant to be used with the **i18n** system. Learn more about it in the guide.
  :::
::

::warning
The flags are displayed using Unicode characters. This may result in a different display, e.g. Microsoft Edge under Windows displays the ISO 3166-1 alpha-2 code instead, as no flag icons are shipped with the OS fonts.
::

### Locales

Use the `locales` prop with an array of locales from `pohon-ui/locale`.

::docs-component-example{name="locale-select-example"}
::

You can pass only the locales you need in your application:

```vue
<script setup lang="ts">
import { en, es, fr } from 'pohon-ui/locale';

const locale = ref('en');
</script>

<template>
  <PLocaleSelect
    v-model="locale"
    :locales="[en, es, fr]"
  />
</template>
```

### Dynamic locale

::docs-framework-only
#nuxt
  :::div
  You can use it with Nuxt i18n:
  
  ```vue
  <script setup lang="ts">
  import * as locales from 'pohon-ui/locale';
  
  const { locale, setLocale } = useI18n();
  </script>
  
  <template>
    <PLocaleSelect
      :model-value="locale"
      :locales="Object.values(locales)"
      @update:model-value="setLocale($event)"
    />
  </template>
  ```
  :::

#vue
  :::div
  You can use it with Vue i18n:
  
  ```vue
  <script setup lang="ts">
  import * as locales from 'pohon-ui/locale';
  import { useI18n } from 'vue-i18n';
  
  const { locale, setLocale } = useI18n();
  </script>
  
  <template>
    <PLocaleSelect
      :model-value="locale"
      :locales="Object.values(locales)"
      @update:model-value="setLocale($event)"
    />
  </template>
  ```
  :::
::

## API

### Props

::docs-pohon-props
::

## Changelog

::docs-component-changelog{prefix="locale"}
::


# Main

## Usage

The Main component renders a `<main>` element that works together with the [Header](https://akar.vinicunca.dev/docs/pohon/components/header) component to create a full-height layout that extends to the viewport's available height.

## Examples

### Within `app.vue`

Use the Main component in your `app.vue` or in a layout:

```vue [app.vue] {5-9}
<template>
  <PApp>
    <PHeader />

    <PMain>
      <NuxtLayout>
        <NuxtPage />
      </NuxtLayout>
    </PMain>

    <PFooter />
  </PApp>
</template>
```

## API

### Props

::docs-pohon-props
::

### Slots

::docs-pohon-slots
::

## Theme

::docs-pohon-theme
::

## Changelog

::docs-component-changelog
::


# Marquee

## Usage

Use the default slot with your content to create an infinite scrolling animation.

::docs-pohon-preview
---
prettier: true
slots:
  default: |
    
    <PIcon name="i-simple-icons:github" class="size-10 shrink-0" />
    <PIcon name="i-simple-icons:discord" class="size-10 shrink-0" />
    <PIcon name="i-simple-icons:x" class="size-10 shrink-0" />
    <PIcon name="i-simple-icons:instagram" class="size-10 shrink-0" />
    <PIcon name="i-simple-icons:linkedin" class="size-10 shrink-0" />
    <PIcon name="i-simple-icons:facebook" class="size-10 shrink-0" />
---
  :::p-icon{.size-10.shrink-0 name="i-simple-icons:github"}
  :::

  :::p-icon{.size-10.shrink-0 name="i-simple-icons:discord"}
  :::

  :::p-icon{.size-10.shrink-0 name="i-simple-icons:x"}
  :::

  :::p-icon{.size-10.shrink-0 name="i-simple-icons:instagram"}
  :::

  :::p-icon{.size-10.shrink-0 name="i-simple-icons:linkedin"}
  :::

  :::p-icon{.size-10.shrink-0 name="i-simple-icons:facebook"}
  :::
::

### Pause on Hover

Use the `pause-on-hover` prop to pause the animation when the user hovers over the content.

::docs-pohon-preview
---
prettier: true
props:
  pauseOnHover: true
slots:
  default: |
    
    <PIcon name="i-simple-icons:github" class="size-10 shrink-0" />
    <PIcon name="i-simple-icons:discord" class="size-10 shrink-0" />
    <PIcon name="i-simple-icons:x" class="size-10 shrink-0" />
    <PIcon name="i-simple-icons:instagram" class="size-10 shrink-0" />
    <PIcon name="i-simple-icons:linkedin" class="size-10 shrink-0" />
    <PIcon name="i-simple-icons:facebook" class="size-10 shrink-0" />
---
  :::p-icon{.size-10.shrink-0 name="i-simple-icons:github"}
  :::

  :::p-icon{.size-10.shrink-0 name="i-simple-icons:discord"}
  :::

  :::p-icon{.size-10.shrink-0 name="i-simple-icons:x"}
  :::

  :::p-icon{.size-10.shrink-0 name="i-simple-icons:instagram"}
  :::

  :::p-icon{.size-10.shrink-0 name="i-simple-icons:linkedin"}
  :::

  :::p-icon{.size-10.shrink-0 name="i-simple-icons:facebook"}
  :::
::

### Reverse

Use the `reverse` prop to reverse the direction of the animation.

::docs-pohon-preview
---
prettier: true
props:
  reverse: true
slots:
  default: |
    
    <PIcon name="i-simple-icons:github" class="size-10 shrink-0" />
    <PIcon name="i-simple-icons:discord" class="size-10 shrink-0" />
    <PIcon name="i-simple-icons:x" class="size-10 shrink-0" />
    <PIcon name="i-simple-icons:instagram" class="size-10 shrink-0" />
    <PIcon name="i-simple-icons:linkedin" class="size-10 shrink-0" />
    <PIcon name="i-simple-icons:facebook" class="size-10 shrink-0" />
---
  :::p-icon{.size-10.shrink-0 name="i-simple-icons:github"}
  :::

  :::p-icon{.size-10.shrink-0 name="i-simple-icons:discord"}
  :::

  :::p-icon{.size-10.shrink-0 name="i-simple-icons:x"}
  :::

  :::p-icon{.size-10.shrink-0 name="i-simple-icons:instagram"}
  :::

  :::p-icon{.size-10.shrink-0 name="i-simple-icons:linkedin"}
  :::

  :::p-icon{.size-10.shrink-0 name="i-simple-icons:facebook"}
  :::
::

### Orientation

Use the `orientation` prop to change the scrolling direction.

::docs-pohon-preview
---
prettier: true
props:
  orientation: vertical
slots:
  default: |
    
    <PIcon name="i-simple-icons:github" class="size-10 shrink-0" />
    <PIcon name="i-simple-icons:discord" class="size-10 shrink-0" />
    <PIcon name="i-simple-icons:x" class="size-10 shrink-0" />
    <PIcon name="i-simple-icons:instagram" class="size-10 shrink-0" />
    <PIcon name="i-simple-icons:linkedin" class="size-10 shrink-0" />
    <PIcon name="i-simple-icons:facebook" class="size-10 shrink-0" />
class: h-96
---
  :::p-icon{.size-10.shrink-0 name="i-simple-icons:github"}
  :::

  :::p-icon{.size-10.shrink-0 name="i-simple-icons:discord"}
  :::

  :::p-icon{.size-10.shrink-0 name="i-simple-icons:x"}
  :::

  :::p-icon{.size-10.shrink-0 name="i-simple-icons:instagram"}
  :::

  :::p-icon{.size-10.shrink-0 name="i-simple-icons:linkedin"}
  :::

  :::p-icon{.size-10.shrink-0 name="i-simple-icons:facebook"}
  :::
::

### Repeat

Use the `repeat` prop to specify how many times the content should be repeated in the animation.

::docs-pohon-preview
---
prettier: true
props:
  repeat: 6
slots:
  default: |
    
    <PIcon name="i-simple-icons:github" class="size-10 shrink-0" />
    <PIcon name="i-simple-icons:discord" class="size-10 shrink-0" />
    <PIcon name="i-simple-icons:x" class="size-10 shrink-0" />
    <PIcon name="i-simple-icons:instagram" class="size-10 shrink-0" />
    <PIcon name="i-simple-icons:linkedin" class="size-10 shrink-0" />
    <PIcon name="i-simple-icons:facebook" class="size-10 shrink-0" />
---
  :::p-icon{.size-10.shrink-0 name="i-simple-icons:github"}
  :::

  :::p-icon{.size-10.shrink-0 name="i-simple-icons:discord"}
  :::

  :::p-icon{.size-10.shrink-0 name="i-simple-icons:x"}
  :::

  :::p-icon{.size-10.shrink-0 name="i-simple-icons:instagram"}
  :::

  :::p-icon{.size-10.shrink-0 name="i-simple-icons:linkedin"}
  :::

  :::p-icon{.size-10.shrink-0 name="i-simple-icons:facebook"}
  :::
::

### Overlay

Use the `overlay` prop to remove the gradient overlays on the edges of the marquee.

::docs-pohon-preview
---
prettier: true
props:
  overlay: false
slots:
  default: |
    
    <PIcon name="i-simple-icons:github" class="size-10 shrink-0" />
    <PIcon name="i-simple-icons:discord" class="size-10 shrink-0" />
    <PIcon name="i-simple-icons:x" class="size-10 shrink-0" />
    <PIcon name="i-simple-icons:instagram" class="size-10 shrink-0" />
    <PIcon name="i-simple-icons:linkedin" class="size-10 shrink-0" />
    <PIcon name="i-simple-icons:facebook" class="size-10 shrink-0" />
---
  :::p-icon{.size-10.shrink-0 name="i-simple-icons:github"}
  :::

  :::p-icon{.size-10.shrink-0 name="i-simple-icons:discord"}
  :::

  :::p-icon{.size-10.shrink-0 name="i-simple-icons:x"}
  :::

  :::p-icon{.size-10.shrink-0 name="i-simple-icons:instagram"}
  :::

  :::p-icon{.size-10.shrink-0 name="i-simple-icons:linkedin"}
  :::

  :::p-icon{.size-10.shrink-0 name="i-simple-icons:facebook"}
  :::
::

## Examples

### Testimonials

Use the `Marquee` component to create an infinite scrolling animation for your testimonials.

::docs-component-example
---
collapse: true
overflowHidden: true
prettier: true
class: px-0
label: With Items
name: marquee-testimonials
---
::

## API

### Props

::docs-pohon-props
::

### Slots

::docs-pohon-slots
::

## Theme

::docs-pohon-theme
::

## Changelog

::docs-component-changelog
::


# NavigationMenu

## Usage

Use the NavigationMenu component to display a list of links horizontally or vertically.

::docs-pohon-preview
---
collapse: true
external:
  - items
hide:
  - class
ignore:
  - items
props:
  items:
    - label: Guide
      icon: i-lucide:book-open
      to: /docs/pohon/getting-started
      children:
        - label: Introduction
          description: Fully styled and customizable components for Nuxt.
          icon: i-lucide:house
        - label: Installation
          description: Learn how to install and configure Pohon UI in your application.
          icon: i-lucide:cloud-download
        - label: Icons
          icon: i-lucide:smile
          description: You have nothing to do, @nuxt/icon will handle it automatically.
        - label: Colors
          icon: i-lucide:swatch-book
          description: Choose a primary and a neutral color from your Tailwind CSS theme.
        - label: Theme
          icon: i-lucide:cog
          description: You can customize components by using the `class` / `pohon` props
            or in your app.config.ts.
    - label: Composables
      icon: i-lucide:database
      to: /docs/pohon/composables
      children:
        - label: defineShortcuts
          icon: i-lucide:file-text
          description: Define shortcuts for your application.
          to: /docs/pohon/composables/define-shortcuts
        - label: useOverlay
          icon: i-lucide:file-text
          description: Display a modal/slideover within your application.
          to: /docs/pohon/composables/use-overlay
        - label: useToast
          icon: i-lucide:file-text
          description: Display a toast within your application.
          to: /docs/pohon/composables/use-toast
    - label: Components
      icon: i-lucide:box
      to: /docs/pohon/components
      active: true
      children:
        - label: Link
          icon: i-lucide:file-text
          description: Use NuxtLink with superpowers.
          to: /docs/pohon/components/link
        - label: Modal
          icon: i-lucide:file-text
          description: Display a modal within your application.
          to: /docs/pohon/components/dialog
        - label: NavigationMenu
          icon: i-lucide:file-text
          description: Display a list of links.
          to: /docs/pohon/components/navigation-menu
        - label: Pagination
          icon: i-lucide:file-text
          description: Display a list of pages.
          to: /docs/pohon/components/pagination
        - label: Popover
          icon: i-lucide:file-text
          description: Display a non-modal dialog that floats around a trigger element.
          to: /docs/pohon/components/popover
        - label: Progress
          icon: i-lucide:file-text
          description: Show a horizontal bar to indicate task progression.
          to: /docs/pohon/components/progress
    - label: GitHub
      icon: i-simple-icons:github
      badge: 3.8k
      to: https://github.com/nuxt/ui
      target: _blank
    - label: Help
      icon: i-lucide:circle-help
      disabled: true
  class: w-full akar:justify-center bg-background
---
::

### Items

Use the `items` prop as an array of objects with the following properties:

- `label?: string`
- `icon?: string`
- `avatar?: AvatarProps`
- `badge?: string | number | BadgeProps`
- `tooltip?: TooltipProps`
- `trailingIcon?: string`
- `type?: 'label' | 'trigger' | 'link'`
- `defaultOpen?: boolean`
- `open?: boolean`
- `value?: string`
- `disabled?: boolean`
- [`slot?: string`](https://akar.vinicunca.dev/#with-custom-slot)
- `onSelect?: (e: Event) => void`
- `children?: NavigationMenuChildItem[]`
- `class?: any`
- `pohon?: { linkLeadingAvatarSize?: ClassNameValue, linkLeadingAvatar?: ClassNameValue, linkLeadingIcon?: ClassNameValue, linkLabel?: ClassNameValue, linkLabelExternalIcon?: ClassNameValue, linkTrailing?: ClassNameValue, linkTrailingBadgeSize?: ClassNameValue, linkTrailingBadge?: ClassNameValue, linkTrailingIcon?: ClassNameValue, label?: ClassNameValue, link?: ClassNameValue, content?: ClassNameValue, childList?: ClassNameValue, childLabel?: ClassNameValue, childItem?: ClassNameValue, childLink?: ClassNameValue, childLinkIcon?: ClassNameValue, childLinkWrapper?: ClassNameValue, childLinkLabel?: ClassNameValue, childLinkLabelExternalIcon?: ClassNameValue, childLinkDescription?: ClassNameValue }`

You can pass any property from the [Link](https://akar.vinicunca.dev/docs/pohon/components/link#props) component such as `to`, `target`, etc.

::docs-pohon-preview
---
collapse: true
external:
  - items
externalTypes:
  - NavigationMenuItem[]
ignore:
  - items
  - class
props:
  items:
    - label: Guide
      icon: i-lucide:book-open
      to: /docs/pohon/getting-started
      children:
        - label: Introduction
          description: Fully styled and customizable components for Nuxt.
          icon: i-lucide:house
        - label: Installation
          description: Learn how to install and configure Pohon UI in your application.
          icon: i-lucide:cloud-download
        - label: Icons
          icon: i-lucide:smile
          description: You have nothing to do, @nuxt/icon will handle it automatically.
        - label: Colors
          icon: i-lucide:swatch-book
          description: Choose a primary and a neutral color from your Tailwind CSS theme.
        - label: Theme
          icon: i-lucide:cog
          description: You can customize components by using the `class` / `pohon` props
            or in your app.config.ts.
    - label: Composables
      icon: i-lucide:database
      to: /docs/pohon/composables
      children:
        - label: defineShortcuts
          icon: i-lucide:file-text
          description: Define shortcuts for your application.
          to: /docs/pohon/composables/define-shortcuts
        - label: useOverlay
          icon: i-lucide:file-text
          description: Display a modal/slideover within your application.
          to: /docs/pohon/composables/use-overlay
        - label: useToast
          icon: i-lucide:file-text
          description: Display a toast within your application.
          to: /docs/pohon/composables/use-toast
    - label: Components
      icon: i-lucide:box
      to: /docs/pohon/components
      active: true
      children:
        - label: Link
          icon: i-lucide:file-text
          description: Use NuxtLink with superpowers.
          to: /docs/pohon/components/link
        - label: Modal
          icon: i-lucide:file-text
          description: Display a modal within your application.
          to: /docs/pohon/components/dialog
        - label: NavigationMenu
          icon: i-lucide:file-text
          description: Display a list of links.
          to: /docs/pohon/components/navigation-menu
        - label: Pagination
          icon: i-lucide:file-text
          description: Display a list of pages.
          to: /docs/pohon/components/pagination
        - label: Popover
          icon: i-lucide:file-text
          description: Display a non-modal dialog that floats around a trigger element.
          to: /docs/pohon/components/popover
        - label: Progress
          icon: i-lucide:file-text
          description: Show a horizontal bar to indicate task progression.
          to: /docs/pohon/components/progress
    - label: GitHub
      icon: i-simple-icons:github
      badge: 3.8k
      to: https://github.com/nuxt/ui
      target: _blank
    - label: Help
      icon: i-lucide:circle-help
      disabled: true
  class: w-full akar:justify-center
---
::

::note
You can also pass an array of arrays to the `items` prop to display groups of items.
::

::tip
Each item can take a `children` array of objects with the following properties to create submenus:

- `label: string`
- `description?: string`
- `icon?: string`
- `onSelect?: (e: Event) => void`
- `class?: any`
::

### Orientation

Use the `orientation` prop to change the orientation of the NavigationMenu.

::note
When orientation is `vertical`, an [Accordion](https://akar.vinicunca.dev/docs/pohon/components/accordion) component is used to display each group. You can control the open state of each item using the `open` and `defaultOpen` properties and change the behavior using the [`collapsible`](https://akar.vinicunca.dev/docs/pohon/components/accordion#collapsible) and [`type`](https://akar.vinicunca.dev/docs/pohon/components/accordion#multiple) props.
::

::docs-pohon-preview
---
collapse: true
external:
  - items
externalTypes:
  - NavigationMenuItem[][]
ignore:
  - items
  - class
props:
  orientation: vertical
  items:
    - - label: Links
        type: label
      - label: Guide
        icon: i-lucide:book-open
        children:
          - label: Introduction
            description: Fully styled and customizable components for Nuxt.
            icon: i-lucide:house
          - label: Installation
            description: Learn how to install and configure Pohon UI in your application.
            icon: i-lucide:cloud-download
          - label: Icons
            icon: i-lucide:smile
            description: You have nothing to do, @nuxt/icon will handle it automatically.
          - label: Colors
            icon: i-lucide:swatch-book
            description: Choose a primary and a neutral color from your Tailwind CSS theme.
          - label: Theme
            icon: i-lucide:cog
            description: You can customize components by using the `class` / `pohon` props
              or in your app.config.ts.
      - label: Composables
        icon: i-lucide:database
        children:
          - label: defineShortcuts
            icon: i-lucide:file-text
            description: Define shortcuts for your application.
            to: /docs/pohon/composables/define-shortcuts
          - label: useOverlay
            icon: i-lucide:file-text
            description: Display a modal/slideover within your application.
            to: /docs/pohon/composables/use-overlay
          - label: useToast
            icon: i-lucide:file-text
            description: Display a toast within your application.
            to: /docs/pohon/composables/use-toast
      - label: Components
        icon: i-lucide:box
        to: /docs/pohon/components
        active: true
        defaultOpen: true
        children:
          - label: Link
            icon: i-lucide:file-text
            description: Use NuxtLink with superpowers.
            to: /docs/pohon/components/link
          - label: Modal
            icon: i-lucide:file-text
            description: Display a modal within your application.
            to: /docs/pohon/components/dialog
          - label: NavigationMenu
            icon: i-lucide:file-text
            description: Display a list of links.
            to: /docs/pohon/components/navigation-menu
          - label: Pagination
            icon: i-lucide:file-text
            description: Display a list of pages.
            to: /docs/pohon/components/pagination
          - label: Popover
            icon: i-lucide:file-text
            description: Display a non-modal dialog that floats around a trigger element.
            to: /docs/pohon/components/popover
          - label: Progress
            icon: i-lucide:file-text
            description: Show a horizontal bar to indicate task progression.
            to: /docs/pohon/components/progress
    - - label: GitHub
        icon: i-simple-icons:github
        badge: 3.8k
        to: https://github.com/nuxt/ui
        target: _blank
      - label: Help
        icon: i-lucide:circle-help
        disabled: true
  class: data-[orientation=vertical]:w-48
---
::

::note
Groups will be spaced when orientation is `horizontal` and separated when orientation is `vertical`.
::

### Collapsed

In `vertical` orientation, use the `collapsed` prop to collapse the NavigationMenu, this can be useful in a sidebar for example.

::note
You can use the [`tooltip`](https://akar.vinicunca.dev/#with-tooltip-in-items) and [`popover`](https://akar.vinicunca.dev/#with-popover-in-items) props to display more information on the collapsed items.
::

::docs-pohon-preview
---
collapse: true
external:
  - items
externalTypes:
  - NavigationMenuItem[][]
ignore:
  - items
  - orientation
  - class
items:
  tooltip:
    - true
    - false
  popover:
    - true
    - false
props:
  collapsed: true
  tooltip: false
  popover: false
  orientation: vertical
  items:
    - - label: Links
        type: label
      - label: Guide
        icon: i-lucide:book-open
        children:
          - label: Introduction
            description: Fully styled and customizable components for Nuxt.
            icon: i-lucide:house
          - label: Installation
            description: Learn how to install and configure Pohon UI in your application.
            icon: i-lucide:cloud-download
          - label: Icons
            icon: i-lucide:smile
            description: You have nothing to do, @nuxt/icon will handle it automatically.
          - label: Colors
            icon: i-lucide:swatch-book
            description: Choose a primary and a neutral color from your Tailwind CSS theme.
          - label: Theme
            icon: i-lucide:cog
            description: You can customize components by using the `class` / `pohon` props
              or in your app.config.ts.
      - label: Composables
        icon: i-lucide:database
        children:
          - label: defineShortcuts
            icon: i-lucide:file-text
            description: Define shortcuts for your application.
            to: /docs/pohon/composables/define-shortcuts
          - label: useOverlay
            icon: i-lucide:file-text
            description: Display a modal/slideover within your application.
            to: /docs/pohon/composables/use-overlay
          - label: useToast
            icon: i-lucide:file-text
            description: Display a toast within your application.
            to: /docs/pohon/composables/use-toast
      - label: Components
        icon: i-lucide:box
        to: /docs/pohon/components
        active: true
        children:
          - label: Link
            icon: i-lucide:file-text
            description: Use NuxtLink with superpowers.
            to: /docs/pohon/components/link
          - label: Modal
            icon: i-lucide:file-text
            description: Display a modal within your application.
            to: /docs/pohon/components/dialog
          - label: NavigationMenu
            icon: i-lucide:file-text
            description: Display a list of links.
            to: /docs/pohon/components/navigation-menu
          - label: Pagination
            icon: i-lucide:file-text
            description: Display a list of pages.
            to: /docs/pohon/components/pagination
          - label: Popover
            icon: i-lucide:file-text
            description: Display a non-modal dialog that floats around a trigger element.
            to: /docs/pohon/components/popover
          - label: Progress
            icon: i-lucide:file-text
            description: Show a horizontal bar to indicate task progression.
            to: /docs/pohon/components/progress
    - - label: GitHub
        icon: i-simple-icons:github
        badge: 3.8k
        to: https://github.com/nuxt/ui
        target: _blank
      - label: Help
        icon: i-lucide:circle-help
        disabled: true
---
::

### Highlight

Use the `highlight` prop to display a highlighted border for the active item.

Use the `highlight-color` prop to change the color of the border. It defaults to the `color` prop.

::docs-pohon-preview
---
collapse: true
external:
  - items
externalTypes:
  - NavigationMenuItem[][]
ignore:
  - items
  - class
prettier: true
props:
  highlight: true
  highlightColor: primary
  orientation: horizontal
  items:
    - - label: Guide
        icon: i-lucide:book-open
        children:
          - label: Introduction
            description: Fully styled and customizable components for Nuxt.
            icon: i-lucide:house
          - label: Installation
            description: Learn how to install and configure Pohon UI in your application.
            icon: i-lucide:cloud-download
          - label: Icons
            icon: i-lucide:smile
            description: You have nothing to do, @nuxt/icon will handle it automatically.
          - label: Colors
            icon: i-lucide:swatch-book
            description: Choose a primary and a neutral color from your Tailwind CSS theme.
          - label: Theme
            icon: i-lucide:cog
            description: You can customize components by using the `class` / `pohon` props
              or in your app.config.ts.
      - label: Composables
        icon: i-lucide:database
        children:
          - label: defineShortcuts
            icon: i-lucide:file-text
            description: Define shortcuts for your application.
            to: /docs/pohon/composables/define-shortcuts
          - label: useOverlay
            icon: i-lucide:file-text
            description: Display a modal/slideover within your application.
            to: /docs/pohon/composables/use-overlay
          - label: useToast
            icon: i-lucide:file-text
            description: Display a toast within your application.
            to: /docs/pohon/composables/use-toast
      - label: Components
        icon: i-lucide:box
        to: /docs/pohon/components
        active: true
        defaultOpen: true
        children:
          - label: Link
            icon: i-lucide:file-text
            description: Use NuxtLink with superpowers.
            to: /docs/pohon/components/link
          - label: Modal
            icon: i-lucide:file-text
            description: Display a modal within your application.
            to: /docs/pohon/components/dialog
          - label: NavigationMenu
            icon: i-lucide:file-text
            description: Display a list of links.
            to: /docs/pohon/components/navigation-menu
          - label: Pagination
            icon: i-lucide:file-text
            description: Display a list of pages.
            to: /docs/pohon/components/pagination
          - label: Popover
            icon: i-lucide:file-text
            description: Display a non-modal dialog that floats around a trigger element.
            to: /docs/pohon/components/popover
          - label: Progress
            icon: i-lucide:file-text
            description: Show a horizontal bar to indicate task progression.
            to: /docs/pohon/components/progress
    - - label: GitHub
        icon: i-simple-icons:github
        badge: 3.8k
        to: https://github.com/nuxt/ui
        target: _blank
      - label: Help
        icon: i-lucide:circle-help
        disabled: true
  class: data-[orientation=horizontal]:border-b border-border
    data-[orientation=horizontal]:w-full data-[orientation=vertical]:w-48
---
::

::note
In this example, the `border-b` class is applied to display a border in `horizontal` orientation, this is not done by default to let you have a clean slate to work with.
::

::caution
In `vertical` orientation, the `highlight` prop only highlights the border of active children.
::

### Color

Use the `color` prop to change the color of the NavigationMenu.

::docs-pohon-preview
---
external:
  - items
externalTypes:
  - NavigationMenuItem[][]
ignore:
  - items
  - class
props:
  color: neutral
  items:
    - - label: Guide
        icon: i-lucide:book-open
        to: /docs/pohon/getting-started
      - label: Composables
        icon: i-lucide:database
        to: /docs/pohon/composables
      - label: Components
        icon: i-lucide:box
        to: /docs/pohon/components
        active: true
    - - label: GitHub
        icon: i-simple-icons:github
        badge: 3.8k
        to: https://github.com/nuxt/ui
        target: _blank
  class: w-full
---
::

### Variant

Use the `variant` prop to change the variant of the NavigationMenu.

::docs-pohon-preview
---
external:
  - items
externalTypes:
  - NavigationMenuItem[][]
ignore:
  - items
  - class
props:
  color: neutral
  variant: link
  highlight: false
  items:
    - - label: Guide
        icon: i-lucide:book-open
        to: /docs/pohon/getting-started
      - label: Composables
        icon: i-lucide:database
        to: /docs/pohon/composables
      - label: Components
        icon: i-lucide:box
        to: /docs/pohon/components
        active: true
    - - label: GitHub
        icon: i-simple-icons:github
        badge: 3.8k
        to: https://github.com/nuxt/ui
        target: _blank
  class: w-full
---
::

::note
The `highlight` prop changes the `pill` variant active item style. Try it out to see the difference.
::

### Trailing Icon

Use the `trailing-icon` prop to customize the trailing [Icon](https://akar.vinicunca.dev/docs/pohon/components/icon) of each item. Defaults to `i-lucide:chevron-down`. This icon is only displayed when an item has children.

::tip
You can also set an icon for a specific item by using the `trailingIcon` property in the item object.
::

::docs-pohon-preview
---
collapse: true
external:
  - items
externalTypes:
  - NavigationMenuItem[]
ignore:
  - items
  - class
props:
  trailingIcon: i-lucide:arrow-down
  items:
    - label: Guide
      icon: i-lucide:book-open
      to: /docs/pohon/getting-started
      children:
        - label: Introduction
          description: Fully styled and customizable components for Nuxt.
          icon: i-lucide:house
        - label: Installation
          description: Learn how to install and configure Pohon UI in your application.
          icon: i-lucide:cloud-download
        - label: Icons
          icon: i-lucide:smile
          description: You have nothing to do, @nuxt/icon will handle it automatically.
        - label: Colors
          icon: i-lucide:swatch-book
          description: Choose a primary and a neutral color from your Tailwind CSS theme.
        - label: Theme
          icon: i-lucide:cog
          description: You can customize components by using the `class` / `pohon` props
            or in your app.config.ts.
    - label: Composables
      icon: i-lucide:database
      to: /docs/pohon/composables
      children:
        - label: defineShortcuts
          icon: i-lucide:file-text
          description: Define shortcuts for your application.
          to: /docs/pohon/composables/define-shortcuts
        - label: useOverlay
          icon: i-lucide:file-text
          description: Display a modal/slideover within your application.
          to: /docs/pohon/composables/use-overlay
        - label: useToast
          icon: i-lucide:file-text
          description: Display a toast within your application.
          to: /docs/pohon/composables/use-toast
    - label: Components
      icon: i-lucide:box
      to: /docs/pohon/components
      active: true
      children:
        - label: Link
          icon: i-lucide:file-text
          description: Use NuxtLink with superpowers.
          to: /docs/pohon/components/link
        - label: Modal
          icon: i-lucide:file-text
          description: Display a modal within your application.
          to: /docs/pohon/components/dialog
        - label: NavigationMenu
          icon: i-lucide:file-text
          description: Display a list of links.
          to: /docs/pohon/components/navigation-menu
        - label: Pagination
          icon: i-lucide:file-text
          description: Display a list of pages.
          to: /docs/pohon/components/pagination
        - label: Popover
          icon: i-lucide:file-text
          description: Display a non-modal dialog that floats around a trigger element.
          to: /docs/pohon/components/popover
        - label: Progress
          icon: i-lucide:file-text
          description: Show a horizontal bar to indicate task progression.
          to: /docs/pohon/components/progress
  class: w-full akar:justify-center
---
::

::docs-framework-only
#nuxt
  :::tip
  ---
  to: https://akar.vinicunca.dev/docs/pohon/getting-started/integrations/icons/nuxt#theme
  ---
  You can customize this icon globally in your `app.config.ts` under `pohon.icons.chevronDown` key.
  :::

#vue
  :::tip
  ---
  to: https://akar.vinicunca.dev/docs/pohon/getting-started/integrations/icons/vue#theme
  ---
  You can customize this icon globally in your `vite.config.ts` under `pohon.icons.chevronDown` key.
  :::
::

### Arrow

Use the `arrow` prop to display an arrow on the NavigationMenu content when items have children.

::docs-pohon-preview
---
collapse: true
external:
  - items
externalTypes:
  - NavigationMenuItem[]
ignore:
  - items
  - arrow
  - class
props:
  arrow: true
  items:
    - label: Guide
      icon: i-lucide:book-open
      to: /docs/pohon/getting-started
      children:
        - label: Introduction
          description: Fully styled and customizable components for Nuxt.
          icon: i-lucide:house
        - label: Installation
          description: Learn how to install and configure Pohon UI in your application.
          icon: i-lucide:cloud-download
        - label: Icons
          icon: i-lucide:smile
          description: You have nothing to do, @nuxt/icon will handle it automatically.
        - label: Colors
          icon: i-lucide:swatch-book
          description: Choose a primary and a neutral color from your Tailwind CSS theme.
        - label: Theme
          icon: i-lucide:cog
          description: You can customize components by using the `class` / `pohon` props
            or in your app.config.ts.
    - label: Composables
      icon: i-lucide:database
      to: /docs/pohon/composables
      children:
        - label: defineShortcuts
          icon: i-lucide:file-text
          description: Define shortcuts for your application.
          to: /docs/pohon/composables/define-shortcuts
        - label: useOverlay
          icon: i-lucide:file-text
          description: Display a modal/slideover within your application.
          to: /docs/pohon/composables/use-overlay
        - label: useToast
          icon: i-lucide:file-text
          description: Display a toast within your application.
          to: /docs/pohon/composables/use-toast
    - label: Components
      icon: i-lucide:box
      to: /docs/pohon/components
      active: true
      children:
        - label: Link
          icon: i-lucide:file-text
          description: Use NuxtLink with superpowers.
          to: /docs/pohon/components/link
        - label: Modal
          icon: i-lucide:file-text
          description: Display a modal within your application.
          to: /docs/pohon/components/dialog
        - label: NavigationMenu
          icon: i-lucide:file-text
          description: Display a list of links.
          to: /docs/pohon/components/navigation-menu
        - label: Pagination
          icon: i-lucide:file-text
          description: Display a list of pages.
          to: /docs/pohon/components/pagination
        - label: Popover
          icon: i-lucide:file-text
          description: Display a non-modal dialog that floats around a trigger element.
          to: /docs/pohon/components/popover
        - label: Progress
          icon: i-lucide:file-text
          description: Show a horizontal bar to indicate task progression.
          to: /docs/pohon/components/progress
  class: w-full akar:justify-center
---
::

::note
The arrow is animated to follow the active item.
::

### Content Orientation

Use the `content-orientation` prop to change the orientation of the content.

::warning
This prop only works when `orientation` is `horizontal`.
::

::docs-pohon-preview
---
collapse: true
external:
  - items
externalTypes:
  - NavigationMenuItem[]
ignore:
  - items
  - arrow
  - class
props:
  arrow: true
  contentOrientation: vertical
  items:
    - label: Guide
      icon: i-lucide:book-open
      to: /docs/pohon/getting-started
      children:
        - label: Introduction
          description: Fully styled and customizable components for Nuxt.
          icon: i-lucide:house
        - label: Installation
          description: Learn how to install and configure Pohon UI in your application.
          icon: i-lucide:cloud-download
        - label: Icons
          icon: i-lucide:smile
          description: You have nothing to do, @nuxt/icon will handle it automatically.
    - label: Composables
      icon: i-lucide:database
      to: /docs/pohon/composables
      children:
        - label: defineShortcuts
          icon: i-lucide:file-text
          description: Define shortcuts for your application.
          to: /docs/pohon/composables/define-shortcuts
        - label: useOverlay
          icon: i-lucide:file-text
          description: Display a modal/slideover within your application.
          to: /docs/pohon/composables/use-overlay
        - label: useToast
          icon: i-lucide:file-text
          description: Display a toast within your application.
          to: /docs/pohon/composables/use-toast
    - label: Components
      icon: i-lucide:box
      to: /docs/pohon/components
      active: true
      children:
        - label: Link
          icon: i-lucide:file-text
          description: Use NuxtLink with superpowers.
          to: /docs/pohon/components/link
        - label: Modal
          icon: i-lucide:file-text
          description: Display a modal within your application.
          to: /docs/pohon/components/dialog
        - label: NavigationMenu
          icon: i-lucide:file-text
          description: Display a list of links.
          to: /docs/pohon/components/navigation-menu
        - label: Pagination
          icon: i-lucide:file-text
          description: Display a list of pages.
          to: /docs/pohon/components/pagination
  class: w-full akar:justify-center
---
::

### Unmount

Use the `unmount-on-hide` prop to control the content unmounting behavior. Defaults to `true`.

::docs-pohon-preview
---
collapse: true
external:
  - items
externalTypes:
  - NavigationMenuItem[]
ignore:
  - items
  - arrow
  - class
props:
  unmountOnHide: false
  items:
    - label: Guide
      icon: i-lucide:book-open
      to: /docs/pohon/getting-started
      children:
        - label: Introduction
          description: Fully styled and customizable components for Nuxt.
          icon: i-lucide:house
        - label: Installation
          description: Learn how to install and configure Pohon UI in your application.
          icon: i-lucide:cloud-download
        - label: Icons
          icon: i-lucide:smile
          description: You have nothing to do, @nuxt/icon will handle it automatically.
        - label: Colors
          icon: i-lucide:swatch-book
          description: Choose a primary and a neutral color from your Tailwind CSS theme.
        - label: Theme
          icon: i-lucide:cog
          description: You can customize components by using the `class` / `pohon` props
            or in your app.config.ts.
    - label: Composables
      icon: i-lucide:database
      to: /docs/pohon/composables
      children:
        - label: defineShortcuts
          icon: i-lucide:file-text
          description: Define shortcuts for your application.
          to: /docs/pohon/composables/define-shortcuts
        - label: useOverlay
          icon: i-lucide:file-text
          description: Display a modal/slideover within your application.
          to: /docs/pohon/composables/use-overlay
        - label: useToast
          icon: i-lucide:file-text
          description: Display a toast within your application.
          to: /docs/pohon/composables/use-toast
    - label: Components
      icon: i-lucide:box
      to: /docs/pohon/components
      active: true
      children:
        - label: Link
          icon: i-lucide:file-text
          description: Use NuxtLink with superpowers.
          to: /docs/pohon/components/link
        - label: Modal
          icon: i-lucide:file-text
          description: Display a modal within your application.
          to: /docs/pohon/components/dialog
        - label: NavigationMenu
          icon: i-lucide:file-text
          description: Display a list of links.
          to: /docs/pohon/components/navigation-menu
        - label: Pagination
          icon: i-lucide:file-text
          description: Display a list of pages.
          to: /docs/pohon/components/pagination
        - label: Popover
          icon: i-lucide:file-text
          description: Display a non-modal dialog that floats around a trigger element.
          to: /docs/pohon/components/popover
        - label: Progress
          icon: i-lucide:file-text
          description: Show a horizontal bar to indicate task progression.
          to: /docs/pohon/components/progress
  class: w-full akar:justify-center
---
::

::note
You can inspect the DOM to see each item's content being rendered.
::

## Examples

### With tooltip in items

When orientation is `vertical` and the menu is `collapsed`, you can set the `tooltip` prop to `true` to display a [Tooltip](https://akar.vinicunca.dev/docs/pohon/components/tooltip) around items with their label but you can also use the `tooltip` property on each item to override the default tooltip.

You can pass any property from the [Tooltip](https://akar.vinicunca.dev/docs/pohon/components/tooltip) component globally or on each item.

::docs-pohon-preview
---
collapse: true
external:
  - items
externalTypes:
  - NavigationMenuItem[][]
ignore:
  - items
  - orientation
  - class
items:
  tooltip:
    - true
    - false
props:
  tooltip: true
  collapsed: true
  orientation: vertical
  items:
    - - label: Links
        type: label
      - label: Guide
        icon: i-lucide:book-open
        children:
          - label: Introduction
            description: Fully styled and customizable components for Nuxt.
            icon: i-lucide:house
          - label: Installation
            description: Learn how to install and configure Pohon UI in your application.
            icon: i-lucide:cloud-download
          - label: Icons
            icon: i-lucide:smile
            description: You have nothing to do, @nuxt/icon will handle it automatically.
          - label: Colors
            icon: i-lucide:swatch-book
            description: Choose a primary and a neutral color from your Tailwind CSS theme.
          - label: Theme
            icon: i-lucide:cog
            description: You can customize components by using the `class` / `pohon` props
              or in your app.config.ts.
      - label: Composables
        icon: i-lucide:database
        children:
          - label: defineShortcuts
            icon: i-lucide:file-text
            description: Define shortcuts for your application.
            to: /docs/pohon/composables/define-shortcuts
          - label: useOverlay
            icon: i-lucide:file-text
            description: Display a modal/slideover within your application.
            to: /docs/pohon/composables/use-overlay
          - label: useToast
            icon: i-lucide:file-text
            description: Display a toast within your application.
            to: /docs/pohon/composables/use-toast
      - label: Components
        icon: i-lucide:box
        to: /docs/pohon/components
        active: true
        children:
          - label: Link
            icon: i-lucide:file-text
            description: Use NuxtLink with superpowers.
            to: /docs/pohon/components/link
          - label: Modal
            icon: i-lucide:file-text
            description: Display a modal within your application.
            to: /docs/pohon/components/dialog
          - label: NavigationMenu
            icon: i-lucide:file-text
            description: Display a list of links.
            to: /docs/pohon/components/navigation-menu
          - label: Pagination
            icon: i-lucide:file-text
            description: Display a list of pages.
            to: /docs/pohon/components/pagination
          - label: Popover
            icon: i-lucide:file-text
            description: Display a non-modal dialog that floats around a trigger element.
            to: /docs/pohon/components/popover
          - label: Progress
            icon: i-lucide:file-text
            description: Show a horizontal bar to indicate task progression.
            to: /docs/pohon/components/progress
    - - label: GitHub
        icon: i-simple-icons:github
        badge: 3.8k
        to: https://github.com/nuxt/ui
        target: _blank
        tooltip:
          text: Open on GitHub
          kbds:
            - 3.8k
      - label: Help
        icon: i-lucide:circle-help
        disabled: true
---
::

### With popover in items

When orientation is `vertical` and the menu is `collapsed`, you can set the `popover` prop to `true` to display a [Popover](https://akar.vinicunca.dev/docs/pohon/components/popover) around items with their children but you can also use the `popover` property on each item to override the default popover.

You can pass any property from the [Popover](https://akar.vinicunca.dev/docs/pohon/components/popover) component globally or on each item.

::docs-pohon-preview
---
collapse: true
external:
  - items
externalTypes:
  - NavigationMenuItem[][]
ignore:
  - items
  - orientation
  - class
items:
  popover:
    - true
    - false
props:
  popover: true
  collapsed: true
  orientation: vertical
  items:
    - - label: Links
        type: label
      - label: Guide
        icon: i-lucide:book-open
        children:
          - label: Introduction
            description: Fully styled and customizable components for Nuxt.
            icon: i-lucide:house
          - label: Installation
            description: Learn how to install and configure Pohon UI in your application.
            icon: i-lucide:cloud-download
          - label: Icons
            icon: i-lucide:smile
            description: You have nothing to do, @nuxt/icon will handle it automatically.
          - label: Colors
            icon: i-lucide:swatch-book
            description: Choose a primary and a neutral color from your Tailwind CSS theme.
          - label: Theme
            icon: i-lucide:cog
            description: You can customize components by using the `class` / `pohon` props
              or in your app.config.ts.
      - label: Composables
        icon: i-lucide:database
        popover:
          mode: click
        children:
          - label: defineShortcuts
            icon: i-lucide:file-text
            description: Define shortcuts for your application.
            to: /docs/pohon/composables/define-shortcuts
          - label: useOverlay
            icon: i-lucide:file-text
            description: Display a modal/slideover within your application.
            to: /docs/pohon/composables/use-overlay
          - label: useToast
            icon: i-lucide:file-text
            description: Display a toast within your application.
            to: /docs/pohon/composables/use-toast
      - label: Components
        icon: i-lucide:box
        to: /docs/pohon/components
        active: true
        children:
          - label: Link
            icon: i-lucide:file-text
            description: Use NuxtLink with superpowers.
            to: /docs/pohon/components/link
          - label: Modal
            icon: i-lucide:file-text
            description: Display a modal within your application.
            to: /docs/pohon/components/dialog
          - label: NavigationMenu
            icon: i-lucide:file-text
            description: Display a list of links.
            to: /docs/pohon/components/navigation-menu
          - label: Pagination
            icon: i-lucide:file-text
            description: Display a list of pages.
            to: /docs/pohon/components/pagination
          - label: Popover
            icon: i-lucide:file-text
            description: Display a non-modal dialog that floats around a trigger element.
            to: /docs/pohon/components/popover
          - label: Progress
            icon: i-lucide:file-text
            description: Show a horizontal bar to indicate task progression.
            to: /docs/pohon/components/progress
    - - label: GitHub
        icon: i-simple-icons:github
        badge: 3.8k
        to: https://github.com/nuxt/ui
        target: _blank
        tooltip:
          text: Open on GitHub
          kbds:
            - 3.8k
      - label: Help
        icon: i-lucide:circle-help
        disabled: true
---
::

::tip{to="https://akar.vinicunca.dev/#with-content-slot"}
You can use the `#content` slot to customize the content of the popover in the `vertical` orientation.
::

### Control active item

You can control the active item by using the `default-value` prop or the `v-model` directive with the `value` of the item. If no `value` is provided, it defaults to the index **as a string**.

::docs-component-example{collapse name="navigation-menu-model-value-example"}
::

::note
In this example, leveraging [`defineShortcuts`](https://akar.vinicunca.dev/docs/pohon/composables/define-shortcuts), you can switch the active item by pressing ``, ``, or ``.
::

### With custom slot

Use the `slot` property to customize a specific item.

You will have access to the following slots:

- `#{{ item.slot }}`
- `#{{ item.slot }}-leading`
- `#{{ item.slot }}-label`
- `#{{ item.slot }}-trailing`
- `#{{ item.slot }}-content`

::docs-component-example{name="navigation-menu-custom-slot-example"}
::

::tip{to="https://akar.vinicunca.dev/#slots"}
You can also use the `#item`, `#item-leading`, `#item-label`, `#item-trailing` and `#item-content` slots to customize all items.
::

### With content slot

Use the `#item-content` slot or the `slot` property (`#{{ item.slot }}-content`) to customize the content of a specific item.

::docs-component-example{collapse name="navigation-menu-content-slot-example"}
::

::note
In this example, we add the `sm:w-(--akar-navigation-menu-viewport-width)` class on the `viewport` to have a dynamic width. This requires to set a width on the content's first child.
::

## API

### Props

::docs-pohon-props
::

### Emits

::docs-pohon-emits
::

### Slots

::docs-pohon-slots
::

## Theme

::docs-pohon-theme
::

### Anatomy

Here is the anatomy of themeable parts of the Navigation Menu component:

Coming soon...

## Akar

::docs-akar-to-pohon
---
mode: pohon
to: https://akar.vinicunca.dev/docs/akar/components/navigation-menu
---
::

## Changelog

::docs-component-changelog
::


# Pagination

## Usage

Use the `default-page` prop or the `v-model:page` directive to control the current page.

::docs-pohon-preview
---
external:
  - page
ignore:
  - page
  - total
model:
  - page
props:
  page: 5
  total: 100
---
::

::note
The Pagination component uses some [`Button`](https://akar.vinicunca.dev/docs/pohon/components/button) to display the pages, use [`color`](https://akar.vinicunca.dev/#color), [`variant`](https://akar.vinicunca.dev/#variant) and [`size`](https://akar.vinicunca.dev/#size) props to style them.
::

### Total

Use the `total` prop to set the total number of items in the list.

::docs-pohon-preview
---
external:
  - page
model:
  - page
props:
  page: 5
  total: 100
---
::

### Items Per Page

Use the `items-per-page` prop to set the number of items per page. Defaults to `10`.

::docs-pohon-preview
---
external:
  - page
ignore:
  - page
model:
  - page
props:
  page: 5
  itemsPerPage: 20
  total: 100
---
::

### Sibling Count

Use the `sibling-count` prop to set the number of siblings to show. Defaults to `2`.

::docs-pohon-preview
---
external:
  - page
ignore:
  - page
  - total
model:
  - page
props:
  page: 5
  siblingCount: 1
  total: 100
---
::

### Show Edges

Use the `show-edges` prop to always show the ellipsis, first and last pages. Defaults to `false`.

::docs-pohon-preview
---
external:
  - page
ignore:
  - page
  - total
model:
  - page
props:
  page: 5
  showEdges: true
  siblingCount: 1
  total: 100
---
::

### Show Controls

Use the `show-controls` prop to show the first, prev, next and last buttons. Defaults to `true`.

::docs-pohon-preview
---
external:
  - page
ignore:
  - page
  - total
model:
  - page
props:
  page: 5
  showControls: false
  showEdges: true
  total: 100
---
::

### Color

Use the `color` prop to set the color of the inactive controls. Defaults to `neutral`.

::docs-pohon-preview
---
external:
  - page
ignore:
  - page
  - total
items:
  color:
    - primary
    - secondary
    - success
    - info
    - warning
    - error
    - neutral
model:
  - page
props:
  page: 5
  color: primary
  total: 100
---
::

### Variant

Use the `variant` prop to set the variant of the inactive controls. Defaults to `outline`.

::docs-pohon-preview
---
external:
  - page
ignore:
  - page
  - total
items:
  color:
    - primary
    - secondary
    - success
    - info
    - warning
    - error
    - neutral
  variant:
    - solid
    - outline
    - soft
    - subtle
    - ghost
    - link
model:
  - page
props:
  page: 5
  color: neutral
  variant: subtle
  total: 100
---
::

### Active Color

Use the `active-color` prop to set the color of the active control. Defaults to `primary`.

::docs-pohon-preview
---
external:
  - page
ignore:
  - page
  - total
items:
  activeColor:
    - primary
    - secondary
    - success
    - info
    - warning
    - error
    - neutral
model:
  - page
props:
  page: 5
  activeColor: neutral
  total: 100
---
::

### Active Variant

Use the `active-variant` prop to set the variant of the active control. Defaults to `solid`.

::docs-pohon-preview
---
external:
  - page
ignore:
  - page
  - total
items:
  activeColor:
    - primary
    - secondary
    - success
    - info
    - warning
    - error
    - neutral
  activeVariant:
    - solid
    - outline
    - soft
    - subtle
    - ghost
    - link
model:
  - page
props:
  page: 5
  activeColor: primary
  activeVariant: subtle
  total: 100
---
::

### Size

Use the `size` prop to set the size of the controls. Defaults to `md`.

::docs-pohon-preview
---
external:
  - page
ignore:
  - page
  - total
items:
  size:
    - xs
    - sm
    - md
    - lg
    - xl
model:
  - page
props:
  page: 5
  size: xl
  total: 100
---
::

### Disabled

Use the `disabled` prop to disable the pagination controls.

::docs-pohon-preview
---
external:
  - page
ignore:
  - page
  - total
model:
  - page
props:
  page: 5
  total: 100
  disabled: true
---
::

## Examples

### With links

Use the `to` prop to transform buttons into links. Pass a function that receives the page number and returns a route destination.

::docs-component-example{name="pagination-links-example"}
::

::note
In this example we're adding the `#with-links` hash to avoid going to the top of the page.
::

## API

### Props

::docs-pohon-props
::

### Slots

::docs-pohon-slots
::

### Emits

::docs-pohon-emits
::

## Theme

::docs-pohon-theme
::

## Akar

::docs-akar-to-pohon
---
mode: pohon
to: https://akar.vinicunca.dev/docs/akar/components/accordion
---
::

## Changelog

::docs-component-changelog
::


# PinInput

## Usage

Use the `v-model` directive to control the value of the PinInput.

::docs-pohon-preview
---
external:
  - modelValue
ignore:
  - modelValue
prettier: true
props:
  modelValue: []
---
::

Use the `default-value` prop to set the initial value when you do not need to control its state.

::docs-pohon-preview
---
ignore:
  - defaultValue
prettier: true
props:
  defaultValue:
    - "1"
    - "2"
    - "3"
---
::

### Type

Use the `type` prop to change the input type. Defaults to `text`.

::docs-pohon-preview
---
items:
  type:
    - text
    - number
props:
  type: number
---
::

::note
When `type` is set to `number`, it will only accept numeric characters.
::

### Mask

Use the `mask` prop to treat the input like a password.

::docs-pohon-preview
---
ignore:
  - placeholder
  - defaultValue
prettier: true
props:
  mask: true
  defaultValue:
    - "1"
    - "2"
    - "3"
    - "4"
    - "5"
---
::

### OTP

Use the `otp` prop to enable One-Time Password functionality. When enabled, mobile devices can automatically detect and fill OTP codes from SMS messages or clipboard content, with autocomplete support.

::docs-pohon-preview{:props='{"otp":true}'}
::

### Length

Use the `length` prop to change the amount of inputs.

::docs-pohon-preview{:props='{"length":6}'}
::

### Placeholder

Use the `placeholder` prop to set a placeholder text.

::docs-pohon-preview{:props='{"placeholder":"○"}'}
::

### Color

Use the `color` prop to change the ring color when the PinInput is focused.

::docs-pohon-preview
---
ignore:
  - placeholder
props:
  color: neutral
  highlight: true
  placeholder: ○
---
::

::note
The `highlight` prop is used here to show the focus state. It's used internally when a validation error occurs.
::

### Variant

Use the `variant` prop to change the variant of the PinInput.

::docs-pohon-preview
---
ignore:
  - placeholder
props:
  color: neutral
  variant: subtle
  highlight: false
  placeholder: ○
---
::

### Size

Use the `size` prop to change the size of the PinInput.

::docs-pohon-preview
---
ignore:
  - placeholder
props:
  size: xl
  placeholder: ○
---
::

### Disabled

Use the `disabled` prop to disable the PinInput.

::docs-pohon-preview
---
ignore:
  - placeholder
props:
  disabled: true
  placeholder: ○
---
::

## API

### Props

::docs-pohon-props
::

### Emits

::docs-pohon-emits
::

### Expose

When accessing the component via a template ref, you can use the following:

| Name        | Type                             |
| ----------- | -------------------------------- |
| `inputsRef` | `Ref<ComponentPublicInstance[]>` |

## Theme

::docs-pohon-theme
::

## Akar

::docs-akar-to-pohon
---
mode: pohon
to: https://akar.vinicunca.dev/docs/akar/components/pin-input
---
::

## Changelog

::docs-component-changelog
::


# Popover

## Usage

Use a [Button](https://akar.vinicunca.dev/docs/pohon/components/button) or any other component in the default slot of the Popover.

Then, use the `#content` slot to add the content displayed when the Popover is open.

::docs-pohon-preview
---
prettier: true
slots:
  default: |
    
    <PButton label="Open" color="neutral" variant="subtle" />
  content: |
    
    <CorePlaceholder class="size-48 m-4 inline-flex" />
---
  :::p-button{color="neutral" label="Open" variant="subtle"}
  :::

#content
  :::core-placeholder{.size-48.m-4.inline-flex}
  :::
::

### Mode

Use the `mode` prop to change the mode of the Popover. Defaults to `click`.

::docs-pohon-preview
---
items:
  mode:
    - click
    - hover
prettier: true
props:
  mode: hover
slots:
  default: |
    
    <PButton label="Open" color="neutral" variant="subtle" />
  content: |
    
    <CorePlaceholder class="size-48 m-4 inline-flex" />
---
  :::p-button{color="neutral" label="Open" variant="subtle"}
  :::

#content
  :::core-placeholder{.size-48.m-4.inline-flex}
  :::
::

::note
When using the `hover` mode, the Akar [`AHoverCard`](https://akar.vinicunca.dev/docs/akar/components/hover-card) component is used instead of the [`APopover`](https://akar.vinicunca.dev/docs/akar/components/popover).
::

### Delay

When using the `hover` mode, you can use the `open-delay` and `close-delay` props to control the delay before the Popover is opened or closed.

::docs-pohon-preview
---
ignore:
  - mode
prettier: true
props:
  mode: hover
  openDelay: 500
  closeDelay: 300
slots:
  default: |
    
    <PButton label="Open" color="neutral" variant="subtle" />
  content: |
    
    <CorePlaceholder class="size-48 m-4 inline-flex" />
---
  :::p-button{color="neutral" label="Open" variant="subtle"}
  :::

#content
  :::core-placeholder{.size-48.m-4.inline-flex}
  :::
::

### Content

Use the `content` prop to control how the Popover content is rendered, like its `align` or `side` for example.

::docs-pohon-preview
---
items:
  content:
    align:
      - start
      - center
      - end
    side:
      - right
      - left
      - top
      - bottom
prettier: true
props:
  content:
    align: center
    side: bottom
    sideOffset: 8
slots:
  default: |
    
    <PButton label="Open" color="neutral" variant="subtle" />
  content: |
    
    <CorePlaceholder class="size-48 m-4 inline-flex" />
---
  :::p-button{color="neutral" label="Open" variant="subtle"}
  :::

#content
  :::core-placeholder{.size-48.m-4.inline-flex}
  :::
::

### Arrow

Use the `arrow` prop to display an arrow on the Popover.

::docs-pohon-preview
---
ignore:
  - arrow
prettier: true
props:
  arrow: true
slots:
  default: |
    
    <PButton label="Open" color="neutral" variant="subtle" />
  content: |
    
    <CorePlaceholder class="size-48 m-4 inline-flex" />
---
  :::p-button{color="neutral" label="Open" variant="subtle"}
  :::

#content
  :::core-placeholder{.size-48.m-4.inline-flex}
  :::
::

### Modal

Use the `modal` prop to control whether the Popover blocks interaction with outside content. Defaults to `false`.

::docs-pohon-preview
---
ignore:
  - title
prettier: true
props:
  modal: true
slots:
  default: |
    
    <PButton label="Open" color="neutral" variant="subtle" />
  content: |
    
    <CorePlaceholder class="size-48 m-4 inline-flex" />
---
  :::p-button{color="neutral" label="Open" variant="subtle"}
  :::

#content
  :::core-placeholder{.size-48.m-4.inline-flex}
  :::
::

### Dismissible

Use the `dismissible` prop to control whether the Popover is dismissible when clicking outside of it or pressing escape. Defaults to `true`.

::note
A `close:prevent` event will be emitted when the user tries to close it.
::

::docs-component-example{name="popover-dismissible-example"}
::

## Examples

### Control open state

You can control the open state by using the `default-open` prop or the `v-model:open` directive.

::docs-component-example{name="popover-open-example"}
::

::note
In this example, leveraging [`defineShortcuts`](https://akar.vinicunca.dev/docs/pohon/composables/define-shortcuts), you can toggle the Popover by pressing ``.
::

### With command palette

You can use a [CommandPalette](https://akar.vinicunca.dev/docs/pohon/components/command-palette) component inside the Popover's content.

::docs-component-example{collapse name="popover-command-palette-example"}
::

### With following cursor

You can make the Popover follow the cursor when hovering over an element using the [`reference`](https://akar.vinicunca.dev/docs/akar/components/tooltip#trigger) prop:

::docs-component-example{name="popover-cursor-example"}
::

### With anchor slot

You can use the `#anchor` slot to position the Popover against a custom element.

::warning
This slot only works when `mode` is `click`.
::

::docs-component-example{collapse name="popover-anchor-slot-example"}
::

## API

### Props

::docs-pohon-props
::

### Slots

::docs-pohon-slots
::

::note
The `close` function is only available when `mode` is set to `click` because Akar exposes this for [`APopover`](https://akar.vinicunca.dev/docs/akar/components/popover#close-using-slot-props) but not for [`AHoverCard`](https://akar.vinicunca.dev/docs/akar/components/hover-card).
::

### Emits

::docs-pohon-emits
::

## Theme

::docs-pohon-theme
::

## Akar

::docs-akar-to-pohon
---
mode: pohon
to: https://akar.vinicunca.dev/docs/akar/components/accordion
---
::

## Changelog

::docs-component-changelog
::


# Progress

## Usage

Use the `v-model` directive to control the value of the Progress.

::docs-pohon-preview{:external='["modelValue"]' :props='{"modelValue":50}'}
::

### Max

Use the `max` prop to set the maximum value of the Progress.

::docs-pohon-preview
---
external:
  - modelValue
props:
  modelValue: 3
  max: 4
---
::

Use the `max` prop with an array of strings to display the active step under the bar, the maximum value of the Progress is the length of the array.

::docs-pohon-preview
---
external:
  - modelValue
ignore:
  - max
prettier: true
props:
  modelValue: 3
  max:
    - Waiting...
    - Cloning...
    - Migrating...
    - Deploying...
    - Done!
---
::

### Status

Use the `status` prop to display the current Progress value above the bar.

::docs-pohon-preview
---
external:
  - modelValue
props:
  modelValue: 50
  status: true
---
::

### Indeterminate

When no `v-model` is set or the value is `null`, the Progress becomes *indeterminate*. The progress bar is animated as a `carousel`, but you can change it using the [`animation`](https://akar.vinicunca.dev/#animation) prop.

::docs-pohon-preview{:external='["modelValue"]' :props='{"modelValue":null}'}
::

### Animation

Use the `animation` prop to change the animation of the Progress to an inverse carousel, a swinging bar or an elastic bar. Defaults to `carousel`.

::docs-pohon-preview{:props='{"animation":"swing"}'}
::

### Orientation

Use the `orientation` prop to change the orientation of the Progress. Defaults to `horizontal`.

::docs-pohon-preview
---
ignore:
  - class
props:
  orientation: vertical
  class: akar:h-48
---
::

### Color

Use the `color` prop to change the color of the Slider.

::docs-pohon-preview{:props='{"color":"neutral"}'}
::

### Size

Use the `size` prop to change the size of the Slider.

::docs-pohon-preview{:props='{"size":"xl"}'}
::

### Inverted

Use the `inverted` prop to visually invert the Progress.

::docs-pohon-preview{:props='{"inverted":true,"modelValue":25}'}
::

## API

### Props

::docs-pohon-props
::

### Slots

::docs-pohon-slots
::

### Emits

::docs-pohon-emits
::

## Theme

::docs-pohon-theme
::

## Akar

::docs-akar-to-pohon
---
mode: pohon
to: https://akar.vinicunca.dev/docs/akar/components/progress
---
::

## Changelog

::docs-component-changelog
::


# RadioGroup

## Usage

Use the `v-model` directive to control the value of the RadioGroup or the `default-value` prop to set the initial value when you do not need to control its state.

::docs-pohon-preview
---
external:
  - items
  - modelValue
ignore:
  - modelValue
  - items
prettier: true
props:
  modelValue: System
  items:
    - System
    - Light
    - Dark
---
::

### Items

Use the `items` prop as an array of strings or numbers:

::docs-pohon-preview
---
external:
  - items
  - modelValue
ignore:
  - modelValue
  - items
prettier: true
props:
  modelValue: System
  items:
    - System
    - Light
    - Dark
---
::

You can also pass an array of objects with the following properties:

- `label?: string`
- `description?: string`
- [`value?: string`](https://akar.vinicunca.dev/#value-key)
- `disabled?: boolean`
- `class?: any`
- `pohon?: { item?: ClassNameValue, container?: ClassNameValue, base?: ClassNameValue, 'indicator'?: ClassNameValue, wrapper?: ClassNameValue, label?: ClassNameValue, description?: ClassNameValue }`

::docs-pohon-preview
---
external:
  - items
  - modelValue
externalTypes:
  - RadioGroupItem[]
ignore:
  - modelValue
  - items
props:
  modelValue: system
  items:
    - label: System
      description: This is the first option.
      value: system
    - label: Light
      description: This is the second option.
      value: light
    - label: Dark
      description: This is the third option.
      value: dark
---
::

::caution
When using objects, you need to reference the `value` property of the object in the `v-model` directive or the `default-value` prop.
::

### Value Key

You can change the property that is used to set the value by using the `value-key` prop. Defaults to `value`.

::docs-pohon-preview
---
external:
  - items
  - modelValue
externalTypes:
  - RadioGroupItem[]
ignore:
  - modelValue
  - items
  - valueKey
props:
  modelValue: light
  valueKey: id
  items:
    - label: System
      description: This is the first option.
      id: system
    - label: Light
      description: This is the second option.
      id: light
    - label: Dark
      description: This is the third option.
      id: dark
---
::

### Legend

Use the `legend` prop to set the legend of the RadioGroup.

::docs-pohon-preview
---
external:
  - items
ignore:
  - defaultValue
  - items
prettier: true
props:
  legend: Theme
  defaultValue: System
  items:
    - System
    - Light
    - Dark
---
::

### Color

Use the `color` prop to change the color of the RadioGroup.

::docs-pohon-preview
---
external:
  - items
ignore:
  - defaultValue
  - items
prettier: true
props:
  color: neutral
  defaultValue: System
  items:
    - System
    - Light
    - Dark
---
::

### Variant

Use the `variant` prop to change the variant of the RadioGroup.

::docs-pohon-preview
---
external:
  - items
externalTypes:
  - RadioGroupItem[]
ignore:
  - defaultValue
  - items
prettier: true
props:
  color: primary
  variant: table
  defaultValue: pro
  items:
    - label: Pro
      value: pro
      description: Tailored for indie hackers, freelancers and solo founders.
    - label: Startup
      value: startup
      description: Best suited for small teams, startups and agencies.
    - label: Enterprise
      value: enterprise
      description: Ideal for larger teams and organizations.
---
::

### Size

Use the `size` prop to change the size of the RadioGroup.

::docs-pohon-preview
---
external:
  - items
ignore:
  - defaultValue
  - items
prettier: true
props:
  size: xl
  variant: list
  defaultValue: System
  items:
    - System
    - Light
    - Dark
---
::

### Orientation

Use the `orientation` prop to change the orientation of the RadioGroup. Defaults to `vertical`.

::docs-pohon-preview
---
external:
  - items
ignore:
  - defaultValue
  - items
prettier: true
props:
  orientation: horizontal
  variant: list
  defaultValue: System
  items:
    - System
    - Light
    - Dark
---
::

### Indicator

Use the `indicator` prop to change the position or hide the indicator. Defaults to `start`.

::docs-pohon-preview
---
external:
  - items
ignore:
  - defaultValue
  - items
prettier: true
props:
  indicator: end
  variant: card
  defaultValue: System
  items:
    - System
    - Light
    - Dark
---
::

### Disabled

Use the `disabled` prop to disable the RadioGroup.

::docs-pohon-preview
---
external:
  - items
ignore:
  - defaultValue
  - items
prettier: true
props:
  disabled: true
  defaultValue: System
  items:
    - System
    - Light
    - Dark
---
::

## API

### Props

::docs-pohon-props
::

### Slots

::docs-pohon-slots
::

### Emits

::docs-pohon-emits
::

## Theme

::docs-pohon-theme
::

## Akar

::docs-akar-to-pohon
---
mode: pohon
to: https://akar.vinicunca.dev/docs/akar/components/radio-group
---
::

## Changelog

::docs-component-changelog
::


# Select

## Usage

Use the `v-model` directive to control the value of the Select or the `default-value` prop to set the initial value when you do not need to control its state.

::docs-pohon-preview
---
external:
  - items
  - modelValue
hide:
  - class
ignore:
  - modelValue
  - items
  - class
prettier: true
props:
  modelValue: Backlog
  items:
    - Backlog
    - Todo
    - In Progress
    - Done
  class: w-48
---
::

### Items

Use the `items` prop as an array of strings, numbers or booleans:

::docs-pohon-preview
---
external:
  - items
  - modelValue
ignore:
  - modelValue
  - items
  - class
prettier: true
props:
  modelValue: Backlog
  items:
    - Backlog
    - Todo
    - In Progress
    - Done
  class: w-48
---
::

You can also pass an array of objects with the following properties:

- `label?: string`
- [`value?: string`](https://akar.vinicunca.dev/#value-key)
- [`type?: "label" | "separator" | "item"`](https://akar.vinicunca.dev/#with-items-type)
- [`icon?: string`](https://akar.vinicunca.dev/#with-icons-in-items)
- [`avatar?: AvatarProps`](https://akar.vinicunca.dev/#with-avatar-in-items)
- [`chip?: ChipProps`](https://akar.vinicunca.dev/#with-chip-in-items)
- `disabled?: boolean`
- `class?: any`
- `pohon?: { label?: ClassNameValue, separator?: ClassNameValue, item?: ClassNameValue, itemLeadingIcon?: ClassNameValue, itemLeadingAvatarSize?: ClassNameValue, itemLeadingAvatar?: ClassNameValue, itemLeadingChipSize?: ClassNameValue, itemLeadingChip?: ClassNameValue, itemLabel?: ClassNameValue, itemTrailing?: ClassNameValue, itemTrailingIcon?: ClassNameValue }`

::docs-pohon-preview
---
external:
  - items
  - modelValue
externalTypes:
  - SelectItem[]
ignore:
  - modelValue
  - items
  - class
props:
  modelValue: backlog
  items:
    - label: Backlog
      value: backlog
    - label: Todo
      value: todo
    - label: In Progress
      value: in_progress
    - label: Done
      value: done
  class: w-48
---
::

::caution
When using objects, you need to reference the `value` property of the object in the `v-model` directive or the `default-value` prop.
::

You can also pass an array of arrays to the `items` prop to display separated groups of items.

::docs-pohon-preview
---
external:
  - items
  - modelValue
ignore:
  - modelValue
  - items
  - class
prettier: true
props:
  modelValue: Apple
  items:
    - - Apple
      - Banana
      - Blueberry
      - Grapes
      - Pineapple
    - - Aubergine
      - Broccoli
      - Carrot
      - Courgette
      - Leek
  class: w-48
---
::

### Value Key

You can change the property that is used to set the value by using the `value-key` prop. Defaults to `value`.

::docs-pohon-preview
---
external:
  - items
  - modelValue
externalTypes:
  - SelectItem[]
ignore:
  - modelValue
  - valueKey
  - items
  - class
props:
  modelValue: backlog
  valueKey: id
  items:
    - label: Backlog
      id: backlog
    - label: Todo
      id: todo
    - label: In Progress
      id: in_progress
    - label: Done
      id: done
  class: w-48
---
::

### Multiple

Use the `multiple` prop to allow multiple selections, the selected items will be separated by a comma in the trigger.

::docs-pohon-preview
---
external:
  - items
  - modelValue
ignore:
  - modelValue
  - items
  - multiple
  - class
prettier: true
props:
  modelValue:
    - Backlog
    - Todo
  multiple: true
  items:
    - Backlog
    - Todo
    - In Progress
    - Done
  class: w-48
---
::

::caution
Ensure to pass an array to the `default-value` prop or the `v-model` directive.
::

### Placeholder

Use the `placeholder` prop to set a placeholder text.

::docs-pohon-preview
---
external:
  - items
ignore:
  - items
  - class
prettier: true
props:
  placeholder: Select status
  items:
    - Backlog
    - Todo
    - In Progress
    - Done
  class: w-48
---
::

### Content

Use the `content` prop to control how the Select content is rendered, like its `align` or `side` for example.

::docs-pohon-preview
---
external:
  - items
  - modelValue
ignore:
  - items
  - modelValue
  - class
items:
  content:
    align:
      - start
      - center
      - end
    side:
      - right
      - left
      - top
      - bottom
prettier: true
props:
  modelValue: Backlog
  content:
    align: center
    side: bottom
    sideOffset: 8
  items:
    - Backlog
    - Todo
    - In Progress
    - Done
  class: w-48
---
::

### Arrow

Use the `arrow` prop to display an arrow on the Select.

::docs-pohon-preview
---
external:
  - items
  - modelValue
ignore:
  - items
  - modelValue
  - class
  - arrow
prettier: true
props:
  modelValue: Backlog
  arrow: true
  items:
    - Backlog
    - Todo
    - In Progress
    - Done
  class: w-48
---
::

### Color

Use the `color` prop to change the ring color when the Select is focused.

::docs-pohon-preview
---
external:
  - items
  - modelValue
ignore:
  - items
  - modelValue
  - class
prettier: true
props:
  modelValue: Backlog
  color: neutral
  highlight: true
  items:
    - Backlog
    - Todo
    - In Progress
    - Done
  class: w-48
---
::

::note
The `highlight` prop is used here to show the focus state. It's used internally when a validation error occurs.
::

### Variant

Use the `variant` prop to change the variant of the Select.

::docs-pohon-preview
---
external:
  - items
  - modelValue
ignore:
  - items
  - modelValue
  - class
prettier: true
props:
  modelValue: Backlog
  color: neutral
  variant: subtle
  highlight: false
  items:
    - Backlog
    - Todo
    - In Progress
    - Done
  class: w-48
---
::

### Size

Use the `size` prop to change the size of the Select.

::docs-pohon-preview
---
external:
  - items
  - modelValue
ignore:
  - items
  - modelValue
  - class
prettier: true
props:
  modelValue: Backlog
  size: xl
  items:
    - Backlog
    - Todo
    - In Progress
    - Done
  class: w-48
---
::

### Icon

Use the `icon` prop to show an [Icon](https://akar.vinicunca.dev/docs/pohon/components/icon) inside the Select.

::docs-pohon-preview
---
external:
  - items
  - modelValue
ignore:
  - items
  - modelValue
  - class
prettier: true
props:
  modelValue: Backlog
  icon: i-lucide:search
  size: md
  items:
    - Backlog
    - Todo
    - In Progress
    - Done
  class: w-48
---
::

### Trailing Icon

Use the `trailing-icon` prop to customize the trailing [Icon](https://akar.vinicunca.dev/docs/pohon/components/icon). Defaults to `i-lucide:chevron-down`.

::docs-pohon-preview
---
external:
  - items
  - modelValue
ignore:
  - items
  - modelValue
  - class
prettier: true
props:
  modelValue: Backlog
  trailingIcon: i-lucide:arrow-down
  size: md
  items:
    - Backlog
    - Todo
    - In Progress
    - Done
  class: w-48
---
::

::docs-framework-only
#nuxt
  :::tip
  ---
  to: https://akar.vinicunca.dev/docs/pohon/getting-started/integrations/icons/nuxt#theme
  ---
  You can customize this icon globally in your `app.config.ts` under `pohon.icons.chevronDown` key.
  :::

#vue
  :::tip
  ---
  to: https://akar.vinicunca.dev/docs/pohon/getting-started/integrations/icons/vue#theme
  ---
  You can customize this icon globally in your `vite.config.ts` under `pohon.icons.chevronDown` key.
  :::
::

### Selected Icon

Use the `selected-icon` prop to customize the icon when an item is selected. Defaults to `i-lucide:check`.

::docs-pohon-preview
---
external:
  - items
  - modelValue
ignore:
  - items
  - modelValue
  - class
prettier: true
props:
  modelValue: Backlog
  selectedIcon: i-lucide:flame
  size: md
  items:
    - Backlog
    - Todo
    - In Progress
    - Done
  class: w-48
---
::

::docs-framework-only
#nuxt
  :::tip
  ---
  to: https://akar.vinicunca.dev/docs/pohon/getting-started/integrations/icons/nuxt#theme
  ---
  You can customize this icon globally in your `app.config.ts` under `pohon.icons.check` key.
  :::

#vue
  :::tip
  ---
  to: https://akar.vinicunca.dev/docs/pohon/getting-started/integrations/icons/vue#theme
  ---
  You can customize this icon globally in your `vite.config.ts` under `pohon.icons.check` key.
  :::
::

### Avatar

Use the `avatar` prop to show an [Avatar](https://akar.vinicunca.dev/docs/pohon/components/avatar) inside the Select.

::docs-pohon-preview
---
external:
  - items
  - modelValue
ignore:
  - items
  - modelValue
  - class
prettier: true
props:
  modelValue: Nuxt
  avatar:
    src: https://github.com/nuxt.png
  items:
    - Nuxt
    - NuxtHub
    - NuxtLabs
    - Nuxt Modules
    - Nuxt Community
  class: w-48
---
::

### Loading

Use the `loading` prop to show a loading icon on the Select.

::docs-pohon-preview
---
external:
  - items
  - modelValue
ignore:
  - items
  - modelValue
  - class
prettier: true
props:
  modelValue: Backlog
  loading: true
  trailing: false
  items:
    - Backlog
    - Todo
    - In Progress
    - Done
  class: w-48
---
::

### Loading Icon

Use the `loading-icon` prop to customize the loading icon. Defaults to `i-lucide:loader-circle`.

::docs-pohon-preview
---
external:
  - items
  - modelValue
ignore:
  - items
  - modelValue
  - class
prettier: true
props:
  modelValue: Backlog
  loading: true
  loadingIcon: i-lucide:loader
  items:
    - Backlog
    - Todo
    - In Progress
    - Done
  class: w-48
---
::

::docs-framework-only
#nuxt
  :::tip
  ---
  to: https://akar.vinicunca.dev/docs/pohon/getting-started/integrations/icons/nuxt#theme
  ---
  You can customize this icon globally in your `app.config.ts` under `pohon.icons.loading` key.
  :::

#vue
  :::tip
  ---
  to: https://akar.vinicunca.dev/docs/pohon/getting-started/integrations/icons/vue#theme
  ---
  You can customize this icon globally in your `vite.config.ts` under `pohon.icons.loading` key.
  :::
::

### Disabled

Use the `disabled` prop to disable the Select.

::docs-pohon-preview
---
external:
  - items
ignore:
  - items
  - placeholder
  - class
prettier: true
props:
  disabled: true
  placeholder: Select status
  items:
    - Backlog
    - Todo
    - In Progress
    - Done
  class: w-48
---
::

## Examples

### With items type

You can use the `type` property with `separator` to display a separator between items or `label` to display a label.

::docs-pohon-preview
---
collapse: true
external:
  - items
  - modelValue
externalTypes:
  - SelectItem[]
ignore:
  - modelValue
  - items
  - class
props:
  modelValue: Apple
  items:
    - type: label
      label: Fruits
    - Apple
    - Banana
    - Blueberry
    - Grapes
    - Pineapple
    - type: separator
    - type: label
      label: Vegetables
    - Aubergine
    - Broccoli
    - Carrot
    - Courgette
    - Leek
  class: w-48
---
::

### With icon in items

You can use the `icon` property to display an [Icon](https://akar.vinicunca.dev/docs/pohon/components/icon) inside the items.

::docs-component-example{collapse name="select-items-icon-example"}
::

::note
In this example, the icon is computed from the `value` property of the selected item.
::

::tip
You can also use the `#leading` slot to display the selected icon.
::

### With avatar in items

You can use the `avatar` property to display an [Avatar](https://akar.vinicunca.dev/docs/pohon/components/avatar) inside the items.

::docs-component-example{collapse name="select-items-avatar-example"}
::

::note
In this example, the avatar is computed from the `value` property of the selected item.
::

::tip
You can also use the `#leading` slot to display the selected avatar.
::

### With chip in items

You can use the `chip` property to display a [Chip](https://akar.vinicunca.dev/docs/pohon/components/chip) inside the items.

::docs-component-example{collapse name="select-items-chip-example"}
::

::note
In this example, the `#leading` slot is used to display the selected chip.
::

### Control open state

You can control the open state by using the `default-open` prop or the `v-model:open` directive.

::docs-component-example{name="select-open-example"}
::

::note
In this example, leveraging [`defineShortcuts`](https://akar.vinicunca.dev/docs/pohon/composables/define-shortcuts), you can toggle the Select by pressing ``.
::

### With rotating icon

Here is an example with a rotating icon that indicates the open state of the Select.

::docs-component-example{name="select-icon-example"}
::

### With fetched items

You can fetch items from an API and use them in the Select.

::docs-component-example{collapse name="select-fetch-example"}
::

### With full content width

You can expand the content to the full width of its items by adding the `min-w-fit` class on the `pohon.content` slot.

::docs-component-example{collapse name="select-content-width-example"}
::

::tip
You can also change the content width globally in your `app.config.ts`:

```text
export default defineAppConfig({
  pohon: {
    select: {
      slots: {
        content: 'min-w-fit'
      }
    }
  }
})
```
::

## API

### Props

::docs-pohon-props
::

::callout
---
icon: i-simple-icons:mdnwebdocs
target: _blank
to: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attributes
---
This component also supports all native `<button>` HTML attributes.
::

### Slots

::docs-pohon-slots
::

### Emits

::docs-pohon-emits
::

### Expose

When accessing the component via a template ref, you can use the following:

| Name         | Type                            |
| ------------ | ------------------------------- |
| `triggerRef` | `Ref<HTMLButtonElement | null>` |

## Theme

::docs-pohon-theme
::

## Akar

::docs-akar-to-pohon
---
mode: pohon
to: https://akar.vinicunca.dev/docs/akar/components/select
---
::

## Changelog

::docs-component-changelog
::


# SelectMenu

## Usage

Use the `v-model` directive to control the value of the SelectMenu or the `default-value` prop to set the initial value when you do not need to control its state.

::docs-pohon-preview
---
external:
  - items
  - modelValue
hide:
  - class
ignore:
  - modelValue
  - items
  - class
prettier: true
props:
  modelValue: Backlog
  items:
    - Backlog
    - Todo
    - In Progress
    - Done
  class: w-48
---
::

::tip
Use this over a [`Select`](https://akar.vinicunca.dev/docs/pohon/components/select) to take advantage of Akar's [`Combobox`](https://akar.vinicunca.dev/docs/akar/components/combobox) component that offers search capabilities and multiple selection.
::

::note
This component is similar to the [`InputMenu`](https://akar.vinicunca.dev/docs/pohon/components/input-menu) but it's using a Select instead of an Input with the search inside the menu.
::

### Items

Use the `items` prop as an array of strings, numbers or booleans:

::docs-pohon-preview
---
external:
  - items
  - modelValue
ignore:
  - modelValue
  - items
  - class
prettier: true
props:
  modelValue: Backlog
  items:
    - Backlog
    - Todo
    - In Progress
    - Done
  class: w-48
---
::

You can also pass an array of objects with the following properties:

- `label?: string`
- [`type?: "label" | "separator" | "item"`](https://akar.vinicunca.dev/#with-items-type)
- [`icon?: string`](https://akar.vinicunca.dev/#with-icons-in-items)
- [`avatar?: AvatarProps`](https://akar.vinicunca.dev/#with-avatar-in-items)
- [`chip?: ChipProps`](https://akar.vinicunca.dev/#with-chip-in-items)
- `disabled?: boolean`
- `onSelect?: (e: Event) => void`
- `class?: any`
- `pohon?: { label?: ClassNameValue, separator?: ClassNameValue, item?: ClassNameValue, itemLeadingIcon?: ClassNameValue, itemLeadingAvatarSize?: ClassNameValue, itemLeadingAvatar?: ClassNameValue, itemLeadingChipSize?: ClassNameValue, itemLeadingChip?: ClassNameValue, itemLabel?: ClassNameValue, itemTrailing?: ClassNameValue, itemTrailingIcon?: ClassNameValue }`

::docs-pohon-preview
---
external:
  - items
  - modelValue
externalTypes:
  - SelectMenuItem[]
ignore:
  - modelValue.label
  - items
  - class
props:
  modelValue:
    label: Todo
  items:
    - label: Backlog
    - label: Todo
    - label: In Progress
    - label: Done
  class: w-48
---
::

::caution
Unlike the [`Select`](https://akar.vinicunca.dev/docs/pohon/components/select) component, the SelectMenu expects the whole object to be passed to the `v-model` directive or the `default-value` prop by default.
::

You can also pass an array of arrays to the `items` prop to display separated groups of items.

::docs-pohon-preview
---
external:
  - items
  - modelValue
ignore:
  - modelValue
  - items
  - class
prettier: true
props:
  modelValue: Apple
  items:
    - - Apple
      - Banana
      - Blueberry
      - Grapes
      - Pineapple
    - - Aubergine
      - Broccoli
      - Carrot
      - Courgette
      - Leek
  class: w-48
---
::

### Value Key

You can choose to bind a single property of the object rather than the whole object by using the `value-key` prop. Defaults to `undefined`.

::docs-pohon-preview
---
collapse: true
external:
  - items
  - modelValue
externalTypes:
  - SelectMenuItem[]
ignore:
  - modelValue
  - valueKey
  - items
  - class
props:
  modelValue: todo
  valueKey: id
  items:
    - label: Backlog
      id: backlog
    - label: Todo
      id: todo
    - label: In Progress
      id: in_progress
    - label: Done
      id: done
  class: w-48
---
::

### Multiple

Use the `multiple` prop to allow multiple selections, the selected items will be separated by a comma in the trigger.

::docs-pohon-preview
---
external:
  - items
  - modelValue
ignore:
  - modelValue
  - items
  - multiple
  - class
prettier: true
props:
  modelValue:
    - Backlog
    - Todo
  multiple: true
  items:
    - Backlog
    - Todo
    - In Progress
    - Done
  class: w-48
---
::

::caution
Ensure to pass an array to the `default-value` prop or the `v-model` directive.
::

### Placeholder

Use the `placeholder` prop to set a placeholder text.

::docs-pohon-preview
---
external:
  - items
ignore:
  - items
  - class
prettier: true
props:
  placeholder: Select status
  items:
    - Backlog
    - Todo
    - In Progress
    - Done
  class: w-48
---
::

### Search Input

Use the `search-input` prop to customize or hide the search input (with `false` value).

You can pass any property from the [Input](https://akar.vinicunca.dev/docs/pohon/components/input) component to customize it.

::docs-pohon-preview
---
external:
  - items
  - modelValue
externalTypes:
  - SelectMenuItem[]
ignore:
  - modelValue.label
  - modelValue.icon
  - items
  - class
prettier: true
props:
  modelValue:
    label: Backlog
    icon: i-lucide:circle-help
  searchInput:
    placeholder: Filter...
    icon: i-lucide:search
  items:
    - label: Backlog
      icon: i-lucide:circle-help
    - label: Todo
      icon: i-lucide:circle-plus
    - label: In Progress
      icon: i-lucide:circle-arrow-up
    - label: Done
      icon: i-lucide:circle-check
  class: w-48
---
::

::tip
You can set the `search-input` prop to `false` to hide the search input.
::

### Content

Use the `content` prop to control how the SelectMenu content is rendered, like its `align` or `side` for example.

::docs-pohon-preview
---
external:
  - items
  - modelValue
ignore:
  - items
  - modelValue
  - class
items:
  content:
    align:
      - start
      - center
      - end
    side:
      - right
      - left
      - top
      - bottom
prettier: true
props:
  modelValue: Backlog
  content:
    align: center
    side: bottom
    sideOffset: 8
  items:
    - Backlog
    - Todo
    - In Progress
    - Done
  class: w-48
---
::

### Arrow

Use the `arrow` prop to display an arrow on the SelectMenu.

::docs-pohon-preview
---
external:
  - items
  - modelValue
ignore:
  - items
  - modelValue
  - class
  - arrow
prettier: true
props:
  modelValue: Backlog
  arrow: true
  items:
    - Backlog
    - Todo
    - In Progress
    - Done
  class: w-48
---
::

### Color

Use the `color` prop to change the ring color when the SelectMenu is focused.

::docs-pohon-preview
---
external:
  - items
  - modelValue
ignore:
  - items
  - modelValue
  - class
prettier: true
props:
  modelValue: Backlog
  color: neutral
  highlight: true
  items:
    - Backlog
    - Todo
    - In Progress
    - Done
  class: w-48
---
::

::note
The `highlight` prop is used here to show the focus state. It's used internally when a validation error occurs.
::

### Variant

Use the `variant` prop to change the variant of the SelectMenu.

::docs-pohon-preview
---
external:
  - items
  - modelValue
ignore:
  - items
  - modelValue
  - class
prettier: true
props:
  modelValue: Backlog
  color: neutral
  variant: subtle
  highlight: false
  items:
    - Backlog
    - Todo
    - In Progress
    - Done
  class: w-48
---
::

### Size

Use the `size` prop to change the size of the SelectMenu.

::docs-pohon-preview
---
external:
  - items
  - modelValue
ignore:
  - items
  - modelValue
  - class
prettier: true
props:
  modelValue: Backlog
  size: xl
  items:
    - Backlog
    - Todo
    - In Progress
    - Done
  class: w-48
---
::

### Icon

Use the `icon` prop to show an [Icon](https://akar.vinicunca.dev/docs/pohon/components/icon) inside the SelectMenu.

::docs-pohon-preview
---
external:
  - items
  - modelValue
ignore:
  - items
  - modelValue
  - class
prettier: true
props:
  modelValue: Backlog
  icon: i-lucide:search
  size: md
  items:
    - Backlog
    - Todo
    - In Progress
    - Done
  class: w-48
---
::

### Trailing Icon

Use the `trailing-icon` prop to customize the trailing [Icon](https://akar.vinicunca.dev/docs/pohon/components/icon). Defaults to `i-lucide:chevron-down`.

::docs-pohon-preview
---
external:
  - items
  - modelValue
ignore:
  - items
  - modelValue
  - class
prettier: true
props:
  modelValue: Backlog
  trailingIcon: i-lucide:arrow-down
  size: md
  items:
    - Backlog
    - Todo
    - In Progress
    - Done
  class: w-48
---
::

::docs-framework-only
#nuxt
  :::tip
  ---
  to: https://akar.vinicunca.dev/docs/pohon/getting-started/integrations/icons/nuxt#theme
  ---
  You can customize this icon globally in your `app.config.ts` under `pohon.icons.chevronDown` key.
  :::

#vue
  :::tip
  ---
  to: https://akar.vinicunca.dev/docs/pohon/getting-started/integrations/icons/vue#theme
  ---
  You can customize this icon globally in your `vite.config.ts` under `pohon.icons.chevronDown` key.
  :::
::

### Selected Icon

Use the `selected-icon` prop to customize the icon when an item is selected. Defaults to `i-lucide:check`.

::docs-pohon-preview
---
external:
  - items
  - modelValue
ignore:
  - items
  - modelValue
  - class
prettier: true
props:
  modelValue: Backlog
  selectedIcon: i-lucide:flame
  size: md
  items:
    - Backlog
    - Todo
    - In Progress
    - Done
  class: w-48
---
::

::docs-framework-only
#nuxt
  :::tip
  ---
  to: https://akar.vinicunca.dev/docs/pohon/getting-started/integrations/icons/nuxt#theme
  ---
  You can customize this icon globally in your `app.config.ts` under `pohon.icons.check` key.
  :::

#vue
  :::tip
  ---
  to: https://akar.vinicunca.dev/docs/pohon/getting-started/integrations/icons/vue#theme
  ---
  You can customize this icon globally in your `vite.config.ts` under `pohon.icons.check` key.
  :::
::

### Avatar

Use the `avatar` prop to display an [Avatar](https://akar.vinicunca.dev/docs/pohon/components/avatar) inside the SelectMenu.

::docs-pohon-preview
---
external:
  - items
  - modelValue
ignore:
  - items
  - modelValue
  - class
prettier: true
props:
  modelValue: Nuxt
  avatar:
    src: https://github.com/nuxt.png
  items:
    - Nuxt
    - NuxtHub
    - NuxtLabs
    - Nuxt Modules
    - Nuxt Community
  class: w-48
---
::

### Loading

Use the `loading` prop to show a loading icon on the SelectMenu.

::docs-pohon-preview
---
external:
  - items
  - modelValue
ignore:
  - items
  - modelValue
  - class
prettier: true
props:
  modelValue: Backlog
  loading: true
  trailing: false
  items:
    - Backlog
    - Todo
    - In Progress
    - Done
  class: w-48
---
::

### Loading Icon

Use the `loading-icon` prop to customize the loading icon. Defaults to `i-lucide:loader-circle`.

::docs-pohon-preview
---
external:
  - items
  - modelValue
ignore:
  - items
  - modelValue
  - class
prettier: true
props:
  modelValue: Backlog
  loading: true
  loadingIcon: i-lucide:loader
  items:
    - Backlog
    - Todo
    - In Progress
    - Done
  class: w-48
---
::

::docs-framework-only
#nuxt
  :::tip
  ---
  to: https://akar.vinicunca.dev/docs/pohon/getting-started/integrations/icons/nuxt#theme
  ---
  You can customize this icon globally in your `app.config.ts` under `pohon.icons.loading` key.
  :::

#vue
  :::tip
  ---
  to: https://akar.vinicunca.dev/docs/pohon/getting-started/integrations/icons/vue#theme
  ---
  You can customize this icon globally in your `vite.config.ts` under `pohon.icons.loading` key.
  :::
::

### Disabled

Use the `disabled` prop to disable the SelectMenu.

::docs-pohon-preview
---
external:
  - items
ignore:
  - items
  - placeholder
  - class
prettier: true
props:
  disabled: true
  placeholder: Select status
  items:
    - Backlog
    - Todo
    - In Progress
    - Done
  class: w-48
---
::

## Examples

### With items type

You can use the `type` property with `separator` to display a separator between items or `label` to display a label.

::docs-pohon-preview
---
collapse: true
external:
  - items
  - modelValue
externalTypes:
  - SelectMenuItem[]
ignore:
  - modelValue
  - items
  - class
props:
  modelValue: Apple
  items:
    - type: label
      label: Fruits
    - Apple
    - Banana
    - Blueberry
    - Grapes
    - Pineapple
    - type: separator
    - type: label
      label: Vegetables
    - Aubergine
    - Broccoli
    - Carrot
    - Courgette
    - Leek
  class: w-48
---
::

### With icon in items

You can use the `icon` property to display an [Icon](https://akar.vinicunca.dev/docs/pohon/components/icon) inside the items.

::docs-component-example{collapse name="select-menu-items-icon-example"}
::

::tip
You can also use the `#leading` slot to display the selected icon.
::

### With avatar in items

You can use the `avatar` property to display an [Avatar](https://akar.vinicunca.dev/docs/pohon/components/avatar) inside the items.

::docs-component-example{collapse name="select-menu-items-avatar-example"}
::

::tip
You can also use the `#leading` slot to display the selected avatar.
::

### With chip in items

You can use the `chip` property to display a [Chip](https://akar.vinicunca.dev/docs/pohon/components/chip) inside the items.

::docs-component-example{collapse name="select-menu-items-chip-example"}
::

::note
In this example, the `#leading` slot is used to display the selected chip.
::

### Control open state

You can control the open state by using the `default-open` prop or the `v-model:open` directive.

::docs-component-example{name="select-menu-open-example"}
::

::note
In this example, leveraging [`defineShortcuts`](https://akar.vinicunca.dev/docs/pohon/composables/define-shortcuts), you can toggle the SelectMenu by pressing ``.
::

### Control search term

Use the `v-model:search-term` directive to control the search term.

::docs-component-example{name="select-menu-search-term-example"}
::

### With rotating icon

Here is an example with a rotating icon that indicates the open state of the SelectMenu.

::docs-component-example{name="select-menu-icon-example"}
::

### With create item

Use the `create-item` prop to enable users to add custom values that aren't in the predefined options.

::docs-component-example{collapse name="select-menu-create-item-example"}
::

::note
The create option shows when no match is found by default. Set it to `always` to show it even when similar values exist.
::

::tip{to="https://akar.vinicunca.dev/#emits"}
Use the `@create` event to handle the creation of the item. You will receive the event and the item as arguments.
::

### With fetched items

You can fetch items from an API and use them in the SelectMenu.

::docs-component-example{collapse name="select-menu-fetch-example"}
::

### With ignore filter

Set the `ignore-filter` prop to `true` to disable the internal search and use your own search logic.

::docs-component-example{collapse name="select-menu-ignore-filter-example"}
::

::note
This example uses [`refDebounced`](https://vueuse.org/shared/refDebounced/#refdebounced){rel="nofollow"} to debounce the API calls.
::

### With filter fields

Use the `filter-fields` prop with an array of fields to filter on. Defaults to `[labelKey]`.

::docs-component-example{collapse name="select-menu-filter-fields-example"}
::

### With virtualization

Use the `virtualize` prop to enable virtualization for large lists as a boolean or an object with options like `{ estimateSize: 32, overscan: 12 }`.
When enabled, all groups are flattened into a single list due to a limitation of Akar.

::docs-component-example{prettier name="select-menu-virtualize-example"}
::

### With full content width

You can expand the content to the full width of its items by adding the `min-w-fit` class on the `pohon.content` slot.

::docs-component-example{collapse name="select-menu-content-width-example"}
::

::tip
You can also change the content width globally in your `app.config.ts`:

```text
export default defineAppConfig({
  pohon: {
    selectMenu: {
      slots: {
        content: 'min-w-fit'
      }
    }
  }
})
```
::

### As a CountryPicker

This example demonstrates using the SelectMenu as a country picker with lazy loading - countries are only fetched when the menu is opened.

::docs-component-example{collapse name="select-menu-countries-example"}
::

## API

### Props

::docs-pohon-props
::

::callout
---
icon: i-simple-icons:mdnwebdocs
target: _blank
to: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attributes
---
This component also supports all native `<button>` HTML attributes.
::

### Slots

::docs-pohon-slots
::

### Emits

::docs-pohon-emits
::

### Expose

When accessing the component via a template ref, you can use the following:

| Name         | Type                            |
| ------------ | ------------------------------- |
| `triggerRef` | `Ref<HTMLButtonElement | null>` |

## Theme

::docs-pohon-theme
::

## Changelog

::docs-component-changelog
::


# Separator

## Usage

Use the Separator component as-is to separate content.

::docs-pohon-preview{.p-8}
::

### Orientation

Use the `orientation` prop to change the orientation of the Separator. Defaults to `horizontal`.

::docs-pohon-preview
---
ignore:
  - class
props:
  orientation: vertical
  class: akar:h-48
class: p-8
---
::

### Label

Use the `label` prop to display a label in the middle of the Separator.

::docs-pohon-preview{.p-8 :props='{"label":"Hello World"}'}
::

### Icon

Use the `icon` prop to display an icon in the middle of the Separator.

::docs-pohon-preview{.p-8 :props='{"icon":"i-simple-icons:nuxtdotjs"}'}
::

### Avatar

Use the `avatar` prop to display an avatar in the middle of the Separator.

::docs-pohon-preview
---
prettier: true
props:
  avatar:
    src: https://github.com/nuxt.png
class: p-8
---
::

### Color

Use the `color` prop to change the color of the Separator. Defaults to `neutral`.

::docs-pohon-preview{.p-8 :props='{"color":"primary","type":"solid"}'}
::

### Type

Use the `type` prop to change the type of the Separator. Defaults to `solid`.

::docs-pohon-preview{.p-8 :props='{"type":"dashed"}'}
::

### Size

Use the `size` prop to change the size of the Separator. Defaults to `xs`.

::docs-pohon-preview{.p-8 :props='{"size":"lg"}'}
::

## API

### Props

::docs-pohon-props
::

### Slots

::docs-pohon-slots
::

## Theme

::docs-pohon-theme
::

## Akar

::docs-akar-to-pohon
---
mode: pohon
to: https://akar.vinicunca.dev/docs/akar/components/separator
---
::

## Changelog

::docs-component-changelog
::


# Skeleton

## Usage

Use the Skeleton component as-is to display a placeholder.

::docs-component-example{name="skeleton-example"}
::

## API

### Props

::docs-pohon-props
::

### Slots

::docs-pohon-slots
::

## Theme

::docs-pohon-theme
::

## Changelog

::docs-component-changelog
::


# Slideover

## Usage

Use a [Button](https://akar.vinicunca.dev/docs/pohon/components/button) or any other component in the default slot of the Slideover.

Then, use the `#content` slot to add the content displayed when the Slideover is open.

::docs-pohon-preview
---
prettier: true
slots:
  default: |
    
    <PButton label="Open" color="neutral" variant="subtle" />
  content: |
    
    <CorePlaceholder class="h-full m-4" />
---
  :::p-button{color="neutral" label="Open" variant="subtle"}
  :::

#content
  :::core-placeholder{.h-full.m-4}
  :::
::

You can also use the `#header`, `#body` and `#footer` slots to customize the Slideover's content.

### Title

Use the `title` prop to set the title of the Slideover's header.

::docs-pohon-preview
---
prettier: true
props:
  title: Slideover with title
slots:
  default: |
    
    <PButton label="Open" color="neutral" variant="subtle" />
  body: |
    
    <CorePlaceholder class="h-full" />
---
  :::p-button{color="neutral" label="Open" variant="subtle"}
  :::

#body
  :::core-placeholder{.h-full}
  :::
::

### Description

Use the `description` prop to set the description of the Slideover's header.

::docs-pohon-preview
---
ignore:
  - title
prettier: true
props:
  title: Slideover with description
  description: Lorem ipsum dolor sit amet, consectetur adipiscing elit.
slots:
  default: |
    
    <PButton label="Open" color="neutral" variant="subtle" />
  body: |
    
    <CorePlaceholder class="h-full" />
---
  :::p-button{color="neutral" label="Open" variant="subtle"}
  :::

#body
  :::core-placeholder{.h-full}
  :::
::

### Close

Use the `close` prop to customize or hide the close button (with `false` value) displayed in the Slideover's header.

You can pass any property from the [Button](https://akar.vinicunca.dev/docs/pohon/components/button) component to customize it.

::docs-pohon-preview
---
ignore:
  - title
  - close.color
  - close.variant
prettier: true
props:
  title: Slideover with close button
  close:
    color: primary
    variant: outline
    class: akar:rounded-full
slots:
  default: |
    
    <PButton label="Open" color="neutral" variant="subtle" />
  body: |
    
    <CorePlaceholder class="h-full" />
---
  :::p-button{color="neutral" label="Open" variant="subtle"}
  :::

#body
  :::core-placeholder{.h-full}
  :::
::

::note
The close button is not displayed if the `#content` slot is used as it's a part of the header.
::

### Close Icon

Use the `close-icon` prop to customize the close button [Icon](https://akar.vinicunca.dev/docs/pohon/components/icon). Defaults to `i-lucide:x`.

::docs-pohon-preview
---
ignore:
  - title
prettier: true
props:
  title: Slideover with close button
  closeIcon: i-lucide:arrow-right
slots:
  default: |
    
    <PButton label="Open" color="neutral" variant="subtle" />
  body: |
    
    <CorePlaceholder class="h-full" />
---
  :::p-button{color="neutral" label="Open" variant="subtle"}
  :::

#body
  :::core-placeholder{.h-full}
  :::
::

::docs-framework-only
#nuxt
  :::tip
  ---
  to: https://akar.vinicunca.dev/docs/pohon/getting-started/integrations/icons/nuxt#theme
  ---
  You can customize this icon globally in your `app.config.ts` under `pohon.icons.close` key.
  :::

#vue
  :::tip
  ---
  to: https://akar.vinicunca.dev/docs/pohon/getting-started/integrations/icons/vue#theme
  ---
  You can customize this icon globally in your `vite.config.ts` under `pohon.icons.close` key.
  :::
::

### Side

Use the `side` prop to set the side of the screen where the Slideover will slide in from. Defaults to `right`.

::docs-pohon-preview
---
ignore:
  - title
prettier: true
props:
  side: left
  title: Slideover with side
slots:
  default: |
    
    <PButton label="Open" color="neutral" variant="subtle" />
  body: |
    
    <CorePlaceholder class="h-full min-h-48" />
---
  :::p-button{color="neutral" label="Open" variant="subtle"}
  :::

#body
  :::core-placeholder{.h-full.min-h-48}
  :::
::

### Overlay

Use the `overlay` prop to control whether the Slideover has an overlay or not. Defaults to `true`.

::docs-pohon-preview
---
ignore:
  - title
prettier: true
props:
  overlay: false
  title: Slideover without overlay
slots:
  default: |
    
    <PButton label="Open" color="neutral" variant="subtle" />
  body: |
    
    <CorePlaceholder class="h-full" />
---
  :::p-button{color="neutral" label="Open" variant="subtle"}
  :::

#body
  :::core-placeholder{.h-full}
  :::
::

### Modal

Use the `modal` prop to control whether the Slideover blocks interaction with outside content. Defaults to `true`.

::note
When `modal` is set to `false`, the overlay is automatically disabled and outside content becomes interactive.
::

::docs-pohon-preview
---
ignore:
  - title
prettier: true
props:
  modal: false
  title: Slideover interactive
slots:
  default: |
    
    <PButton label="Open" color="neutral" variant="subtle" />
  body: |
    
    <CorePlaceholder class="h-full" />
---
  :::p-button{color="neutral" label="Open" variant="subtle"}
  :::

#body
  :::core-placeholder{.h-full}
  :::
::

### Dismissible

Use the `dismissible` prop to control whether the Slideover is dismissible when clicking outside of it or pressing escape. Defaults to `true`.

::note
A `close:prevent` event will be emitted when the user tries to close it.
::

::tip
You can combine `modal: false` with `dismissible: false` to make the Slideover's background interactive without closing it.
::

::docs-pohon-preview
---
ignore:
  - title
prettier: true
props:
  dismissible: false
  modal: true
  title: Slideover non-dismissible
slots:
  default: |
    
    <PButton label="Open" color="neutral" variant="subtle" />
  body: |
    
    <CorePlaceholder class="h-full" />
---
  :::p-button{color="neutral" label="Open" variant="subtle"}
  :::

#body
  :::core-placeholder{.h-full}
  :::
::

## Examples

### Control open state

You can control the open state by using the `default-open` prop or the `v-model:open` directive.

::docs-component-example{name="slideover-open-example"}
::

::note
In this example, leveraging [`defineShortcuts`](https://akar.vinicunca.dev/docs/pohon/composables/define-shortcuts), you can toggle the Slideover by pressing ``.
::

::tip
This allows you to move the trigger outside of the Slideover or remove it entirely.
::

### Programmatic usage

You can use the [`useOverlay`](https://akar.vinicunca.dev/docs/pohon/composables/use-overlay) composable to open a Slideover programmatically.

::warning
Make sure to wrap your app with the [`App`](https://akar.vinicunca.dev/docs/pohon/components/app) component which uses the [`OverlayProvider`](https://github.com/vinicunca/akar/blob/main/packages/pohon/src/runtime/components/overlay-provider.vue){rel="nofollow"} component.
::

First, create a slideover component that will be opened programmatically:

::docs-component-example{prettier :preview='false' name="slideover-example"}
::

::note
We are emitting a `close` event when the slideover is closed or dismissed here. You can emit any data through the `close` event, however, the event must be emitted in order to capture the return value.
::

Then, use it in your app:

::docs-component-example{name="slideover-programmatic-example"}
::

::tip
You can close the slideover within the slideover component by emitting `emit('close')`.
::

### Nested slideovers

You can nest slideovers within each other.

::docs-component-example{name="slideover-nested-example"}
::

### With footer slot

Use the `#footer` slot to add content after the Slideover's body.

::docs-component-example{name="slideover-footer-slot-example"}
::

## API

### Props

::docs-pohon-props
::

### Slots

::docs-pohon-slots
::

### Emits

::docs-pohon-emits
::

## Theme

::docs-pohon-theme
::

## Changelog

::docs-component-changelog
::


# Slider

## Usage

Use the `v-model` directive to control the value of the Slider.

::docs-pohon-preview{:external='["modelValue"]' :props='{"modelValue":50}'}
::

Use the `default-value` prop to set the initial value when you do not need to control its state.

::docs-pohon-preview{:ignore='["defaultValue"]' :props='{"defaultValue":50}'}
::

### Min / Max

Use the `min` and `max` props to set the minimum and maximum values of the Slider. Defaults to `0` and `100`.

::docs-pohon-preview
---
ignore:
  - defaultValue
props:
  min: 0
  max: 50
  defaultValue: 50
---
::

### Step

Use the `step` prop to set the increment value of the Slider. Defaults to `1`.

::docs-pohon-preview
---
ignore:
  - defaultValue
props:
  step: 10
  defaultValue: 50
---
::

### Multiple

Use the `v-model` directive or the `default-value` prop with an array of values to create a range Slider.

::docs-pohon-preview
---
external:
  - modelValue
ignore:
  - modelValue
props:
  modelValue:
    - 25
    - 75
---
::

Use the `min-steps-between-thumbs` prop to limit the minimum distance between the thumbs.

::docs-pohon-preview
---
external:
  - modelValue
ignore:
  - modelValue
props:
  modelValue:
    - 25
    - 50
    - 75
  minStepsBetweenThumbs: 10
---
::

### Orientation

Use the `orientation` prop to change the orientation of the Slider. Defaults to `horizontal`.

::docs-pohon-preview
---
ignore:
  - defaultValue
  - class
props:
  orientation: vertical
  defaultValue: 50
  class: akar:h-48
---
::

### Color

Use the `color` prop to change the color of the Slider.

::docs-pohon-preview
---
ignore:
  - defaultValue
props:
  color: neutral
  defaultValue: 50
---
::

### Size

Use the `size` prop to change the size of the Slider.

::docs-pohon-preview
---
ignore:
  - defaultValue
props:
  size: xl
  defaultValue: 50
---
::

### Tooltip

Use the `tooltip` prop to display a [Tooltip](https://akar.vinicunca.dev/docs/pohon/components/tooltip) around the Slider thumbs with the current value. You can set it to `true` for default behavior or pass an object to customize it with any property from the [Tooltip](https://akar.vinicunca.dev/docs/pohon/components/tooltip#props) component.

::docs-pohon-preview
---
ignore:
  - defaultValue
  - tooltip
props:
  defaultValue: 50
  tooltip: true
---
::

### Disabled

Use the `disabled` prop to disable the Slider.

::docs-pohon-preview
---
ignore:
  - defaultValue
props:
  disabled: true
  defaultValue: 50
---
::

### Inverted

Use the `inverted` prop to visually invert the Slider.

::docs-pohon-preview
---
ignore:
  - defaultValue
props:
  inverted: true
  defaultValue: 25
---
::

## API

### Props

::docs-pohon-props
::

### Emits

::docs-pohon-emits
::

## Theme

::docs-pohon-theme
::

## Akar

::docs-akar-to-pohon
---
mode: pohon
to: https://akar.vinicunca.dev/docs/akar/components/slider
---
::

## Changelog

::docs-component-changelog
::


# Stepper

## Usage

Use the Stepper component to display a list of items in a stepper.

::docs-pohon-preview
---
collapse: true
external:
  - items
hide:
  - class
ignore:
  - items
  - class
props:
  items:
    - title: Address
      description: Add your address here
      icon: i-lucide:house
    - title: Shipping
      description: Set your preferred shipping method
      icon: i-lucide:truck
    - title: Checkout
      description: Confirm your order
  class: w-full
---
::

### Items

Use the `items` prop as an array of objects with the following properties:

- `title?: string`
- `description?: AvatarProps`
- `content?: string`
- `icon?: string`
- `value?: string | number`
- `disabled?: boolean`
- [`slot?: string`](https://akar.vinicunca.dev/#with-custom-slot)
- `class?: any`
- `pohon?: { item?: ClassNameValue, container?: ClassNameValue, trigger?: ClassNameValue, indicator?: ClassNameValue, icon?: ClassNameValue, separator?: ClassNameValue, wrapper?: ClassNameValue, title?: ClassNameValue, description?: ClassNameValue }`

::docs-pohon-preview
---
external:
  - items
externalTypes:
  - StepperItem[]
ignore:
  - items
  - class
props:
  items:
    - title: Address
      description: Add your address here
      icon: i-lucide:house
    - title: Shipping
      description: Set your preferred shipping method
      icon: i-lucide:truck
    - title: Checkout
      description: Confirm your order
  class: w-full
---
::

::note
Click on the items to navigate through the steps.
::

### Color

Use the `color` prop to change the color of the Stepper.

::docs-pohon-preview
---
external:
  - items
externalTypes:
  - StepperItem[]
ignore:
  - content
  - items
  - class
props:
  color: neutral
  items:
    - title: Address
      description: Add your address here
      icon: i-lucide:house
    - title: Shipping
      description: Set your preferred shipping method
      icon: i-lucide:truck
    - title: Checkout
      description: Confirm your order
  class: w-full
---
::

### Size

Use the `size` prop to change the size of the Stepper.

::docs-pohon-preview
---
external:
  - items
externalTypes:
  - StepperItem[]
ignore:
  - content
  - items
  - class
props:
  size: xl
  items:
    - title: Address
      description: Add your address here
      icon: i-lucide:house
    - title: Shipping
      description: Set your preferred shipping method
      icon: i-lucide:truck
    - title: Checkout
      description: Confirm your order
  class: w-full
---
::

### Orientation

Use the `orientation` prop to change the orientation of the Stepper. Defaults to `horizontal`.

::docs-pohon-preview
---
external:
  - items
externalTypes:
  - StepperItem[]
ignore:
  - content
  - items
  - class
props:
  orientation: vertical
  items:
    - title: Address
      description: Add your address here
      icon: i-lucide:house
    - title: Shipping
      description: Set your preferred shipping method
      icon: i-lucide:truck
    - title: Checkout
      description: Confirm your order
  class: w-full
---
::

### Disabled

Use the `disabled` prop to disable navigation through the steps.

::docs-pohon-preview
---
external:
  - items
externalTypes:
  - StepperItem[]
ignore:
  - content
  - items
  - class
props:
  disabled: true
  items:
    - title: Address
      description: Add your address here
      icon: i-lucide:house
    - title: Shipping
      description: Set your preferred shipping method
      icon: i-lucide:truck
    - title: Checkout
      description: Confirm your order
---
::

::note{to="https://akar.vinicunca.dev/#with-controls"}
This can be useful when you want to force navigation with controls.
::

## Examples

### With controls

You can add additional controls for the stepper using buttons.

::docs-component-example{name="stepper-with-controls-example"}
::

### Control active item

You can control the active item by using the `default-value` prop or the `v-model` directive with the `value` of the item. If no `value` is provided, it defaults to the index **as a string**.

::docs-component-example{name="stepper-model-value-example"}
::

### With content slot

Use the `#content` slot to customize the content of each item.

::docs-component-example{name="stepper-content-slot-example"}
::

### With custom slot

Use the `slot` property to customize a specific item.

You will have access to the following slots:

- `#{{ item.slot }}`

::docs-component-example{name="stepper-custom-slot-example"}
::

## API

### Props

::docs-pohon-props
::

### Slots

::docs-pohon-slots
::

### Emits

::docs-pohon-emits
::

### Expose

You can access the typed component instance using [`useTemplateRef`](https://vuejs.org/api/composition-api-helpers.html#usetemplateref){rel="nofollow"}.

```vue
<script setup lang="ts">
const stepper = useTemplateRef('stepper');
</script>

<template>
  <PStepper ref="stepper" />
</template>
```

This will give you access to the following:

| Name      | Type           |
| --------- | -------------- |
| `next`    | `() => void`   |
| `prev`    | `() => void`   |
| `hasNext` | `Ref<boolean>` |
| `hasPrev` | `Ref<boolean>` |

## Theme

::docs-pohon-theme
::

## Akar

::docs-akar-to-pohon
---
mode: pohon
to: https://akar.vinicunca.dev/docs/akar/components/slider
---
::

## Changelog

::docs-component-changelog
::


# Switch

## Usage

Use the `v-model` directive to control the checked state of the Switch.

::docs-pohon-preview
---
external:
  - modelValue
ignore:
  - modelValue
props:
  modelValue: true
---
::

Use the `default-value` prop to set the initial value when you do not need to control its state.

::docs-pohon-preview{:ignore='["defaultValue"]' :props='{"defaultValue":true}'}
::

### Label

Use the `label` prop to set the label of the Switch.

::docs-pohon-preview{:props='{"label":"Check me"}'}
::

When using the `required` prop, an asterisk is added next to the label.

::docs-pohon-preview
---
ignore:
  - label
props:
  required: true
  label: Check me
---
::

### Description

Use the `description` prop to set the description of the Switch.

::docs-pohon-preview
---
ignore:
  - label
props:
  label: Check me
  description: This is a checkbox.
---
::

### Icon

Use the `checked-icon` and `unchecked-icon` props to set the icons of the Switch when checked and unchecked.

::docs-pohon-preview
---
ignore:
  - label
  - defaultValue
prettier: true
props:
  uncheckedIcon: i-lucide:x
  checkedIcon: i-lucide:check
  defaultValue: true
  label: Check me
---
::

### Loading

Use the `loading` prop to show a loading icon on the Switch.

::docs-pohon-preview
---
ignore:
  - label
  - defaultValue
props:
  loading: true
  defaultValue: true
  label: Check me
---
::

### Loading Icon

Use the `loading-icon` prop to customize the loading icon. Defaults to `i-lucide:loader-circle`.

::docs-pohon-preview
---
ignore:
  - label
  - defaultValue
props:
  loading: true
  loadingIcon: i-lucide:loader
  defaultValue: true
  label: Check me
---
::

::docs-framework-only
#nuxt
  :::tip
  ---
  to: https://akar.vinicunca.dev/docs/pohon/getting-started/integrations/icons/nuxt#theme
  ---
  You can customize this icon globally in your `app.config.ts` under `pohon.icons.loading` key.
  :::

#vue
  :::tip
  ---
  to: https://akar.vinicunca.dev/docs/pohon/getting-started/integrations/icons/vue#theme
  ---
  You can customize this icon globally in your `vite.config.ts` under `pohon.icons.loading` key.
  :::
::

### Color

Use the `color` prop to change the color of the Switch.

::docs-pohon-preview
---
ignore:
  - label
  - defaultValue
props:
  color: neutral
  defaultValue: true
  label: Check me
---
::

### Size

Use the `size` prop to change the size of the Switch.

::docs-pohon-preview
---
ignore:
  - label
  - defaultValue
props:
  size: xl
  defaultValue: true
  label: Check me
---
::

### Disabled

Use the `disabled` prop to disable the Switch.

::docs-pohon-preview
---
ignore:
  - label
props:
  disabled: true
  label: Check me
---
::

## API

### Props

::docs-pohon-props
::

::callout
---
icon: i-simple-icons:mdnwebdocs
target: _blank
to: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attributes
---
This component also supports all native `<button>` HTML attributes.
::

### Slots

::docs-pohon-slots
::

### Emits

::docs-pohon-emits
::

## Theme

::docs-pohon-theme
::

## Akar

::docs-akar-to-pohon
---
mode: pohon
to: https://akar.vinicunca.dev/docs/akar/components/slider
---
::

## Changelog

::docs-component-changelog
::


# Table

## Usage

The Table component is built on top of [TanStack Table](https://tanstack.com/table/latest){rel="nofollow"} and is powered by the [useVueTable](https://tanstack.com/table/latest/docs/framework/vue/vue-table#usevuetable){rel="nofollow"} composable to provide a flexible and fully type-safe API. &#x2A;Some features of TanStack Table are not supported yet, we'll add more over time.*

::docs-component-example{.akar:p-0 :source='false' name="table-example"}
::

::callout
---
ariaLabel: View source code
icon: i-simple-icons:github
to: https://github.com/akar/tree/main/docs/app/components/content/examples/table/table-example.vue
---
This example demonstrates the most common use case of the `Table` component. Check out the source code on GitHub.
::

### Data

Use the `data` prop as an array of objects, the columns will be generated based on the keys of the objects.

::docs-pohon-preview
---
collapse: true
external:
  - data
ignore:
  - data
  - class
props:
  data:
    - id: "4600"
      date: 2024-03-11T15:30:00
      status: paid
      email: james.anderson@example.com
      amount: 594
    - id: "4599"
      date: 2024-03-11T10:10:00
      status: failed
      email: mia.white@example.com
      amount: 276
    - id: "4598"
      date: 2024-03-11T08:50:00
      status: refunded
      email: william.brown@example.com
      amount: 315
    - id: "4597"
      date: 2024-03-10T19:45:00
      status: paid
      email: emma.davis@example.com
      amount: 529
    - id: "4596"
      date: 2024-03-10T15:55:00
      status: paid
      email: ethan.harris@example.com
      amount: 639
  class: flex-1
class: akar:p-0
---
::

### Columns

Use the `columns` prop as an array of [ColumnDef](https://tanstack.com/table/latest/docs/api/core/column-def){rel="nofollow"} objects with properties like:

- `accessorKey`: [The key of the row object to use when extracting the value for the column.]{.text-muted}
- `header`: [The header to display for the column. If a string is passed, it can be used as a default for the column ID. If a function is passed, it will be passed a props object for the header and should return the rendered header value (the exact type depends on the adapter being used).]{.text-muted}
- `footer`: [The footer to display for the column. Works exactly like header, but is displayed under the table.]{.text-muted}
- `cell`: [The cell to display each row for the column. If a function is passed, it will be passed a props object for the cell and should return the rendered cell value (the exact type depends on the adapter being used).]{.text-muted}
- `meta`: [Extra properties for the column.]{.text-muted}

  - `class`:


    - `td`: [The classes to apply to the `td` element.]{.text-muted}
    - `th`: [The classes to apply to the `th` element.]{.text-muted}
  - `style`:


    - `td`: [The style to apply to the `td` element.]{.text-muted}
    - `th`: [The style to apply to the `th` element.]{.text-muted}

In order to render components or other HTML elements, you will need to use the Vue [`h` function](https://vuejs.org/api/render-function.html#h){rel="nofollow"} inside the `header` and `cell` props. This is different from other components that use slots but allows for more flexibility.

::tip
---
ariaLabel: Table columns with slots
to: https://akar.vinicunca.dev/#with-slots
---
You can also use slots to customize the header and data cells of the table.
::

::docs-component-example
---
collapse: true
highlights:
  - 53
  - 105
prettier: true
class: akar:p-0
name: table-columns-example
---
::

::note
When rendering components with `h`, you can either use the `resolveComponent` function or import from `#components`.
::

### Meta

Use the `meta` prop as an object ([TableMeta](https://tanstack.com/table/latest/docs/api/core/table#meta){rel="nofollow"}) to pass properties like:

- `class`:


  - `tr`: [The classes to apply to the `tr` element.]{.text-muted}
- `style`:


  - `tr`: [The style to apply to the `tr` element.]{.text-muted}

::docs-component-example
---
collapse: true
prettier: true
class: akar:p-0
name: table-custom-meta-example
---
::

### Loading

Use the `loading` prop to display a loading state, the `loading-color` prop to change its color and the `loading-animation` prop to change its animation.

::docs-pohon-preview
---
collapse: true
external:
  - data
ignore:
  - data
  - class
props:
  loading: true
  loadingColor: primary
  loadingAnimation: carousel
  data:
    - id: "4600"
      date: 2024-03-11T15:30:00
      status: paid
      email: james.anderson@example.com
      amount: 594
    - id: "4599"
      date: 2024-03-11T10:10:00
      status: failed
      email: mia.white@example.com
      amount: 276
    - id: "4598"
      date: 2024-03-11T08:50:00
      status: refunded
      email: william.brown@example.com
      amount: 315
    - id: "4597"
      date: 2024-03-10T19:45:00
      status: paid
      email: emma.davis@example.com
      amount: 529
    - id: "4596"
      date: 2024-03-10T15:55:00
      status: paid
      email: ethan.harris@example.com
      amount: 639
  class: flex-1
class: akar:p-0
---
::

### Sticky

Use the `sticky` prop to make the header or footer sticky.

::docs-pohon-preview
---
collapse: true
external:
  - data
ignore:
  - data
  - class
items:
  sticky:
    - true
    - false
props:
  sticky: true
  data:
    - id: "4600"
      date: 2024-03-11T15:30:00
      status: paid
      email: james.anderson@example.com
      amount: 594
    - id: "4599"
      date: 2024-03-11T10:10:00
      status: failed
      email: mia.white@example.com
      amount: 276
    - id: "4598"
      date: 2024-03-11T08:50:00
      status: refunded
      email: william.brown@example.com
      amount: 315
    - id: "4597"
      date: 2024-03-10T19:45:00
      status: paid
      email: emma.davis@example.com
      amount: 529
    - id: "4596"
      date: 2024-03-10T15:55:00
      status: paid
      email: ethan.harris@example.com
      amount: 639
    - id: "4595"
      date: 2024-03-10T15:55:00
      status: paid
      email: ethan.harris@example.com
      amount: 639
    - id: "4594"
      date: 2024-03-10T15:55:00
      status: paid
      email: ethan.harris@example.com
      amount: 639
  class: flex-1 max-h-[312px]
class: akar:p-0
---
::

## Examples

### With row actions

You can add a new column that renders a [DropdownMenu](https://akar.vinicunca.dev/docs/pohon/components/dropdown-menu) component inside the `cell` to render row actions.

::docs-component-example
---
collapse: true
highlights:
  - 110
  - 134
prettier: true
class: akar:p-0
name: table-row-actions-example
---
::

### With expandable rows

You can add a new column that renders a [Button](https://akar.vinicunca.dev/docs/pohon/components/button) component inside the `cell` to toggle the expandable state of a row using the TanStack Table [Expanding APIs](https://tanstack.com/table/latest/docs/api/features/expanding){rel="nofollow"}.

::caution
You need to define the `#expanded` slot to render the expanded content which will receive the row as a parameter.
::

::docs-component-example
---
collapse: true
highlights:
  - 55
  - 71
prettier: true
class: akar:p-0
name: table-row-expandable-example
---
::

::tip
You can use the `expanded` prop to control the expandable state of the rows (can be binded with `v-model`).
::

::note
You could also add this action to the [`DropdownMenu`](https://akar.vinicunca.dev/docs/pohon/components/dropdown-menu) component inside the `actions` column.
::

### With grouped rows

You can group rows based on a given column value and show/hide sub rows via some button added to the cell using the TanStack Table [Grouping APIs](https://tanstack.com/table/latest/docs/api/features/grouping){rel="nofollow"}.

#### Important parts:

- Add `grouping` prop with an array of column ids you want to group by.
- Add `grouping-options` prop. It must include `getGroupedRowModel`, you can import it from `@tanstack/vue-table` or implement your own.
- Expand rows via `row.toggleExpanded()` method on any cell of the row. Keep in mind, it also toggles `#expanded` slot.
- Use `aggregateFn` on column definition to define how to aggregate the rows.
- `aggregatedCell` renderer on column definition only works if there is no `cell` renderer.

::docs-component-example
---
collapse: true
highlights:
  - 159
  - 169
prettier: true
class: akar:p-0
name: table-grouped-rows-example
---
::

### With row selection

You can add a new column that renders a [Checkbox](https://akar.vinicunca.dev/docs/pohon/components/checkbox) component inside the `header` and `cell` to select rows using the TanStack Table [Row Selection APIs](https://tanstack.com/table/latest/docs/api/features/row-selection){rel="nofollow"}.

::docs-component-example
---
collapse: true
highlights:
  - 55
  - 72
prettier: true
class: akar:p-0
name: table-row-selection-example
---
::

::tip
You can use the `row-selection` prop to control the selection state of the rows (can be binded with `v-model`).
::

### With row select event

You can add a `@select` listener to make rows clickable with or without a checkbox column.

::note
The handler function receives the `Event` and `TableRow` instance as the first and second arguments respectively.
::

::docs-component-example
---
collapse: true
highlights:
  - 123
  - 130
prettier: true
class: akar:p-0
name: table-row-select-event-example
---
::

::tip
You can use this to navigate to a page, open a modal or even to select the row manually.
::

### With row context menu event

You can add a `@contextmenu` listener to make rows right clickable and wrap the Table in a [ContextMenu](https://akar.vinicunca.dev/docs/pohon/components/context-menu) component to display row actions for example.

::note
The handler function receives the `Event` and `TableRow` instance as the first and second arguments respectively.
::

::docs-component-example
---
collapse: true
highlights:
  - 130
  - 170
prettier: true
class: akar:p-0
name: table-row-context-menu-event-example
---
::

### With row hover event

You can add a `@hover` listener to make rows hoverable and use a [Popover](https://akar.vinicunca.dev/docs/pohon/components/popover) or a [Tooltip](https://akar.vinicunca.dev/docs/pohon/components/tooltip) component to display row details for example.

::note
The handler function receives the `Event` and `TableRow` instance as the first and second arguments respectively.
::

::docs-component-example
---
collapse: true
highlights:
  - 126
  - 149
prettier: true
class: akar:p-0
name: table-row-hover-event-example
---
::

::note
This example is similar as the Popover [with following cursor example](https://akar.vinicunca.dev/docs/pohon/components/popover#with-following-cursor) and uses a [`refDebounced`](https://vueuse.org/shared/refDebounced/#refdebounced){rel="nofollow"} to prevent the Popover from opening and closing too quickly when moving the cursor from one row to another.
::

### With column footer

You can add a `footer` property to the column definition to render a footer for the column.

::docs-component-example
---
collapse: true
highlights:
  - 94
  - 108
prettier: true
class: akar:p-0
name: table-column-footer-example
---
::

### With column sorting

You can update a column `header` to render a [Button](https://akar.vinicunca.dev/docs/pohon/components/button) component inside the `header` to toggle the sorting state using the TanStack Table [Sorting APIs](https://tanstack.com/table/latest/docs/api/features/sorting){rel="nofollow"}.

::docs-component-example
---
collapse: true
highlights:
  - 90
  - 105
prettier: true
class: akar:p-0
name: table-column-sorting-example
---
::

::tip
You can use the `sorting` prop to control the sorting state of the columns (can be binded with `v-model`).
::

You can also create a reusable component to make any column header sortable.

::docs-component-example
---
collapse: true
highlights:
  - 110
  - 161
prettier: true
class: akar:p-0
name: table-column-sorting-reusable-example
---
::

::note
In this example, we use a function to define the column header but you can also create an actual component.
::

### With column pinning

You can update a column `header` to render a [Button](https://akar.vinicunca.dev/docs/pohon/components/button) component inside the `header` to toggle the pinning state using the TanStack Table [Pinning APIs](https://tanstack.com/table/latest/docs/api/features/row-pinning){rel="nofollow"}.

::note
A pinned column will become sticky on the left or right side of the table.
::

::docs-component-example
---
collapse: true
highlights:
  - 100
  - 113
prettier: true
class: akar:p-0 overflow-clip
name: table-column-pinning-example
---
::

::tip
You can use the `column-pinning` prop to control the pinning state of the columns (can be binded with `v-model`).
::

### With column visibility

You can use a [DropdownMenu](https://akar.vinicunca.dev/docs/pohon/components/dropdown-menu) component to toggle the visibility of the columns using the TanStack Table [Column Visibility APIs](https://tanstack.com/table/latest/docs/api/features/column-visibility){rel="nofollow"}.

::docs-component-example
---
collapse: true
highlights:
  - 135
  - 142
prettier: true
class: akar:p-0
name: table-column-visibility-example
---
::

::tip
You can use the `column-visibility` prop to control the visibility state of the columns (can be binded with `v-model`).
::

### With column filters

You can use an [Input](https://akar.vinicunca.dev/docs/pohon/components/input) component to filter per column the rows using the TanStack Table [Column Filtering APIs](https://tanstack.com/table/latest/docs/api/features/column-filtering){rel="nofollow"}.

::docs-component-example
---
collapse: true
highlights:
  - 135
  - 142
prettier: true
class: akar:p-0
name: table-column-filters-example
---
::

::tip
You can use the `column-filters` prop to control the filters state of the columns (can be binded with `v-model`).
::

### With global filter

You can use an [Input](https://akar.vinicunca.dev/docs/pohon/components/input) component to filter the rows using the TanStack Table [Global Filtering APIs](https://tanstack.com/table/latest/docs/api/features/global-filtering){rel="nofollow"}.

::docs-component-example
---
collapse: true
prettier: true
class: akar:p-0
name: table-global-filter-example
---
::

::tip
You can use the `global-filter` prop to control the global filter state (can be binded with `v-model`).
::

### With pagination

You can use a [Pagination](https://akar.vinicunca.dev/docs/pohon/components/pagination) component to control the pagination state using the [Pagination APIs](https://tanstack.com/table/latest/docs/api/features/pagination){rel="nofollow"}.

There are different pagination approaches as explained in [Pagination Guide](https://tanstack.com/table/latest/docs/guide/pagination#pagination-guide){rel="nofollow"}. In this example, we use client-side pagination so we need to manually pass `getPaginationRowModel()` function.

::docs-component-example
---
collapse: true
prettier: true
class: akar:p-0
name: table-pagination-example
---
::

::tip
You can use the `pagination` prop to control the pagination state (can be binded with `v-model`).
::

### With fetched data

You can fetch data from an API and use them in the Table.

::docs-component-example{.akar:p-0 collapse prettier name="table-fetch-example"}
::

### With infinite scroll

If you use server-side pagination, you can use the [`useInfiniteScroll`](https://vueuse.org/core/useInfiniteScroll/#useinfinitescroll){rel="nofollow"} composable to load more data when scrolling.

::docs-component-example
---
collapse: true
highlights:
  - 72
  - 83
overflowHidden: true
prettier: true
class: akar:p-0
name: table-infinite-scroll-example
---
::

### With drag and drop

You can use the [`useSortable`](https://vueuse.org/integrations/useSortable/){rel="nofollow"} composable from [`@vueuse/integrations`](https://vueuse.org/integrations/README.html){rel="nofollow"} to enable drag and drop functionality on the Table. This integration wraps [Sortable.js](https://sortablejs.github.io/Sortable/){rel="nofollow"} to provide a seamless drag and drop experience.

::note
Since the table ref doesn't expose the tbody element, add a unique class to it via the `:pohon` prop to target it with `useSortable` (e.g. `:pohon="{ tbody: 'my-table-tbody' }"`).
::

::docs-component-example
---
collapse: true
highlights:
  - 76
  - 78
prettier: true
class: akar:p-0
name: table-drag-and-drop-example
---
::

### With virtualization

Use the `virtualize` prop to enable virtualization for large datasets as a boolean or an object with options like `{ estimateSize: 65, overscan: 12 }`. You can also pass other [TanStack Virtual options](https://tanstack.com/virtual/latest/docs/api/virtualizer#optional-options){rel="nofollow"} to customize the virtualization behavior.

::warning
When virtualization is enabled, the divider between rows and sticky properties are not supported.
::

::docs-component-example
---
collapse: true
prettier: true
class: akar:p-0
name: table-virtualize-example
---
::

::note
A height constraint is required on the table for virtualization to work properly (e.g., `class="h-[400px]"`).
::

### With tree data

You can use the `get-sub-rows` prop to display hierarchical (tree) data in the table.
For example, if your data objects have a `children` array, set `:get-sub-rows="row => row.children"` to enable expandable rows.

::docs-component-example
---
collapse: true
highlights:
  - 175
prettier: true
class: akar:p-0
name: table-tree-data-example
---
::

### With slots

You can use slots to customize the header and data cells of the table.

Use the `#<column>-header` slot to customize the header of a column. You will have access to the `column`, `header` and `table` properties in the slot scope.

Use the `#<column>-cell` slot to customize the cell of a column. You will have access to the `cell`, `column`, `getValue`, `renderValue`, `row`, and `table` properties in the slot scope.

::docs-component-example{.akar:p-0 collapse prettier name="table-slots-example"}
::

## API

### Props

::docs-pohon-props
::

::callout
---
icon: i-simple-icons:mdnwebdocs
target: _blank
to: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/table#attributes
---
This component also supports all native `<table>` HTML attributes.
::

### Slots

::docs-pohon-slots
::

### Expose

You can access the typed component instance using [`useTemplateRef`](https://vuejs.org/api/composition-api-helpers.html#usetemplateref){rel="nofollow"}.

```vue
<script setup lang="ts">
const table = useTemplateRef('table');
</script>

<template>
  <PTable ref="table" />
</template>
```

This will give you access to the following:

| Name       | Type                                                                                       |
| ---------- | ------------------------------------------------------------------------------------------ |
| `tableRef` | `Ref<HTMLTableElement | null>`                                                             |
| `tableApi` | [`Table`](https://tanstack.com/table/latest/docs/api/core/table#table-api){rel="nofollow"} |

## Theme

::docs-pohon-theme
::

## Changelog

::docs-component-changelog
::


# Tabs

## Usage

Use the Tabs component to display a list of items in a tabs.

::docs-component-example
---
collapse: true
prettier: true
props:
  class: w-full
name: tabs-example
---
::

### Items

Use the `items` prop as an array of objects with the following properties:

- `label?: string`
- `icon?: string`
- `avatar?: AvatarProps`
- `badge?: string | number | BadgeProps`
- `content?: string`
- `value?: string | number`
- `disabled?: boolean`
- [`slot?: string`](https://akar.vinicunca.dev/#with-custom-slot)
- `class?: any`
- `pohon?: { trigger?: ClassNameValue, leadingIcon?: ClassNameValue, leadingAvatar?: ClassNameValue, leadingAvatarSize?: ClassNameValue, label?: ClassNameValue, trailingBadge?: ClassNameValue, trailingBadgeSize?: ClassNameValue, content?: ClassNameValue }`

::docs-pohon-preview
---
external:
  - items
externalTypes:
  - PTabsItem[]
ignore:
  - items
  - class
props:
  items:
    - label: Account
      icon: i-lucide:user
      content: This is the account content.
    - label: Password
      icon: i-lucide:lock
      content: This is the password content.
  class: w-full
---
::

### Content

Set the `content` prop to `false` to turn the Tabs into a toggle-only control without displaying any content. Defaults to `true`.

::docs-pohon-preview
---
external:
  - items
externalTypes:
  - PTabsItem[]
ignore:
  - content
  - items
  - class
props:
  content: false
  items:
    - label: Account
      icon: i-lucide:user
      content: This is the account content.
    - label: Password
      icon: i-lucide:lock
      content: This is the password content.
  class: w-full
---
::

### Unmount

Use the `unmount-on-hide` prop to prevent the content from being unmounted when the Tabs is collapsed. Defaults to `true`.

::docs-pohon-preview
---
external:
  - items
externalTypes:
  - PTabsItem[]
ignore:
  - content
  - items
  - class
props:
  unmountOnHide: false
  items:
    - label: Account
      icon: i-lucide:user
      content: This is the account content.
    - label: Password
      icon: i-lucide:lock
      content: This is the password content.
  class: w-full
---
::

::note
You can inspect the DOM to see each item's content being rendered.
::

### Color

Use the `color` prop to change the color of the Tabs.

::docs-pohon-preview
---
external:
  - items
externalTypes:
  - PTabsItem[]
ignore:
  - content
  - items
  - class
props:
  color: neutral
  content: false
  items:
    - label: Account
    - label: Password
  class: w-full
---
::

### Variant

Use the `variant` prop to change the variant of the Tabs.

::docs-pohon-preview
---
external:
  - items
externalTypes:
  - PTabsItem[]
ignore:
  - content
  - items
  - class
props:
  color: neutral
  variant: link
  content: false
  items:
    - label: Account
    - label: Password
  class: w-full
---
::

### Size

Use the `size` prop to change the size of the Tabs.

::docs-pohon-preview
---
external:
  - items
externalTypes:
  - PTabsItem[]
ignore:
  - content
  - items
  - class
props:
  size: md
  variant: pill
  content: false
  items:
    - label: Account
    - label: Password
  class: w-full
---
::

### Orientation

Use the `orientation` prop to change the orientation of the Tabs. Defaults to `horizontal`.

::docs-pohon-preview
---
external:
  - items
externalTypes:
  - PTabsItem[]
ignore:
  - content
  - items
  - class
props:
  orientation: vertical
  variant: pill
  content: false
  items:
    - label: Account
    - label: Password
  class: w-full
---
::

## Examples

### Control active item

You can control the active item by using the `default-value` prop or the `v-model` directive with the index of the item.

::docs-component-example{name="tabs-model-value-example"}
::

### With content slot

Use the `#content` slot to customize the content of each item.

::docs-component-example{name="tabs-content-slot-example"}
::

### With custom slot

Use the `slot` property to customize a specific item.

You will have access to the following slots:

- `#{{ item.slot }}`

::docs-component-example{name="tabs-custom-slot-example"}
::

## API

### Props

::docs-pohon-props
::

### Slots

::docs-pohon-slots
::

### Emits

::docs-pohon-emits
::

### Expose

When accessing the component via a template ref, you can use the following:

| Name          | Type                             |
| ------------- | -------------------------------- |
| `triggersRef` | `Ref<ComponentPublicInstance[]>` |

## Theme

::docs-pohon-theme
::

## Akar

::docs-akar-to-pohon
---
mode: pohon
to: https://akar.vinicunca.dev/docs/akar/components/tabs
---
::

## Changelog

::docs-component-changelog
::


# Textarea

## Usage

Use the `v-model` directive to control the value of the Textarea.

::docs-pohon-preview
---
external:
  - modelValue
ignore:
  - modelValue
props:
  modelValue: ""
---
::

### Rows

Use the `rows` prop to set the number of rows. Defaults to `3`.

::docs-pohon-preview{:props='{"rows":12}'}
::

### Placeholder

Use the `placeholder` prop to set a placeholder text.

::docs-pohon-preview{:props='{"placeholder":"Type something..."}'}
::

### Autoresize

Use the `autoresize` prop to enable autoresizing the height of the Textarea.

::docs-pohon-preview
---
external:
  - modelValue
ignore:
  - modelValue
props:
  modelValue: This is a long text that will autoresize the height of the Textarea.
  autoresize: true
---
::

Use the `maxrows` prop to set the maximum number of rows when autoresizing. If set to `0`, the Textarea will grow indefinitely.

::docs-pohon-preview
---
external:
  - modelValue
ignore:
  - modelValue
props:
  modelValue: This is a long text that will autoresize the height of the Textarea
    with a maximum of 4 rows.
  maxrows: 4
  autoresize: true
---
::

### Color

Use the `color` prop to change the ring color when the Textarea is focused.

::docs-pohon-preview
---
ignore:
  - placeholder
props:
  color: neutral
  highlight: true
  placeholder: Type something...
---
::

::note
The `highlight` prop is used here to show the focus state. It's used internally when a validation error occurs.
::

### Variant

Use the `variant` prop to change the variant of the Textarea.

::docs-pohon-preview
---
ignore:
  - placeholder
props:
  color: neutral
  variant: subtle
  highlight: false
  placeholder: Type something...
---
::

### Size

Use the `size` prop to change the size of the Textarea.

::docs-pohon-preview
---
ignore:
  - placeholder
props:
  size: xl
  placeholder: Type something...
---
::

### Icon

Use the `icon` prop to show an [Icon](https://akar.vinicunca.dev/docs/pohon/components/icon) inside the Textarea.

::docs-pohon-preview
---
ignore:
  - placeholder
prettier: true
props:
  icon: i-lucide:search
  size: md
  variant: outline
  placeholder: Search...
  rows: 1
---
::

Use the `leading` and `trailing` props to set the icon position or the `leading-icon` and `trailing-icon` props to set a different icon for each position.

::docs-pohon-preview
---
ignore:
  - placeholder
prettier: true
props:
  trailingIcon: i-lucide:at-sign
  placeholder: Enter your email
  size: md
  rows: 1
---
::

### Avatar

Use the `avatar` prop to show an [Avatar](https://akar.vinicunca.dev/docs/pohon/components/avatar) inside the Textarea.

::docs-pohon-preview
---
ignore:
  - placeholder
prettier: true
props:
  avatar:
    src: https://github.com/nuxt.png
  size: md
  variant: outline
  placeholder: Search...
  rows: 1
---
::

### Loading

Use the `loading` prop to show a loading icon on the Textarea.

::docs-pohon-preview
---
ignore:
  - placeholder
props:
  loading: true
  trailing: false
  placeholder: Search...
  rows: 1
---
::

### Loading Icon

Use the `loading-icon` prop to customize the loading icon. Defaults to `i-lucide:loader-circle`.

::docs-pohon-preview
---
ignore:
  - placeholder
props:
  loading: true
  loadingIcon: i-lucide:loader
  placeholder: Search...
  rows: 1
---
::

::docs-framework-only
#nuxt
  :::tip
  ---
  to: https://akar.vinicunca.dev/docs/pohon/getting-started/integrations/icons/nuxt#theme
  ---
  You can customize this icon globally in your `app.config.ts` under `pohon.icons.loading` key.
  :::

#vue
  :::tip
  ---
  to: https://akar.vinicunca.dev/docs/pohon/getting-started/integrations/icons/vue#theme
  ---
  You can customize this icon globally in your `vite.config.ts` under `pohon.icons.loading` key.
  :::
::

### Disabled

Use the `disabled` prop to disable the Textarea.

::docs-pohon-preview
---
ignore:
  - placeholder
props:
  disabled: true
  placeholder: Type something...
---
::

## API

### Props

::docs-pohon-props
::

::callout
---
icon: i-simple-icons:mdnwebdocs
target: _blank
to: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#attributes
---
This component also supports all native `<textarea>` HTML attributes.
::

### Slots

::docs-pohon-slots
::

### Emits

::docs-pohon-emits
::

### Expose

When accessing the component via a template ref, you can use the following:

| Name          | Type                              |
| ------------- | --------------------------------- |
| `textareaRef` | `Ref<HTMLTextAreaElement | null>` |

## Theme

::docs-pohon-theme
::

## Changelog

::docs-component-changelog
::


# Timeline

## Usage

Use the Timeline component to display a list of items in a timeline.

::docs-pohon-preview
---
collapse: true
external:
  - items
hide:
  - class
  - defaultValue
ignore:
  - items
  - class
  - defaultValue
props:
  defaultValue: 2
  items:
    - date: Mar 15, 2025
      title: Project Kickoff
      description: Kicked off the project with team alignment. Set up project
        milestones and allocated resources.
      icon: i-lucide:rocket
    - date: Mar 22 2025
      title: Design Phase
      description: User research and design workshops. Created wireframes and
        prototypes for user testing.
      icon: i-lucide:palette
    - date: Mar 29 2025
      title: Development Sprint
      description: Frontend and backend development. Implemented core features and
        integrated with APIs.
      icon: i-lucide:code
    - date: Apr 5 2025
      title: Testing & Deployment
      description: QA testing and performance optimization. Deployed the application
        to production.
      icon: i-lucide:check-circle
  class: w-96
---
::

### Items

Use the `items` prop as an array of objects with the following properties:

- `date?: string`
- `title?: string`
- `description?: AvatarProps`
- `icon?: string`
- `avatar?: AvatarProps`
- `value?: string | number`
- [`slot?: string`](https://akar.vinicunca.dev/#with-custom-slot)
- `class?: any`
- `pohon?: { item?: ClassNameValue, container?: ClassNameValue, indicator?: ClassNameValue, separator?: ClassNameValue, wrapper?: ClassNameValue, date?: ClassNameValue, title?: ClassNameValue, description?: ClassNameValue }`

::docs-pohon-preview
---
external:
  - items
externalTypes:
  - TimelineItem[]
ignore:
  - items
  - class
  - defaultValue
props:
  defaultValue: 2
  items:
    - date: Mar 15, 2025
      title: Project Kickoff
      description: Kicked off the project with team alignment. Set up project
        milestones and allocated resources.
      icon: i-lucide:rocket
    - date: Mar 22 2025
      title: Design Phase
      description: User research and design workshops. Created wireframes and
        prototypes for user testing.
      icon: i-lucide:palette
    - date: Mar 29 2025
      title: Development Sprint
      description: Frontend and backend development. Implemented core features and
        integrated with APIs.
      icon: i-lucide:code
    - date: Apr 5 2025
      title: Testing & Deployment
      description: QA testing and performance optimization. Deployed the application
        to production.
      icon: i-lucide:check-circle
  class: w-96
---
::

### Color

Use the `color` prop to change the color of the active items in a Timeline.

::docs-pohon-preview
---
external:
  - items
externalTypes:
  - TimelineItem[]
ignore:
  - items
  - class
  - defaultValue
props:
  color: neutral
  defaultValue: 2
  items:
    - date: Mar 15, 2025
      title: Project Kickoff
      description: Kicked off the project with team alignment. Set up project
        milestones and allocated resources.
      icon: i-lucide:rocket
    - date: Mar 22 2025
      title: Design Phase
      description: User research and design workshops. Created wireframes and
        prototypes for user testing.
      icon: i-lucide:palette
    - date: Mar 29 2025
      title: Development Sprint
      description: Frontend and backend development. Implemented core features and
        integrated with APIs.
      icon: i-lucide:code
    - date: Apr 5 2025
      title: Testing & Deployment
      description: QA testing and performance optimization. Deployed the application
        to production.
      icon: i-lucide:check-circle
  class: w-96
---
::

### Size

Use the `size` prop to change the size of the Timeline.

::docs-pohon-preview
---
external:
  - items
externalTypes:
  - TimelineItem[]
ignore:
  - items
  - class
  - defaultValue
props:
  size: xs
  defaultValue: 2
  items:
    - date: Mar 15, 2025
      title: Project Kickoff
      description: Kicked off the project with team alignment. Set up project
        milestones and allocated resources.
      icon: i-lucide:rocket
    - date: Mar 22 2025
      title: Design Phase
      description: User research and design workshops. Created wireframes and
        prototypes for user testing.
      icon: i-lucide:palette
    - date: Mar 29 2025
      title: Development Sprint
      description: Frontend and backend development. Implemented core features and
        integrated with APIs.
      icon: i-lucide:code
    - date: Apr 5 2025
      title: Testing & Deployment
      description: QA testing and performance optimization. Deployed the application
        to production.
      icon: i-lucide:check-circle
  class: w-96
---
::

### Orientation

Use the `orientation` prop to change the orientation of the Timeline. Defaults to `vertical`.

::docs-pohon-preview
---
external:
  - items
externalTypes:
  - TimelineItem[]
ignore:
  - items
  - class
  - defaultValue
props:
  orientation: horizontal
  defaultValue: 2
  items:
    - date: Mar 15, 2025
      title: Project Kickoff
      description: Kicked off the project with team alignment.
      icon: i-lucide:rocket
    - date: Mar 22 2025
      title: Design Phase
      description: User research and design workshops.
      icon: i-lucide:palette
    - date: Mar 29 2025
      title: Development Sprint
      description: Frontend and backend development.
      icon: i-lucide:code
    - date: Apr 5 2025
      title: Testing & Deployment
      description: QA testing and performance optimization.
      icon: i-lucide:check-circle
  class: w-full
class: overflow-x-auto
---
::

### Reverse

Use the reverse prop to reverse the direction of the Timeline.

::docs-pohon-preview
---
external:
  - items
externalTypes:
  - TimelineItem[]
ignore:
  - items
  - class
  - defaultValue
props:
  reverse: true
  modelValue: 2
  orientation: vertical
  items:
    - date: Mar 15, 2025
      title: Project Kickoff
      description: Kicked off the project with team alignment.
      icon: i-lucide:rocket
    - date: Mar 22 2025
      title: Design Phase
      description: User research and design workshops.
      icon: i-lucide:palette
    - date: Mar 29 2025
      title: Development Sprint
      description: Frontend and backend development.
      icon: i-lucide:code
    - date: Apr 5 2025
      title: Testing & Deployment
      description: QA testing and performance optimization.
      icon: i-lucide:check-circle
  class: w-full
class: overflow-x-auto
---
::

## Examples

### Control active item

You can control the active item by using the `default-value` prop or the `v-model` directive with the `value` of the item. If no `value` is provided, it defaults to the index **as a string**.

::docs-component-example{prettier name="timeline-model-value-example"}
::

### With alternating layout

Use the `pohon` prop to create a Timeline with alternating layout.

::docs-component-example{prettier name="timeline-alternating-layout-example"}
::

### With custom slot

Use the `slot` property to customize a specific item.

You will have access to the following slots:

- `#{{ item.slot }}-indicator`
- `#{{ item.slot }}-date`
- `#{{ item.slot }}-title`
- `#{{ item.slot }}-description`

::docs-component-example{prettier name="timeline-custom-slot-example"}
::

### With slots

Use the available slots to create a more complex Timeline.

::docs-component-example{prettier name="timeline-slots-example"}
::

## API

### Props

::docs-pohon-props
::

### Slots

::docs-pohon-slots
::

### Emits

::docs-pohon-emits
::

## Theme

::docs-pohon-theme
::

## Changelog

::docs-component-changelog
::


# Toast

## Usage

Use the [useToast](https://akar.vinicunca.dev/docs/pohon/composables/use-toast) composable to display a toast in your application.

::docs-component-example{collapse prettier name="toast-example"}
::

::warning
Make sure to wrap your app with the [`App`](https://akar.vinicunca.dev/docs/pohon/components/app) component which uses our [`Toaster`](https://github.com/vinicunca/akar/blob/main/packages/pohon/src/runtime/components/toaster.vue){rel="nofollow"} component which uses the [`AToastProvider`](https://akar.vinicunca.dev/docs/akar/components/toast#provider) component from Akar.
::

::tip{to="https://akar.vinicunca.dev/docs/pohon/components/app#props"}
You can check the `App` component `toaster` prop to see how to configure the Toaster globally.
::

### Title

Pass a `title` field to the `toast.add` method to display a title.

::docs-component-example
---
options:
  - name: title
    label: title
    default: Uh oh! Something went wrong.
name: toast-title-example
---
::

### Description

Pass a `description` field to the `toast.add` method to display a description.

::docs-component-example
---
options:
  - name: title
    label: title
    default: Uh oh! Something went wrong.
  - name: description
    label: description
    default: There was a problem with your request.
name: toast-description-example
---
::

### Icon

Pass an `icon` field to the `toast.add` method to display an [Icon](https://akar.vinicunca.dev/docs/pohon/components/icon).

::docs-component-example
---
options:
  - name: icon
    label: icon
    default: i-lucide:wifi
name: toast-icon-example
---
::

### Avatar

Pass an `avatar` field to the `toast.add` method to display an [Avatar](https://akar.vinicunca.dev/docs/pohon/components/avatar).

::docs-component-example
---
options:
  - name: avatar.src
    alias: avatar
    label: avatar.src
    default:
      src: https://github.com/praburangki.png
name: toast-avatar-example
---
::

### Color

Pass a `color` field to the `toast.add` method to change the color of the Toast.

::docs-component-example
---
options:
  - name: color
    label: color
    default: neutral
    items:
      - primary
      - secondary
      - success
      - info
      - warning
      - error
      - neutral
name: toast-color-example
---
::

### Close

Pass a `close` field to customize or hide the close [Button](https://akar.vinicunca.dev/docs/pohon/components/button) (with `false` value).

::docs-component-example{name="toast-close-example"}
::

### Close Icon

Pass a `closeIcon` field to customize the close button [Icon](https://akar.vinicunca.dev/docs/pohon/components/icon). Default to `i-lucide:x`.

::docs-component-example
---
options:
  - name: closeIcon
    label: closeIcon
    default: i-lucide:arrow-right
name: toast-close-icon-example
---
::

::docs-framework-only
#nuxt
  :::tip
  ---
  to: https://akar.vinicunca.dev/docs/pohon/getting-started/integrations/icons/nuxt#theme
  ---
  You can customize this icon globally in your `app.config.ts` under `pohon.icons.close` key.
  :::

#vue
  :::tip
  ---
  to: https://akar.vinicunca.dev/docs/pohon/getting-started/integrations/icons/vue#theme
  ---
  You can customize this icon globally in your `vite.config.ts` under `pohon.icons.close` key.
  :::
::

### Actions

Pass an `actions` field to add some [Button](https://akar.vinicunca.dev/docs/pohon/components/button) actions to the Toast.

::docs-component-example
---
options:
  - name: description
    label: description
    default: There was a problem with your request.
name: toast-actions-example
---
::

### Progress

Pass a `progress` field to customize or hide the [Progress](https://akar.vinicunca.dev/docs/pohon/components/progress) bar (with `false` value).

::tip
The Progress bar inherits the Toast color by default, but you can override it using the `progress.color` field.
::

::docs-component-example{name="toast-progress-example"}
::

### Orientation

Pass an `orientation` field to the `toast.add` method to change the orientation of the Toast.

::docs-component-example
---
options:
  - name: orientation
    label: orientation
    default: horizontal
    items:
      - horizontal
      - vertical
name: toast-orientation-example
---
::

## Examples

::note{to="https://akar.vinicunca.dev/docs/pohon/components/app"}
Pohon UI provides an **App** component that wraps your app to provide global configurations.
::

### Change global position

Change the `toaster.position` prop on the [App](https://akar.vinicunca.dev/docs/pohon/components/app#props) component to change the position of the toasts.

```vue [app.vue]
<script setup lang="ts">
const toaster = { position: 'bottom-right' };
</script>

<template>
  <PApp :toaster="toaster">
    <NuxtPage />
  </PApp>
</template>
```

::docs-component-example
---
prettier: true
name: toast-example
---
#options
  :::toaster-position-example
  :::
::

::note
---
to: https://github.com/vinicunca/akar/blob/main/packages/pohon/docs/app/app.config.ts#L3
---
In this example, we use the `AppConfig` to configure the `position` prop of the `Toaster` component globally.
::

### Change global duration

Change the `toaster.duration` prop on the [App](https://akar.vinicunca.dev/docs/pohon/components/app#props) component to change the duration of the toasts.

```vue [app.vue]
<script setup lang="ts">
const toaster = { duration: 5000 };
</script>

<template>
  <PApp :toaster="toaster">
    <NuxtPage />
  </PApp>
</template>
```

::docs-component-example
---
prettier: true
name: toast-example
---
#options
  :::toaster-duration-example
  :::
::

::note
---
to: https://github.com/vinicunca/akar/blob/main/packages/pohon/docs/app/app.config.ts#L4
---
In this example, we use the `AppConfig` to configure the `duration` prop of the `Toaster` component globally.
::

### Change global max

Change the `toaster.max` prop on the [App](https://akar.vinicunca.dev/docs/pohon/components/app#props) component to change the max number of toasts displayed at once.

```vue [app.vue]
<script setup lang="ts">
const toaster = { max: 3 };
</script>

<template>
  <PApp :toaster="toaster">
    <NuxtPage />
  </PApp>
</template>
```

::docs-component-example
---
prettier: true
name: toast-example
---
#options
  :::toaster-max-example
  :::
::

::note
---
to: https://github.com/vinicunca/akar/blob/main/packages/pohon/docs/app/app.config.ts#L5
---
In this example, we use the `AppConfig` to configure the `max` prop of the `Toaster` component globally.
::

### Stacked toasts

Set the `toaster.expand` prop to `false` on the [App](https://akar.vinicunca.dev/docs/pohon/components/app#props) component to display stacked toasts (inspired by [Sonner](https://sonner.emilkowal.ski/){rel="nofollow"}).

```vue [app.vue]
<script setup lang="ts">
const toaster = { expand: true };
</script>

<template>
  <PApp :toaster="toaster">
    <NuxtPage />
  </PApp>
</template>
```

::tip
You can hover over the toasts to expand them. This will also pause the timer of the toasts.
::

::docs-component-example
---
prettier: true
name: toast-example
---
#options
  :::toaster-expand-example
  :::
::

::note
---
to: https://github.com/vinicunca/akar/blob/main/packages/pohon/docs/app/app.config.ts#L6
---
In this example, we use the `AppConfig` to configure the `expand` prop of the `Toaster` component globally.
::

## API

### Props

::docs-pohon-props
::

### Slots

::docs-pohon-slots
::

### Emits

::docs-pohon-emits
::

### Expose

When accessing the component via a template ref, you can use the following:

| Name     | Type          |
| -------- | ------------- |
| `height` | `Ref<number>` |

## Theme

::docs-pohon-theme
::

## Akar

::docs-akar-to-pohon
---
mode: pohon
to: https://akar.vinicunca.dev/docs/akar/components/toast
---
::

## Changelog

::docs-component-changelog
::


# Tooltip

## Usage

Use a [Button](https://akar.vinicunca.dev/docs/pohon/components/button) or any other component in the default slot of the Tooltip.

::docs-pohon-preview
---
ignore:
  - text
prettier: true
props:
  text: Open on GitHub
slots:
  default: |
    
    <PButton label="Open" color="neutral" variant="subtle" />
---
  :::p-button{color="neutral" label="Open" variant="subtle"}
  :::
::

::warning
Make sure to wrap your app with the [`App`](https://akar.vinicunca.dev/docs/pohon/components/app) component which uses the [`ATooltipProvider`](https://akar.vinicunca.dev/docs/akar/components/tooltip#provider) component from Akar.
::

::tip{to="https://akar.vinicunca.dev/docs/pohon/components/app#props"}
You can check the `App` component `tooltip` prop to see how to configure the Tooltip globally.
::

### Text

Use the `text` prop to set the content of the Tooltip.

::docs-pohon-preview
---
prettier: true
props:
  text: Open on GitHub
slots:
  default: |
    
    <PButton label="Open" color="neutral" variant="subtle" />
---
  :::p-button{color="neutral" label="Open" variant="subtle"}
  :::
::

### Kbds

Use the `kbds` prop to render [Kbd](https://akar.vinicunca.dev/docs/pohon/components/kbd) components in the Tooltip.

::docs-pohon-preview
---
ignore:
  - text
  - kbds
prettier: true
props:
  text: Open on GitHub
  kbds:
    - meta
    - G
slots:
  default: |
    
    <PButton label="Open" color="neutral" variant="subtle" />
---
  :::p-button{color="neutral" label="Open" variant="subtle"}
  :::
::

::tip
You can use special keys like `meta` that displays as `⌘` on macOS and `Ctrl` on other platforms.
::

### Delay

Use the `delay-duration` prop to change the delay before the Tooltip appears. For example, you can make it appear instantly by setting it to `0`.

::docs-pohon-preview
---
ignore:
  - text
prettier: true
props:
  delayDuration: 0
  text: Open on GitHub
slots:
  default: |
    
    <PButton label="Open" color="neutral" variant="subtle" />
---
  :::p-button{color="neutral" label="Open" variant="subtle"}
  :::
::

::tip
This can be configured globally through the `tooltip.delayDuration` option in the [`App`](https://akar.vinicunca.dev/docs/pohon/components/app) component.
::

### Content

Use the `content` prop to control how the Tooltip content is rendered, like its `align` or `side` for example.

::docs-pohon-preview
---
ignore:
  - text
items:
  content:
    align:
      - start
      - center
      - end
    side:
      - right
      - left
      - top
      - bottom
prettier: true
props:
  content:
    align: center
    side: bottom
    sideOffset: 8
  text: Open on GitHub
slots:
  default: |
    
    <PButton label="Open" color="neutral" variant="subtle" />
---
  :::p-button{color="neutral" label="Open" variant="subtle"}
  :::
::

### Arrow

Use the `arrow` prop to display an arrow on the Tooltip.

::docs-pohon-preview
---
ignore:
  - text
  - arrow
prettier: true
props:
  arrow: true
  text: Open on GitHub
slots:
  default: |
    
    <PButton label="Open" color="neutral" variant="subtle" />
---
  :::p-button{color="neutral" label="Open" variant="subtle"}
  :::
::

### Disabled

Use the `disabled` prop to disable the Tooltip.

::docs-pohon-preview
---
ignore:
  - text
prettier: true
props:
  disabled: true
  text: Open on GitHub
slots:
  default: |
    
    <PButton label="Open" color="neutral" variant="subtle" />
---
  :::p-button{color="neutral" label="Open" variant="subtle"}
  :::
::

## Examples

### Control open state

You can control the open state by using the `default-open` prop or the `v-model:open` directive.

::docs-component-example{name="tooltip-open-example"}
::

::note
In this example, leveraging [`defineShortcuts`](https://akar.vinicunca.dev/docs/pohon/composables/define-shortcuts), you can toggle the Tooltip by pressing ``.
::

### With following cursor

You can make the Tooltip follow the cursor when hovering over an element using the [`reference`](https://akar.vinicunca.dev/docs/akar/components/tooltip#trigger) prop:

::docs-component-example{name="tooltip-cursor-example"}
::

## API

### Props

::docs-pohon-props
::

### Slots

::docs-pohon-slots
::

### Emits

::docs-pohon-emits
::

## Theme

::docs-pohon-theme
::

## Akar

::docs-akar-to-pohon
---
mode: pohon
to: https://akar.vinicunca.dev/docs/akar/components/tooltip
---
::

## Changelog

::docs-component-changelog
::


# Tree

## Usage

Use the Tree component to display a hierarchical structure of items.

::docs-pohon-preview
---
collapse: true
external:
  - items
hide:
  - class
ignore:
  - items
props:
  items:
    - label: app/
      defaultExpanded: true
      children:
        - label: composables/
          children:
            - label: useAuth.ts
              icon: i-vscode-icons:file-type-typescript
            - label: useUser.ts
              icon: i-vscode-icons:file-type-typescript
        - label: components/
          defaultExpanded: true
          children:
            - label: Card.vue
              icon: i-vscode-icons:file-type-vue
            - label: Button.vue
              icon: i-vscode-icons:file-type-vue
    - label: app.vue
      icon: i-vscode-icons:file-type-vue
    - label: nuxt.config.ts
      icon: i-vscode-icons:file-type-nuxt
  class: w-60
---
::

### Items

Use the `items` prop as an array of objects with the following properties:

- `icon?: string`
- `label?: string`
- `trailingIcon?: string`
- `defaultExpanded?: boolean`
- `disabled?: boolean`
- `slot?: string`
- `children?: TreeItem[]`
- `onToggle?: (e: TreeItemToggleEvent<TreeItem>) => void`
- `onSelect?: (e: TreeItemSelectEvent<TreeItem>) => void`
- `class?: any`
- `pohon?: { item?: ClassNameValue, itemWithChildren?: ClassNameValue, link?: ClassNameValue, linkLeadingIcon?: ClassNameValue, linkLabel?: ClassNameValue, linkTrailing?: ClassNameValue, linkTrailingIcon?: ClassNameValue, listWithChildren?: ClassNameValue }`

::note
A unique identifier is required for each item. The component will use the `label` prop as identifier if no `get-key` is provided. Ideally you should provide a `get-key` function prop to return a unique identifier. Alternatively, you can use the `labelKey` prop to specify which property to use as the unique identifier.
::

::docs-pohon-preview
---
collapse: true
external:
  - items
externalTypes:
  - TreeItem[]
hide:
  - class
ignore:
  - items
props:
  items:
    - label: app/
      defaultExpanded: true
      children:
        - label: composables/
          children:
            - label: useAuth.ts
              icon: i-vscode-icons:file-type-typescript
            - label: useUser.ts
              icon: i-vscode-icons:file-type-typescript
        - label: components/
          defaultExpanded: true
          children:
            - label: Card.vue
              icon: i-vscode-icons:file-type-vue
            - label: Button.vue
              icon: i-vscode-icons:file-type-vue
    - label: app.vue
      icon: i-vscode-icons:file-type-vue
    - label: nuxt.config.ts
      icon: i-vscode-icons:file-type-nuxt
  class: w-60
---
::

### Multiple

Use the `multiple` prop to allow multiple item selections.

::docs-pohon-preview
---
collapse: true
external:
  - items
externalTypes:
  - TreeItem[]
hide:
  - class
ignore:
  - items
props:
  multiple: true
  items:
    - label: app/
      defaultExpanded: true
      children:
        - label: composables/
          children:
            - label: useAuth.ts
              icon: i-vscode-icons:file-type-typescript
            - label: useUser.ts
              icon: i-vscode-icons:file-type-typescript
        - label: components/
          defaultExpanded: true
          children:
            - label: Card.vue
              icon: i-vscode-icons:file-type-vue
            - label: Button.vue
              icon: i-vscode-icons:file-type-vue
    - label: app.vue
      icon: i-vscode-icons:file-type-vue
    - label: nuxt.config.ts
      icon: i-vscode-icons:file-type-nuxt
  class: w-60
---
::

### Nested

Use the `nested` prop to control whether the Tree is rendered with nested structure or as a flat list. Defaults to `true`.

::docs-pohon-preview
---
collapse: true
external:
  - items
externalTypes:
  - TreeItem[]
hide:
  - class
ignore:
  - items
props:
  nested: false
  items:
    - label: app/
      defaultExpanded: true
      children:
        - label: composables/
          children:
            - label: useAuth.ts
              icon: i-vscode-icons:file-type-typescript
            - label: useUser.ts
              icon: i-vscode-icons:file-type-typescript
        - label: components/
          defaultExpanded: true
          children:
            - label: Card.vue
              icon: i-vscode-icons:file-type-vue
            - label: Button.vue
              icon: i-vscode-icons:file-type-vue
    - label: app.vue
      icon: i-vscode-icons:file-type-vue
    - label: nuxt.config.ts
      icon: i-vscode-icons:file-type-nuxt
  class: w-60
---
::

::note{to="https://akar.vinicunca.dev/#with-virtualization"}
When `nested` is `false`, all items are rendered at the same level with indentation to indicate hierarchy. This is useful for virtualization or drag and drop functionality.
::

### Color

Use the `color` prop to change the color of the Tree.

::docs-pohon-preview
---
collapse: true
external:
  - items
externalTypes:
  - TreeItem[]
hide:
  - class
ignore:
  - items
props:
  color: neutral
  items:
    - label: app/
      defaultExpanded: true
      children:
        - label: composables/
          children:
            - label: useAuth.ts
              icon: i-vscode-icons:file-type-typescript
            - label: useUser.ts
              icon: i-vscode-icons:file-type-typescript
        - label: components/
          defaultExpanded: true
          children:
            - label: Card.vue
              icon: i-vscode-icons:file-type-vue
            - label: Button.vue
              icon: i-vscode-icons:file-type-vue
    - label: app.vue
      icon: i-vscode-icons:file-type-vue
    - label: nuxt.config.ts
      icon: i-vscode-icons:file-type-nuxt
  class: w-60
---
::

### Size

Use the `size` prop to change the size of the Tree.

::docs-pohon-preview
---
collapse: true
external:
  - items
externalTypes:
  - TreeItem[]
hide:
  - class
ignore:
  - items
props:
  size: xl
  items:
    - label: app/
      defaultExpanded: true
      children:
        - label: composables/
          children:
            - label: useAuth.ts
              icon: i-vscode-icons:file-type-typescript
            - label: useUser.ts
              icon: i-vscode-icons:file-type-typescript
        - label: components/
          defaultExpanded: true
          children:
            - label: Card.vue
              icon: i-vscode-icons:file-type-vue
            - label: Button.vue
              icon: i-vscode-icons:file-type-vue
    - label: app.vue
      icon: i-vscode-icons:file-type-vue
    - label: nuxt.config.ts
      icon: i-vscode-icons:file-type-nuxt
  class: w-60
---
::

### Trailing Icon

Use the `trailing-icon` prop to customize the trailing [Icon](https://akar.vinicunca.dev/docs/pohon/components/icon) of a parent node. Defaults to `i-lucide:chevron-down`.

::note
If an icon is specified for an item, it will always take precedence over these props.
::

::docs-pohon-preview
---
collapse: true
external:
  - items
externalTypes:
  - TreeItem[]
hide:
  - class
ignore:
  - items
props:
  trailingIcon: i-lucide:arrow-down
  items:
    - label: app/
      defaultExpanded: true
      children:
        - label: composables/
          trailingIcon: i-lucide:chevron-down
          children:
            - label: useAuth.ts
              icon: i-vscode-icons:file-type-typescript
            - label: useUser.ts
              icon: i-vscode-icons:file-type-typescript
        - label: components/
          defaultExpanded: true
          children:
            - label: Card.vue
              icon: i-vscode-icons:file-type-vue
            - label: Button.vue
              icon: i-vscode-icons:file-type-vue
    - label: app.vue
      icon: i-vscode-icons:file-type-vue
    - label: nuxt.config.ts
      icon: i-vscode-icons:file-type-nuxt
  class: w-60
---
::

::docs-framework-only
#nuxt
  :::tip
  ---
  to: https://akar.vinicunca.dev/docs/pohon/getting-started/integrations/icons/nuxt#theme
  ---
  You can customize this icon globally in your `app.config.ts` under `pohon.icons.chevronDown` key.
  :::

#vue
  :::tip
  ---
  to: https://akar.vinicunca.dev/docs/pohon/getting-started/integrations/icons/vue#theme
  ---
  You can customize this icon globally in your `vite.config.ts` under `pohon.icons.chevronDown` key.
  :::
::

### Expanded Icon

Use the `expanded-icon` and `collapsed-icon` props to customize the icons of a parent node when it is expanded or collapsed. Defaults to `i-lucide:folder-open` and `i-lucide:folder` respectively.

::docs-pohon-preview
---
collapse: true
external:
  - items
externalTypes:
  - TreeItem[]
hide:
  - class
ignore:
  - items
props:
  expandedIcon: i-lucide:book-open
  collapsedIcon: i-lucide:book
  items:
    - label: app/
      defaultExpanded: true
      children:
        - label: composables/
          children:
            - label: useAuth.ts
              icon: i-vscode-icons:file-type-typescript
            - label: useUser.ts
              icon: i-vscode-icons:file-type-typescript
        - label: components/
          defaultExpanded: true
          children:
            - label: Card.vue
              icon: i-vscode-icons:file-type-vue
            - label: Button.vue
              icon: i-vscode-icons:file-type-vue
    - label: app.vue
      icon: i-vscode-icons:file-type-vue
    - label: nuxt.config.ts
      icon: i-vscode-icons:file-type-nuxt
  class: w-60
---
::

::docs-framework-only
#nuxt
  :::tip
  ---
  to: https://akar.vinicunca.dev/docs/pohon/getting-started/integrations/icons/nuxt#theme
  ---
  You can customize these icons globally in your `app.config.ts` under `pohon.icons.folder` and `pohon.icons.folderOpen` keys.
  :::

#vue
  :::tip
  ---
  to: https://akar.vinicunca.dev/docs/pohon/getting-started/integrations/icons/vue#theme
  ---
  You can customize these icons globally in your `vite.config.ts` under `pohon.icons.folder` and `pohon.icons.folderOpen` keys.
  :::
::

### Disabled

Use the `disabled` prop to prevent any user interaction with the Tree.

::docs-pohon-preview
---
collapse: true
external:
  - items
externalTypes:
  - TreeItem[]
hide:
  - class
ignore:
  - items
props:
  disabled: true
  items:
    - label: app
      icon: i-lucide:folder
      defaultExpanded: true
      children:
        - label: composables
          icon: i-lucide:folder
          children:
            - label: useAuth.ts
              icon: i-vscode-icons:file-type-typescript
            - label: useUser.ts
              icon: i-vscode-icons:file-type-typescript
        - label: components
          icon: i-lucide:folder
          children:
            - label: Home
              icon: i-lucide:folder
              children:
                - label: Card.vue
                  icon: i-vscode-icons:file-type-vue
                - label: Button.vue
                  icon: i-vscode-icons:file-type-vue
    - label: app.vue
      icon: i-vscode-icons:file-type-vue
    - label: nuxt.config.ts
      icon: i-vscode-icons:file-type-nuxt
  class: w-60
---
::

::note
You can also disable individual items using `item.disabled`.
::

## Examples

### Control selected item(s)

You can control the selected item(s) by using the `default-value` prop or the `v-model` directive.

::docs-component-example
---
collapse: true
props:
  class: w-60
name: tree-model-value-example
---
::

If you want to prevent an item from being selected, you can use the `item.onSelect()` property or the global `select` event:

::docs-component-example
---
collapse: true
props:
  class: w-60
name: tree-on-select-example
---
::

::note
This lets you expand or collapse a parent item without selecting it.
::

### Control expanded items

You can control the expanded items by using the `default-expanded` prop or the `v-model` directive.

::docs-component-example
---
collapse: true
props:
  class: w-60
name: tree-expanded-example
---
::

If you want to prevent an item from being expanded, you can use the `item.onToggle()` property or the global `toggle` event:

::docs-component-example
---
collapse: true
props:
  class: w-60
name: tree-on-toggle-example
---
::

::note
This lets you select a parent item without expanding or collapsing its children.
::

### With checkbox in items

You can use the `item-leading` slot to add a [Checkbox](https://akar.vinicunca.dev/docs/pohon/components/checkbox) to the items. Use the `multiple`, `propagate-select` and `bubble-select` props to enable multi-selection with parent-child relationship and the `select` and `toggle` events to control the selected and expanded state of the items.

::docs-component-example
---
collapse: true
props:
  class: w-60
name: tree-checkbox-items-example
---
::

::note
This example uses the `as` prop to change the items from `button` to `div` as the [`Checkbox`](https://akar.vinicunca.dev/docs/pohon/components/checkbox) is also rendered as a `button`.
::

### With drag and drop

Use the [`useSortable`](https://vueuse.org/integrations/useSortable/){rel="nofollow"} composable from [`@vueuse/integrations`](https://vueuse.org/integrations/README.html){rel="nofollow"} to enable drag and drop functionality on the Tree. This integration wraps [Sortable.js](https://sortablejs.github.io/Sortable/){rel="nofollow"} to provide a seamless drag and drop experience.

::docs-component-example{collapse prettier name="tree-drag-and-drop-example"}
::

::note
This example sets the `nested` prop to `false` to have a flat list of items so that the items can be dragged and dropped.
::

### With virtualization

Use the `virtualize` prop to enable virtualization for large lists as a boolean or an object with options like `{ estimateSize: 32, overscan: 12 }`.

::warning
When virtualization is enabled, the tree structure is flattened, similar to setting the `nested` prop to `false`.
::

::docs-component-example
---
prettier: true
props:
  class: w-60
name: tree-virtualize-example
---
::

### With custom slot

Use the `slot` property to customize a specific item.

You will have access to the following slots:

- `#{{ item.slot }}-wrapper`
- `#{{ item.slot }}`
- `#{{ item.slot }}-leading`
- `#{{ item.slot }}-label`
- `#{{ item.slot }}-trailing`

::docs-component-example
---
collapse: true
props:
  class: w-60
name: tree-custom-slot-example
---
::

## API

### Props

::docs-pohon-props
::

### Slots

::docs-pohon-slots
::

### Emits

::docs-pohon-emits
::

## Theme

::docs-pohon-theme
::

## Akar

::docs-akar-to-pohon
---
mode: pohon
to: https://akar.vinicunca.dev/docs/akar/components/tree
---
::

## Changelog

::docs-component-changelog
::


# User

## Usage

### Name

Use the `name` prop to display a name for the user.

::docs-pohon-preview{:props='{"name":"John Doe"}'}
::

### Description

Use the `description` prop to display a description for the user.

::docs-pohon-preview
---
props:
  name: John Doe
  description: Software Engineer
---
::

### Avatar

Use the `avatar` prop to display an [Avatar](https://akar.vinicunca.dev/docs/pohon/components/avatar) component.

::docs-pohon-preview
---
ignore:
  - name
  - description
prettier: true
props:
  name: John Doe
  description: Software Engineer
  avatar:
    src: https://i.pravatar.cc/150?u=john-doe
    icon: i-lucide:image
---
::

::collapsible{name="all avatar properties"}
  :::docs-pohon-props{:ignore='["size","as"]' name="Avatar"}
  :::
::

### Chip

Use the `chip` prop to display a [Chip](https://akar.vinicunca.dev/docs/pohon/components/chip) component.

::docs-pohon-preview
---
ignore:
  - name
  - description
  - avatar.src
items:
  chip:
    color:
      - primary
      - secondary
      - success
      - info
      - warning
      - error
      - neutral
    position:
      - top-left
      - top-right
      - bottom-left
      - bottom-right
prettier: true
props:
  name: John Doe
  description: Software Engineer
  avatar:
    src: https://i.pravatar.cc/150?u=john-doe
  chip:
    color: primary
    position: top-right
---
::

::collapsible{name="all chip properties"}
  :::docs-pohon-props{:ignore='["as","size","standalone"]' name="Chip"}
  :::
::

### Size

Use the `size` prop to change the size of the user avatar and text.

::docs-pohon-preview
---
ignore:
  - name
  - description
  - avatar.src
  - chip
prettier: true
props:
  name: John Doe
  description: Software Engineer
  avatar:
    src: https://i.pravatar.cc/150?u=john-doe
  chip: true
  size: xl
---
::

### Orientation

Use the `orientation` prop to change the orientation. Defaults to `horizontal`.

::docs-pohon-preview
---
ignore:
  - avatar.src
prettier: true
props:
  orientation: vertical
  name: John Doe
  description: Software Engineer
  avatar:
    src: https://i.pravatar.cc/150?u=john-doe
---
::

### Link

You can pass any property from the [`<NuxtLink>`](https://nuxt.com/docs/api/components/nuxt-link){rel="nofollow"} component such as `to`, `target`, `rel`, etc.

::docs-pohon-preview
---
ignore:
  - name
  - description
  - avatar.src
  - target
prettier: true
props:
  to: https://github.com/praburangki
  target: _blank
  name: praburangki
  description: Software Engineer
  avatar:
    src: https://github.com/praburangki.png
---
::

::note
The `NuxtLink` component will inherit all other attributes you pass to the `User` component.
::

## API

### Props

::docs-pohon-props
::

### Slots

::docs-pohon-slots
::

## Theme

::docs-pohon-theme
::

## Changelog

::docs-component-changelog
::


# defineShortcuts

## Usage

Use the auto-imported `defineShortcuts` composable to define keyboard shortcuts.

```vue
<script setup lang="ts">
const open = ref(false)

defineShortcuts({
  meta_k: () => {
    open.value = !open.value
  }
})
</script>
```

Or you don't want to use the auto import functionality.

```vue
<script setup lang="ts">
import { defineShortcuts } from '#imports';
const open = ref(false);

defineShortcuts({
  meta_k: () => {
    open.value = !open.value
  }
})
</script>
```

- Shortcuts are automatically adjusted for non-macOS platforms, converting `meta` to `ctrl`.
- The composable uses VueUse's [`useEventListener`](https://vueuse.org/core/useEventListener/){rel="nofollow"} to handle keydown events.
- For a complete list of available shortcut keys, refer to the [`KeyboardEvent.key`](https://developer.mozilla.org/en-US/docs/Web/API/UI_Events/Keyboard_event_key_values){rel="nofollow"} API documentation. Note that the key should be written in lowercase.

::tip{to="https://akar.vinicunca.dev/docs/pohon/components/kbd"}
Learn how to display shortcuts in components in the **Kbd** component documentation.
::

## API

`defineShortcuts(config: ShortcutsConfig, options?: ShortcutsOptions): void`

Define keyboard shortcuts for your application.

#### Parameters

::field-group
  :::field{required name="config" required="true" type="ShortcutsConfig"}
  An object where keys are shortcut definitions and values are either handler functions or shortcut configuration objects.
  :::

  :::field{name="options" type="ShortcutsOptions"}
  Optional configuration for the shortcuts behavior.
  
    ::::collapsible
      :::::field{name="chainDelay" type="number"}
      The delay between key presses to consider the shortcut as chained. Default is `250`.
      :::::
    ::::
  :::
::

#### Shortcut definition

Shortcuts are defined using the following format:

- Single key: `'a'`, `'b'`, `'1'`, `'?'`, etc.
- Key combinations: Use `_` to separate keys, e.g., `'meta_k'`, `'ctrl_shift_f'`
- Key sequences: Use `-` to define a sequence, e.g., `'g-d'`

#### Modifiers

- `meta`: Represents `⌘ Command` on macOS and `Ctrl` on other platforms
- `ctrl`: Represents `Ctrl` on all platforms
- `shift`: Used for alphabetic keys when Shift is required

#### Special keys

- `escape`: Triggers on Esc key
- `enter`: Triggers on Enter key
- `arrowleft`, `arrowright`, `arrowup`, `arrowdown`: Trigger on respective arrow keys

#### Shortcut configuration

Each shortcut can be defined as a function or an object with the following properties:

`interface ShortcutConfig { handler: () => void; usingInput?: boolean | string }`

#### Parameters

::field-group
  :::field{required name="handler" required="true" type="() => void"}
  Function to be executed when the shortcut is triggered.
  :::

  :::field{name="usingInput" type="boolean | string"}
  Controls when the shortcut should trigger based on input focus:
  
  - `false` (default): Shortcut only triggers when no input is focused
  - `true`: Shortcut triggers even when any input is focused
  - `string`: Shortcut only triggers when the specified input (by name) is focused
  :::
::

## Examples

### Basic usage

```vue
<script setup lang="ts">
defineShortcuts({
  '?': () => openHelpModal(),
  'meta_k': () => openCommandPalette(),
  'g-d': () => navigateToDashboard()
})
</script>
```

### With input focus handling

The `usingInput` option allows you to specify that a shortcut should only trigger when a specific input is focused.

```vue
<template>
  <PInput v-model="query" name="queryInput" />
</template>

<script setup lang="ts">
const query = ref('')

defineShortcuts({
  enter: {
    usingInput: 'queryInput',
    handler: () => performSearch()
  },
  escape: {
    usingInput: true,
    handler: () => clearSearch()
  }
})
</script>
```

### Extracting shortcuts from menu items

The `extractShortcuts` utility can be used to automatically define shortcuts from menu items:

```vue
<script setup lang="ts">
const items = [{
  label: 'Save',
  icon: 'i-lucide:file-down',
  kbds: ['meta', 'S'],
  onSelect() {
    save()
  }
}, {
  label: 'Copy',
  icon: 'i-lucide:copy',
  kbds: ['meta', 'C'],
  onSelect() {
    copy()
  }
}]

defineShortcuts(extractShortcuts(items))
</script>
```


# useFormField

## Usage

Use the auto-imported `useFormField` composable to integrate custom inputs with a [Form](https://akar.vinicunca.dev/docs/pohon/components/form).

```vue
<script setup lang="ts">
const { id, emitFormBlur, emitFormInput, emitFormChange } = useFormField()
</script>
```


# useOverlay

## Usage

Use the auto-imported `useOverlay` composable to programmatically control [Modal](https://akar.vinicunca.dev/docs/pohon/components/dialog) and [Slideover](https://akar.vinicunca.dev/docs/pohon/components/slideover) components.

```vue
<script setup lang="ts">
import { LazyModalExample } from '#components'

const overlay = useOverlay()

const modal = overlay.create(LazyModalExample)

async function openModal() {
  modal.open()
}
</script>
```

- The `useOverlay` composable is created using `createSharedComposable`, ensuring that the same overlay state is shared across your entire application.

::note
In order to return a value from the overlay, the `overlay.open()` can be awaited. In order for this to work, however, the **overlay component must emit a `close` event**. See example below for details.
::

## API

`useOverlay()`

The `useOverlay` composable provides methods to manage overlays globally. Each created overlay returns an instance with its own methods.

### create()

`create(component: T, options: OverlayOptions): OverlayInstance`

Create an overlay, and return a factory instance.

#### Parameters

::field-group
  :::field{required name="component" required="true" type="T"}
  The overlay component to render.
  :::

  :::field{name="options" type="OverlayOptions"}
  Configuration options for the overlay.
  
    ::::collapsible
      :::::field-group
        ::::::field{name="defaultOpen" type="boolean"}
        Open the overlay immediately after being created. Defaults to `false`.
        ::::::
      
        ::::::field{name="props" type="ComponentProps"}
        An optional object of props to pass to the rendered component.
        ::::::
      
        ::::::field{name="destroyOnClose" type="boolean"}
        Removes the overlay from memory when closed. Defaults to `false`.
        ::::::
      :::::
    ::::
  :::
::

### open()

`open(id: symbol, props?: ComponentProps<T>): OpenedOverlay<T>`

Open an overlay by its `id`.

#### Parameters

::field-group
  :::field{required name="id" required="true" type="symbol"}
  The identifier of the overlay.
  :::

  :::field{name="props" type="ComponentProps<T>"}
  An optional object of props to pass to the rendered component.
  :::
::

### close()

`close(id: symbol, value?: any): void`

Close an overlay by its `id`.

#### Parameters

::field-group
  :::field{required name="id" required="true" type="symbol"}
  The identifier of the overlay.
  :::

  :::field{name="value" type="any"}
  A value to resolve the overlay promise with.
  :::
::

### patch()

`patch(id: symbol, props: ComponentProps<T>): void`

Update an overlay by its `id`.

#### Parameters

::field-group
  :::field{required name="id" required="true" type="symbol"}
  The identifier of the overlay.
  :::

  :::field{required name="props" required="true" type="ComponentProps<T>"}
  An object of props to update on the rendered component.
  :::
::

### unmount()

`unmount(id: symbol): void`

Remove an overlay from the DOM by its `id`.

#### Parameters

::field-group
  :::field{required name="id" required="true" type="symbol"}
  The identifier of the overlay.
  :::
::

### isOpen()

`isOpen(id: symbol): boolean`

Check if an overlay is open using its `id`.

#### Parameters

::field-group
  :::field{required name="id" required="true" type="symbol"}
  The identifier of the overlay.
  :::
::

### overlays

`overlays: Overlay[]`

In-memory list of all overlays that were created.

## Instance API

### open()

`open(props?: ComponentProps<T>): Promise<OpenedOverlay<T>>`

Open the overlay.

#### Parameters

::field-group
  :::field{name="props" type="ComponentProps<T>"}
  An optional object of props to pass to the rendered component.
  :::
::

```vue
<script setup lang="ts">
import { LazyModalExample } from '#components'

const overlay = useOverlay()

const modal = overlay.create(LazyModalExample)

function openModal() {
  modal.open({
    title: 'Welcome'
  })
}
</script>
```

### close()

`close(value?: any): void`

Close the overlay.

#### Parameters

::field-group
  :::field{name="value" type="any"}
  A value to resolve the overlay promise with.
  :::
::

### patch()

`patch(props: ComponentProps<T>): void`

Update the props of the overlay.

#### Parameters

::field-group
  :::field{required name="props" required="true" type="ComponentProps<T>"}
  An object of props to update on the rendered component.
  :::
::

```vue
<script setup lang="ts">
import { LazyModalExample } from '#components'

const overlay = useOverlay()

const modal = overlay.create(LazyModalExample, {
  title: 'Welcome'
})

function openModal() {
  modal.open()
}

function updateModalTitle() {
  modal.patch({ title: 'Updated Title' })
}
</script>
```

## Example

Here's a complete example of how to use the `useOverlay` composable:

```vue
<script setup lang="ts">
import { ModalA, ModalB, SlideoverA } from '#components'

const overlay = useOverlay()

// Create with default props
const modalA = overlay.create(ModalA, { title: 'Welcome' })
const modalB = overlay.create(ModalB)

const slideoverA = overlay.create(SlideoverA)

const openModalA = () => {
  // Open modalA, but override the title prop
  modalA.open({ title: 'Hello' })
}

const openModalB = async () => {
  // Open modalB, and wait for its result
  const modalBInstance = modalB.open()

  const input = await modalBInstance

  // Pass the result from modalB to the slideover, and open it
  slideoverA.open({ input })
}
</script>

<template>
  <button @click="openModalA">Open Modal</button>
</template>
```

In this example, we're using the `useOverlay` composable to control multiple modals and slideovers.

## Caveats

### Provide / Inject

When opening overlays programmatically (e.g. modals, slideovers, etc), the overlay component can only access injected values from the component containing `PApp` (typically `app.vue` or layout components). This is because overlays are mounted outside of the page context by the `PApp` component.

As such, using `provide()` in pages or parent components isn't supported directly. To pass provided values to overlays, the recommended approach is to use props instead:

```vue
<script setup lang="ts">
import { LazyModalExample } from '#components'

const providedValue = inject('valueProvidedInPage')

const modal = overlay.create(LazyModalExample, {
  props: {
    providedValue,
    otherData: someValue
  }
})
</script>
```


# useToast

## Usage

Use the auto-imported `useToast` composable to display [Toast](https://akar.vinicunca.dev/docs/pohon/components/toast) notifications.

```vue
<script setup lang="ts">
const toast = useToast();
</script>
```

- The `useToast` composable uses Nuxt's `useState` to manage the toast state, ensuring reactivity across your application.
- A maximum of 5 toasts are displayed at a time. When adding a new toast that would exceed this limit, the oldest toast is automatically removed.
- When removing a toast, there's a 200ms delay before it's actually removed from the state, allowing for exit animations.

::warning
Make sure to wrap your app with the [`App`](https://akar.vinicunca.dev/docs/pohon/components/app) component which uses our [`Toaster`](https://github.com/vinicunca/akar/blob/main/packages/pohon/src/runtime/components/toaster.vue){rel="nofollow"} component which uses the [`AToastProvider`](https://akar.vinicunca.dev/docs/akar/components/toast#provider) component from Akar.
::

::tip{to="https://akar.vinicunca.dev/docs/pohon/components/toast"}
Learn how to customize the appearance and behavior of toasts in the **Toast** component documentation.
::

## API

`useToast()`

The `useToast` composable provides methods to manage toast notifications globally.

### add()

`add(toast: Partial<Toast>): Toast`

Adds a new toast notification.

#### Parameters

::field-group
  :::field{required name="toast" required="true" type="Partial<Toast>"}
  A partial `Toast` object with the following properties:
  
    ::::collapsible
      :::::field-group
        ::::::field{name="id" type="string | number"}
        A unique identifier for the toast. If not provided, a timestamp will be used.
        ::::::
      
        ::::::field{name="open" type="boolean"}
        Whether the toast is open. Defaults to `true`.
        ::::::
      
        ::::::field{name="..." type="Toast"}
        Other properties from the `Toast` interface.
        ::::::
      :::::
    ::::
  :::
::

**Returns:** The complete `Toast` object that was added.

```vue
<script setup lang="ts">
const toast = useToast();

function showToast() {
  toast.add({
    title: 'Success',
    description: 'Your action was completed successfully.',
    color: 'success'
  });
}
</script>
```

### update()

`update(id: string | number, toast: Partial<Toast>): void`

Updates an existing toast notification.

#### Parameters

::field-group
  :::field{required name="id" required="true" type="string | number"}
  The unique identifier of the toast to update.
  :::

  :::field{required name="toast" required="true" type="Partial<Toast>"}
  A partial `Toast` object with the properties to update.
  :::
::

```vue
<script setup lang="ts">
const toast = useToast();

function updateToast(id: string | number) {
  toast.update(id, {
    title: 'Updated Toast',
    description: 'This toast has been updated.'
  });
}
</script>
```

### remove()

`remove(id: string | number): void`

Removes a toast notification.

#### Parameters

::field-group
  :::field{required name="id" required="true" type="string | number"}
  The unique identifier of the toast to remove.
  :::
::

```vue
<script setup lang="ts">
const toast = useToast();

function removeToast(id: string | number) {
  toast.remove(id);
}
</script>
```

### clear()

`clear(): void`

Removes all toast notifications.

```vue
<script setup lang="ts">
const toast = useToast();

function clearAllToasts() {
  toast.clear();
}
</script>
```

### `toasts`

`toasts: Ref<Toast[]>`

- Type: `Ref<Toast[]>`
- Description: A reactive array containing all current toast notifications.