- ` or `
- ` elements correctly within `
- ` or `
- ` elements correctly within `
- ` or `
- ` elements correctly within `
- ` or `
- ` elements correctly within `
- ` or `
- ` elements correctly within `
- ` or `
- ` elements correctly within `
- ` or `
- ` elements correctly within `
- ` or `
- ` elements correctly within `
- ` or `
- ({
items: [
{ label: 'React', value: 'react' },
{ label: 'Solid', value: 'solid' },
{ label: 'Vue', value: 'vue' },
{ label: 'Svelte', value: 'svelte', disabled: true },
],
})
return (
setSelectedItems(e.items)}> ) } ``` ### Usage with a Form Library See how to use the Select component with popular form libraries: ```tsx import { Select, createListCollection } from '@ark-ui/react/select' import { ChevronDownIcon } from 'lucide-react' import { type SubmitHandler, useForm } from 'react-hook-form' interface Inputs { framework: string } export const FormLibrary = () => { const collection = createListCollection({ items: ['React', 'Solid', 'Vue'] }) const { register, handleSubmit } = useFormFramework Clear Frameworks {collection.items.map((item) => ({item.label} ✓ () const onSubmit: SubmitHandler = (data) => window.alert(JSON.stringify(data)) return ( ) } ``` ### Using the Field Component The `Field` component helps manage form-related state and accessibility attributes of a select. It includes handling ARIA labels, helper text, and error text to ensure proper accessibility. ```tsx import { Field } from '@ark-ui/react/field' import { Select, createListCollection } from '@ark-ui/react/select' import { ChevronDownIcon } from 'lucide-react' export const WithField = (props: Field.RootProps) => { const collection = createListCollection({ items: ['React', 'Solid', 'Vue'] }) return ( Label {collection.items.map((item) => ( {item} ✓ Additional Info Error Info Framework Clear Frameworks {collection.items.map((item) => ({item} ✓ ` Required: true Default Value: `undefined` Description: The collection of items **`asChild`** Type: `boolean` Required: false Default Value: `undefined` Description: Use the provided child element as the default rendered element, combining their props and behavior. **`closeOnSelect`** Type: `boolean` Required: false Default Value: `true` Description: Whether the select should close after an item is selected **`composite`** Type: `boolean` Required: false Default Value: `true` Description: Whether the select is a composed with other composite widgets like tabs or combobox **`defaultHighlightedValue`** Type: `string` Required: false Default Value: `undefined` Description: The initial value of the highlighted item when opened. Use when you don't need to control the highlighted value of the select. **`defaultOpen`** Type: `boolean` Required: false Default Value: `undefined` Description: Whether the select's open state is controlled by the user **`defaultValue`** Type: `string[]` Required: false Default Value: `undefined` Description: The initial default value of the select when rendered. Use when you don't need to control the value of the select. **`deselectable`** Type: `boolean` Required: false Default Value: `undefined` Description: Whether the value can be cleared by clicking the selected item. **Note:** this is only applicable for single selection **`disabled`** Type: `boolean` Required: false Default Value: `undefined` Description: Whether the select is disabled **`form`** Type: `string` Required: false Default Value: `undefined` Description: The associate form of the underlying select. **`highlightedValue`** Type: `string` Required: false Default Value: `undefined` Description: The controlled key of the highlighted item **`id`** Type: `string` Required: false Default Value: `undefined` Description: The unique identifier of the machine. **`ids`** Type: `Partial<{ root: string content: string control: string trigger: string clearTrigger: string label: string hiddenSelect: string positioner: string item(id: string | number): string itemGroup(id: string | number): string itemGroupLabel(id: string | number): string }>` Required: false Default Value: `undefined` Description: The ids of the elements in the select. Useful for composition. **`immediate`** Type: `boolean` Required: false Default Value: `undefined` Description: Whether to synchronize the present change immediately or defer it to the next frame **`invalid`** Type: `boolean` Required: false Default Value: `undefined` Description: Whether the select is invalid **`lazyMount`** Type: `boolean` Required: false Default Value: `false` Description: Whether to enable lazy mounting **`loopFocus`** Type: `boolean` Required: false Default Value: `false` Description: Whether to loop the keyboard navigation through the options **`multiple`** Type: `boolean` Required: false Default Value: `undefined` Description: Whether to allow multiple selection **`name`** Type: `string` Required: false Default Value: `undefined` Description: The `name` attribute of the underlying select. **`onExitComplete`** Type: `VoidFunction` Required: false Default Value: `undefined` Description: Function called when the animation ends in the closed state **`onFocusOutside`** Type: `(event: FocusOutsideEvent) => void` Required: false Default Value: `undefined` Description: Function called when the focus is moved outside the component **`onHighlightChange`** Type: `(details: HighlightChangeDetails ) => void` Required: false Default Value: `undefined` Description: The callback fired when the highlighted item changes. **`onInteractOutside`** Type: `(event: InteractOutsideEvent) => void` Required: false Default Value: `undefined` Description: Function called when an interaction happens outside the component **`onOpenChange`** Type: `(details: OpenChangeDetails) => void` Required: false Default Value: `undefined` Description: Function called when the popup is opened **`onPointerDownOutside`** Type: `(event: PointerDownOutsideEvent) => void` Required: false Default Value: `undefined` Description: Function called when the pointer is pressed down outside the component **`onValueChange`** Type: `(details: ValueChangeDetails ) => void` Required: false Default Value: `undefined` Description: The callback fired when the selected item changes. **`open`** Type: `boolean` Required: false Default Value: `undefined` Description: Whether the select menu is open **`positioning`** Type: `PositioningOptions` Required: false Default Value: `undefined` Description: The positioning options of the menu. **`present`** Type: `boolean` Required: false Default Value: `undefined` Description: Whether the node is present (controlled by the user) **`readOnly`** Type: `boolean` Required: false Default Value: `undefined` Description: Whether the select is read-only **`required`** Type: `boolean` Required: false Default Value: `undefined` Description: Whether the select is required **`scrollToIndexFn`** Type: `(details: ScrollToIndexDetails) => void` Required: false Default Value: `undefined` Description: Function to scroll to a specific index **`unmountOnExit`** Type: `boolean` Required: false Default Value: `false` Description: Whether to unmount on exit. **`value`** Type: `string[]` Required: false Default Value: `undefined` Description: The controlled keys of the selected items #### Data Attributes **`data-scope`**: select **`data-part`**: root **`data-invalid`**: Present when invalid **`data-readonly`**: Present when read-only ### ClearTrigger #### Props **`asChild`** Type: `boolean` Required: false Default Value: `undefined` Description: Use the provided child element as the default rendered element, combining their props and behavior. #### Data Attributes **`data-scope`**: select **`data-part`**: clear-trigger **`data-invalid`**: Present when invalid ### Content #### Props **`asChild`** Type: `boolean` Required: false Default Value: `undefined` Description: Use the provided child element as the default rendered element, combining their props and behavior. #### Data Attributes **`data-scope`**: select **`data-part`**: content **`data-state`**: "open" | "closed" **`data-placement`**: The placement of the content **`data-activedescendant`**: ### Control #### Props **`asChild`** Type: `boolean` Required: false Default Value: `undefined` Description: Use the provided child element as the default rendered element, combining their props and behavior. #### Data Attributes **`data-scope`**: select **`data-part`**: control **`data-state`**: "open" | "closed" **`data-focus`**: Present when focused **`data-disabled`**: Present when disabled **`data-invalid`**: Present when invalid ### HiddenSelect #### Props **`asChild`** Type: `boolean` Required: false Default Value: `undefined` Description: Use the provided child element as the default rendered element, combining their props and behavior. ### Indicator #### Props **`asChild`** Type: `boolean` Required: false Default Value: `undefined` Description: Use the provided child element as the default rendered element, combining their props and behavior. #### Data Attributes **`data-scope`**: select **`data-part`**: indicator **`data-state`**: "open" | "closed" **`data-disabled`**: Present when disabled **`data-invalid`**: Present when invalid **`data-readonly`**: Present when read-only ### ItemGroupLabel #### Props **`asChild`** Type: `boolean` Required: false Default Value: `undefined` Description: Use the provided child element as the default rendered element, combining their props and behavior. ### ItemGroup #### Props **`asChild`** Type: `boolean` Required: false Default Value: `undefined` Description: Use the provided child element as the default rendered element, combining their props and behavior. #### Data Attributes **`data-scope`**: select **`data-part`**: item-group **`data-disabled`**: Present when disabled ### ItemIndicator #### Props **`asChild`** Type: `boolean` Required: false Default Value: `undefined` Description: Use the provided child element as the default rendered element, combining their props and behavior. #### Data Attributes **`data-scope`**: select **`data-part`**: item-indicator **`data-state`**: "checked" | "unchecked" ### Item #### Props **`asChild`** Type: `boolean` Required: false Default Value: `undefined` Description: Use the provided child element as the default rendered element, combining their props and behavior. **`item`** Type: `any` Required: false Default Value: `undefined` Description: The item to render **`persistFocus`** Type: `boolean` Required: false Default Value: `undefined` Description: Whether hovering outside should clear the highlighted state #### Data Attributes **`data-scope`**: select **`data-part`**: item **`data-value`**: The value of the item **`data-state`**: "checked" | "unchecked" **`data-highlighted`**: Present when highlighted **`data-disabled`**: Present when disabled ### ItemText #### Props **`asChild`** Type: `boolean` Required: false Default Value: `undefined` Description: Use the provided child element as the default rendered element, combining their props and behavior. #### Data Attributes **`data-scope`**: select **`data-part`**: item-text **`data-state`**: "checked" | "unchecked" **`data-disabled`**: Present when disabled **`data-highlighted`**: Present when highlighted ### Label #### Props **`asChild`** Type: `boolean` Required: false Default Value: `undefined` Description: Use the provided child element as the default rendered element, combining their props and behavior. #### Data Attributes **`data-scope`**: select **`data-part`**: label **`data-disabled`**: Present when disabled **`data-invalid`**: Present when invalid **`data-readonly`**: Present when read-only ### List #### Props **`asChild`** Type: `boolean` Required: false Default Value: `undefined` Description: Use the provided child element as the default rendered element, combining their props and behavior. ### Positioner #### Props **`asChild`** Type: `boolean` Required: false Default Value: `undefined` Description: Use the provided child element as the default rendered element, combining their props and behavior. ### RootProvider #### Props **`value`** Type: `UseSelectReturn ` Required: true Default Value: `undefined` Description: undefined **`asChild`** Type: `boolean` Required: false Default Value: `undefined` Description: Use the provided child element as the default rendered element, combining their props and behavior. **`immediate`** Type: `boolean` Required: false Default Value: `undefined` Description: Whether to synchronize the present change immediately or defer it to the next frame **`lazyMount`** Type: `boolean` Required: false Default Value: `false` Description: Whether to enable lazy mounting **`onExitComplete`** Type: `VoidFunction` Required: false Default Value: `undefined` Description: Function called when the animation ends in the closed state **`present`** Type: `boolean` Required: false Default Value: `undefined` Description: Whether the node is present (controlled by the user) **`unmountOnExit`** Type: `boolean` Required: false Default Value: `false` Description: Whether to unmount on exit. ### Trigger #### Props **`asChild`** Type: `boolean` Required: false Default Value: `undefined` Description: Use the provided child element as the default rendered element, combining their props and behavior. #### Data Attributes **`data-scope`**: select **`data-part`**: trigger **`data-state`**: "open" | "closed" **`data-disabled`**: Present when disabled **`data-invalid`**: Present when invalid **`data-readonly`**: Present when read-only **`data-placement`**: The placement of the trigger **`data-placeholder-shown`**: Present when placeholder is shown ### ValueText #### Props **`asChild`** Type: `boolean` Required: false Default Value: `undefined` Description: Use the provided child element as the default rendered element, combining their props and behavior. **`placeholder`** Type: `string` Required: false Default Value: `undefined` Description: Text to display when no value is selected. #### Data Attributes **`data-scope`**: select **`data-part`**: value-text **`data-disabled`**: Present when disabled **`data-invalid`**: Present when invalid **`data-focus`**: Present when focused ## Accessibility Complies with the [Listbox WAI-ARIA design pattern](https://www.w3.org/WAI/ARIA/apg/patterns/listbox/). ### Keyboard Support **`Space`** Description: When focus is on trigger, opens the select and focuses the first selected item.
When focus is on the content, selects the highlighted item. **`Enter`** Description: When focus is on trigger, opens the select and focuses the first selected item.
When focus is on content, selects the focused item. **`ArrowDown`** Description: When focus is on trigger, opens the select.
When focus is on content, moves focus to the next item. **`ArrowUp`** Description: When focus is on trigger, opens the select.
When focus is on content, moves focus to the previous item. **`Esc`** Description: Closes the select and moves focus to trigger. **`A-Z + a-z`** Description: When focus is on trigger, selects the item whose label starts with the typed character.
When focus is on the listbox, moves focus to the next item with a label that starts with the typed character. # Select (SOLID) ## Anatomy To set up the select correctly, you'll need to understand its anatomy and how we name its parts. > Each part includes a `data-part` attribute to help identify them in the DOM. ## Examples Learn how to use the `Select` component in your project. Let's take a look at the most basic example: ```tsx import { Select, createListCollection } from '@ark-ui/solid/select' import { Index, Portal } from 'solid-js/web' export const Basic = () => { const collection = createListCollection({ items: ['React', 'Solid', 'Vue'] }) return (Framework ▼ Clear Frameworks {(item) => ( {item()} ✓ Framework Clear Frameworks {(item) => ( {item().label} ✓ Framework Clear {(item) => ( {item().label} ✓ - ({ items: [ { label: 'React', value: 'react' }, { label: 'Solid', value: 'solid' }, { label: 'Vue', value: 'vue' }, { label: 'Svelte', value: 'svelte', disabled: true }, ], }) return (
setSelectedItems(e.items)}> ) } ``` ### Usage with a Form Library See how to use the Select component with popular form libraries: ```tsx import { Select, createListCollection } from '@ark-ui/solid' import { createForm, getValue, setValue } from '@modular-forms/solid' import { createMemo } from 'solid-js' import { Index, Portal } from 'solid-js/web' export const WithFormLibrary = () => { const frameworks = createListCollection({ items: [ { label: 'React', value: 'react' }, { label: 'Solid', value: 'solid' }, { label: 'Vue', value: 'vue' }, ], }) const [formStore, { Form, Field }] = createForm({ initialValues: { value: 'solid' }, }) const value = createMemo(() => getValue(formStore, 'value')) return ( <>Framework Clear Frameworks {(item) => ( {item().label} ✓ Value is {value()}) } ``` ### Using the Field Component The `Field` component helps manage form-related state and accessibility attributes of a select. It includes handling ARIA labels, helper text, and error text to ensure proper accessibility. ```tsx import { Field } from '@ark-ui/solid/field' import { Select, createListCollection } from '@ark-ui/solid/select' import { ChevronDownIcon } from 'lucide-solid' import { Index } from 'solid-js/web' export const WithField = (props: Field.RootProps) => { const collection = createListCollection({ items: ['React', 'Solid', 'Vue'] }) return (Label Frameworks {(item) => ( {item()} ✓ Additional Info Error Info Framework ▼ Clear Frameworks {(item) => ( {item()} ✓ ` Required: true Default Value: `undefined` Description: The collection of items **`asChild`** Type: `(props: ParentProps<'div'>) => Element` Required: false Default Value: `undefined` Description: Use the provided child element as the default rendered element, combining their props and behavior. **`closeOnSelect`** Type: `boolean` Required: false Default Value: `true` Description: Whether the select should close after an item is selected **`composite`** Type: `boolean` Required: false Default Value: `true` Description: Whether the select is a composed with other composite widgets like tabs or combobox **`defaultHighlightedValue`** Type: `string` Required: false Default Value: `undefined` Description: The initial value of the highlighted item when opened. Use when you don't need to control the highlighted value of the select. **`defaultOpen`** Type: `boolean` Required: false Default Value: `undefined` Description: Whether the select's open state is controlled by the user **`defaultValue`** Type: `string[]` Required: false Default Value: `undefined` Description: The initial default value of the select when rendered. Use when you don't need to control the value of the select. **`deselectable`** Type: `boolean` Required: false Default Value: `undefined` Description: Whether the value can be cleared by clicking the selected item. **Note:** this is only applicable for single selection **`disabled`** Type: `boolean` Required: false Default Value: `undefined` Description: Whether the select is disabled **`form`** Type: `string` Required: false Default Value: `undefined` Description: The associate form of the underlying select. **`highlightedValue`** Type: `string` Required: false Default Value: `undefined` Description: The controlled key of the highlighted item **`ids`** Type: `Partial<{ root: string content: string control: string trigger: string clearTrigger: string label: string hiddenSelect: string positioner: string item(id: string | number): string itemGroup(id: string | number): string itemGroupLabel(id: string | number): string }>` Required: false Default Value: `undefined` Description: The ids of the elements in the select. Useful for composition. **`immediate`** Type: `boolean` Required: false Default Value: `undefined` Description: Whether to synchronize the present change immediately or defer it to the next frame **`invalid`** Type: `boolean` Required: false Default Value: `undefined` Description: Whether the select is invalid **`lazyMount`** Type: `boolean` Required: false Default Value: `false` Description: Whether to enable lazy mounting **`loopFocus`** Type: `boolean` Required: false Default Value: `false` Description: Whether to loop the keyboard navigation through the options **`multiple`** Type: `boolean` Required: false Default Value: `undefined` Description: Whether to allow multiple selection **`name`** Type: `string` Required: false Default Value: `undefined` Description: The `name` attribute of the underlying select. **`onExitComplete`** Type: `VoidFunction` Required: false Default Value: `undefined` Description: Function called when the animation ends in the closed state **`onFocusOutside`** Type: `(event: FocusOutsideEvent) => void` Required: false Default Value: `undefined` Description: Function called when the focus is moved outside the component **`onHighlightChange`** Type: `(details: HighlightChangeDetails ) => void` Required: false Default Value: `undefined` Description: The callback fired when the highlighted item changes. **`onInteractOutside`** Type: `(event: InteractOutsideEvent) => void` Required: false Default Value: `undefined` Description: Function called when an interaction happens outside the component **`onOpenChange`** Type: `(details: OpenChangeDetails) => void` Required: false Default Value: `undefined` Description: Function called when the popup is opened **`onPointerDownOutside`** Type: `(event: PointerDownOutsideEvent) => void` Required: false Default Value: `undefined` Description: Function called when the pointer is pressed down outside the component **`onValueChange`** Type: `(details: ValueChangeDetails ) => void` Required: false Default Value: `undefined` Description: The callback fired when the selected item changes. **`open`** Type: `boolean` Required: false Default Value: `undefined` Description: Whether the select menu is open **`positioning`** Type: `PositioningOptions` Required: false Default Value: `undefined` Description: The positioning options of the menu. **`present`** Type: `boolean` Required: false Default Value: `undefined` Description: Whether the node is present (controlled by the user) **`readOnly`** Type: `boolean` Required: false Default Value: `undefined` Description: Whether the select is read-only **`required`** Type: `boolean` Required: false Default Value: `undefined` Description: Whether the select is required **`scrollToIndexFn`** Type: `(details: ScrollToIndexDetails) => void` Required: false Default Value: `undefined` Description: Function to scroll to a specific index **`unmountOnExit`** Type: `boolean` Required: false Default Value: `false` Description: Whether to unmount on exit. **`value`** Type: `string[]` Required: false Default Value: `undefined` Description: The controlled keys of the selected items #### Data Attributes **`data-scope`**: select **`data-part`**: root **`data-invalid`**: Present when invalid **`data-readonly`**: Present when read-only ### ClearTrigger #### Props **`asChild`** Type: `(props: ParentProps<'button'>) => Element` Required: false Default Value: `undefined` Description: Use the provided child element as the default rendered element, combining their props and behavior. #### Data Attributes **`data-scope`**: select **`data-part`**: clear-trigger **`data-invalid`**: Present when invalid ### Content #### Props **`asChild`** Type: `(props: ParentProps<'div'>) => Element` Required: false Default Value: `undefined` Description: Use the provided child element as the default rendered element, combining their props and behavior. #### Data Attributes **`data-scope`**: select **`data-part`**: content **`data-state`**: "open" | "closed" **`data-placement`**: The placement of the content **`data-activedescendant`**: ### Control #### Props **`asChild`** Type: `(props: ParentProps<'div'>) => Element` Required: false Default Value: `undefined` Description: Use the provided child element as the default rendered element, combining their props and behavior. #### Data Attributes **`data-scope`**: select **`data-part`**: control **`data-state`**: "open" | "closed" **`data-focus`**: Present when focused **`data-disabled`**: Present when disabled **`data-invalid`**: Present when invalid ### HiddenSelect #### Props **`asChild`** Type: `(props: ParentProps<'select'>) => Element` Required: false Default Value: `undefined` Description: Use the provided child element as the default rendered element, combining their props and behavior. ### Indicator #### Props **`asChild`** Type: `(props: ParentProps<'div'>) => Element` Required: false Default Value: `undefined` Description: Use the provided child element as the default rendered element, combining their props and behavior. #### Data Attributes **`data-scope`**: select **`data-part`**: indicator **`data-state`**: "open" | "closed" **`data-disabled`**: Present when disabled **`data-invalid`**: Present when invalid **`data-readonly`**: Present when read-only ### ItemGroupLabel #### Props **`asChild`** Type: `(props: ParentProps<'div'>) => Element` Required: false Default Value: `undefined` Description: Use the provided child element as the default rendered element, combining their props and behavior. ### ItemGroup #### Props **`asChild`** Type: `(props: ParentProps<'div'>) => Element` Required: false Default Value: `undefined` Description: Use the provided child element as the default rendered element, combining their props and behavior. #### Data Attributes **`data-scope`**: select **`data-part`**: item-group **`data-disabled`**: Present when disabled ### ItemIndicator #### Props **`asChild`** Type: `(props: ParentProps<'div'>) => Element` Required: false Default Value: `undefined` Description: Use the provided child element as the default rendered element, combining their props and behavior. #### Data Attributes **`data-scope`**: select **`data-part`**: item-indicator **`data-state`**: "checked" | "unchecked" ### Item #### Props **`asChild`** Type: `(props: ParentProps<'div'>) => Element` Required: false Default Value: `undefined` Description: Use the provided child element as the default rendered element, combining their props and behavior. **`item`** Type: `any` Required: false Default Value: `undefined` Description: The item to render **`persistFocus`** Type: `boolean` Required: false Default Value: `undefined` Description: Whether hovering outside should clear the highlighted state #### Data Attributes **`data-scope`**: select **`data-part`**: item **`data-value`**: The value of the item **`data-state`**: "checked" | "unchecked" **`data-highlighted`**: Present when highlighted **`data-disabled`**: Present when disabled ### ItemText #### Props **`asChild`** Type: `(props: ParentProps<'span'>) => Element` Required: false Default Value: `undefined` Description: Use the provided child element as the default rendered element, combining their props and behavior. #### Data Attributes **`data-scope`**: select **`data-part`**: item-text **`data-state`**: "checked" | "unchecked" **`data-disabled`**: Present when disabled **`data-highlighted`**: Present when highlighted ### Label #### Props **`asChild`** Type: `(props: ParentProps<'label'>) => Element` Required: false Default Value: `undefined` Description: Use the provided child element as the default rendered element, combining their props and behavior. #### Data Attributes **`data-scope`**: select **`data-part`**: label **`data-disabled`**: Present when disabled **`data-invalid`**: Present when invalid **`data-readonly`**: Present when read-only ### List #### Props **`asChild`** Type: `(props: ParentProps<'div'>) => Element` Required: false Default Value: `undefined` Description: Use the provided child element as the default rendered element, combining their props and behavior. ### Positioner #### Props **`asChild`** Type: `(props: ParentProps<'div'>) => Element` Required: false Default Value: `undefined` Description: Use the provided child element as the default rendered element, combining their props and behavior. ### RootProvider #### Props **`value`** Type: `UseSelectReturn ` Required: true Default Value: `undefined` Description: undefined **`asChild`** Type: `(props: ParentProps<'div'>) => Element` Required: false Default Value: `undefined` Description: Use the provided child element as the default rendered element, combining their props and behavior. **`immediate`** Type: `boolean` Required: false Default Value: `undefined` Description: Whether to synchronize the present change immediately or defer it to the next frame **`lazyMount`** Type: `boolean` Required: false Default Value: `false` Description: Whether to enable lazy mounting **`onExitComplete`** Type: `VoidFunction` Required: false Default Value: `undefined` Description: Function called when the animation ends in the closed state **`present`** Type: `boolean` Required: false Default Value: `undefined` Description: Whether the node is present (controlled by the user) **`unmountOnExit`** Type: `boolean` Required: false Default Value: `false` Description: Whether to unmount on exit. ### Trigger #### Props **`asChild`** Type: `(props: ParentProps<'button'>) => Element` Required: false Default Value: `undefined` Description: Use the provided child element as the default rendered element, combining their props and behavior. #### Data Attributes **`data-scope`**: select **`data-part`**: trigger **`data-state`**: "open" | "closed" **`data-disabled`**: Present when disabled **`data-invalid`**: Present when invalid **`data-readonly`**: Present when read-only **`data-placement`**: The placement of the trigger **`data-placeholder-shown`**: Present when placeholder is shown ### ValueText #### Props **`asChild`** Type: `(props: ParentProps<'span'>) => Element` Required: false Default Value: `undefined` Description: Use the provided child element as the default rendered element, combining their props and behavior. **`placeholder`** Type: `string` Required: false Default Value: `undefined` Description: Text to display when no value is selected. #### Data Attributes **`data-scope`**: select **`data-part`**: value-text **`data-disabled`**: Present when disabled **`data-invalid`**: Present when invalid **`data-focus`**: Present when focused ## Accessibility Complies with the [Listbox WAI-ARIA design pattern](https://www.w3.org/WAI/ARIA/apg/patterns/listbox/). ### Keyboard Support **`Space`** Description: When focus is on trigger, opens the select and focuses the first selected item.
When focus is on the content, selects the highlighted item. **`Enter`** Description: When focus is on trigger, opens the select and focuses the first selected item.
When focus is on content, selects the focused item. **`ArrowDown`** Description: When focus is on trigger, opens the select.
When focus is on content, moves focus to the next item. **`ArrowUp`** Description: When focus is on trigger, opens the select.
When focus is on content, moves focus to the previous item. **`Esc`** Description: Closes the select and moves focus to trigger. **`A-Z + a-z`** Description: When focus is on trigger, selects the item whose label starts with the typed character.
When focus is on the listbox, moves focus to the next item with a label that starts with the typed character. # Select (VUE) ## Anatomy To set up the select correctly, you'll need to understand its anatomy and how we name its parts. > Each part includes a `data-part` attribute to help identify them in the DOM. ## Examples Learn how to use the `Select` component in your project. Let's take a look at the most basic example: ```vueFramework Clear Frameworks {{ item }} ✓ Framework Clear Frameworks {{ item.label }} ✓ Framework Clear Frameworks {{ item.label }} ✓ Framework Clear Frameworks {{ item.label }} ✓ Label Clear Frameworks {{ item }} ✓ Additional Info Error Info Framework Clear Frameworks {{ item }} ✓ ` Required: true Default Value: `undefined` Description: The collection of items **`asChild`** Type: `boolean` Required: false Default Value: `undefined` Description: Use the provided child element as the default rendered element, combining their props and behavior. **`closeOnSelect`** Type: `boolean` Required: false Default Value: `true` Description: Whether the select should close after an item is selected **`composite`** Type: `boolean` Required: false Default Value: `true` Description: Whether the select is a composed with other composite widgets like tabs or combobox **`defaultHighlightedValue`** Type: `string` Required: false Default Value: `undefined` Description: The initial value of the highlighted item when opened. Use when you don't need to control the highlighted value of the select. **`defaultOpen`** Type: `boolean` Required: false Default Value: `undefined` Description: Whether the select's open state is controlled by the user **`defaultValue`** Type: `string[]` Required: false Default Value: `undefined` Description: The initial default value of the select when rendered. Use when you don't need to control the value of the select. **`deselectable`** Type: `boolean` Required: false Default Value: `undefined` Description: Whether the value can be cleared by clicking the selected item. **Note:** this is only applicable for single selection **`disabled`** Type: `boolean` Required: false Default Value: `undefined` Description: Whether the select is disabled **`form`** Type: `string` Required: false Default Value: `undefined` Description: The associate form of the underlying select. **`highlightedValue`** Type: `string` Required: false Default Value: `undefined` Description: The controlled key of the highlighted item **`id`** Type: `string` Required: false Default Value: `undefined` Description: The unique identifier of the machine. **`ids`** Type: `Partial<{ root: string content: string control: string trigger: string clearTrigger: string label: string hiddenSelect: string positioner: string item(id: string | number): string itemGroup(id: string | number): string itemGroupLabel(id: string | number): string }>` Required: false Default Value: `undefined` Description: The ids of the elements in the select. Useful for composition. **`invalid`** Type: `boolean` Required: false Default Value: `undefined` Description: Whether the select is invalid **`lazyMount`** Type: `boolean` Required: false Default Value: `false` Description: Whether to enable lazy mounting **`loopFocus`** Type: `boolean` Required: false Default Value: `false` Description: Whether to loop the keyboard navigation through the options **`modelValue`** Type: `string[]` Required: false Default Value: `undefined` Description: The model value of the select **`multiple`** Type: `boolean` Required: false Default Value: `undefined` Description: Whether to allow multiple selection **`name`** Type: `string` Required: false Default Value: `undefined` Description: The `name` attribute of the underlying select. **`open`** Type: `boolean` Required: false Default Value: `undefined` Description: Whether the select menu is open **`positioning`** Type: `PositioningOptions` Required: false Default Value: `undefined` Description: The positioning options of the menu. **`readOnly`** Type: `boolean` Required: false Default Value: `undefined` Description: Whether the select is read-only **`required`** Type: `boolean` Required: false Default Value: `undefined` Description: Whether the select is required **`scrollToIndexFn`** Type: `(details: ScrollToIndexDetails) => void` Required: false Default Value: `undefined` Description: Function to scroll to a specific index **`unmountOnExit`** Type: `boolean` Required: false Default Value: `false` Description: Whether to unmount on exit. #### Data Attributes **`data-scope`**: select **`data-part`**: root **`data-invalid`**: Present when invalid **`data-readonly`**: Present when read-only ### ClearTrigger #### Props **`asChild`** Type: `boolean` Required: false Default Value: `undefined` Description: Use the provided child element as the default rendered element, combining their props and behavior. #### Data Attributes **`data-scope`**: select **`data-part`**: clear-trigger **`data-invalid`**: Present when invalid ### Content #### Props **`asChild`** Type: `boolean` Required: false Default Value: `undefined` Description: Use the provided child element as the default rendered element, combining their props and behavior. #### Data Attributes **`data-scope`**: select **`data-part`**: content **`data-state`**: "open" | "closed" **`data-placement`**: The placement of the content **`data-activedescendant`**: ### Control #### Props **`asChild`** Type: `boolean` Required: false Default Value: `undefined` Description: Use the provided child element as the default rendered element, combining their props and behavior. #### Data Attributes **`data-scope`**: select **`data-part`**: control **`data-state`**: "open" | "closed" **`data-focus`**: Present when focused **`data-disabled`**: Present when disabled **`data-invalid`**: Present when invalid ### HiddenSelect #### Props **`asChild`** Type: `boolean` Required: false Default Value: `undefined` Description: Use the provided child element as the default rendered element, combining their props and behavior. ### Indicator #### Props **`asChild`** Type: `boolean` Required: false Default Value: `undefined` Description: Use the provided child element as the default rendered element, combining their props and behavior. #### Data Attributes **`data-scope`**: select **`data-part`**: indicator **`data-state`**: "open" | "closed" **`data-disabled`**: Present when disabled **`data-invalid`**: Present when invalid **`data-readonly`**: Present when read-only ### ItemGroupLabel #### Props **`asChild`** Type: `boolean` Required: false Default Value: `undefined` Description: Use the provided child element as the default rendered element, combining their props and behavior. ### ItemGroup #### Props **`asChild`** Type: `boolean` Required: false Default Value: `undefined` Description: Use the provided child element as the default rendered element, combining their props and behavior. **`id`** Type: `string` Required: false Default Value: `undefined` Description: undefined #### Data Attributes **`data-scope`**: select **`data-part`**: item-group **`data-disabled`**: Present when disabled ### ItemIndicator #### Props **`asChild`** Type: `boolean` Required: false Default Value: `undefined` Description: Use the provided child element as the default rendered element, combining their props and behavior. #### Data Attributes **`data-scope`**: select **`data-part`**: item-indicator **`data-state`**: "checked" | "unchecked" ### Item #### Props **`asChild`** Type: `boolean` Required: false Default Value: `undefined` Description: Use the provided child element as the default rendered element, combining their props and behavior. **`item`** Type: `any` Required: false Default Value: `undefined` Description: The item to render **`persistFocus`** Type: `boolean` Required: false Default Value: `undefined` Description: Whether hovering outside should clear the highlighted state #### Data Attributes **`data-scope`**: select **`data-part`**: item **`data-value`**: The value of the item **`data-state`**: "checked" | "unchecked" **`data-highlighted`**: Present when highlighted **`data-disabled`**: Present when disabled ### ItemText #### Props **`asChild`** Type: `boolean` Required: false Default Value: `undefined` Description: Use the provided child element as the default rendered element, combining their props and behavior. #### Data Attributes **`data-scope`**: select **`data-part`**: item-text **`data-state`**: "checked" | "unchecked" **`data-disabled`**: Present when disabled **`data-highlighted`**: Present when highlighted ### Label #### Props **`asChild`** Type: `boolean` Required: false Default Value: `undefined` Description: Use the provided child element as the default rendered element, combining their props and behavior. #### Data Attributes **`data-scope`**: select **`data-part`**: label **`data-disabled`**: Present when disabled **`data-invalid`**: Present when invalid **`data-readonly`**: Present when read-only ### List #### Props **`asChild`** Type: `boolean` Required: false Default Value: `undefined` Description: Use the provided child element as the default rendered element, combining their props and behavior. ### Positioner #### Props **`asChild`** Type: `boolean` Required: false Default Value: `undefined` Description: Use the provided child element as the default rendered element, combining their props and behavior. ### RootProvider #### Props **`value`** Type: `SelectApi
When focus is on the content, selects the highlighted item. **`Enter`** Description: When focus is on trigger, opens the select and focuses the first selected item.
When focus is on content, selects the focused item. **`ArrowDown`** Description: When focus is on trigger, opens the select.
When focus is on content, moves focus to the next item. **`ArrowUp`** Description: When focus is on trigger, opens the select.
When focus is on content, moves focus to the previous item. **`Esc`** Description: Closes the select and moves focus to trigger. **`A-Z + a-z`** Description: When focus is on trigger, selects the item whose label starts with the typed character.
When focus is on the listbox, moves focus to the next item with a label that starts with the typed character. # Signature Pad (REACT) ## Anatomy To set up the signature pad correctly, you'll need to understand its anatomy and how we name its parts. > Each part includes a `data-part` attribute to help identify them in the DOM. ## Examples Learn how to use the `Signature Pad` component in your project. Let's take a look at the most basic example: ```tsx import { SignaturePad } from '@ark-ui/react/signature-pad' export const Basic = () => (Sign below Clear details.getDataUrl('image/png').then((url) => setImageUrl(url))}> {imageUrl &&Sign below Clear } ) } ``` ### Using the Field Component The `Field` component helps manage form-related state and accessibility attributes of a signature pad. It includes handling ARIA labels, helper text, and error text to ensure proper accessibility. ```tsx import { Field } from '@ark-ui/react/field' import { SignaturePad } from '@ark-ui/react/signature-pad' import { useState } from 'react' export const WithField = (props: Field.RootProps) => { const [value, setValue] = useState('') return (
details.getDataUrl('image/png').then((url) => setValue(url))}> Label Clear Additional Info Error Info Sign below Clear Sign below Clear () return ( <> details.getDataUrl('image/png').then((url) => setImageUrl(url))}> Sign below Clear details.getDataUrl('image/png').then((url) => setValue(url))}> Label Clear Additional Info Error Info Sign below Clear Sign below Clear Sign below Clear ``` ### Using the Field Component The `Field` component helps manage form-related state and accessibility attributes of a signature pad. It includes handling ARIA labels, helper text, and error text to ensure proper accessibility. ```vue
Label Clear Additional Info Error Info Sign below Clear ` Required: true Default Value: `undefined` Description: undefined **`asChild`** Type: `boolean` Required: false Default Value: `undefined` Description: Use the provided child element as the default rendered element, combining their props and behavior. ### Segment #### Props **`asChild`** Type: `boolean` Required: false Default Value: `undefined` Description: Use the provided child element as the default rendered element, combining their props and behavior. # Slider (REACT) ## Anatomy To set up the slider correctly, you'll need to understand its anatomy and how we name its parts. > Each part includes a `data-part` attribute to help identify them in the DOM. ## Examples Learn how to use the `Slider` component in your project. Let's take a look at the most basic example: ```tsx import { Slider } from '@ark-ui/react/slider' export const Basic = () => { return ( Label Label Label 0 * 50 * Label * * * Label Label console.log(details.value)} onValueChangeEnd={(details) => console.log(details.value)} > ) } ``` ### Changing the orientation By default, the slider is assumed to be horizontal. To change the orientation to vertical, set the orientation property in the machine's context to vertical. In this mode, the slider will use the arrow up and down keys to increment/decrement its value. > Don't forget to change the styles of the vertical slider by specifying its height ```tsx import { Slider } from '@ark-ui/react/slider' export const Vertical = () => { return (Label Label Label Label Label Label Label 0 * 50 * Label * * * Label Label console.log(details.value)} onValueChangeEnd={(details) => console.log(details.value)} > ) } ``` ### Changing the orientation By default, the slider is assumed to be horizontal. To change the orientation to vertical, set the orientation property in the machine's context to vertical. In this mode, the slider will use the arrow up and down keys to increment/decrement its value. > Don't forget to change the styles of the vertical slider by specifying its height ```tsx import { Slider } from '@ark-ui/solid/slider' export const Vertical = () => { return (Label Label Label Label Label Label Label 0 * 50 * Label * * * Label Label Label Label Label Label ` Required: true Default Value: `undefined` Description: undefined **`asChild`** Type: `boolean` Required: false Default Value: `undefined` Description: Use the provided child element as the default rendered element, combining their props and behavior. ### Thumb #### Props **`index`** Type: `number` Required: true Default Value: `undefined` Description: undefined **`asChild`** Type: `boolean` Required: false Default Value: `undefined` Description: Use the provided child element as the default rendered element, combining their props and behavior. **`name`** Type: `string` Required: false Default Value: `undefined` Description: undefined #### Data Attributes **`data-scope`**: slider **`data-part`**: thumb **`data-index`**: The index of the item **`data-name`**: **`data-disabled`**: Present when disabled **`data-orientation`**: The orientation of the thumb **`data-focus`**: Present when focused **`data-dragging`**: Present when in the dragging state ### Track #### Props **`asChild`** Type: `boolean` Required: false Default Value: `undefined` Description: Use the provided child element as the default rendered element, combining their props and behavior. #### Data Attributes **`data-scope`**: slider **`data-part`**: track **`data-disabled`**: Present when disabled **`data-invalid`**: Present when invalid **`data-dragging`**: Present when in the dragging state **`data-orientation`**: The orientation of the track **`data-focus`**: Present when focused ### ValueText #### Props **`asChild`** Type: `boolean` Required: false Default Value: `undefined` Description: Use the provided child element as the default rendered element, combining their props and behavior. #### Data Attributes **`data-scope`**: slider **`data-part`**: value-text **`data-disabled`**: Present when disabled **`data-orientation`**: The orientation of the valuetext **`data-invalid`**: Present when invalid **`data-focus`**: Present when focused ## Accessibility Complies with the [Slider WAI-ARIA design pattern](https://www.w3.org/WAI/ARIA/apg/patterns/slider/). ### Keyboard Support **`ArrowRight`** Description: Increments the slider based on defined step **`ArrowLeft`** Description: Decrements the slider based on defined step **`ArrowUp`** Description: Increases the value by the step amount. **`ArrowDown`** Description: Decreases the value by the step amount. **`PageUp`** Description: Increases the value by a larger step **`PageDown`** Description: Decreases the value by a larger step **`Shift + ArrowUp`** Description: Increases the value by a larger step **`Shift + ArrowDown`** Description: Decreases the value by a larger step **`Home`** Description: Sets the value to its minimum. **`End`** Description: Sets the value to its maximum. # Splitter (REACT) ## Anatomy To set up the splitter correctly, you'll need to understand its anatomy and how we name its parts. > Each part includes a `data-part` attribute to help identify them in the DOM. ## Examples Learn how to use the `Splitter` component in your project. Let's take a look at the most basic example: ```tsx import { Splitter } from '@ark-ui/react/splitter' export const Basic = () => ( A B {(splitter) => ( <> console.log('onResize', details)} onResizeStart={() => console.log('onResizeStart')} onResizeEnd={(details) => console.log('onResizeEnd', details)} onExpand={(details) => console.log('onExpand', details)} onCollapse={(details) => console.log('onCollapse', details)} > ) ``` ### Vertical Splitter By default, the Splitter component is horizontal. If you need a vertical splitter, use the `orientation` prop: ```tsx import { Splitter } from '@ark-ui/react/splitter' export const Vertical = () => (A B A B A B A B C A B A B {(api) => ( <> console.log('onResizeStart')} onResizeEnd={(details) => console.log('onResizeEnd', details)} onExpand={(details) => console.log('onExpand', details)} onCollapse={(details) => console.log('onCollapse', details)} > ) ``` ### Vertical Splitter By default, the Splitter component is horizontal. If you need a vertical splitter, use the `orientation` prop: ```tsx import { Splitter } from '@ark-ui/solid/splitter' export const Vertical = () => (A B A B A B A B C A B A B A B A B A B A B C A B ` Required: true Default Value: `undefined` Description: undefined **`asChild`** Type: `boolean` Required: false Default Value: `undefined` Description: Use the provided child element as the default rendered element, combining their props and behavior. ## Accessibility Complies with the [Window Splitter WAI-ARIA design pattern](https://www.w3.org/WAI/ARIA/apg/patterns/windowsplitter/). # Steps (REACT) ## Usage The `Steps` component is used to guide users through a series of steps in a process. - Supports horizontal and vertical orientations. - Support for changing the active step with the keyboard and pointer. - Support for linear and non-linear steps. ```jsx import { Steps } from '@ark-ui/react/steps' ``` ## Examples ### Basic Here's a basic example of the `Steps` component. ```tsx import { Steps } from '@ark-ui/react/steps' const items = [ { value: 'first', title: 'First', description: 'Contact Info' }, { value: 'second', title: 'Second', description: 'Date & Time' }, { value: 'third', title: 'Third', description: 'Select Rooms' }, ] export const Basic = () => { return ( {items.map((item, index) => ( {items.map((item, index) => ({index + 1} {item.title}{item.title} - {item.description} ))}Steps Complete - Thank you for filling out the form! Back Next {items.map((item, index) => ( {items.map((item, index) => ({index + 1} {item.title}{item.title} - {item.description} ))}Steps Complete - Thank you for filling out the form! Back Next {(item, index) => ( {index() + 1} {item.title}{(item, index) => ( {item.title} - {item.description} )}Steps Complete - Thank you for filling out the form! Back Next {(item, index) => ( {index() + 1} {item.title}{(item, index) => ( {item.title} - {item.description} )}Steps Complete - Thank you for filling out the form! Back Next {{ index + 1 }} {{ item.title }}{{ item.title }} - {{ item.description }} Steps Complete - Thank you for filling out the form! Back Next {{ index + 1 }} {{ item.title }}{{ item.title }} - {{ item.description }} Steps Complete - Thank you for filling out the form! Back Next ` Required: true Default Value: `undefined` Description: undefined **`asChild`** Type: `boolean` Required: false Default Value: `undefined` Description: Use the provided child element as the default rendered element, combining their props and behavior. ### Separator #### Props **`asChild`** Type: `boolean` Required: false Default Value: `undefined` Description: Use the provided child element as the default rendered element, combining their props and behavior. #### Data Attributes **`data-scope`**: steps **`data-part`**: separator **`data-orientation`**: The orientation of the separator **`data-complete`**: Present when the separator value is complete **`data-current`**: Present when current **`data-incomplete`**: ### Trigger #### Props **`asChild`** Type: `boolean` Required: false Default Value: `undefined` Description: Use the provided child element as the default rendered element, combining their props and behavior. #### Data Attributes **`data-scope`**: steps **`data-part`**: trigger **`data-state`**: "open" | "closed" **`data-orientation`**: The orientation of the trigger **`data-complete`**: Present when the trigger value is complete **`data-current`**: Present when current **`data-incomplete`**: # Switch (REACT) ## Anatomy To set up the switch correctly, you'll need to understand its anatomy and how we name its parts. > Each part includes a `data-part` attribute to help identify them in the DOM. ### Design impact on the asChild property The `Switch.Root` element of the switch is a `label` element. This is because the switch is a form control and should be associated with a label to provide context and meaning to the user. Otherwise, the HTML and accessibility structure will be invalid. > If you need to use the `asChild` property, make sure that the `label` element is the direct child of the `Switch.Root` > component. ## Examples Learn how to use the `Switch` component in your project. Let's take a look at the most basic example: ```tsx import { Switch } from '@ark-ui/react/switch' export const Basic = () => ( Label setChecked(e.checked)}> ) } ``` ### Render Prop Usage The Switch component also allows for a render prop, granting direct access to its internal state. This enables you to dynamically adjust and customize aspects of the component based on its current state: ```tsx import { Switch } from '@ark-ui/react/switch' export const RenderProp = () => (Label {(context) => Feature is {context.checked ? 'enabled' : 'disabled'} }Label Additional Info Error Info Label Label setChecked(e.checked)}> ) } ``` ### Render Prop Usage The Switch component also allows for a render prop, granting direct access to its internal state. This enables you to dynamically adjust and customize aspects of the component based on its current state: ```tsx import { Switch } from '@ark-ui/solid/switch' export const RenderProp = () => (Label {(context) => Feature is {context().checked ? 'enabled' : 'disabled'} }Label Additional Info Error Info Label Label Label Feature is {{ api.checked ? 'enabled' : 'disabled' }} Label Additional Info Error Info Label ` Required: true Default Value: `undefined` Description: undefined **`asChild`** Type: `boolean` Required: false Default Value: `undefined` Description: Use the provided child element as the default rendered element, combining their props and behavior. ### Thumb #### Props **`asChild`** Type: `boolean` Required: false Default Value: `undefined` Description: Use the provided child element as the default rendered element, combining their props and behavior. #### Data Attributes **`data-active`**: Present when active or pressed **`data-focus`**: Present when focused **`data-focus-visible`**: Present when focused with keyboard **`data-readonly`**: Present when read-only **`data-hover`**: Present when hovered **`data-disabled`**: Present when disabled **`data-state`**: "checked" | "unchecked" **`data-invalid`**: Present when invalid ## Accessibility Complies with the [Switch WAI-ARIA design pattern](https://www.w3.org/WAI/ARIA/apg/patterns/switch/). ### Keyboard Support **`Space + Enter`** Description: Toggle the switch # Tabs (REACT) ## Anatomy To set up the tabs correctly, you'll need to understand its anatomy and how we name its parts. > Each part includes a `data-part` attribute to help identify them in the DOM. ## Examples Learn how to use the `Tabs` component in your project. Let's take a look at the most basic example: ```tsx import { Tabs } from '@ark-ui/react/tabs' export const Basic = () => ( React Vue Solid React Content Vue Content Solid Content React Vue Solid React Content Vue Content Solid Content React Vue Solid React Content Vue Content Solid Content React Vue Solid React Content Vue Content Solid Content React Vue Solid React Content Vue Content Solid Content ('react') return ( setValue(e.value)}> ) } ``` ### Router Controlled Tabs When using frameworks like Next.js, Remix, or React Router, controlling the active tabs based on the URL can be useful. To achieve this, you need to do two things: - Set the `value` prop to the current URL path. - Listen to the `onValueChange` event and update the URL path. Here's an example using Remix Router ```tsx import { Tabs } from '@ark-ui/react/tabs' import { useLocation, useNavigate, Link } from '@remix-run/react' export default function App() { const { pathname } = useLocation() const navigate = useNavigate() const lastPathFragment = pathname.substring(pathname.lastIndexOf('/') + 1) const activeTab = lastPathFragment.length > 0 ? lastPathFragment : 'homepage' return (React Vue Solid React Content Vue Content Solid Content { navigate(`/${value === 'home' ? '' : value}`) }} > ) } ``` ### Vertical Tabs The default orientation of the tabs is `horizontal`. To change the orientation, set the `orientation` prop to `vertical`. ```tsx import { Tabs } from '@ark-ui/react/tabs' export const Vertical = () => (Home Page 1 Page 2 React Vue Solid React Content Vue Content Solid Content React Vue Solid React Content Vue Content Solid Content React Vue Solid React Content Vue Content Solid Content React Vue Solid React Content Vue Content Solid Content React Vue Solid React Content Vue Content Solid Content React Vue Solid React Content Vue Content Solid Content React Vue Solid React Content Vue Content Solid Content React Vue Solid React Content Vue Content Solid Content ('react') return ( setValue(e.value)}> ) } ``` ### Router Controlled Tabs When using frameworks like Next.js, Remix, or React Router, controlling the active tabs based on the URL can be useful. To achieve this, you need to do two things: - Set the `value` prop to the current URL path. - Listen to the `onValueChange` event and update the URL path. Here's an example using Remix Router ```tsx import { Tabs } from '@ark-ui/react/tabs' import { useLocation, useNavigate, Link } from '@remix-run/react' export default function App() { const { pathname } = useLocation() const navigate = useNavigate() const lastPathFragment = pathname.substring(pathname.lastIndexOf('/') + 1) const activeTab = lastPathFragment.length > 0 ? lastPathFragment : 'homepage' return (React Vue Solid React Content Vue Content Solid Content { navigate(`/${value === 'home' ? '' : value}`) }} > ) } ``` ### Vertical Tabs The default orientation of the tabs is `horizontal`. To change the orientation, set the `orientation` prop to `vertical`. ```tsx import { Tabs } from '@ark-ui/solid/tabs' export const Vertical = () => (Home Page 1 Page 2 React Vue Solid React Content Vue Content Solid Content React Vue Solid React Content Vue Content Solid Content React Vue Solid React Content Vue Content Solid Content React Vue Solid React Content Vue Content Solid Content React Vue Solid React Content Vue Content Solid Content React Vue Solid React Content Vue Content Solid Content React Vue Solid React Content Vue Content Solid Content React Vue Solid React Content Vue Content Solid Content Selected tab: {{ value }}
React Vue Solid React Content Vue Content Solid Content { navigate(`/${value === 'home' ? '' : value}`) }} > ) } ``` ### Vertical Tabs The default orientation of the tabs is `horizontal`. To change the orientation, set the `orientation` prop to `vertical`. ```vueHome Page 1 Page 2 React Vue Solid React Content Vue Content Solid Content React Vue Solid React Content Vue Content Solid Content React Vue Solid React Content Vue Content Solid Content ` Required: true Default Value: `undefined` Description: undefined **`asChild`** Type: `boolean` Required: false Default Value: `undefined` Description: Use the provided child element as the default rendered element, combining their props and behavior. **`lazyMount`** Type: `boolean` Required: false Default Value: `false` Description: Whether to enable lazy mounting **`unmountOnExit`** Type: `boolean` Required: false Default Value: `false` Description: Whether to unmount on exit. ## Accessibility Complies with the [Tabs WAI-ARIA design pattern](https://www.w3.org/WAI/ARIA/apg/patterns/tabs/). ### Keyboard Support **`Tab`** Description: When focus moves onto the tabs, focuses the active trigger. When a trigger is focused, moves focus to the active content. **`ArrowDown`** Description: Moves focus to the next trigger in vertical orientation and activates its associated content. **`ArrowRight`** Description: Moves focus to the next trigger in horizontal orientation and activates its associated content. **`ArrowUp`** Description: Moves focus to the previous trigger in vertical orientation and activates its associated content. **`ArrowLeft`** Description: Moves focus to the previous trigger in horizontal orientation and activates its associated content. **`Home`** Description: Moves focus to the first trigger and activates its associated content. **`End`** Description: Moves focus to the last trigger and activates its associated content. **`Enter + Space`** Description: In manual mode, when a trigger is focused, moves focus to its associated content. # Tags Input (REACT) ## Anatomy To set up the tags input correctly, you'll need to understand its anatomy and how we name its parts. > Each part includes a `data-part` attribute to help identify them in the DOM. ## Examples Learn how to use the `TagsInput` component in your project. Let's take a look at the most basic example: ```tsx import { TagsInput } from '@ark-ui/react/tags-input' export const Basic = () => { return ( {(tagsInput) => ( <> Frameworks {tagsInput.value.map((value, index) => ( {value} Delete Clear all )}{(tagsInput) => ( <> Frameworks {tagsInput.value.map((value, index) => ( {value} Delete Clear all )}{(tagsInput) => ( <> Frameworks {tagsInput.value.map((value, index) => ( {value} Delete Clear all )}{ return !details.value.includes(details.inputValue) }} > ) } ``` ### Blur behavior When the tags input is blurred, you can configure the action the component should take by passing the `blurBehavior` prop. - `add` — Adds the tag to the list of tags. - `clear` — Clears the tags input value. ```tsx import { TagsInput } from '@ark-ui/react/tags-input' export const BlurBehavior = () => { return ({(tagsInput) => ( <> Frameworks {tagsInput.value.map((value, index) => ( {value} Delete Clear all )}{(tagsInput) => ( <> Frameworks {tagsInput.value.map((value, index) => ( {value} Delete Clear all )}{(tagsInput) => ( <> Frameworks {tagsInput.value.map((value, index) => ( {value} Delete Clear all )}{(tagsInput) => ( <> Frameworks {tagsInput.value.map((value, index) => ( {value} Delete Clear all )}{ console.log('tags changed to:', details.value) }} onHighlightChange={(details) => { console.log('highlighted tag:', details.highlightedValue) }} onValueInvalid={(details) => { console.log('Invalid!', details.reason) }} max={3} allowOverflow validate={(details) => { return !details.value.includes(details.inputValue) }} > ) } ``` ### Using the Field Component The `Field` component helps manage form-related state and accessibility attributes of a tags input. It includes handling ARIA labels, helper text, and error text to ensure proper accessibility. ```tsx import { Field } from '@ark-ui/react/field' import { TagsInput } from '@ark-ui/react/tags-input' export const WithField = (props: Field.RootProps) => { return ({(tagsInput) => ( <> Frameworks {tagsInput.value.map((value, index) => ( {value} Delete Clear all )}{(tagsInput) => ( <> Label {tagsInput.value.map((value, index) => ( {value} Delete Clear all )}Additional Info Error Info {(tagsInput) => ( <> Frameworks {tagsInput.value.map((value, index) => ( {value} Delete Clear all )}
When the input has focus, it adds the value to the list of tags **`Delete`** Description: Deletes the tag item that has visual focus **`Control + V`** Description: When `addOnPaste` is set. Adds the pasted value as a tags # Tags Input (SOLID) ## Anatomy To set up the tags input correctly, you'll need to understand its anatomy and how we name its parts. > Each part includes a `data-part` attribute to help identify them in the DOM. ## Examples Learn how to use the `TagsInput` component in your project. Let's take a look at the most basic example: ```tsx import { TagsInput } from '@ark-ui/solid/tags-input' import { Index } from 'solid-js' export const Basic = () => ({(api) => ( <> Frameworks {(value, index) => ( {value()} Delete Clear All {(api) => ( <> Frameworks {(value, index) => ( {value()} Delete Clear all )}{(api) => ( <> Frameworks {(value, index) => ( {value()} Delete Clear all )}{ return !details.value.includes(details.inputValue) }} > ) } ``` ### Blur behavior When the tags input is blurred, you can configure the action the component should take by passing the `blurBehavior` prop. - `add` — Adds the tag to the list of tags. - `clear` — Clears the tags input value. ```tsx import { TagsInput } from '@ark-ui/solid/tags-input' import { Index } from 'solid-js' export const BlurBehavior = () => { return ({(api) => ( <> Frameworks {(value, index) => ( {value()} Delete Clear all )}{(api) => ( <> Frameworks {(value, index) => ( {value()} Delete Clear all )}{(api) => ( <> Frameworks {(value, index) => ( {value()} Delete Clear all )}{(api) => ( <> Frameworks {(value, index) => ( {value()} Delete Clear all )}{ console.log('tags changed to:', details.value) }} onHighlightChange={(details) => { console.log('highlighted tag:', details.highlightedValue) }} onValueInvalid={(details) => { console.log('Invalid!', details.reason) }} max={3} allowOverflow validate={(details) => { return !details.value.includes(details.inputValue) }} > ) } ``` ### Using the Field Component The `Field` component helps manage form-related state and accessibility attributes of a tags input. It includes handling ARIA labels, helper text, and error text to ensure proper accessibility. ```tsx import { Field } from '@ark-ui/solid/field' import { TagsInput } from '@ark-ui/solid/tags-input' import { Index } from 'solid-js' export const WithField = (props: Field.RootProps) => { return ({(api) => ( <> Frameworks {(value, index) => ( {value()} Delete Clear all )}{(tagsInput) => ( <> Label {(value, index) => ( {value()} Delete Clear all )}Additional Info Error Info {(api) => ( <> Frameworks {(value, index) => ( {value()} Delete Clear All
When the input has focus, it adds the value to the list of tags **`Delete`** Description: Deletes the tag item that has visual focus **`Control + V`** Description: When `addOnPaste` is set. Adds the pasted value as a tags # Tags Input (VUE) ## Anatomy To set up the tags input correctly, you'll need to understand its anatomy and how we name its parts. > Each part includes a `data-part` attribute to help identify them in the DOM. ## Examples Learn how to use the `TagsInput` component in your project. Let's take a look at the most basic example: ```vueFrameworks {{ value }} Delete Clear all Frameworks {{ value }} Delete Clear all Frameworks {{ value }} Delete Clear all Frameworks {{ value }} Delete Clear all Frameworks {{ value }} Delete Clear all Frameworks {{ value }} Delete Clear all Frameworks {{ value }} Delete Clear all Frameworks {{ value }} Delete Clear all Label {{ value }} Delete Clear all Additional Info Error Info Frameworks {{ value }} Delete Clear all ` Required: true Default Value: `undefined` Description: undefined **`asChild`** Type: `boolean` Required: false Default Value: `undefined` Description: Use the provided child element as the default rendered element, combining their props and behavior. ## Accessibility ### Keyboard Support **`ArrowLeft`** Description: Moves focus to the previous tag item **`ArrowRight`** Description: Moves focus to the next tag item **`Backspace`** Description: Deletes the tag item that has visual focus or the last tag item **`Enter`** Description: When a tag item has visual focus, it puts the tag in edit mode.
When the input has focus, it adds the value to the list of tags **`Delete`** Description: Deletes the tag item that has visual focus **`Control + V`** Description: When `addOnPaste` is set. Adds the pasted value as a tags # Timer (REACT) ## Examples Learn how to use the `Timer` component in your project. Let's take a look at the most basic example: ```tsx import { Timer } from '@ark-ui/react/timer' export const Basic = () => (: : : Play Resume Pause : : : console.log('Timer completed')} onTick={(details) => console.log('Tick:', details.formattedTime)} > ) ``` ### Using the Root Provider The `RootProvider` component provides a context for the timer. It accepts the value of the `useTimer` hook. You can leverage it to access the component state and methods from outside the timer. ```tsx import { Timer, useTimer } from '@ark-ui/react/timer' export const RootProvider = () => { const timer = useTimer({ targetMs: 60 * 60 * 1000 }) return ( <>: : : Play Resume Pause ` Required: true Default Value: `undefined` Description: undefined **`asChild`** Type: `boolean` Required: false Default Value: `undefined` Description: Use the provided child element as the default rendered element, combining their props and behavior. #### Data Attributes **`data-scope`**: timer **`data-part`**: item **`data-type`**: The type of the item ### RootProvider #### Props **`value`** Type: `UseTimerReturn` Required: true Default Value: `undefined` Description: undefined **`asChild`** Type: `boolean` Required: false Default Value: `undefined` Description: Use the provided child element as the default rendered element, combining their props and behavior. ### Separator #### Props **`asChild`** Type: `boolean` Required: false Default Value: `undefined` Description: Use the provided child element as the default rendered element, combining their props and behavior. # Timer (SOLID) ## Examples Learn how to use the `Timer` component in your project. Let's take a look at the most basic example: ```tsx import { Timer } from '@ark-ui/solid/timer' export const Basic = () => ( : : : Play Resume Pause : : : console.log('Timer completed')} onTick={(details) => console.log('Tick:', details.formattedTime)} > ) ``` ### Using the Root Provider The `RootProvider` component provides a context for the timer. It accepts the value of the `useTimer` hook. You can leverage it to access the component state and methods from outside the timer. ```tsx import { Timer, useTimer } from '@ark-ui/solid/timer' export const RootProvider = () => { const timer = useTimer({ targetMs: 60 * 60 * 1000 }) return ( <>: : : Play Resume Pause ` Required: true Default Value: `undefined` Description: undefined **`asChild`** Type: `(props: ParentProps<'div'>) => Element` Required: false Default Value: `undefined` Description: Use the provided child element as the default rendered element, combining their props and behavior. #### Data Attributes **`data-scope`**: timer **`data-part`**: item **`data-type`**: The type of the item ### RootProvider #### Props **`value`** Type: `UseTimerReturn` Required: true Default Value: `undefined` Description: undefined **`asChild`** Type: `(props: ParentProps<'div'>) => Element` Required: false Default Value: `undefined` Description: Use the provided child element as the default rendered element, combining their props and behavior. ### Separator #### Props **`asChild`** Type: `(props: ParentProps<'div'>) => Element` Required: false Default Value: `undefined` Description: Use the provided child element as the default rendered element, combining their props and behavior. # Timer (VUE) ## Examples Learn how to use the `Timer` component in your project. Let's take a look at the most basic example: ```vue : : : Play Resume Pause : : : : : : Play Resume Pause ` Required: true Default Value: `undefined` Description: undefined **`asChild`** Type: `boolean` Required: false Default Value: `undefined` Description: Use the provided child element as the default rendered element, combining their props and behavior. #### Data Attributes **`data-scope`**: timer **`data-part`**: item **`data-type`**: The type of the item ### RootProvider #### Props **`value`** Type: `TimerApi ` Required: true Default Value: `undefined` Description: undefined **`asChild`** Type: `boolean` Required: false Default Value: `undefined` Description: Use the provided child element as the default rendered element, combining their props and behavior. ### Separator #### Props **`asChild`** Type: `boolean` Required: false Default Value: `undefined` Description: Use the provided child element as the default rendered element, combining their props and behavior. # Toast (REACT) ## Anatomy To set up the toast correctly, you'll need to understand its anatomy and how we name its parts. > Each part includes a `data-part` attribute to help identify them in the DOM. ## Setup To use the Toast component, create the toast engine using the `createToaster` function. This function manages the placement and grouping of toasts, and provides a `toast` object needed to create toast notification. ```ts const toaster = createToaster({ placement: 'bottom-end', overlap: true, gap: 24, }) ``` ## Examples Here's an example of creating a toast using the `toast.create` method. ```tsx import { Toast, Toaster, createToaster } from '@ark-ui/react/toast' import { XIcon } from 'lucide-react' const toaster = createToaster({ placement: 'bottom-end', overlap: true, gap: 24, }) export const Basic = () => { return ( ) } ``` ### Update Toast To update a toast, use the `toast.update` method. ```tsx import { Toast, Toaster, createToaster } from '@ark-ui/react/toast' import { useRef } from 'react' const toaster = createToaster({ placement: 'bottom-end', overlap: true, gap: 24, }) export const Update = () => { const id = useRef{(toast) => ( {toast.title} {toast.description} (undefined) const createToast = () => { id.current = toaster.create({ title: 'Loading', description: 'Loading ...', type: 'info', }) } const updateToast = () => { if (!id.current) { return } toaster.update(id.current, { title: 'Success', description: 'Success!', }) } return ( ) } ``` ### Action To add an action to a toast, use the `toast.action` property. ```tsx import { Toast, Toaster, createToaster } from '@ark-ui/react/toast' const toaster = createToaster({ placement: 'bottom-end', gap: 24, }) export const Action = () => { return ({(toast) => ( {toast.title} {toast.description} ) } ``` ## API Reference ### Root #### Props **`asChild`** Type: `boolean` Required: false Default Value: `undefined` Description: Use the provided child element as the default rendered element, combining their props and behavior. #### Data Attributes **`data-scope`**: toast **`data-part`**: root **`data-state`**: "open" | "closed" **`data-type`**: The type of the item **`data-placement`**: The placement of the toast **`data-align`**: **`data-side`**: **`data-mounted`**: Present when mounted **`data-paused`**: Present when paused **`data-first`**: **`data-sibling`**: **`data-stack`**: **`data-overlap`**: Present when overlapping ### ActionTrigger #### Props **`asChild`** Type: `boolean` Required: false Default Value: `undefined` Description: Use the provided child element as the default rendered element, combining their props and behavior. ### CloseTrigger #### Props **`asChild`** Type: `boolean` Required: false Default Value: `undefined` Description: Use the provided child element as the default rendered element, combining their props and behavior. ### Description #### Props **`asChild`** Type: `boolean` Required: false Default Value: `undefined` Description: Use the provided child element as the default rendered element, combining their props and behavior. ### Title #### Props **`asChild`** Type: `boolean` Required: false Default Value: `undefined` Description: Use the provided child element as the default rendered element, combining their props and behavior. ### Toaster #### Props **`toaster`** Type: `CreateToasterReturn` Required: true Default Value: `undefined` Description: undefined **`asChild`** Type: `boolean` Required: false Default Value: `undefined` Description: Use the provided child element as the default rendered element, combining their props and behavior. **`dir`** Type: `'rtl' | 'ltr'` Required: false Default Value: `"ltr"` Description: The document's text/writing direction. **`getRootNode`** Type: `() => Node | ShadowRoot | Document` Required: false Default Value: `undefined` Description: A root node to correctly resolve document in custom environments. E.x.: Iframes, Electron. # Toast (SOLID) ## Anatomy To set up the toast correctly, you'll need to understand its anatomy and how we name its parts. > Each part includes a `data-part` attribute to help identify them in the DOM. ## Setup To use the Toast component, create the toast engine using the `createToaster` function. This function manages the placement and grouping of toasts, and provides a `toast` object needed to create toast notification. ```ts const toaster = createToaster({ placement: 'bottom-end', overlap: true, gap: 24, }) ``` ## Examples Here's an example of creating a toast using the `toast.create` method. ```tsx import { Toast, Toaster, createToaster } from '@ark-ui/solid/toast' import { XIcon } from 'lucide-solid' export const Basic = () => { const toaster = createToaster({ placement: 'bottom-end', gap: 24, }) return ({(toast) => ( {toast.title} {toast.description} {toast.action &&{toast.action?.label} }) } ``` ### Update Toast To update a toast, use the `toast.update` method. ```tsx import { Toast, Toaster, createToaster } from '@ark-ui/solid/toast' import { createSignal } from 'solid-js' const toaster = createToaster({ placement: 'bottom-end', overlap: true, gap: 24, }) export const Update = () => { const [id, setId] = createSignal{(toast) => ( {toast().title} {toast().description} (undefined) const createToast = () => { const newId = toaster.create({ title: 'Loading', description: 'Loading ...', type: 'info', }) setId(newId) } const updateToast = () => { const currentId = id() if (!currentId) { return } toaster.update(currentId, { title: 'Success', description: 'Success!', }) } return ( ) } ``` ### Action To add an action to a toast, use the `toast.action` property. ```tsx import { Toast, Toaster, createToaster } from '@ark-ui/solid/toast' const toaster = createToaster({ placement: 'bottom-end', gap: 24, }) export const Action = () => { return ({(toast) => ( {toast().title} {toast().description} ) } ``` ## API Reference ### Root #### Props **`asChild`** Type: `(props: ParentProps<'div'>) => Element` Required: false Default Value: `undefined` Description: Use the provided child element as the default rendered element, combining their props and behavior. #### Data Attributes **`data-scope`**: toast **`data-part`**: root **`data-state`**: "open" | "closed" **`data-type`**: The type of the item **`data-placement`**: The placement of the toast **`data-align`**: **`data-side`**: **`data-mounted`**: Present when mounted **`data-paused`**: Present when paused **`data-first`**: **`data-sibling`**: **`data-stack`**: **`data-overlap`**: Present when overlapping ### ActionTrigger #### Props **`asChild`** Type: `(props: ParentProps<'button'>) => Element` Required: false Default Value: `undefined` Description: Use the provided child element as the default rendered element, combining their props and behavior. ### CloseTrigger #### Props **`asChild`** Type: `(props: ParentProps<'button'>) => Element` Required: false Default Value: `undefined` Description: Use the provided child element as the default rendered element, combining their props and behavior. ### Description #### Props **`asChild`** Type: `(props: ParentProps<'div'>) => Element` Required: false Default Value: `undefined` Description: Use the provided child element as the default rendered element, combining their props and behavior. ### Title #### Props **`asChild`** Type: `(props: ParentProps<'div'>) => Element` Required: false Default Value: `undefined` Description: Use the provided child element as the default rendered element, combining their props and behavior. ### Toaster #### Props **`toaster`** Type: `CreateToasterReturn` Required: true Default Value: `undefined` Description: undefined **`asChild`** Type: `(props: ParentProps<'div'>) => Element` Required: false Default Value: `undefined` Description: Use the provided child element as the default rendered element, combining their props and behavior. **`dir`** Type: `'ltr' | 'rtl'` Required: false Default Value: `"ltr"` Description: The document's text/writing direction. **`getRootNode`** Type: `() => Node | ShadowRoot | Document` Required: false Default Value: `undefined` Description: A root node to correctly resolve document in custom environments. E.x.: Iframes, Electron. # Toast (VUE) ## Anatomy To set up the toast correctly, you'll need to understand its anatomy and how we name its parts. > Each part includes a `data-part` attribute to help identify them in the DOM. ## Setup To use the Toast component, create the toast engine using the `createToaster` function. This function manages the placement and grouping of toasts, and provides a `toast` object needed to create toast notification. ```ts const toaster = createToaster({ placement: 'bottom-end', overlap: true, gap: 24, }) ``` ## Examples Here's an example of creating a toast using the `toast.create` method. ```vue{(toast) => ( {toast().title} {toast().description} {toast().action &&{toast().action?.label} }{{ toast.title }} {{ toast.description }} Action Close ``` ### Action To add an action to a toast, use the `toast.action` property. ```vue{{ toast.title }} {{ toast.description }} ``` ## API Reference ### Root #### Props **`asChild`** Type: `boolean` Required: false Default Value: `undefined` Description: Use the provided child element as the default rendered element, combining their props and behavior. #### Data Attributes **`data-scope`**: toast **`data-part`**: root **`data-state`**: "open" | "closed" **`data-type`**: The type of the item **`data-placement`**: The placement of the toast **`data-align`**: **`data-side`**: **`data-mounted`**: Present when mounted **`data-paused`**: Present when paused **`data-first`**: **`data-sibling`**: **`data-stack`**: **`data-overlap`**: Present when overlapping ### ActionTrigger #### Props **`asChild`** Type: `boolean` Required: false Default Value: `undefined` Description: Use the provided child element as the default rendered element, combining their props and behavior. ### CloseTrigger #### Props **`asChild`** Type: `boolean` Required: false Default Value: `undefined` Description: Use the provided child element as the default rendered element, combining their props and behavior. ### Description #### Props **`asChild`** Type: `boolean` Required: false Default Value: `undefined` Description: Use the provided child element as the default rendered element, combining their props and behavior. ### Title #### Props **`asChild`** Type: `boolean` Required: false Default Value: `undefined` Description: Use the provided child element as the default rendered element, combining their props and behavior. ### Toaster #### Props **`toaster`** Type: `CreateToasterReturn` Required: true Default Value: `undefined` Description: undefined **`asChild`** Type: `boolean` Required: false Default Value: `undefined` Description: Use the provided child element as the default rendered element, combining their props and behavior. # Toggle Group (REACT) ## Anatomy To set up the toggle group correctly, you'll need to understand its anatomy and how we name its parts. > Each part includes a `data-part` attribute to help identify them in the DOM. ## Examples Learn how to use the `ToggleGroup` component in your project. Let's take a look at the most basic example: ```tsx import { ToggleGroup } from '@ark-ui/react/toggle-group' export const Basic = () => { return ({{ toast.title }} {{ toast.description }} {{ toast.action?.label }} A B C A B C A B C A B C A B C A B C A B C A B C A B C A B C A B C A B C ` Required: true Default Value: `undefined` Description: undefined **`asChild`** Type: `boolean` Required: false Default Value: `undefined` Description: Use the provided child element as the default rendered element, combining their props and behavior. ## Accessibility ### Keyboard Support **`Tab`** Description: Moves focus to either the pressed item or the first item in the group. **`Space`** Description: Activates/deactivates the item. **`Enter`** Description: Activates/deactivates the item. **`ArrowDown`** Description: Moves focus to the next item in the group. **`ArrowRight`** Description: Moves focus to the next item in the group. **`ArrowUp`** Description: Moves focus to the previous item in the group. **`ArrowLeft`** Description: Moves focus to the previous item in the group. **`Home`** Description: Moves focus to the first item. **`End`** Description: Moves focus to the last item. # Toggle (REACT) ## Examples Here's a basic example of how to use the `Toggle` component: ```tsx import { Toggle } from '@ark-ui/react/toggle' import { BoldIcon } from 'lucide-react' export const Basic = () => { return ( {pressed ? : } Volume is {pressed ? 'unmuted' : 'muted'}
}> | ReactPortal | Promise<...>` Required: false Default Value: `undefined` Description: The fallback content to render when the toggle is not pressed. #### Data Attributes **`data-scope`**: toggle **`data-part`**: indicator **`data-disabled`**: Present when disabled **`data-pressed`**: Present when pressed **`data-state`**: "on" | "off" # Toggle (SOLID) ## Examples Here's a basic example of how to use the `Toggle` component: ```tsx import { Toggle } from '@ark-ui/solid/toggle' import { BoldIcon } from 'lucide-solid' export const Basic = () => { return ( }> Volume is {pressed() ? 'unmuted' : 'muted'}
}> Volume is {{ pressed ? 'unmuted' : 'muted' }}
Hover Me I am a tooltip! Hover Me I am a tooltip! Hover Me {(tooltip) => This tooltip is open: {tooltip.open.toString()} }Hover Me Hover Me I am a tooltip! Hover Me I am a tooltip! Hover Me I am a tooltip! Hover Me I am a tooltip! Hover Me I am a tooltip! Hover Me {(context) => This tooltip is open: {context().open.toString()} }Hover Me I am a tooltip! Hover Me I am a tooltip! Hover Me I am a tooltip! Hover Me I am a tooltip! Hover Me I am a tooltip! Hover Me I am a tooltip! Hover Me This tooltip is open: {{ tooltip.open.toString() }} Hover Me Hover Me I am a tooltip! Hover Me I am a tooltip! Hover Me I am a tooltip! ` Required: true Default Value: `undefined` Description: undefined **`lazyMount`** Type: `boolean` Required: false Default Value: `false` Description: Whether to enable lazy mounting **`unmountOnExit`** Type: `boolean` Required: false Default Value: `false` Description: Whether to unmount on exit. ### Trigger #### Props **`asChild`** Type: `boolean` Required: false Default Value: `undefined` Description: Use the provided child element as the default rendered element, combining their props and behavior. #### Data Attributes **`data-scope`**: tooltip **`data-part`**: trigger **`data-expanded`**: Present when expanded **`data-state`**: "open" | "closed" ## Accessibility Complies with the [Tooltip WAI-ARIA design pattern](https://www.w3.org/WAI/ARIA/apg/patterns/tooltip/). ### Keyboard Support **`Tab`** Description: Opens/closes the tooltip without delay. **`Escape`** Description: If open, closes the tooltip without delay. # Tour (REACT) ## Features - Support for different step types such as "dialog", "floating", "tooltip" or "wait" - Support for customizable content per step - Wait steps for waiting for a specific selector to appear on the page before showing the next step - Flexible positioning of the tour dialog per step - Progress tracking shows users their progress through the tour ## Anatomy To set up the tour correctly, it's essential to understand its anatomy and the naming of its parts. > Each part includes a `data-part` attribute to help identify them in the DOM. ## Steps ### Using step types The tour machine supports different types of steps, allowing you to create a diverse and interactive tour experience. The available step types are defined in the `StepType` type: - `tooltip`: Displays the step content as a tooltip, typically positioned near the target element. - `dialog`: Shows the step content in a modal dialog centered on screen, useful for starting or ending the tour. This usually don't have a `target` defined. - `floating`: Presents the step content as a floating element, which can be positioned flexibly on the screen. This usually don't have a `target` defined. - `wait`: A special type that waits for a specific condition before proceeding to the next step. ```tsx const steps: TourStepDetails[] = [ { id: 'step-1', type: 'tooltip', placement: 'top-start', target: () => document.querySelector('#target-1'), title: 'Tooltip Step', description: 'This is a tooltip step', }, { id: 'step-2', type: 'dialog', title: 'Dialog Step', description: 'This is a dialog step', }, { id: 'step-3', type: 'floating', placement: 'top-start', title: 'Floating Step', description: 'This is a floating step', }, { id: 'step-4', type: 'wait', title: 'Wait Step', description: 'This is a wait step', effect({ next }) { // do something and go next // you can also return a cleanup }, }, ] ``` ### Configuring actions Every step supports a list of actions that are rendered in the step footer.Use the `actions` property to define each action. ```tsx const steps: TourStepDetails[] = [ { id: 'step-1', type: 'dialog', title: 'Dialog Step', description: 'This is a dialog step', actions: [{ label: 'Show me a tour!', action: 'next' }], }, ] ``` ### Changing tooltip placement Use the `placement` property to define the placement of the tooltip. ```tsx {5} const steps: TourStepDetails[] = [ { id: 'step-1', type: 'tooltip', placement: 'top-start', // ... }, ] ``` ### Hiding the arrow Set `arrow: false` in the step property to hide the tooltip arrow. This is only useful for tooltip steps. ```tsx {5} const steps: TourStepDetails[] = [ { id: 'step-1', type: 'tooltip', arrow: false, }, ] ``` ### Hiding the backdrop Set `backdrop: false` in the step property to hide the backdrop. This applies to all step types except the `wait` step. ```tsx {5} const steps: TourStepDetails[] = [ { id: 'step-1', type: 'dialog', backdrop: false, }, ] ``` ### Step Effects Step effects are functions that are called before a step is opened. They are useful for adding custom logic to a step. This function provides the following methods: - `next()`: Call this method to move to the next step. - `show()`: Call this method to show the current step. - `update(details: StepDetails)`: Call this method to update the details of the current step (say, after data has been fetched). ```tsx const steps: TourStepDetails[] = [ { id: 'step-1', type: 'tooltip', effect({ next, show, update }) { fetchData().then((res) => { // update the step details update({ title: res.title }) // then show show the step show() }) return () => { // cleanup fetch data } }, }, ] ``` ### Wait Steps Wait steps are useful when you need to wait for a specific condition before proceeding to the next step. Use the step `effect` function to perform an action and then call `next()` to move to the next step. > **Note:** You cannot call `show()` in a wait step. ```tsx const steps: TourStepDetails[] = [ { id: 'step-1', type: 'wait', effect({ next }) { const button = document.querySelector('#button') const listener = () => next() button.addEventListener('click', listener) return () => button.removeEventListener('click', listener) }, }, ] ``` ## Styling guide Ensure the `box-sizing` is set to `border-box` for the means of measuring the tour target. ```css * { box-sizing: border-box; } ``` Ensure the `body` has a `position` of `relative`. ```css body { position: relative; } ``` ## API Reference ### Root #### Props **`tour`** Type: `UseTourReturn` Required: true Default Value: `undefined` Description: undefined **`immediate`** Type: `boolean` Required: false Default Value: `undefined` Description: Whether to synchronize the present change immediately or defer it to the next frame **`lazyMount`** Type: `boolean` Required: false Default Value: `false` Description: Whether to enable lazy mounting **`onExitComplete`** Type: `VoidFunction` Required: false Default Value: `undefined` Description: Function called when the animation ends in the closed state **`present`** Type: `boolean` Required: false Default Value: `undefined` Description: Whether the node is present (controlled by the user) **`unmountOnExit`** Type: `boolean` Required: false Default Value: `false` Description: Whether to unmount on exit. ### ActionTrigger #### Props **`action`** Type: `StepAction` Required: true Default Value: `undefined` Description: undefined **`asChild`** Type: `boolean` Required: false Default Value: `undefined` Description: Use the provided child element as the default rendered element, combining their props and behavior. #### Data Attributes **`data-scope`**: tour **`data-part`**: action-trigger **`data-type`**: The type of the item **`data-disabled`**: Present when disabled ### Arrow #### Props **`asChild`** Type: `boolean` Required: false Default Value: `undefined` Description: Use the provided child element as the default rendered element, combining their props and behavior. ### ArrowTip #### Props **`asChild`** Type: `boolean` Required: false Default Value: `undefined` Description: Use the provided child element as the default rendered element, combining their props and behavior. ### Backdrop #### Props **`asChild`** Type: `boolean` Required: false Default Value: `undefined` Description: Use the provided child element as the default rendered element, combining their props and behavior. #### Data Attributes **`data-scope`**: tour **`data-part`**: backdrop **`data-state`**: "open" | "closed" **`data-type`**: The type of the item ### CloseTrigger #### Props **`asChild`** Type: `boolean` Required: false Default Value: `undefined` Description: Use the provided child element as the default rendered element, combining their props and behavior. #### Data Attributes **`data-scope`**: tour **`data-part`**: close-trigger **`data-type`**: The type of the item ### Content #### Props **`asChild`** Type: `boolean` Required: false Default Value: `undefined` Description: Use the provided child element as the default rendered element, combining their props and behavior. #### Data Attributes **`data-scope`**: tour **`data-part`**: content **`data-state`**: "open" | "closed" **`data-type`**: The type of the item **`data-placement`**: The placement of the content **`data-step`**: ### Control #### Props **`asChild`** Type: `boolean` Required: false Default Value: `undefined` Description: Use the provided child element as the default rendered element, combining their props and behavior. ### Description #### Props **`asChild`** Type: `boolean` Required: false Default Value: `undefined` Description: Use the provided child element as the default rendered element, combining their props and behavior. #### Data Attributes **`data-scope`**: tour **`data-part`**: description **`data-placement`**: The placement of the description ### Positioner #### Props **`asChild`** Type: `boolean` Required: false Default Value: `undefined` Description: Use the provided child element as the default rendered element, combining their props and behavior. #### Data Attributes **`data-scope`**: tour **`data-part`**: positioner **`data-type`**: The type of the item **`data-placement`**: The placement of the positioner ### ProgressText #### Props **`asChild`** Type: `boolean` Required: false Default Value: `undefined` Description: Use the provided child element as the default rendered element, combining their props and behavior. ### Spotlight #### Props **`asChild`** Type: `boolean` Required: false Default Value: `undefined` Description: Use the provided child element as the default rendered element, combining their props and behavior. ### Title #### Props **`asChild`** Type: `boolean` Required: false Default Value: `undefined` Description: Use the provided child element as the default rendered element, combining their props and behavior. #### Data Attributes **`data-scope`**: tour **`data-part`**: title **`data-placement`**: The placement of the title # Tour (SOLID) ## Features - Support for different step types such as "dialog", "floating", "tooltip" or "wait" - Support for customizable content per step - Wait steps for waiting for a specific selector to appear on the page before showing the next step - Flexible positioning of the tour dialog per step - Progress tracking shows users their progress through the tour ## Anatomy To set up the tour correctly, it's essential to understand its anatomy and the naming of its parts. > Each part includes a `data-part` attribute to help identify them in the DOM. ## Steps ### Using step types The tour machine supports different types of steps, allowing you to create a diverse and interactive tour experience. The available step types are defined in the `StepType` type: - `tooltip`: Displays the step content as a tooltip, typically positioned near the target element. - `dialog`: Shows the step content in a modal dialog centered on screen, useful for starting or ending the tour. This usually don't have a `target` defined. - `floating`: Presents the step content as a floating element, which can be positioned flexibly on the screen. This usually don't have a `target` defined. - `wait`: A special type that waits for a specific condition before proceeding to the next step. ```tsx const steps: TourStepDetails[] = [ { id: 'step-1', type: 'tooltip', placement: 'top-start', target: () => document.querySelector('#target-1'), title: 'Tooltip Step', description: 'This is a tooltip step', }, { id: 'step-2', type: 'dialog', title: 'Dialog Step', description: 'This is a dialog step', }, { id: 'step-3', type: 'floating', placement: 'top-start', title: 'Floating Step', description: 'This is a floating step', }, { id: 'step-4', type: 'wait', title: 'Wait Step', description: 'This is a wait step', effect({ next }) { // do something and go next // you can also return a cleanup }, }, ] ``` ### Configuring actions Every step supports a list of actions that are rendered in the step footer.Use the `actions` property to define each action. ```tsx const steps: TourStepDetails[] = [ { id: 'step-1', type: 'dialog', title: 'Dialog Step', description: 'This is a dialog step', actions: [{ label: 'Show me a tour!', action: 'next' }], }, ] ``` ### Changing tooltip placement Use the `placement` property to define the placement of the tooltip. ```tsx {5} const steps: TourStepDetails[] = [ { id: 'step-1', type: 'tooltip', placement: 'top-start', // ... }, ] ``` ### Hiding the arrow Set `arrow: false` in the step property to hide the tooltip arrow. This is only useful for tooltip steps. ```tsx {5} const steps: TourStepDetails[] = [ { id: 'step-1', type: 'tooltip', arrow: false, }, ] ``` ### Hiding the backdrop Set `backdrop: false` in the step property to hide the backdrop. This applies to all step types except the `wait` step. ```tsx {5} const steps: TourStepDetails[] = [ { id: 'step-1', type: 'dialog', backdrop: false, }, ] ``` ### Step Effects Step effects are functions that are called before a step is opened. They are useful for adding custom logic to a step. This function provides the following methods: - `next()`: Call this method to move to the next step. - `show()`: Call this method to show the current step. - `update(details: StepDetails)`: Call this method to update the details of the current step (say, after data has been fetched). ```tsx const steps: TourStepDetails[] = [ { id: 'step-1', type: 'tooltip', effect({ next, show, update }) { fetchData().then((res) => { // update the step details update({ title: res.title }) // then show show the step show() }) return () => { // cleanup fetch data } }, }, ] ``` ### Wait Steps Wait steps are useful when you need to wait for a specific condition before proceeding to the next step. Use the step `effect` function to perform an action and then call `next()` to move to the next step. > **Note:** You cannot call `show()` in a wait step. ```tsx const steps: TourStepDetails[] = [ { id: 'step-1', type: 'wait', effect({ next }) { const button = document.querySelector('#button') const listener = () => next() button.addEventListener('click', listener) return () => button.removeEventListener('click', listener) }, }, ] ``` ## Styling guide Ensure the `box-sizing` is set to `border-box` for the means of measuring the tour target. ```css * { box-sizing: border-box; } ``` Ensure the `body` has a `position` of `relative`. ```css body { position: relative; } ``` ## API Reference ### Root #### Props **`tour`** Type: `UseTourReturn` Required: true Default Value: `undefined` Description: undefined **`immediate`** Type: `boolean` Required: false Default Value: `undefined` Description: Whether to synchronize the present change immediately or defer it to the next frame **`lazyMount`** Type: `boolean` Required: false Default Value: `false` Description: Whether to enable lazy mounting **`onExitComplete`** Type: `VoidFunction` Required: false Default Value: `undefined` Description: Function called when the animation ends in the closed state **`present`** Type: `boolean` Required: false Default Value: `undefined` Description: Whether the node is present (controlled by the user) **`unmountOnExit`** Type: `boolean` Required: false Default Value: `false` Description: Whether to unmount on exit. ### ActionTrigger #### Props **`action`** Type: `StepAction` Required: true Default Value: `undefined` Description: undefined **`asChild`** Type: `(props: ParentProps<'button'>) => Element` Required: false Default Value: `undefined` Description: Use the provided child element as the default rendered element, combining their props and behavior. #### Data Attributes **`data-scope`**: tour **`data-part`**: action-trigger **`data-type`**: The type of the item **`data-disabled`**: Present when disabled ### Arrow #### Props **`asChild`** Type: `(props: ParentProps<'div'>) => Element` Required: false Default Value: `undefined` Description: Use the provided child element as the default rendered element, combining their props and behavior. ### ArrowTip #### Props **`asChild`** Type: `(props: ParentProps<'div'>) => Element` Required: false Default Value: `undefined` Description: Use the provided child element as the default rendered element, combining their props and behavior. ### Backdrop #### Props **`asChild`** Type: `(props: ParentProps<'div'>) => Element` Required: false Default Value: `undefined` Description: Use the provided child element as the default rendered element, combining their props and behavior. #### Data Attributes **`data-scope`**: tour **`data-part`**: backdrop **`data-state`**: "open" | "closed" **`data-type`**: The type of the item ### CloseTrigger #### Props **`asChild`** Type: `(props: ParentProps<'button'>) => Element` Required: false Default Value: `undefined` Description: Use the provided child element as the default rendered element, combining their props and behavior. #### Data Attributes **`data-scope`**: tour **`data-part`**: close-trigger **`data-type`**: The type of the item ### Content #### Props **`asChild`** Type: `(props: ParentProps<'div'>) => Element` Required: false Default Value: `undefined` Description: Use the provided child element as the default rendered element, combining their props and behavior. #### Data Attributes **`data-scope`**: tour **`data-part`**: content **`data-state`**: "open" | "closed" **`data-type`**: The type of the item **`data-placement`**: The placement of the content **`data-step`**: ### Control #### Props **`asChild`** Type: `(props: ParentProps<'div'>) => Element` Required: false Default Value: `undefined` Description: Use the provided child element as the default rendered element, combining their props and behavior. ### Description #### Props **`asChild`** Type: `(props: ParentProps<'div'>) => Element` Required: false Default Value: `undefined` Description: Use the provided child element as the default rendered element, combining their props and behavior. #### Data Attributes **`data-scope`**: tour **`data-part`**: description **`data-placement`**: The placement of the description ### Positioner #### Props **`asChild`** Type: `(props: ParentProps<'div'>) => Element` Required: false Default Value: `undefined` Description: Use the provided child element as the default rendered element, combining their props and behavior. #### Data Attributes **`data-scope`**: tour **`data-part`**: positioner **`data-type`**: The type of the item **`data-placement`**: The placement of the positioner ### ProgressText #### Props **`asChild`** Type: `(props: ParentProps<'div'>) => Element` Required: false Default Value: `undefined` Description: Use the provided child element as the default rendered element, combining their props and behavior. ### Spotlight #### Props **`asChild`** Type: `(props: ParentProps<'div'>) => Element` Required: false Default Value: `undefined` Description: Use the provided child element as the default rendered element, combining their props and behavior. ### Title #### Props **`asChild`** Type: `(props: ParentProps<'h2'>) => Element` Required: false Default Value: `undefined` Description: Use the provided child element as the default rendered element, combining their props and behavior. #### Data Attributes **`data-scope`**: tour **`data-part`**: title **`data-placement`**: The placement of the title # Tour (VUE) ## Features - Support for different step types such as "dialog", "floating", "tooltip" or "wait" - Support for customizable content per step - Wait steps for waiting for a specific selector to appear on the page before showing the next step - Flexible positioning of the tour dialog per step - Progress tracking shows users their progress through the tour ## Anatomy To set up the tour correctly, it's essential to understand its anatomy and the naming of its parts. > Each part includes a `data-part` attribute to help identify them in the DOM. ## Steps ### Using step types The tour machine supports different types of steps, allowing you to create a diverse and interactive tour experience. The available step types are defined in the `StepType` type: - `tooltip`: Displays the step content as a tooltip, typically positioned near the target element. - `dialog`: Shows the step content in a modal dialog centered on screen, useful for starting or ending the tour. This usually don't have a `target` defined. - `floating`: Presents the step content as a floating element, which can be positioned flexibly on the screen. This usually don't have a `target` defined. - `wait`: A special type that waits for a specific condition before proceeding to the next step. ```tsx const steps: TourStepDetails[] = [ { id: 'step-1', type: 'tooltip', placement: 'top-start', target: () => document.querySelector('#target-1'), title: 'Tooltip Step', description: 'This is a tooltip step', }, { id: 'step-2', type: 'dialog', title: 'Dialog Step', description: 'This is a dialog step', }, { id: 'step-3', type: 'floating', placement: 'top-start', title: 'Floating Step', description: 'This is a floating step', }, { id: 'step-4', type: 'wait', title: 'Wait Step', description: 'This is a wait step', effect({ next }) { // do something and go next // you can also return a cleanup }, }, ] ``` ### Configuring actions Every step supports a list of actions that are rendered in the step footer.Use the `actions` property to define each action. ```tsx const steps: TourStepDetails[] = [ { id: 'step-1', type: 'dialog', title: 'Dialog Step', description: 'This is a dialog step', actions: [{ label: 'Show me a tour!', action: 'next' }], }, ] ``` ### Changing tooltip placement Use the `placement` property to define the placement of the tooltip. ```tsx {5} const steps: TourStepDetails[] = [ { id: 'step-1', type: 'tooltip', placement: 'top-start', // ... }, ] ``` ### Hiding the arrow Set `arrow: false` in the step property to hide the tooltip arrow. This is only useful for tooltip steps. ```tsx {5} const steps: TourStepDetails[] = [ { id: 'step-1', type: 'tooltip', arrow: false, }, ] ``` ### Hiding the backdrop Set `backdrop: false` in the step property to hide the backdrop. This applies to all step types except the `wait` step. ```tsx {5} const steps: TourStepDetails[] = [ { id: 'step-1', type: 'dialog', backdrop: false, }, ] ``` ### Step Effects Step effects are functions that are called before a step is opened. They are useful for adding custom logic to a step. This function provides the following methods: - `next()`: Call this method to move to the next step. - `show()`: Call this method to show the current step. - `update(details: StepDetails)`: Call this method to update the details of the current step (say, after data has been fetched). ```tsx const steps: TourStepDetails[] = [ { id: 'step-1', type: 'tooltip', effect({ next, show, update }) { fetchData().then((res) => { // update the step details update({ title: res.title }) // then show show the step show() }) return () => { // cleanup fetch data } }, }, ] ``` ### Wait Steps Wait steps are useful when you need to wait for a specific condition before proceeding to the next step. Use the step `effect` function to perform an action and then call `next()` to move to the next step. > **Note:** You cannot call `show()` in a wait step. ```tsx const steps: TourStepDetails[] = [ { id: 'step-1', type: 'wait', effect({ next }) { const button = document.querySelector('#button') const listener = () => next() button.addEventListener('click', listener) return () => button.removeEventListener('click', listener) }, }, ] ``` ## Styling guide Ensure the `box-sizing` is set to `border-box` for the means of measuring the tour target. ```css * { box-sizing: border-box; } ``` Ensure the `body` has a `position` of `relative`. ```css body { position: relative; } ``` ## API Reference ### Root #### Props **`tour`** Type: `TourApi ` Required: true Default Value: `undefined` Description: undefined **`lazyMount`** Type: `boolean` Required: false Default Value: `false` Description: Whether to enable lazy mounting **`unmountOnExit`** Type: `boolean` Required: false Default Value: `false` Description: Whether to unmount on exit. #### Emits **`focusOutside`** Type: `[event: FocusOutsideEvent]` Description: Function called when the focus is moved outside the component **`interactOutside`** Type: `[event: InteractOutsideEvent]` Description: Function called when an interaction happens outside the component **`pointerDownOutside`** Type: `[event: PointerDownOutsideEvent]` Description: Function called when the pointer is pressed down outside the component **`statusChange`** Type: `[details: StatusChangeDetails]` Description: Callback when the tour is opened or closed **`stepChange`** Type: `[details: StepChangeDetails]` Description: Callback when the highlighted step changes **`stepsChange`** Type: `[details: { steps: StepDetails[] }]` Description: Callback when the steps change ### ActionTrigger #### Props **`action`** Type: `StepAction` Required: true Default Value: `undefined` Description: undefined **`asChild`** Type: `boolean` Required: false Default Value: `undefined` Description: Use the provided child element as the default rendered element, combining their props and behavior. #### Data Attributes **`data-scope`**: tour **`data-part`**: action-trigger **`data-type`**: The type of the item **`data-disabled`**: Present when disabled ### Arrow #### Props **`asChild`** Type: `boolean` Required: false Default Value: `undefined` Description: Use the provided child element as the default rendered element, combining their props and behavior. ### ArrowTip #### Props **`asChild`** Type: `boolean` Required: false Default Value: `undefined` Description: Use the provided child element as the default rendered element, combining their props and behavior. ### Backdrop #### Props **`asChild`** Type: `boolean` Required: false Default Value: `undefined` Description: Use the provided child element as the default rendered element, combining their props and behavior. #### Data Attributes **`data-scope`**: tour **`data-part`**: backdrop **`data-state`**: "open" | "closed" **`data-type`**: The type of the item ### CloseTrigger #### Props **`asChild`** Type: `boolean` Required: false Default Value: `undefined` Description: Use the provided child element as the default rendered element, combining their props and behavior. #### Data Attributes **`data-scope`**: tour **`data-part`**: close-trigger **`data-type`**: The type of the item ### Content #### Props **`asChild`** Type: `boolean` Required: false Default Value: `undefined` Description: Use the provided child element as the default rendered element, combining their props and behavior. #### Data Attributes **`data-scope`**: tour **`data-part`**: content **`data-state`**: "open" | "closed" **`data-type`**: The type of the item **`data-placement`**: The placement of the content **`data-step`**: ### Control #### Props **`asChild`** Type: `boolean` Required: false Default Value: `undefined` Description: Use the provided child element as the default rendered element, combining their props and behavior. ### Description #### Props **`asChild`** Type: `boolean` Required: false Default Value: `undefined` Description: Use the provided child element as the default rendered element, combining their props and behavior. #### Data Attributes **`data-scope`**: tour **`data-part`**: description **`data-placement`**: The placement of the description ### Positioner #### Props **`asChild`** Type: `boolean` Required: false Default Value: `undefined` Description: Use the provided child element as the default rendered element, combining their props and behavior. #### Data Attributes **`data-scope`**: tour **`data-part`**: positioner **`data-type`**: The type of the item **`data-placement`**: The placement of the positioner ### ProgressText #### Props **`asChild`** Type: `boolean` Required: false Default Value: `undefined` Description: Use the provided child element as the default rendered element, combining their props and behavior. ### Spotlight #### Props **`asChild`** Type: `boolean` Required: false Default Value: `undefined` Description: Use the provided child element as the default rendered element, combining their props and behavior. ### Title #### Props **`asChild`** Type: `boolean` Required: false Default Value: `undefined` Description: Use the provided child element as the default rendered element, combining their props and behavior. #### Data Attributes **`data-scope`**: tour **`data-part`**: title **`data-placement`**: The placement of the title # Tree View (REACT) ## Anatomy To set up the tree view component correctly, you'll need to understand its anatomy and how we name its parts. > Each part includes a `data-part` attribute to help identify them in the DOM. ## Examples Learn how to use the `TreeView` component in your project. Let's take a look at the most basic example: ```tsx import { TreeView, createTreeCollection } from '@ark-ui/react/tree-view' import { CheckSquareIcon, ChevronRightIcon, FileIcon, FolderIcon } from 'lucide-react' interface Node { id: string name: string children?: Node[] } const collection = createTreeCollection ({ nodeToValue: (node) => node.id, nodeToString: (node) => node.name, rootNode: { id: 'ROOT', name: '', children: [ { id: 'node_modules', name: 'node_modules', children: [ { id: 'node_modules/zag-js', name: 'zag-js' }, { id: 'node_modules/pandacss', name: 'panda' }, { id: 'node_modules/@types', name: '@types', children: [ { id: 'node_modules/@types/react', name: 'react' }, { id: 'node_modules/@types/react-dom', name: 'react-dom' }, ], }, ], }, { id: 'src', name: 'src', children: [ { id: 'src/app.tsx', name: 'app.tsx' }, { id: 'src/index.ts', name: 'index.ts' }, ], }, { id: 'panda.config', name: 'panda.config.ts' }, { id: 'package.json', name: 'package.json' }, { id: 'renovate.json', name: 'renovate.json' }, { id: 'readme.md', name: 'README.md' }, ], }, }) export const Basic = () => { return ( Tree {collection.rootNode.children?.map((node, index) => )} ) => { const { node, indexPath } = props return ( {node.children ? ( ) } ``` ### Using the Root Provider The `RootProvider` component provides a context for the tree-view. It accepts the value of the `useTree-view` hook. You can leverage it to access the component state and methods from outside the tree-view. ```tsx import { TreeView, createTreeCollection, useTreeView } from '@ark-ui/react/tree-view' import { CheckSquareIcon, ChevronRightIcon, FileIcon, FolderIcon } from 'lucide-react' interface Node { id: string name: string children?: Node[] } const collection = createTreeCollection{node.name} {node.children.map((child, index) => ( ))} {node.name} ({ nodeToValue: (node) => node.id, nodeToString: (node) => node.name, rootNode: { id: 'ROOT', name: '', children: [ { id: 'node_modules', name: 'node_modules', children: [ { id: 'node_modules/zag-js', name: 'zag-js' }, { id: 'node_modules/pandacss', name: 'panda' }, { id: 'node_modules/@types', name: '@types', children: [ { id: 'node_modules/@types/react', name: 'react' }, { id: 'node_modules/@types/react-dom', name: 'react-dom' }, ], }, ], }, { id: 'src', name: 'src', children: [ { id: 'src/app.tsx', name: 'app.tsx' }, { id: 'src/index.ts', name: 'index.ts' }, ], }, { id: 'panda.config', name: 'panda.config.ts' }, { id: 'package.json', name: 'package.json' }, { id: 'renovate.json', name: 'renovate.json' }, { id: 'readme.md', name: 'README.md' }, ], }, }) export const RootProvider = () => { const treeView = useTreeView({ collection }) return ( Tree {collection.rootNode.children?.map((node, index) => )} ) => { const { node, indexPath } = props return ( {node.children ? ( ) } ``` > If you're using the `RootProvider` component, you don't need to use the `Root` component. ## API Reference ### Root #### Props **`collection`** Type: `TreeCollection{node.name} {node.children.map((child, index) => ( ))} {node.name} ` Required: true Default Value: `undefined` Description: The collection of tree nodes **`asChild`** Type: `boolean` Required: false Default Value: `undefined` Description: Use the provided child element as the default rendered element, combining their props and behavior. **`defaultExpandedValue`** Type: `string[]` Required: false Default Value: `undefined` Description: The initial expanded node ids when rendered. Use when you don't need to control the expanded node ids. **`defaultSelectedValue`** Type: `string[]` Required: false Default Value: `undefined` Description: The initial selected node ids when rendered. Use when you don't need to control the selected node ids. **`expandedValue`** Type: `string[]` Required: false Default Value: `undefined` Description: The controlled expanded node ids **`expandOnClick`** Type: `boolean` Required: false Default Value: `true` Description: Whether clicking on a branch should open it or not **`focusedValue`** Type: `string` Required: false Default Value: `undefined` Description: The id of the focused node **`ids`** Type: `Partial<{ root: string; tree: string; label: string; node(value: string): string }>` Required: false Default Value: `undefined` Description: The ids of the tree elements. Useful for composition. **`lazyMount`** Type: `boolean` Required: false Default Value: `false` Description: Whether to enable lazy mounting **`onExpandedChange`** Type: `(details: ExpandedChangeDetails) => void` Required: false Default Value: `undefined` Description: Called when the tree is opened or closed **`onFocusChange`** Type: `(details: FocusChangeDetails) => void` Required: false Default Value: `undefined` Description: Called when the focused node changes **`onSelectionChange`** Type: `(details: SelectionChangeDetails) => void` Required: false Default Value: `undefined` Description: Called when the selection changes **`selectedValue`** Type: `string[]` Required: false Default Value: `undefined` Description: The controlled selected node ids **`selectionMode`** Type: `'multiple' | 'single'` Required: false Default Value: `"single"` Description: Whether the tree supports multiple selection - "single": only one node can be selected - "multiple": multiple nodes can be selected **`typeahead`** Type: `boolean` Required: false Default Value: `true` Description: Whether the tree supports typeahead search **`unmountOnExit`** Type: `boolean` Required: false Default Value: `false` Description: Whether to unmount on exit. ### BranchContent #### Props **`asChild`** Type: `boolean` Required: false Default Value: `undefined` Description: Use the provided child element as the default rendered element, combining their props and behavior. #### Data Attributes **`data-scope`**: tree-view **`data-part`**: branch-content **`data-state`**: "open" | "closed" **`data-depth`**: The depth of the item **`data-path`**: The path of the item **`data-value`**: The value of the item ### BranchControl #### Props **`asChild`** Type: `boolean` Required: false Default Value: `undefined` Description: Use the provided child element as the default rendered element, combining their props and behavior. #### Data Attributes **`data-scope`**: tree-view **`data-part`**: branch-control **`data-path`**: The path of the item **`data-state`**: "open" | "closed" **`data-disabled`**: Present when disabled **`data-selected`**: Present when selected **`data-focus`**: Present when focused **`data-value`**: The value of the item **`data-depth`**: The depth of the item ### BranchIndentGuide #### Props **`asChild`** Type: `boolean` Required: false Default Value: `undefined` Description: Use the provided child element as the default rendered element, combining their props and behavior. #### Data Attributes **`data-scope`**: tree-view **`data-part`**: branch-indent-guide **`data-depth`**: The depth of the item ### BranchIndicator #### Props **`asChild`** Type: `boolean` Required: false Default Value: `undefined` Description: Use the provided child element as the default rendered element, combining their props and behavior. #### Data Attributes **`data-scope`**: tree-view **`data-part`**: branch-indicator **`data-state`**: "open" | "closed" **`data-disabled`**: Present when disabled **`data-selected`**: Present when selected **`data-focus`**: Present when focused ### Branch #### Props **`asChild`** Type: `boolean` Required: false Default Value: `undefined` Description: Use the provided child element as the default rendered element, combining their props and behavior. #### Data Attributes **`data-scope`**: tree-view **`data-part`**: branch **`data-depth`**: The depth of the item **`data-branch`**: **`data-value`**: The value of the item **`data-path`**: The path of the item **`data-selected`**: Present when selected **`data-state`**: "open" | "closed" **`data-disabled`**: Present when disabled ### BranchText #### Props **`asChild`** Type: `boolean` Required: false Default Value: `undefined` Description: Use the provided child element as the default rendered element, combining their props and behavior. #### Data Attributes **`data-scope`**: tree-view **`data-part`**: branch-text **`data-disabled`**: Present when disabled **`data-state`**: "open" | "closed" ### BranchTrigger #### Props **`asChild`** Type: `boolean` Required: false Default Value: `undefined` Description: Use the provided child element as the default rendered element, combining their props and behavior. #### Data Attributes **`data-scope`**: tree-view **`data-part`**: branch-trigger **`data-disabled`**: Present when disabled **`data-state`**: "open" | "closed" **`data-value`**: The value of the item ### ItemIndicator #### Props **`asChild`** Type: `boolean` Required: false Default Value: `undefined` Description: Use the provided child element as the default rendered element, combining their props and behavior. #### Data Attributes **`data-scope`**: tree-view **`data-part`**: item-indicator **`data-disabled`**: Present when disabled **`data-selected`**: Present when selected **`data-focus`**: Present when focused ### Item #### Props **`asChild`** Type: `boolean` Required: false Default Value: `undefined` Description: Use the provided child element as the default rendered element, combining their props and behavior. #### Data Attributes **`data-scope`**: tree-view **`data-part`**: item **`data-path`**: The path of the item **`data-value`**: The value of the item **`data-focus`**: Present when focused **`data-selected`**: Present when selected **`data-disabled`**: Present when disabled **`data-depth`**: The depth of the item ### ItemText #### Props **`asChild`** Type: `boolean` Required: false Default Value: `undefined` Description: Use the provided child element as the default rendered element, combining their props and behavior. #### Data Attributes **`data-scope`**: tree-view **`data-part`**: item-text **`data-disabled`**: Present when disabled **`data-selected`**: Present when selected **`data-focus`**: Present when focused ### Label #### Props **`asChild`** Type: `boolean` Required: false Default Value: `undefined` Description: Use the provided child element as the default rendered element, combining their props and behavior. ### NodeProvider #### Props **`indexPath`** Type: `number[]` Required: true Default Value: `undefined` Description: The index path of the tree node **`node`** Type: `NonNullable ` Required: false Default Value: `undefined` Description: The tree node ### RootProvider #### Props **`value`** Type: `UseTreeViewReturn ` Required: true Default Value: `undefined` Description: undefined **`asChild`** Type: `boolean` Required: false Default Value: `undefined` Description: Use the provided child element as the default rendered element, combining their props and behavior. **`lazyMount`** Type: `boolean` Required: false Default Value: `false` Description: Whether to enable lazy mounting **`unmountOnExit`** Type: `boolean` Required: false Default Value: `false` Description: Whether to unmount on exit. ### Tree #### Props **`asChild`** Type: `boolean` Required: false Default Value: `undefined` Description: Use the provided child element as the default rendered element, combining their props and behavior. ## Accessibility Complies with the [Tree View WAI-ARIA design pattern](https://www.w3.org/WAI/ARIA/apg/patterns/treeview/). ### Keyboard Support **`Tab`** Description: Moves focus to the tree view, placing the first tree view item in focus. **`Enter + Space`** Description: Selects the item or branch node **`ArrowDown`** Description: Moves focus to the next node **`ArrowUp`** Description: Moves focus to the previous node **`ArrowRight`** Description: When focus is on a closed branch node, opens the branch.
When focus is on an open branch node, moves focus to the first item node. **`ArrowLeft`** Description: When focus is on an open branch node, closes the node.
When focus is on an item or branch node, moves focus to its parent branch node. **`Home`** Description: Moves focus to first node without opening or closing a node. **`End`** Description: Moves focus to the last node that can be focused without expanding any nodes that are closed. **`a-z + A-Z`** Description: Focus moves to the next node with a name that starts with the typed character. The search logic ignores nodes that are descendants of closed branch. **`*`** Description: Expands all sibling nodes that are at the same depth as the focused node. **`Shift + ArrowDown`** Description: Moves focus to and toggles the selection state of the next node. **`Shift + ArrowUp`** Description: Moves focus to and toggles the selection state of the previous node. **`Ctrl + A`** Description: Selects all nodes in the tree. If all nodes are selected, unselects all nodes. # Tree View (SOLID) ## Anatomy To set up the tree view component correctly, you'll need to understand its anatomy and how we name its parts. > Each part includes a `data-part` attribute to help identify them in the DOM. ## Examples Learn how to use the `TreeView` component in your project. Let's take a look at the most basic example: ```tsx import { TreeView, createTreeCollection } from '@ark-ui/solid/tree-view' import { CheckSquareIcon, ChevronRightIcon, FileIcon, FolderIcon } from 'lucide-solid' import { For, Show } from 'solid-js' interface Node { id: string name: string children?: Node[] } const collection = createTreeCollection({ nodeToValue: (node) => node.id, nodeToString: (node) => node.name, rootNode: { id: 'ROOT', name: '', children: [ { id: 'node_modules', name: 'node_modules', children: [ { id: 'node_modules/zag-js', name: 'zag-js' }, { id: 'node_modules/pandacss', name: 'panda' }, { id: 'node_modules/@types', name: '@types', children: [ { id: 'node_modules/@types/react', name: 'react' }, { id: 'node_modules/@types/react-dom', name: 'react-dom' }, ], }, ], }, { id: 'src', name: 'src', children: [ { id: 'src/app.tsx', name: 'app.tsx' }, { id: 'src/index.ts', name: 'index.ts' }, ], }, { id: 'panda.config', name: 'panda.config.ts' }, { id: 'package.json', name: 'package.json' }, { id: 'renovate.json', name: 'renovate.json' }, { id: 'readme.md', name: 'README.md' }, ], }, }) export const Basic = () => { return ( Tree {(node, index) => } ) => { const { node, indexPath } = props return ( {node.name} {node.name} {(child, index) => } ({ nodeToValue: (node) => node.id, nodeToString: (node) => node.name, rootNode: { id: 'ROOT', name: '', children: [ { id: 'node_modules', name: 'node_modules', children: [ { id: 'node_modules/zag-js', name: 'zag-js' }, { id: 'node_modules/pandacss', name: 'panda' }, { id: 'node_modules/@types', name: '@types', children: [ { id: 'node_modules/@types/react', name: 'react' }, { id: 'node_modules/@types/react-dom', name: 'react-dom' }, ], }, ], }, { id: 'src', name: 'src', children: [ { id: 'src/app.tsx', name: 'app.tsx' }, { id: 'src/index.ts', name: 'index.ts' }, ], }, { id: 'panda.config', name: 'panda.config.ts' }, { id: 'package.json', name: 'package.json' }, { id: 'renovate.json', name: 'renovate.json' }, { id: 'readme.md', name: 'README.md' }, ], }, }) export const RootProvider = () => { const treeView = useTreeView({ collection }) return ( Tree {(node, index) => } ) => { const { node, indexPath } = props return ( {node.name} {node.name} {(child, index) => } ` Required: true Default Value: `undefined` Description: The collection of tree nodes **`asChild`** Type: `(props: ParentProps<'div'>) => Element` Required: false Default Value: `undefined` Description: Use the provided child element as the default rendered element, combining their props and behavior. **`defaultExpandedValue`** Type: `string[]` Required: false Default Value: `undefined` Description: The initial expanded node ids when rendered. Use when you don't need to control the expanded node ids. **`defaultSelectedValue`** Type: `string[]` Required: false Default Value: `undefined` Description: The initial selected node ids when rendered. Use when you don't need to control the selected node ids. **`expandedValue`** Type: `string[]` Required: false Default Value: `undefined` Description: The controlled expanded node ids **`expandOnClick`** Type: `boolean` Required: false Default Value: `true` Description: Whether clicking on a branch should open it or not **`focusedValue`** Type: `string` Required: false Default Value: `undefined` Description: The id of the focused node **`ids`** Type: `Partial<{ root: string; tree: string; label: string; node(value: string): string }>` Required: false Default Value: `undefined` Description: The ids of the tree elements. Useful for composition. **`lazyMount`** Type: `boolean` Required: false Default Value: `false` Description: Whether to enable lazy mounting **`onExpandedChange`** Type: `(details: ExpandedChangeDetails) => void` Required: false Default Value: `undefined` Description: Called when the tree is opened or closed **`onFocusChange`** Type: `(details: FocusChangeDetails) => void` Required: false Default Value: `undefined` Description: Called when the focused node changes **`onSelectionChange`** Type: `(details: SelectionChangeDetails) => void` Required: false Default Value: `undefined` Description: Called when the selection changes **`selectedValue`** Type: `string[]` Required: false Default Value: `undefined` Description: The controlled selected node ids **`selectionMode`** Type: `'multiple' | 'single'` Required: false Default Value: `"single"` Description: Whether the tree supports multiple selection - "single": only one node can be selected - "multiple": multiple nodes can be selected **`typeahead`** Type: `boolean` Required: false Default Value: `true` Description: Whether the tree supports typeahead search **`unmountOnExit`** Type: `boolean` Required: false Default Value: `false` Description: Whether to unmount on exit. ### BranchContent #### Props **`asChild`** Type: `(props: ParentProps<'div'>) => Element` Required: false Default Value: `undefined` Description: Use the provided child element as the default rendered element, combining their props and behavior. #### Data Attributes **`data-scope`**: tree-view **`data-part`**: branch-content **`data-state`**: "open" | "closed" **`data-depth`**: The depth of the item **`data-path`**: The path of the item **`data-value`**: The value of the item ### BranchControl #### Props **`asChild`** Type: `(props: ParentProps<'div'>) => Element` Required: false Default Value: `undefined` Description: Use the provided child element as the default rendered element, combining their props and behavior. #### Data Attributes **`data-scope`**: tree-view **`data-part`**: branch-control **`data-path`**: The path of the item **`data-state`**: "open" | "closed" **`data-disabled`**: Present when disabled **`data-selected`**: Present when selected **`data-focus`**: Present when focused **`data-value`**: The value of the item **`data-depth`**: The depth of the item ### BranchIndentGuide #### Props **`asChild`** Type: `(props: ParentProps<'div'>) => Element` Required: false Default Value: `undefined` Description: Use the provided child element as the default rendered element, combining their props and behavior. #### Data Attributes **`data-scope`**: tree-view **`data-part`**: branch-indent-guide **`data-depth`**: The depth of the item ### BranchIndicator #### Props **`asChild`** Type: `(props: ParentProps<'div'>) => Element` Required: false Default Value: `undefined` Description: Use the provided child element as the default rendered element, combining their props and behavior. #### Data Attributes **`data-scope`**: tree-view **`data-part`**: branch-indicator **`data-state`**: "open" | "closed" **`data-disabled`**: Present when disabled **`data-selected`**: Present when selected **`data-focus`**: Present when focused ### Branch #### Props **`asChild`** Type: `(props: ParentProps<'div'>) => Element` Required: false Default Value: `undefined` Description: Use the provided child element as the default rendered element, combining their props and behavior. #### Data Attributes **`data-scope`**: tree-view **`data-part`**: branch **`data-depth`**: The depth of the item **`data-branch`**: **`data-value`**: The value of the item **`data-path`**: The path of the item **`data-selected`**: Present when selected **`data-state`**: "open" | "closed" **`data-disabled`**: Present when disabled ### BranchText #### Props **`asChild`** Type: `(props: ParentProps<'span'>) => Element` Required: false Default Value: `undefined` Description: Use the provided child element as the default rendered element, combining their props and behavior. #### Data Attributes **`data-scope`**: tree-view **`data-part`**: branch-text **`data-disabled`**: Present when disabled **`data-state`**: "open" | "closed" ### BranchTrigger #### Props **`asChild`** Type: `(props: ParentProps<'div'>) => Element` Required: false Default Value: `undefined` Description: Use the provided child element as the default rendered element, combining their props and behavior. #### Data Attributes **`data-scope`**: tree-view **`data-part`**: branch-trigger **`data-disabled`**: Present when disabled **`data-state`**: "open" | "closed" **`data-value`**: The value of the item ### ItemIndicator #### Props **`asChild`** Type: `(props: ParentProps<'div'>) => Element` Required: false Default Value: `undefined` Description: Use the provided child element as the default rendered element, combining their props and behavior. #### Data Attributes **`data-scope`**: tree-view **`data-part`**: item-indicator **`data-disabled`**: Present when disabled **`data-selected`**: Present when selected **`data-focus`**: Present when focused ### Item #### Props **`asChild`** Type: `(props: ParentProps<'div'>) => Element` Required: false Default Value: `undefined` Description: Use the provided child element as the default rendered element, combining their props and behavior. #### Data Attributes **`data-scope`**: tree-view **`data-part`**: item **`data-path`**: The path of the item **`data-value`**: The value of the item **`data-focus`**: Present when focused **`data-selected`**: Present when selected **`data-disabled`**: Present when disabled **`data-depth`**: The depth of the item ### ItemText #### Props **`asChild`** Type: `(props: ParentProps<'span'>) => Element` Required: false Default Value: `undefined` Description: Use the provided child element as the default rendered element, combining their props and behavior. #### Data Attributes **`data-scope`**: tree-view **`data-part`**: item-text **`data-disabled`**: Present when disabled **`data-selected`**: Present when selected **`data-focus`**: Present when focused ### Label #### Props **`asChild`** Type: `(props: ParentProps<'label'>) => Element` Required: false Default Value: `undefined` Description: Use the provided child element as the default rendered element, combining their props and behavior. ### NodeProvider #### Props **`indexPath`** Type: `number[]` Required: true Default Value: `undefined` Description: The index path of the tree node **`node`** Type: `NonNullable ` Required: false Default Value: `undefined` Description: The tree node ### RootProvider #### Props **`value`** Type: `UseTreeViewReturn ` Required: true Default Value: `undefined` Description: undefined **`asChild`** Type: `(props: ParentProps<'div'>) => Element` Required: false Default Value: `undefined` Description: Use the provided child element as the default rendered element, combining their props and behavior. **`lazyMount`** Type: `boolean` Required: false Default Value: `false` Description: Whether to enable lazy mounting **`unmountOnExit`** Type: `boolean` Required: false Default Value: `false` Description: Whether to unmount on exit. ### Tree #### Props **`asChild`** Type: `(props: ParentProps<'div'>) => Element` Required: false Default Value: `undefined` Description: Use the provided child element as the default rendered element, combining their props and behavior. ## Accessibility Complies with the [Tree View WAI-ARIA design pattern](https://www.w3.org/WAI/ARIA/apg/patterns/treeview/). ### Keyboard Support **`Tab`** Description: Moves focus to the tree view, placing the first tree view item in focus. **`Enter + Space`** Description: Selects the item or branch node **`ArrowDown`** Description: Moves focus to the next node **`ArrowUp`** Description: Moves focus to the previous node **`ArrowRight`** Description: When focus is on a closed branch node, opens the branch.
When focus is on an open branch node, moves focus to the first item node. **`ArrowLeft`** Description: When focus is on an open branch node, closes the node.
When focus is on an item or branch node, moves focus to its parent branch node. **`Home`** Description: Moves focus to first node without opening or closing a node. **`End`** Description: Moves focus to the last node that can be focused without expanding any nodes that are closed. **`a-z + A-Z`** Description: Focus moves to the next node with a name that starts with the typed character. The search logic ignores nodes that are descendants of closed branch. **`*`** Description: Expands all sibling nodes that are at the same depth as the focused node. **`Shift + ArrowDown`** Description: Moves focus to and toggles the selection state of the next node. **`Shift + ArrowUp`** Description: Moves focus to and toggles the selection state of the previous node. **`Ctrl + A`** Description: Selects all nodes in the tree. If all nodes are selected, unselects all nodes. # Tree View (VUE) ## Anatomy To set up the tree view component correctly, you'll need to understand its anatomy and how we name its parts. > Each part includes a `data-part` attribute to help identify them in the DOM. ## Examples Learn how to use the `TreeView` component in your project. Let's take a look at the most basic example: ```vueTree ` Required: true Default Value: `undefined` Description: The collection of tree nodes **`asChild`** Type: `boolean` Required: false Default Value: `undefined` Description: Use the provided child element as the default rendered element, combining their props and behavior. **`defaultExpandedValue`** Type: `string[]` Required: false Default Value: `undefined` Description: The initial expanded node ids when rendered. Use when you don't need to control the expanded node ids. **`defaultSelectedValue`** Type: `string[]` Required: false Default Value: `undefined` Description: The initial selected node ids when rendered. Use when you don't need to control the selected node ids. **`expandedValue`** Type: `string[]` Required: false Default Value: `undefined` Description: The controlled expanded node ids **`expandOnClick`** Type: `boolean` Required: false Default Value: `true` Description: Whether clicking on a branch should open it or not **`focusedValue`** Type: `string` Required: false Default Value: `undefined` Description: The id of the focused node **`id`** Type: `string` Required: false Default Value: `undefined` Description: The unique identifier of the machine. **`ids`** Type: `Partial<{ root: string; tree: string; label: string; node(value: string): string }>` Required: false Default Value: `undefined` Description: The ids of the tree elements. Useful for composition. **`lazyMount`** Type: `boolean` Required: false Default Value: `false` Description: Whether to enable lazy mounting **`selectedValue`** Type: `string[]` Required: false Default Value: `undefined` Description: The controlled selected node ids **`selectionMode`** Type: `'multiple' | 'single'` Required: false Default Value: `"single"` Description: Whether the tree supports multiple selection - "single": only one node can be selected - "multiple": multiple nodes can be selected **`typeahead`** Type: `boolean` Required: false Default Value: `true` Description: Whether the tree supports typeahead search **`unmountOnExit`** Type: `boolean` Required: false Default Value: `false` Description: Whether to unmount on exit. ### BranchContent #### Props **`asChild`** Type: `boolean` Required: false Default Value: `undefined` Description: Use the provided child element as the default rendered element, combining their props and behavior. #### Data Attributes **`data-scope`**: tree-view **`data-part`**: branch-content **`data-state`**: "open" | "closed" **`data-depth`**: The depth of the item **`data-path`**: The path of the item **`data-value`**: The value of the item ### BranchControl #### Props **`asChild`** Type: `boolean` Required: false Default Value: `undefined` Description: Use the provided child element as the default rendered element, combining their props and behavior. #### Data Attributes **`data-scope`**: tree-view **`data-part`**: branch-control **`data-path`**: The path of the item **`data-state`**: "open" | "closed" **`data-disabled`**: Present when disabled **`data-selected`**: Present when selected **`data-focus`**: Present when focused **`data-value`**: The value of the item **`data-depth`**: The depth of the item ### BranchIndentGuide #### Props **`asChild`** Type: `boolean` Required: false Default Value: `undefined` Description: Use the provided child element as the default rendered element, combining their props and behavior. #### Data Attributes **`data-scope`**: tree-view **`data-part`**: branch-indent-guide **`data-depth`**: The depth of the item ### BranchIndicator #### Props **`asChild`** Type: `boolean` Required: false Default Value: `undefined` Description: Use the provided child element as the default rendered element, combining their props and behavior. #### Data Attributes **`data-scope`**: tree-view **`data-part`**: branch-indicator **`data-state`**: "open" | "closed" **`data-disabled`**: Present when disabled **`data-selected`**: Present when selected **`data-focus`**: Present when focused ### Branch #### Props **`asChild`** Type: `boolean` Required: false Default Value: `undefined` Description: Use the provided child element as the default rendered element, combining their props and behavior. #### Data Attributes **`data-scope`**: tree-view **`data-part`**: branch **`data-depth`**: The depth of the item **`data-branch`**: **`data-value`**: The value of the item **`data-path`**: The path of the item **`data-selected`**: Present when selected **`data-state`**: "open" | "closed" **`data-disabled`**: Present when disabled ### BranchText #### Props **`asChild`** Type: `boolean` Required: false Default Value: `undefined` Description: Use the provided child element as the default rendered element, combining their props and behavior. #### Data Attributes **`data-scope`**: tree-view **`data-part`**: branch-text **`data-disabled`**: Present when disabled **`data-state`**: "open" | "closed" ### BranchTrigger #### Props **`asChild`** Type: `boolean` Required: false Default Value: `undefined` Description: Use the provided child element as the default rendered element, combining their props and behavior. #### Data Attributes **`data-scope`**: tree-view **`data-part`**: branch-trigger **`data-disabled`**: Present when disabled **`data-state`**: "open" | "closed" **`data-value`**: The value of the item ### ItemIndicator #### Props **`asChild`** Type: `boolean` Required: false Default Value: `undefined` Description: Use the provided child element as the default rendered element, combining their props and behavior. #### Data Attributes **`data-scope`**: tree-view **`data-part`**: item-indicator **`data-disabled`**: Present when disabled **`data-selected`**: Present when selected **`data-focus`**: Present when focused ### Item #### Props **`asChild`** Type: `boolean` Required: false Default Value: `undefined` Description: Use the provided child element as the default rendered element, combining their props and behavior. #### Data Attributes **`data-scope`**: tree-view **`data-part`**: item **`data-path`**: The path of the item **`data-value`**: The value of the item **`data-focus`**: Present when focused **`data-selected`**: Present when selected **`data-disabled`**: Present when disabled **`data-depth`**: The depth of the item ### ItemText #### Props **`asChild`** Type: `boolean` Required: false Default Value: `undefined` Description: Use the provided child element as the default rendered element, combining their props and behavior. #### Data Attributes **`data-scope`**: tree-view **`data-part`**: item-text **`data-disabled`**: Present when disabled **`data-selected`**: Present when selected **`data-focus`**: Present when focused ### Label #### Props **`asChild`** Type: `boolean` Required: false Default Value: `undefined` Description: Use the provided child element as the default rendered element, combining their props and behavior. ### NodeProvider #### Props **`indexPath`** Type: `number[]` Required: true Default Value: `undefined` Description: The index path of the tree node **`node`** Type: `NonNullable ` Required: false Default Value: `undefined` Description: The tree node ### RootProvider #### Props **`value`** Type: `TreeViewApi
When focus is on an open branch node, moves focus to the first item node. **`ArrowLeft`** Description: When focus is on an open branch node, closes the node.
When focus is on an item or branch node, moves focus to its parent branch node. **`Home`** Description: Moves focus to first node without opening or closing a node. **`End`** Description: Moves focus to the last node that can be focused without expanding any nodes that are closed. **`a-z + A-Z`** Description: Focus moves to the next node with a name that starts with the typed character. The search logic ignores nodes that are descendants of closed branch. **`*`** Description: Expands all sibling nodes that are at the same depth as the focused node. **`Shift + ArrowDown`** Description: Moves focus to and toggles the selection state of the next node. **`Shift + ArrowUp`** Description: Moves focus to and toggles the selection state of the previous node. **`Ctrl + A`** Description: Selects all nodes in the tree. If all nodes are selected, unselects all nodes. # UTILITIES --- # Download Trigger (REACT) ## Motivation The `DownloadTrigger` component provides a convenient way to programmatically trigger file downloads in web applications. It handles the complexities of downloading files, whether they are URLs, Blobs, or other data types. ## Examples ### Basic Pass the data you want to download to the `data` prop, and specify the `fileName` and `mimeType` of the file. ```tsx import { DownloadTrigger } from '@ark-ui/react/download-trigger' export const Basic = () => { return (Download txt ) } ``` ### Download SVG Here's an example of how to download an SVG file. ```tsx import { DownloadTrigger } from '@ark-ui/react/download-trigger' export const Svg = () => { return (Download SVG ) } ``` ### Promise You can also trigger downloads from a promise that returns a `Blob`, `File`, or `string`. ```tsx import { DownloadTrigger } from '@ark-ui/react/download-trigger' export const WithPromise = () => { const fetchImage = async () => { const response = await fetch('https://picsum.photos/200/300') return response.blob() } return (Download Image ) } ``` ## API Reference # Download Trigger (SOLID) ## Motivation The `DownloadTrigger` component provides a convenient way to programmatically trigger file downloads in web applications. It handles the complexities of downloading files, whether they are URLs, Blobs, or other data types. ## Examples ### Basic Pass the data you want to download to the `data` prop, and specify the `fileName` and `mimeType` of the file. ```tsx import { DownloadTrigger } from '@ark-ui/solid/download-trigger' export const Basic = () => { return (Download txt ) } ``` ### Download SVG Here's an example of how to download an SVG file. ```tsx import { DownloadTrigger } from '@ark-ui/solid/download-trigger' export const Svg = () => { return (Download SVG ) } ``` ### Promise You can also trigger downloads from a promise that returns a `Blob`, `File`, or `string`. ```tsx import { DownloadTrigger } from '@ark-ui/solid/download-trigger' export const WithPromise = () => { const fetchImage = async () => { const response = await fetch('https://picsum.photos/200/300') return response.blob() } return (Download Image ) } ``` ## API Reference # Download Trigger (VUE) ## Motivation The `DownloadTrigger` component provides a convenient way to programmatically trigger file downloads in web applications. It handles the complexities of downloading files, whether they are URLs, Blobs, or other data types. ## Examples ### Basic Pass the data you want to download to the `data` prop, and specify the `fileName` and `mimeType` of the file. ```vueDownload txt ``` ### Download SVG Here's an example of how to download an SVG file. ```vueDownload SVG ``` ### Promise You can also trigger downloads from a promise that returns a `Blob`, `File`, or `string`. ```vueDownload Image ``` ## API Reference # Environment (REACT) ## Motivation We use [Zag.js](https://zagjs.com/overview/composition#custom-window-environment) internally, which relies on DOM query methods like `document.querySelectorAll` and `document.getElementById`. In custom environments like iframes, Shadow DOM, or Electron, these methods might not work as expected. To handle this, Ark UI includes the `EnvironmentProvider`, allowing you to set the appropriate root node or document, ensuring correct DOM queries. ## Setup To support custom environments like an iframe, Shadow DOM or Electron, render the `EnvironmentProvider` component to provide the environment context to all Ark UI components. ```tsx import { EnvironmentProvider } from '@ark-ui/react/environment' import Frame from 'react-frame-component' export const App = () => { return ({/* Your App */} ) } ``` ### Usage in iframe The `EnvironmentProvider` component will automatically detect the current environment and set the correct environment context. However, you can also manually set the `Document` like shown in this React example below: ```jsx import Frame, { FrameContextConsumer } from 'react-frame-component' import { EnvironmentProvider } from '@ark-ui/react' export const App = () => ({({ document }) => ) ``` ### Usage in Shadow DOM Here's an example of how to set the `EnvironmentProvider`'s value with Shadow DOM in Solid.js `Portal` component. ```jsx import { EnvironmentProvider } from '@ark-ui/react' import { Index, Portal } from 'solid-js/web' export const App = () => { let portalNode return ({/* Your App */} }portalNode?.shadowRoot ?? document}>{/* Your App */} {JSON.stringify(getRootNode(), null, 2)}} ``` ## API Reference ### EnvironmentProvider #### Props **`value`** Type: `RootNode | (() => RootNode)` Required: false Default Value: `undefined` Description: undefined # Environment (SOLID) ## Motivation We use [Zag.js](https://zagjs.com/overview/composition#custom-window-environment) internally, which relies on DOM query methods like `document.querySelectorAll` and `document.getElementById`. In custom environments like iframes, Shadow DOM, or Electron, these methods might not work as expected. To handle this, Ark UI includes the `EnvironmentProvider`, allowing you to set the appropriate root node or document, ensuring correct DOM queries. ## Setup To support custom environments like an iframe, Shadow DOM or Electron, render the `EnvironmentProvider` component to provide the environment context to all Ark UI components. ```tsx import { EnvironmentProvider } from '@ark-ui/solid/environment' export const App = () => { return ( ) } ``` ### Usage in iframe The `EnvironmentProvider` component will automatically detect the current environment and set the correct environment context. However, you can also manually set the `Document` like shown in this React example below: ```jsx import Frame, { FrameContextConsumer } from 'react-frame-component' import { EnvironmentProvider } from '@ark-ui/react' export const App = () => ({({ document }) => ) ``` ### Usage in Shadow DOM Here's an example of how to set the `EnvironmentProvider`'s value with Shadow DOM in Solid.js `Portal` component. ```jsx import { EnvironmentProvider } from '@ark-ui/react' import { Index, Portal } from 'solid-js/web' export const App = () => { let portalNode return ({/* Your App */} }portalNode?.shadowRoot ?? document}>{/* Your App */} {JSON.stringify(environment().getRootNode(), null, 2)}} ``` ## API Reference ### EnvironmentProvider #### Props **`value`** Type: `RootNode | (() => RootNode)` Required: false Default Value: `undefined` Description: undefined # Environment (VUE) ## Motivation We use [Zag.js](https://zagjs.com/overview/composition#custom-window-environment) internally, which relies on DOM query methods like `document.querySelectorAll` and `document.getElementById`. In custom environments like iframes, Shadow DOM, or Electron, these methods might not work as expected. To handle this, Ark UI includes the `EnvironmentProvider`, allowing you to set the appropriate root node or document, ensuring correct DOM queries. ## Setup To support custom environments like an iframe, Shadow DOM or Electron, render the `EnvironmentProvider` component to provide the environment context to all Ark UI components. ```vue ``` ### Usage in iframe The `EnvironmentProvider` component will automatically detect the current environment and set the correct environment context. However, you can also manually set the `Document` like shown in this React example below: ```jsx import Frame, { FrameContextConsumer } from 'react-frame-component' import { EnvironmentProvider } from '@ark-ui/react' export const App = () => ({({ document }) => ) ``` ### Usage in Shadow DOM Here's an example of how to set the `EnvironmentProvider`'s value with Shadow DOM in Solid.js `Portal` component. ```jsx import { EnvironmentProvider } from '@ark-ui/react' import { Index, Portal } from 'solid-js/web' export const App = () => { let portalNode return ({/* Your App */} }portalNode?.shadowRoot ?? document}>{/* Your App */} {{ JSON.stringify(environment?.getRootNode(), null, 2) }}``` ## API Reference ### EnvironmentProvider #### Props **`value`** Type: `RootNode | (() => RootNode)` Required: false Default Value: `undefined` Description: undefined # Focus Trap (REACT) ## Motivation Focus trapping is essential for modal interfaces and other interactive elements that require user attention. The `FocusTrap` component helps maintain accessibility by ensuring keyboard focus remains within a designated container until explicitly released. ## Examples ```tsx import { FocusTrap } from '@ark-ui/react/focus-trap' import { useState } from 'react' export const Basic = () => { const [trapped, setTrapped] = useState(false) return ( <>(null) const getButtonNode = () => { const node = buttonRef.current if (!node) throw new Error('Button not found') return node } return ( {trapped && () } ``` ### Initial Focus Use the `initialFocus` prop to set the element that should receive initial focus when the trap is activated. ```tsx import { FocusTrap } from '@ark-ui/react/focus-trap' import { useRef, useState } from 'react' export const InitialFocus = () => { const [trapped, setTrapped] = useState(false) const toggle = () => setTrapped((c) => !c) const inputRef = useRef*/} (null) return ( ) } ``` ## API Reference # Focus Trap (SOLID) ## Motivation Focus trapping is essential for modal interfaces and other interactive elements that require user attention. The `FocusTrap` component helps maintain accessibility by ensuring keyboard focus remains within a designated container until explicitly released. ## Examples ```tsx import { FocusTrap } from '@ark-ui/solid/focus-trap' import { createSignal } from 'solid-js' export const Basic = () => { const [trapped, setTrapped] = createSignal(false) return ( <>inputRef.current}> inputRef}> ))} File size:) } ``` ### Sizes Use the `sizes` prop to specify custom byte sizes for formatting. ```tsx import { Format } from '@ark-ui/solid/format' import { For } from 'solid-js' export const ByteSizes = () => { const byteSizes = [50, 5000, 5000000, 5000000000] return () } ``` ### Locale Use the `locale` prop to format the byte value according to a specific locale. ```tsx import { Format } from '@ark-ui/solid/format' import { LocaleProvider } from '@ark-ui/solid/locale' import { For } from 'solid-js' export const ByteWithLocale = () => { const locales = ['de-DE', 'zh-CN'] const value = 1450.45 return ({(size) => ( )}) } ``` ### Unit Use the `unit` prop to specify the unit of the byte value. ```tsx import { Format } from '@ark-ui/solid/format' export const ByteWithUnit = () => { const value = 1450.45 const unit = 'bit' return ({(locale) => ( {(unitDisplay) => } File size:``` ### Sizes Use the `sizes` prop to specify custom byte sizes for formatting. ```vue``` ### Locale Use the `locale` prop to format the byte value according to a specific locale. ```vue``` ### Unit Use the `unit` prop to specify the unit of the byte value. ```vueFile size:``` ### Unit Display Use the `unitDisplay` prop to specify the display of the unit. ```vue``` # Format Number (REACT) ## Usage The number formatting logic is handled by the native `Intl.NumberFormat` API and smartly cached to avoid performance issues when using the same locale and options. ```jsx import { Format } from '@ark-ui/react' ``` ## Examples ### Basic Use the `Format.Number` component to format a number with default options. ```tsx import { Format } from '@ark-ui/react/format' export const NumberBasic = () => { return} ``` ### Percentage Use the `style="percent"` prop to format the number as a percentage. ```tsx import { Format } from '@ark-ui/react/format' export const NumberWithPercentage = () => { return } ``` ### Currency Use the `style="currency"` prop along with the `currency` prop to format the number as a currency. ```tsx import { Format } from '@ark-ui/react/format' export const NumberWithCurrency = () => { return } ``` ### Locale Use the `locale` prop to format the number according to a specific locale. ```tsx import { Format } from '@ark-ui/react/format' import { LocaleProvider } from '@ark-ui/react/locale' export const NumberWithLocale = () => { return ( } ``` ### Compact Notation Use the `notation="compact"` prop to format the number in compact notation. ```tsx import { Format } from '@ark-ui/react/format' export const NumberWithCompact = () => { return } ``` # Format Number (SOLID) ## Usage The number formatting logic is handled by the native `Intl.NumberFormat` API and smartly cached to avoid performance issues when using the same locale and options. ```jsx import { Format } from '@ark-ui/react' ``` ## Examples ### Basic Use the `Format.Number` component to format a number with default options. ```tsx import { Format } from '@ark-ui/solid/format' export const NumberBasic = () => { return } ``` ### Percentage Use the `style="percent"` prop to format the number as a percentage. ```tsx import { Format } from '@ark-ui/solid/format' export const NumberWithPercentage = () => { return } ``` ### Currency Use the `style="currency"` prop along with the `currency` prop to format the number as a currency. ```tsx import { Format } from '@ark-ui/solid/format' export const NumberWithCurrency = () => { return } ``` ### Locale Use the `locale` prop to format the number according to a specific locale. ```tsx import { Format } from '@ark-ui/solid/format' import { LocaleProvider } from '@ark-ui/solid/locale' export const NumberWithLocale = () => { return ( } ``` ### Compact Notation Use the `notation="compact"` prop to format the number in compact notation. ```tsx import { Format } from '@ark-ui/solid/format' export const NumberWithCompact = () => { return } ``` # Format Number (VUE) ## Usage The number formatting logic is handled by the native `Intl.NumberFormat` API and smartly cached to avoid performance issues when using the same locale and options. ```jsx import { Format } from '@ark-ui/react' ``` ## Examples ### Basic Use the `Format.Number` component to format a number with default options. ```vue ``` ### Percentage Use the `style="percent"` prop to format the number as a percentage. ```vue ``` ### Currency Use the `style="currency"` prop along with the `currency` prop to format the number as a currency. ```vue ``` ### Locale Use the `locale` prop to format the number according to a specific locale. ```vue ``` ### Compact Notation Use the `notation="compact"` prop to format the number in compact notation. ```vue ``` # Frame (REACT) ## Usage The `Frame` component is used to render a component in an iframe. - Tracks the size of the content and exposes them via css variables. - Support for `head` prop to inject scripts and styles. - Support for mount and unmount callbacks. ```jsx import { Frame } from '@ark-ui/react' ``` ## Examples ### Basic Wrap your component in the `Frame` component to render it in an iframe. ```tsx import { Frame } from '@ark-ui/react/frame' export const Basic = () => { return ( {'body { background-color: #f0f0f0; }'}} > ) } ``` ### Injecting Script Using the `onMount` prop, you can inject a script into the iframe. ```tsx import { Frame } from '@ark-ui/react/frame' import { useRef } from 'react' export const Script = () => { const ref = useRefHello from inside the frame!
This content is rendered within our custom frame component using a Portal.
(null) return ( { const doc = ref.current?.contentDocument if (!doc) return const script = doc.createElement('script') script.innerHTML = 'console.log("Hello from inside the frame!")' doc.body.appendChild(script) }} style={{ border: '1px solid #ccc', width: '100%', height: 'var(--height)' }} > ) } ``` ### Custom src doc Use the `srcDoc` prop to specify the HTML content of the page to use in the iframe. ```tsx import { Frame } from '@ark-ui/react/frame' const srcDoc = `Hello from inside the frame!
This content is rendered within our custom frame component using a Portal.
` export const SrcDoc = () => { return ( Hello from inside the frame!
This content is rendered within our custom frame component using a Portal.
The frame has custom initial content, including Font Awesome and Open Sans font.
) } ``` # Frame (SOLID) ## Usage The `Frame` component is used to render a component in an iframe. - Tracks the size of the content and exposes them via css variables. - Support for `head` prop to inject scripts and styles. - Support for mount and unmount callbacks. ```jsx import { Frame } from '@ark-ui/react' ``` ## Examples ### Basic Wrap your component in the `Frame` component to render it in an iframe. ```tsx import { Frame } from '@ark-ui/solid/frame' export const Basic = () => { return ( {'body { background-color: #f0f0f0; }'}} >) } ``` ### Injecting Script Using the `onMount` prop, you can inject a script into the iframe. ```tsx import { Frame } from '@ark-ui/solid/frame' export const Script = () => { let ref: HTMLIFrameElement | undefined return ( { const doc = ref?.contentDocument if (!doc) return const script = doc.createElement('script') script.innerHTML = 'console.log("Hello from inside the frame!")' doc.body.appendChild(script) }} style={{ border: '1px solid #ccc', width: '100%', height: 'var(--height)' }} >Hello from inside the frame!
This content is rendered within our custom frame component using a Portal.
) } ``` ### Custom src doc Use the `srcDoc` prop to specify the HTML content of the page to use in the iframe. ```tsx import { Frame } from '@ark-ui/solid/frame' const srcDoc = `Hello from inside the frame!
This content is rendered within our custom frame component using a Portal.
` export const SrcDoc = () => { return ( Hello from inside the frame!
This content is rendered within our custom frame component using a Portal.
The frame has custom initial content, including Font Awesome and Open Sans font.
) } ``` # Frame (VUE) ## Usage The `Frame` component is used to render a component in an iframe. - Tracks the size of the content and exposes them via css variables. - Support for `head` prop to inject scripts and styles. - Support for mount and unmount callbacks. ```jsx import { Frame } from '@ark-ui/react' ``` ## Examples ### Basic Wrap your component in the `Frame` component to render it in an iframe. ```vueHello from inside the frame!
This content is rendered within our custom frame component using a Portal.
body { background-color: #f0f0f0; } ``` ### Injecting Script Using the `onMount` prop, you can inject a script into the iframe. ```vue``` ### Custom src doc Use the `srcDoc` prop to specify the HTML content of the page to use in the iframe. ```vueHello from inside the frame!
This content is rendered within our custom frame component using a Portal.
Hello from inside the frame!
This content is rendered within our custom frame component using a Portal.
``` # Highlight (REACT) ## Usage The Highlight component takes a `text` prop containing the full text and a `query` prop specifying the text to highlight. It then renders the text with highlighted portions wrapped in `` tags. ```tsx import { Highlight } from '@ark-ui/react/highlight' export const Basic = () => { return () } ``` ### Multiple Queries You can highlight multiple terms by passing an array of strings to the `query` prop. ```tsx import { Highlight } from '@ark-ui/react/highlight' export const Multiple = () => { return ( ) } ``` ### Case Sensitivity By default, the highlighting is case-sensitive. Use the `ignoreCase` prop to make it case-insensitive. ```tsx import { Highlight } from '@ark-ui/react/highlight' export const IgnoreCase = () => ( ) ``` ### Match All By default, the Highlight component matches the first occurrence of the query. To highlight all occurrences of the query, set the `matchAll` prop to `true`. ```tsx import { Highlight } from '@ark-ui/react/highlight' export const MatchAll = () => ( ) ``` ## API Reference ### Highlight #### Props **`query`** Type: `string | string[]` Required: true Default Value: `undefined` Description: The query to highlight in the text **`text`** Type: `string` Required: true Default Value: `undefined` Description: The text to highlight **`ignoreCase`** Type: `boolean` Required: false Default Value: `undefined` Description: Whether to ignore case while matching **`matchAll`** Type: `boolean` Required: false Default Value: `undefined` Description: Whether to match multiple instances of the query ## Customization The Highlight component wraps matched text in `` tags. ```tsxMatch All
Match First Occurrence Only
``` Style the `mark` tags using CSS to customize the appearance of highlighted text. ```css .highlighted-text { background-color: yellow; } ``` # Highlight (SOLID) ## Usage The Highlight component takes a `text` prop containing the full text and a `query` prop specifying the text to highlight. It then renders the text with highlighted portions wrapped in `` tags. ```tsx import { Highlight } from '@ark-ui/solid/highlight' export const Basic = () => { return ( ) } ``` ### Multiple Queries You can highlight multiple terms by passing an array of strings to the `query` prop. ```tsx import { Highlight } from '@ark-ui/solid/highlight' export const Multiple = () => { return ( ) } ``` ### Case Sensitivity By default, the highlighting is case-sensitive. Use the `ignoreCase` prop to make it case-insensitive. ```tsx import { Highlight } from '@ark-ui/solid/highlight' export const IgnoreCase = () => ( ) ``` ### Match All By default, the Highlight component matches the first occurrence of the query. To highlight all occurrences of the query, set the `matchAll` prop to `true`. ```tsx import { Highlight } from '@ark-ui/solid/highlight' export const MatchAll = () => ( ) ``` ## API Reference ### Highlight #### Props **`query`** Type: `string | string[]` Required: true Default Value: `undefined` Description: The query to highlight in the text **`text`** Type: `string` Required: true Default Value: `undefined` Description: The text to highlight **`ignoreCase`** Type: `boolean` Required: false Default Value: `undefined` Description: Whether to ignore case while matching **`matchAll`** Type: `boolean` Required: false Default Value: `undefined` Description: Whether to match multiple instances of the query ## Customization The Highlight component wraps matched text in `` tags. ```tsxMatch All
Match First Occurrence Only
``` Style the `mark` tags using CSS to customize the appearance of highlighted text. ```css .highlighted-text { background-color: yellow; } ``` # Highlight (VUE) ## Usage The Highlight component takes a `text` prop containing the full text and a `query` prop specifying the text to highlight. It then renders the text with highlighted portions wrapped in `` tags. ```vue ``` ### Multiple Queries You can highlight multiple terms by passing an array of strings to the `query` prop. ```vue ``` ### Case Sensitivity By default, the highlighting is case-sensitive. Use the `ignoreCase` prop to make it case-insensitive. ```vue ``` ### Match All By default, the Highlight component matches the first occurrence of the query. To highlight all occurrences of the query, set the `matchAll` prop to `true`. ```vue ``` ## API Reference ### Highlight #### Props **`query`** Type: `string | string[]` Required: true Default Value: `undefined` Description: The query to highlight in the text **`text`** Type: `string` Required: true Default Value: `undefined` Description: The text to highlight **`ignoreCase`** Type: `boolean` Required: false Default Value: `undefined` Description: Whether to ignore case while matching **`matchAll`** Type: `boolean` Required: false Default Value: `undefined` Description: Whether to match multiple instances of the query ## Customization The Highlight component wraps matched text in `` tags. ```tsxMatch All
Match First Occurrence Only
``` Style the `mark` tags using CSS to customize the appearance of highlighted text. ```css .highlighted-text { background-color: yellow; } ``` # Locale (REACT) ## Setup The `LocaleProvider` component sets the locale for your app, formatting dates, numbers, and other locale-specific data. > **Note:** If no `LocaleProvider` is setup, the default locale for the app will be `en-US` and therefore the direction > will be `ltr`. ```tsx import { LocaleProvider } from '@ark-ui/react/locale' export const App = () => { return {/* Your App */} } ``` ## Usage To access the current locale and direction settings, use the `useLocaleContext` hook. ```tsx import { useLocaleContext } from '@ark-ui/react/locale' export const Usage = () => { const { locale, dir } = useLocaleContext() return{JSON.stringify({ locale, dir }, null, 2)}} ``` ## API Reference ### LocaleProvider #### Props **`locale`** Type: `string` Required: true Default Value: `'en-US'` Description: The locale to use for the application. # Locale (SOLID) ## Setup The `LocaleProvider` component sets the locale for your app, formatting dates, numbers, and other locale-specific data. > **Note:** If no `LocaleProvider` is setup, the default locale for the app will be `en-US` and therefore the direction > will be `ltr`. ```tsx import { LocaleProvider } from '@ark-ui/solid/locale' export const App = () => { return{/* Your App */} } ``` ## Usage To access the current locale and direction settings, use the `useLocaleContext` hook. ```tsx import { useLocaleContext } from '@ark-ui/solid/locale' export const Usage = () => { const locale = useLocaleContext() return{JSON.stringify(locale(), null, 2)}} ``` ## API Reference ### LocaleProvider #### Props **`locale`** Type: `string` Required: true Default Value: `'en-US'` Description: The locale to use for the application. # Locale (VUE) ## Setup The `LocaleProvider` component sets the locale for your app, formatting dates, numbers, and other locale-specific data. > **Note:** If no `LocaleProvider` is setup, the default locale for the app will be `en-US` and therefore the direction > will be `ltr`. ```vue``` ## Usage To access the current locale and direction settings, use the `useLocaleContext` hook. ```vue {{ JSON.stringify(locale, null, 2) }}``` ## API Reference ### LocaleProvider #### Props **`locale`** Type: `string` Required: true Default Value: `'en-US'` Description: The locale to use for the application. # Presence (REACT) ## Examples By default the child component starts out as hidden and remains hidden after the `present` state is toggled off. This is useful for situations where the element needs to be hidden initially and continue to stay hidden after its presence is no longer required. ```tsx import { Presence } from '@ark-ui/react/presence' import { useState } from 'react' export const Basic = () => { const [present, setPresent] = useState(false) return ( <>Hidden and Hidden ) } ``` ### Lazy Mount To delay the mounting of a child component until the `present` prop is set to true, use the `lazyMount` prop: ```tsx import { Presence } from '@ark-ui/react/presence' import { useState } from 'react' export const LazyMount = () => { const [present, setPresent] = useState(false) return ( <>Unmounted and Hidden ) } ``` ### Unmount on Exit To remove the child component from the DOM when it's not present, use the `unmountOnExit` prop: ```tsx import { Presence } from '@ark-ui/react/presence' import { useState } from 'react' export const UnmountOnExit = () => { const [present, setPresent] = useState(false) return ( <>Hidden and Unmounted on Exit ) } ``` ### Combining Lazy Mount and Unmount on Exit Both `lazyMount` and `unmountOnExit` can be combined for a component to be mounted only when it's present and to be unmounted when it's no longer present: ```tsx import { Presence } from '@ark-ui/react/presence' import { useState } from 'react' export const LazyMountAndUnmountOnExit = () => { const [present, setPresent] = useState(false) return ( <>Lazy Mount and Unmounted on Exit ) } ``` ## API Reference ### Presence #### Props **`immediate`** Type: `boolean` Required: false Default Value: `undefined` Description: Whether to synchronize the present change immediately or defer it to the next frame **`onExitComplete`** Type: `VoidFunction` Required: false Default Value: `undefined` Description: Function called when the animation ends in the closed state **`present`** Type: `boolean` Required: false Default Value: `undefined` Description: Whether the node is present (controlled by the user) # Presence (SOLID) ## Examples By default the child component starts out as hidden and remains hidden after the `present` state is toggled off. This is useful for situations where the element needs to be hidden initially and continue to stay hidden after its presence is no longer required. ```tsx import { Presence } from '@ark-ui/solid/presence' import { createSignal } from 'solid-js' export const Basic = () => { const [present, setPresent] = createSignal(false) return ( <>Hidden and Hidden ) } ``` ### Lazy Mount To delay the mounting of a child component until the `present` prop is set to true, use the `lazyMount` prop: ```tsx import { Presence } from '@ark-ui/solid/presence' import { createSignal } from 'solid-js' export const LazyMount = () => { const [present, setPresent] = createSignal(false) return ( <>Unmounted and Hidden ) } ``` ### Unmount on Exit To remove the child component from the DOM when it's not present, use the `unmountOnExit` prop: ```tsx import { Presence } from '@ark-ui/solid/presence' import { createSignal } from 'solid-js' export const UnmountOnExit = () => { const [present, setPresent] = createSignal(false) return ( <>Hidden and Unmounted on Exit ) } ``` ### Combining Lazy Mount and Unmount on Exit Both `lazyMount` and `unmountOnExit` can be combined for a component to be mounted only when it's present and to be unmounted when it's no longer present: ```tsx import { Presence } from '@ark-ui/solid/presence' import { createSignal } from 'solid-js' export const LazyMountAndUnmountOnExit = () => { const [present, setPresent] = createSignal(false) return ( <>Lazy Mount and Unmounted on Exit ) } ``` ## API Reference ### Presence #### Props **`asChild`** Type: `(props: ParentProps<'div'>) => Element` Required: false Default Value: `undefined` Description: Use the provided child element as the default rendered element, combining their props and behavior. **`immediate`** Type: `boolean` Required: false Default Value: `undefined` Description: Whether to synchronize the present change immediately or defer it to the next frame **`lazyMount`** Type: `boolean` Required: false Default Value: `false` Description: Whether to enable lazy mounting **`onExitComplete`** Type: `VoidFunction` Required: false Default Value: `undefined` Description: Function called when the animation ends in the closed state **`present`** Type: `boolean` Required: false Default Value: `undefined` Description: Whether the node is present (controlled by the user) **`unmountOnExit`** Type: `boolean` Required: false Default Value: `false` Description: Whether to unmount on exit. # Presence (VUE) ## Examples By default the child component starts out as hidden and remains hidden after the `present` state is toggled off. This is useful for situations where the element needs to be hidden initially and continue to stay hidden after its presence is no longer required. ```vue``` ### Lazy Mount To delay the mounting of a child component until the `present` prop is set to true, use the `lazyMount` prop: ```vueHidden and Hidden ``` ### Unmount on Exit To remove the child component from the DOM when it's not present, use the `unmountOnExit` prop: ```vueHidden and Hidden ``` ### Combining Lazy Mount and Unmount on Exit Both `lazyMount` and `unmountOnExit` can be combined for a component to be mounted only when it's present and to be unmounted when it's no longer present: ```vueHidden and Unmounted on Exit ``` ## API Reference ### Presence #### Props **`immediate`** Type: `boolean` Required: false Default Value: `undefined` Description: Whether to synchronize the present change immediately or defer it to the next frame **`onExitComplete`** Type: `VoidFunction` Required: false Default Value: `undefined` Description: Function called when the animation ends in the closed state **`present`** Type: `boolean` Required: false Default Value: `undefined` Description: Whether the node is present (controlled by the user) #### Emits **`exitComplete`** Type: `[]` Description: Function called when the animation ends in the closed stateLazy Mount and Unmounted on Exit - ({ items: [ { label: 'React', value: 'react' }, { label: 'Solid', value: 'solid' }, { label: 'Vue', value: 'vue' }, { label: 'Svelte', value: 'svelte', disabled: true }, ], }) return (
- `.
- **Textarea**: Fixed `ResizeObserver` warning.
- **Timer**: Fixed stopping issue when switching tabs; resolved issue where `action` prop was passed to `ActionTrigger`.
- **Toast**: Fixed keyboard navigation skipping close button.
- **Toggle Group**: Fixed `data-focus` not being removed on blur.
# About (REACT)
## Acknowledgments
We are committed to open source and the power of collaboration. Our work has been inspired by numerous projects and
individuals who continually drive us to innovate and improve.
- [Zag.js](https://zagjs.com/) - The foundation of this project
- [Park UI](https://park-ui.com) - For providing the styled component demos featured in this project
- [Radix Vue](https://www.radix-vue.com/) - For `useForwardPropsEmits`, which we re-export to build closed Vue
components
## License
This project is licensed under the terms of the [MIT license](https://github.com/chakra-ui/ark/blob/main/LICENSE).
# About (SOLID)
## Acknowledgments
We are committed to open source and the power of collaboration. Our work has been inspired by numerous projects and
individuals who continually drive us to innovate and improve.
- [Zag.js](https://zagjs.com/) - The foundation of this project
- [Park UI](https://park-ui.com) - For providing the styled component demos featured in this project
- [Radix Vue](https://www.radix-vue.com/) - For `useForwardPropsEmits`, which we re-export to build closed Vue
components
## License
This project is licensed under the terms of the [MIT license](https://github.com/chakra-ui/ark/blob/main/LICENSE).
# About (VUE)
## Acknowledgments
We are committed to open source and the power of collaboration. Our work has been inspired by numerous projects and
individuals who continually drive us to innovate and improve.
- [Zag.js](https://zagjs.com/) - The foundation of this project
- [Park UI](https://park-ui.com) - For providing the styled component demos featured in this project
- [Radix Vue](https://www.radix-vue.com/) - For `useForwardPropsEmits`, which we re-export to build closed Vue
components
## License
This project is licensed under the terms of the [MIT license](https://github.com/chakra-ui/ark/blob/main/LICENSE).
# LLMs.txt (REACT)
## What is LLMs.txt?
We support [LLMs.txt](https://llmstxt.org/) files for making the Ark UI documentation available to large language models
(LLMs). This feature helps AI tools better understand our component library, its APIs, and usage patterns.
## Available Routes
We provide several LLMs.txt routes to help AI tools access our documentation:
- [llms.txt](https://ark-ui.com/llms.txt) - Contains a structured overview of all components and their documentation
links
- [llms-full.txt](https://ark-ui.com/llms-full.txt) - Provides comprehensive documentation including implementation
details and examples
- [llms-react.txt](https://ark-ui.com/llms-react.txt) - React-specific documentation and implementation details
- [llms-solid.txt](https://ark-ui.com/llms-solid.txt) - SolidJS-specific documentation and implementation details
- [llms-vue.txt](https://ark-ui.com/llms-vue.txt) - Vue-specific documentation and implementation details
- [llms-svelte.txt](https://ark-ui.com/llms-svelte.txt) - Svelte-specific documentation and implementation details
## Usage with AI Tools
### Cursor
Use the `@Docs` feature in Cursor to include the LLMs.txt files in your project. This helps Cursor provide more accurate
code suggestions and documentation for Ark UI components.
[Read more about @Docs in Cursor](https://docs.cursor.com/context/@-symbols/@-docs)
### Windstatic
Reference the LLMs.txt files using `@` or in your `.windsurfrules` files to enhance Windstatic's understanding of Ark UI
components.
[Read more about Windstatic Memories](https://docs.codeium.com/windsurf/memories#memories-and-rules)
### Other AI Tools
Any AI tool that supports LLMs.txt can use these routes to better understand Ark UI. Simply point your tool to any of
the routes above based on your framework of choice.
# LLMs.txt (SOLID)
## What is LLMs.txt?
We support [LLMs.txt](https://llmstxt.org/) files for making the Ark UI documentation available to large language models
(LLMs). This feature helps AI tools better understand our component library, its APIs, and usage patterns.
## Available Routes
We provide several LLMs.txt routes to help AI tools access our documentation:
- [llms.txt](https://ark-ui.com/llms.txt) - Contains a structured overview of all components and their documentation
links
- [llms-full.txt](https://ark-ui.com/llms-full.txt) - Provides comprehensive documentation including implementation
details and examples
- [llms-react.txt](https://ark-ui.com/llms-react.txt) - React-specific documentation and implementation details
- [llms-solid.txt](https://ark-ui.com/llms-solid.txt) - SolidJS-specific documentation and implementation details
- [llms-vue.txt](https://ark-ui.com/llms-vue.txt) - Vue-specific documentation and implementation details
- [llms-svelte.txt](https://ark-ui.com/llms-svelte.txt) - Svelte-specific documentation and implementation details
## Usage with AI Tools
### Cursor
Use the `@Docs` feature in Cursor to include the LLMs.txt files in your project. This helps Cursor provide more accurate
code suggestions and documentation for Ark UI components.
[Read more about @Docs in Cursor](https://docs.cursor.com/context/@-symbols/@-docs)
### Windstatic
Reference the LLMs.txt files using `@` or in your `.windsurfrules` files to enhance Windstatic's understanding of Ark UI
components.
[Read more about Windstatic Memories](https://docs.codeium.com/windsurf/memories#memories-and-rules)
### Other AI Tools
Any AI tool that supports LLMs.txt can use these routes to better understand Ark UI. Simply point your tool to any of
the routes above based on your framework of choice.
# LLMs.txt (VUE)
## What is LLMs.txt?
We support [LLMs.txt](https://llmstxt.org/) files for making the Ark UI documentation available to large language models
(LLMs). This feature helps AI tools better understand our component library, its APIs, and usage patterns.
## Available Routes
We provide several LLMs.txt routes to help AI tools access our documentation:
- [llms.txt](https://ark-ui.com/llms.txt) - Contains a structured overview of all components and their documentation
links
- [llms-full.txt](https://ark-ui.com/llms-full.txt) - Provides comprehensive documentation including implementation
details and examples
- [llms-react.txt](https://ark-ui.com/llms-react.txt) - React-specific documentation and implementation details
- [llms-solid.txt](https://ark-ui.com/llms-solid.txt) - SolidJS-specific documentation and implementation details
- [llms-vue.txt](https://ark-ui.com/llms-vue.txt) - Vue-specific documentation and implementation details
- [llms-svelte.txt](https://ark-ui.com/llms-svelte.txt) - Svelte-specific documentation and implementation details
## Usage with AI Tools
### Cursor
Use the `@Docs` feature in Cursor to include the LLMs.txt files in your project. This helps Cursor provide more accurate
code suggestions and documentation for Ark UI components.
[Read more about @Docs in Cursor](https://docs.cursor.com/context/@-symbols/@-docs)
### Windstatic
Reference the LLMs.txt files using `@` or in your `.windsurfrules` files to enhance Windstatic's understanding of Ark UI
components.
[Read more about Windstatic Memories](https://docs.codeium.com/windsurf/memories#memories-and-rules)
### Other AI Tools
Any AI tool that supports LLMs.txt can use these routes to better understand Ark UI. Simply point your tool to any of
the routes above based on your framework of choice.
# GUIDES
---
# Animation (REACT)
Adding animation to Ark UI Components is as straightforward as with any other component, but keep in mind some
considerations when working with exit animations with JavaScript animation libraries.
## Animating with CSS
The most straightforward method to animate your elements is using CSS. You can animate both the mounting and unmounting
phases with CSS. The latter is achievable because Ark UI Components postpones the unmounting while your animation runs.
Below is a simple example of creating a fade-in and fade-out animation using CSS keyframes:
```css
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes fadeOut {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
```
You can use these keyframes to animate any element during its lifecycle. For instance, to apply the `fadeIn` animation
when your `Tooltip` enters the 'open' state, and `fadeOut` when it enters the 'closed' state, you could use the
following styles:
```css
[data-scope='tooltip'][data-part='content'][data-state='open'] {
animation: fadeIn 300ms ease-out;
}
[data-scope='tooltip'][data-part='content'][data-state='closed'] {
animation: fadeOut 300ms ease-in;
}
```
## Animating with JS Libraries
There's plenty of versatility when it comes to animating your Ark UI Elements with JavaScript libraries. Various
libraries such as GreenSock, anime.js, Framer Motion, and more can add a new level of interaction and feedback to your
UI components.
One significant advantage of using Ark UI Elements is the control you have over the unmounting phase of your components.
This is primarily facilitated through the `present` prop. The `present` prop allows the component to stay mounted even
after its enclosing condition has been falsified, allowing for exit animations to complete before the component is
removed from the DOM.
# Animation (SOLID)
Adding animation to Ark UI Components is as straightforward as with any other component, but keep in mind some
considerations when working with exit animations with JavaScript animation libraries.
## Animating with CSS
The most straightforward method to animate your elements is using CSS. You can animate both the mounting and unmounting
phases with CSS. The latter is achievable because Ark UI Components postpones the unmounting while your animation runs.
Below is a simple example of creating a fade-in and fade-out animation using CSS keyframes:
```css
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes fadeOut {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
```
You can use these keyframes to animate any element during its lifecycle. For instance, to apply the `fadeIn` animation
when your `Tooltip` enters the 'open' state, and `fadeOut` when it enters the 'closed' state, you could use the
following styles:
```css
[data-scope='tooltip'][data-part='content'][data-state='open'] {
animation: fadeIn 300ms ease-out;
}
[data-scope='tooltip'][data-part='content'][data-state='closed'] {
animation: fadeOut 300ms ease-in;
}
```
## Animating with JS Libraries
There's plenty of versatility when it comes to animating your Ark UI Elements with JavaScript libraries. Various
libraries such as GreenSock, anime.js, Framer Motion, and more can add a new level of interaction and feedback to your
UI components.
One significant advantage of using Ark UI Elements is the control you have over the unmounting phase of your components.
This is primarily facilitated through the `present` prop. The `present` prop allows the component to stay mounted even
after its enclosing condition has been falsified, allowing for exit animations to complete before the component is
removed from the DOM.
# Animation (VUE)
Adding animation to Ark UI Components is as straightforward as with any other component, but keep in mind some
considerations when working with exit animations with JavaScript animation libraries.
## Animating with CSS
The most straightforward method to animate your elements is using CSS. You can animate both the mounting and unmounting
phases with CSS. The latter is achievable because Ark UI Components postpones the unmounting while your animation runs.
Below is a simple example of creating a fade-in and fade-out animation using CSS keyframes:
```css
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes fadeOut {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
```
You can use these keyframes to animate any element during its lifecycle. For instance, to apply the `fadeIn` animation
when your `Tooltip` enters the 'open' state, and `fadeOut` when it enters the 'closed' state, you could use the
following styles:
```css
[data-scope='tooltip'][data-part='content'][data-state='open'] {
animation: fadeIn 300ms ease-out;
}
[data-scope='tooltip'][data-part='content'][data-state='closed'] {
animation: fadeOut 300ms ease-in;
}
```
## Animating with JS Libraries
There's plenty of versatility when it comes to animating your Ark UI Elements with JavaScript libraries. Various
libraries such as GreenSock, anime.js, Framer Motion, and more can add a new level of interaction and feedback to your
UI components.
One significant advantage of using Ark UI Elements is the control you have over the unmounting phase of your components.
This is primarily facilitated through the `present` prop. The `present` prop allows the component to stay mounted even
after its enclosing condition has been falsified, allowing for exit animations to complete before the component is
removed from the DOM.
# Closed Components (REACT)
## Motivation
Writing a few lines of code every time you need a simple `Avatar` is tedious. Creating a dedicated component
encapsulates logic, simplifies the API, ensures consistent usage, and maintains clean code. This approach enhances
reusability, making the component easier to maintain and test.
Here's an example of an `Avatar` component that can be used consistently across your application:
```tsx
import { Avatar as ArkAvatar } from '@ark-ui/react/avatar'
import { UserIcon } from 'lucide-react'
import { forwardRef } from 'react'
export interface AvatarProps extends ArkAvatar.RootProps {
name?: string
src?: string
}
export const Avatar = forwardRef
{getInitials(name) || } ``` # Closed Components (SOLID) ## Motivation Writing a few lines of code every time you need a simple `Avatar` is tedious. Creating a dedicated component encapsulates logic, simplifies the API, ensures consistent usage, and maintains clean code. This approach enhances reusability, making the component easier to maintain and test. Here's an example of an `Avatar` component that can be used consistently across your application: ```tsx import { Avatar as ArkAvatar } from '@ark-ui/solid/avatar' import { UserIcon } from 'lucide-solid' import { Show, splitProps } from 'solid-js' export interface AvatarProps extends ArkAvatar.RootProps { name?: string src?: string } export const Avatar = (props: AvatarProps) => { const [localProps, rootProps] = splitProps(props, ['name', 'src']) return ( }> {getInitials(localProps.name)} ``` # Closed Components (VUE) ## Motivation Writing a few lines of code every time you need a simple `Avatar` is tedious. Creating a dedicated component encapsulates logic, simplifies the API, ensures consistent usage, and maintains clean code. This approach enhances reusability, making the component easier to maintain and test. Here's an example of an `Avatar` component that can be used consistently across your application: ```vue {{ getInitials }} ``` # Collection (REACT) Collections are used to manage a collection of some kind, like menus, select, combobox, etc. They provide functionalities such as sorting, searching, getting next or previous items, converting items to values or strings, checking if an item is disabled, and more. ## List Collection A list collection is a collection that is based on an array of items. It is created by passing an array of items to the constructor. ```ts import { createListCollection } from '@ark-ui/react/collection' const collection = createListCollection({ items: [ { label: 'Apple', value: 'apple' }, { label: 'Banana', value: 'banana' }, ], }) console.log(collection.items) // [{ label: 'Apple', value: 'apple' }, { label: 'Banana', value: 'banana' }] ``` ### Converting value to item Use the `find` or `findMany` method to convert a value to an item. ```ts const item = collection.find('banana') console.log(item) // { label: "Banana", value: "banana" } const items = collection.findMany(['apple', 'banana']) console.log(items) // [{ label: "Apple", value: "apple" }, { label: "Banana", value: "banana" }] ``` ### Value Traversal Use the `getNextValue` or `getPreviousValue` method to get the next or previous item based on a value. ```ts const nextValue = collection.getNextValue('apple') console.log(nextValue) // banana const previousItem = collection.getPreviousValue('banana') console.log(previousItem) // apple ``` Likewise, use the `firstValue` or `lastValue` computed properties to get the first or last item. ```ts console.log(collection.firstValue) // apple console.log(collection.lastValue) // banana ``` ### Check for value existence Use the `has` method to check if a value exists in the collection. ```ts const hasValue = collection.has('apple') console.log(hasValue) // true ``` ### Working with custom objects If you are working with custom objects, you can pass a function to the `itemToString` and `itemToValue` options to specify how to convert an item to a string and a value, respectively. > By default, we look for the `label` and `value` properties in the item. ```ts import { createListCollection } from '@ark-ui/react/collection' const collection = createListCollection({ items: [ { id: 1, name: 'apple' }, { id: 2, name: 'banana' }, { id: 3, name: 'cherry' }, ], itemToString: (item) => item.name, itemToValue: (item) => item.id, }) ``` To mark an item as disabled, pass a function to the `isItemDisabled` option. > By default, we look for the `disabled` property in the item. ```ts import { createListCollection } from '@ark-ui/react/collection' const collection = createListCollection({ items: [ { id: 1, name: 'apple' }, { id: 2, name: 'banana' }, { id: 3, name: 'cherry' }, ], isItemDisabled: (item) => item.id === 2, }) ``` ### Reorder items Use the `reorder` method to reorder items by passing the starting index and the ending index of the item to be moved. ```ts const fromIndex = 1 // Banana const toIndex = 0 // Apple collection.reorder(fromIndex, toIndex) console.log(collection.items) // [{ label: "Banana", value: "banana" }, { label: "Apple", value: "apple" }] ``` # Collection (SOLID) Collections are used to manage a collection of some kind, like menus, select, combobox, etc. They provide functionalities such as sorting, searching, getting next or previous items, converting items to values or strings, checking if an item is disabled, and more. ## List Collection A list collection is a collection that is based on an array of items. It is created by passing an array of items to the constructor. ```ts import { createListCollection } from '@ark-ui/react/collection' const collection = createListCollection({ items: [ { label: 'Apple', value: 'apple' }, { label: 'Banana', value: 'banana' }, ], }) console.log(collection.items) // [{ label: 'Apple', value: 'apple' }, { label: 'Banana', value: 'banana' }] ``` ### Converting value to item Use the `find` or `findMany` method to convert a value to an item. ```ts const item = collection.find('banana') console.log(item) // { label: "Banana", value: "banana" } const items = collection.findMany(['apple', 'banana']) console.log(items) // [{ label: "Apple", value: "apple" }, { label: "Banana", value: "banana" }] ``` ### Value Traversal Use the `getNextValue` or `getPreviousValue` method to get the next or previous item based on a value. ```ts const nextValue = collection.getNextValue('apple') console.log(nextValue) // banana const previousItem = collection.getPreviousValue('banana') console.log(previousItem) // apple ``` Likewise, use the `firstValue` or `lastValue` computed properties to get the first or last item. ```ts console.log(collection.firstValue) // apple console.log(collection.lastValue) // banana ``` ### Check for value existence Use the `has` method to check if a value exists in the collection. ```ts const hasValue = collection.has('apple') console.log(hasValue) // true ``` ### Working with custom objects If you are working with custom objects, you can pass a function to the `itemToString` and `itemToValue` options to specify how to convert an item to a string and a value, respectively. > By default, we look for the `label` and `value` properties in the item. ```ts import { createListCollection } from '@ark-ui/react/collection' const collection = createListCollection({ items: [ { id: 1, name: 'apple' }, { id: 2, name: 'banana' }, { id: 3, name: 'cherry' }, ], itemToString: (item) => item.name, itemToValue: (item) => item.id, }) ``` To mark an item as disabled, pass a function to the `isItemDisabled` option. > By default, we look for the `disabled` property in the item. ```ts import { createListCollection } from '@ark-ui/react/collection' const collection = createListCollection({ items: [ { id: 1, name: 'apple' }, { id: 2, name: 'banana' }, { id: 3, name: 'cherry' }, ], isItemDisabled: (item) => item.id === 2, }) ``` ### Reorder items Use the `reorder` method to reorder items by passing the starting index and the ending index of the item to be moved. ```ts const fromIndex = 1 // Banana const toIndex = 0 // Apple collection.reorder(fromIndex, toIndex) console.log(collection.items) // [{ label: "Banana", value: "banana" }, { label: "Apple", value: "apple" }] ``` # Collection (VUE) Collections are used to manage a collection of some kind, like menus, select, combobox, etc. They provide functionalities such as sorting, searching, getting next or previous items, converting items to values or strings, checking if an item is disabled, and more. ## List Collection A list collection is a collection that is based on an array of items. It is created by passing an array of items to the constructor. ```ts import { createListCollection } from '@ark-ui/react/collection' const collection = createListCollection({ items: [ { label: 'Apple', value: 'apple' }, { label: 'Banana', value: 'banana' }, ], }) console.log(collection.items) // [{ label: 'Apple', value: 'apple' }, { label: 'Banana', value: 'banana' }] ``` ### Converting value to item Use the `find` or `findMany` method to convert a value to an item. ```ts const item = collection.find('banana') console.log(item) // { label: "Banana", value: "banana" } const items = collection.findMany(['apple', 'banana']) console.log(items) // [{ label: "Apple", value: "apple" }, { label: "Banana", value: "banana" }] ``` ### Value Traversal Use the `getNextValue` or `getPreviousValue` method to get the next or previous item based on a value. ```ts const nextValue = collection.getNextValue('apple') console.log(nextValue) // banana const previousItem = collection.getPreviousValue('banana') console.log(previousItem) // apple ``` Likewise, use the `firstValue` or `lastValue` computed properties to get the first or last item. ```ts console.log(collection.firstValue) // apple console.log(collection.lastValue) // banana ``` ### Check for value existence Use the `has` method to check if a value exists in the collection. ```ts const hasValue = collection.has('apple') console.log(hasValue) // true ``` ### Working with custom objects If you are working with custom objects, you can pass a function to the `itemToString` and `itemToValue` options to specify how to convert an item to a string and a value, respectively. > By default, we look for the `label` and `value` properties in the item. ```ts import { createListCollection } from '@ark-ui/react/collection' const collection = createListCollection({ items: [ { id: 1, name: 'apple' }, { id: 2, name: 'banana' }, { id: 3, name: 'cherry' }, ], itemToString: (item) => item.name, itemToValue: (item) => item.id, }) ``` To mark an item as disabled, pass a function to the `isItemDisabled` option. > By default, we look for the `disabled` property in the item. ```ts import { createListCollection } from '@ark-ui/react/collection' const collection = createListCollection({ items: [ { id: 1, name: 'apple' }, { id: 2, name: 'banana' }, { id: 3, name: 'cherry' }, ], isItemDisabled: (item) => item.id === 2, }) ``` ### Reorder items Use the `reorder` method to reorder items by passing the starting index and the ending index of the item to be moved. ```ts const fromIndex = 1 // Banana const toIndex = 0 // Apple collection.reorder(fromIndex, toIndex) console.log(collection.items) // [{ label: "Banana", value: "banana" }, { label: "Apple", value: "apple" }] ``` # Component State (REACT) ## Context Components Context components expose state and functions to child components. In this example, `Avatar.Fallback` renders based on `loaded` state. ```tsx import { Avatar } from '@ark-ui/react/avatar' export const Context = () => ( {(avatar) => {avatar.loaded ? 'PA' : 'Loading'} }{['React', 'Solid', 'Vue'].map((item) => ( ) } ``` See more in [Examples](/react/examples/popover-selection). # Component State (SOLID) ## Context Components Context components expose state and functions to child components. In this example, `Avatar.Fallback` renders based on `loaded` state. ```tsx import { Avatar } from '@ark-ui/solid/avatar' export const Context = () => (What is {item}? {item} is a JavaScript library for building user interfaces. {(avatar) => {avatar().loaded ? 'PA' : 'Loading'} }(() => ({ multiple: true, value: value(), onValueChange: (e) => setValue(e.value), })) const accordion = useAccordion(accordionProps) return ( <> {(item) => ( What is {item()}? {item()} is a JavaScript library for building user interfaces. {{ avatar.loaded ? 'PA' : 'Loading' }} What is {{ item }}? {{ item }} is a JavaScript library for building user interfaces. Ark UI }>Open } > Ark UI Ark UI {/* … */} {/* … */} {/* … */} {/* … */} {/* … */} {/* … */} {['React', 'Solid', 'Vue'].map((item) => ( ) } ``` ### Collapsible Use the `collapsible` prop to allow the user to collapse all panels. ```tsx import { Accordion } from '@ark-ui/react/accordion' import { ChevronDownIcon } from 'lucide-react' export const Collapsible = () => { return (What is {item}? {item} is a JavaScript library for building user interfaces. {['React', 'Solid', 'Vue'].map((item) => ( ) } ``` ### Multiple Panels Use the `multiple` prop to allow multiple panels to be expanded simultaneously. ```tsx import { Accordion } from '@ark-ui/react/accordion' import { ChevronDownIcon } from 'lucide-react' export const Multiple = () => { return ({item} {item} is a JavaScript library for building user interfaces. {['React', 'Solid', 'Vue'].map((item) => ( ) } ``` ### Horizontal Orientation By default, the Accordion is oriented vertically. Use the `orientation` prop to switch to a horizontal layout. ```tsx import { Accordion } from '@ark-ui/react/accordion' import { ChevronDownIcon } from 'lucide-react' export const Horizontal = () => { return ({item} {item} is a JavaScript library for building user interfaces. {['React', 'Solid', 'Vue'].map((item) => ( ) } ``` ### Animate Content Size Use the `--height` and/or `--width` CSS variables to animate the size of the content when it expands or closes: ```css @keyframes slideDown { from { opacity: 0.01; height: 0; } to { opacity: 1; height: var(--height); } } @keyframes slideUp { from { opacity: 1; height: var(--height); } to { opacity: 0.01; height: 0; } } [data-scope='accordion'][data-part='item-content'][data-state='open'] { animation: slideDown 250ms ease-in-out; } [data-scope='accordion'][data-part='item-content'][data-state='closed'] { animation: slideUp 200ms ease-in-out; } ``` ### Using the Root Provider The `RootProvider` component provides a context for the accordion. It accepts the value of the `useAccordion` hook. You can leverage it to access the component state and methods from outside the accordion. ```tsx import { Accordion, useAccordion } from '@ark-ui/react/accordion' import { ChevronDownIcon } from 'lucide-react' import { useState } from 'react' export const RootProvider = () => { const [value, setValue] = useState(['React']) const accordion = useAccordion({ multiple: true, value, onValueChange: (e) => setValue(e.value), }) return ( <>What is {item}? {item} is a JavaScript library for building user interfaces. {['React', 'Solid', 'Vue'].map((item) => ( ) } ``` > If you're using the `RootProvider` component, you don't need to use the `Root` component. ### Accessing the focused item Use the `focusedValue` property to get the value of the focused accordion item. ```tsx import { Accordion } from '@ark-ui/react/accordion' import { ChevronDownIcon } from 'lucide-react' export const ContextFocusedValue = () => { return (What is {item}? {item} is a JavaScript library for building user interfaces. {(context) => Focused item: {context.focusedValue}} {['React', 'Solid', 'Vue'].map((item) => (What is {item}? {item} is a JavaScript library for building user interfaces. {(context) => Selected items: {context.value.join(', ')}} {['React', 'Solid', 'Vue'].map((item) => (What is {item}? {item} is a JavaScript library for building user interfaces. {(context) => } {['React', 'Solid', 'Vue'].map((item) => (What is {item}? {item} is a JavaScript library for building user interfaces. {(context) => { const itemState = context.getItemState(items[2]) return ( <> Vue State: Disabled: {itemState.disabled ? 'Y' : 'N'} Expanded: {itemState.expanded ? 'Y' : 'N'} Focused: {itemState.focused ? 'Y' : 'N'} ) }} {items.map((item) => (What is {item.value}? {item.value} is a JavaScript library for building user interfaces. {(item) => ( What is {item()}? {item()} is a JavaScript library for building user interfaces. {(item) => ( What is {item()}? {item()} is a JavaScript library for building user interfaces. {(item) => ( What is {item()}? {item()} is a JavaScript library for building user interfaces. {(item) => ( What is {item()}? {item()} is a JavaScript library for building user interfaces. (() => ({ multiple: true, value: value(), onValueChange: (e) => setValue(e.value), })) const accordion = useAccordion(accordionProps) return ( <> {(item) => ( What is {item()}? {item()} is a JavaScript library for building user interfaces. {(accordion) => Focused item: {accordion().focusedValue}} {(item) => ( What is {item()}? {item()} is a JavaScript library for building user interfaces. {(context) => Selected items: {context().value.join(', ')}} {(item) => ( What is {item()}? {item()} is a JavaScript library for building user interfaces. {(context) => } {(item) => ( What is {item()}? {item()} is a JavaScript library for building user interfaces. {(accordion) => { const itemState = createMemo(() => accordion().getItemState(items[2])) return ( <> Vue State: Disabled: {itemState().disabled ? 'Y' : 'N'} Expanded: {itemState().expanded ? 'Y' : 'N'} Focused: {itemState().focused ? 'Y' : 'N'} ) }} {(item) => ( What is {item().value}? {item().value} is a JavaScript library for building user interfaces. What is {{ item }}? {{ item }} is a JavaScript library for building user interfaces. What is {{ item }}? {{ item }} is a JavaScript library for building user interfaces. What is {{ item }}? {{ item }} is a JavaScript library for building user interfaces. What is {{ item }}? {{ item }} is a JavaScript library for building user interfaces. What is {{ item }}? {{ item }} is a JavaScript library for building user interfaces. Focused item: {{ context.focusedValue }} What is {{ item }}? {{ item }} is a JavaScript library for building user interfaces. Selected items: {{ context.value.join(', ') }} What is {{ item }}? {{ item }} is a JavaScript library for building user interfaces. What is {{ item }}? {{ item }} is a JavaScript library for building user interfaces. Vue State: Disabled: {{ context.getItemState(items[2]).disabled ? 'Y' : 'N' }} Expanded: {{ context.getItemState(items[2]).expanded ? 'Y' : 'N' }} Focused: {{ context.getItemState(items[2]).focused ? 'Y' : 'N' }} What is {{ item }}? {{ item }} is a JavaScript library for building user interfaces. ` Required: true Default Value: `undefined` Description: undefined **`asChild`** Type: `boolean` Required: false Default Value: `undefined` Description: Use the provided child element as the default rendered element, combining their props and behavior. **`lazyMount`** Type: `boolean` Required: false Default Value: `false` Description: Whether to enable lazy mounting **`unmountOnExit`** Type: `boolean` Required: false Default Value: `false` Description: Whether to unmount on exit. ## Accessibility This component complies with the [Accordion WAI-ARIA design pattern](https://www.w3.org/WAI/ARIA/apg/patterns/accordion/). ### Keyboard Support **`Space`** Description: When focus is on an trigger of a collapsed item, the item is expanded **`Enter`** Description: When focus is on an trigger of a collapsed section, expands the section. **`Tab`** Description: Moves focus to the next focusable element **`Shift + Tab`** Description: Moves focus to the previous focusable element **`ArrowDown`** Description: Moves focus to the next trigger **`ArrowUp`** Description: Moves focus to the previous trigger. **`Home`** Description: When focus is on an trigger, moves focus to the first trigger. **`End`** Description: When focus is on an trigger, moves focus to the last trigger. # Avatar (REACT) ## Anatomy To set up the avatar correctly, you'll need to understand its anatomy and how we name its parts. > Each part includes a `data-part` attribute to help identify them in the DOM. ## Examples Learn how to use the `Avatar` component in your project. Let's take a look at the most basic example: ```tsx import { Avatar } from '@ark-ui/react/avatar' export const Basic = () => ( PA PA PA ) } const Demo = () => { return ( JD PA PA PA ) } const Demo = () => { return ( JD PA PA PA ) } const Demo = () => { return ( JD ` Required: true Default Value: `undefined` Description: undefined **`asChild`** Type: `boolean` Required: false Default Value: `undefined` Description: Use the provided child element as the default rendered element, combining their props and behavior. # Carousel (REACT) ## Features - Native CSS Scroll Snap integration for smooth, performant animations - Flexible orientation support (horizontal and vertical layouts) - Customizable slide alignment (start, center, or end positions) - Multi-slide display capabilities for complex layouts - Automatic playback with configurable looping behavior - Adjustable slide spacing and gap controls ## Anatomy To set up the carousel correctly, you'll need to understand its anatomy and how we name its parts. > Each part includes a `data-part` attribute to help identify them in the DOM. ## Examples Learn how to use the `Carousel` component in your project. Let's take a look at the most basic example: ```tsx import { Carousel } from '@ark-ui/react/carousel' export const Basic = () => { const images = Array.from({ length: 5 }, (_, i) => `https://picsum.photos/seed/${i + 1}/500/300`) return ( Previous Next {images.map((_, index) => ( ))} {images.map((image, index) => ( setPage(e.page)}> ) } ``` ### Autoplay The Carousel can play automatically. Just add the `autoplay` prop. You'll probably want to add `loop` too, so it keeps going after the last slide. ```tsx import { Carousel } from '@ark-ui/react/carousel' const images = Array.from({ length: 5 }, (_, i) => `https://picsum.photos/seed/${i + 1}/500/300`) export const Autoplay = () => { return (Previous Next {images.map((_, index) => ( ))} {images.map((image, index) => ( {({ isPlaying }) => (isPlaying ? 'Pause' : 'Play')} {images.map((_, index) => ( ))} {images.map((image, index) => ( Previous Next {images.map((_, index) => ( ))} {images.map((image, index) => ( Previous Next {(_, index) => } {(image, index) => ( setPage(details.page)}> ) } ``` ### Autoplay The Carousel can play automatically. Just add the `autoplay` prop. You'll probably want to add `loop` too, so it keeps going after the last slide. ```tsx import { Carousel } from '@ark-ui/solid/carousel' import { Index } from 'solid-js' const images = Array.from({ length: 5 }, (_, i) => `https://picsum.photos/seed/${i + 1}/500/300`) export const Autoplay = () => { return (Previous Next {(_, index) => } {(image, index) => ( {(carousel) => (carousel().isPlaying ? 'Pause' : 'Play')} {(_, index) => } {(image, index) => ( Previous Next {(_, index) => } {(image, index) => ( Previous Next Previous Next Current page: {{ page }}
``` ### Autoplay The Carousel can play automatically. Just add the `autoplay` prop. You'll probably want to add `loop` too, so it keeps going after the last slide. ```vue{{ context.isPlaying ? 'Pause' : 'Play' }} Previous Next ` Required: true Default Value: `undefined` Description: undefined **`asChild`** Type: `boolean` Required: false Default Value: `undefined` Description: Use the provided child element as the default rendered element, combining their props and behavior. ## Accessibility Complies with the [Carousel WAI-ARIA design pattern](https://www.w3.org/WAI/ARIA/apg/patterns/carousel/). # Checkbox (REACT) ## Anatomy To set up the checkbox correctly, you'll need to understand its anatomy and how we name its parts. > Each part includes a `data-part` attribute to help identify them in the DOM. ### Design impact on the asChild property The `Checkbox.Root` element of the checkbox is a `label` element. This is because the checkbox is a form control and should be associated with a label to provide context and meaning to the user. Otherwise, the HTML and accessibility structure will be invalid. > If you need to use the `asChild` property, make sure that the `label` element is the direct child of the > `Checkbox.Root` component. ## Examples Learn how to use the `Checkbox` component in your project. Let's take a look at the most basic example: ```tsx import { Checkbox } from '@ark-ui/react/checkbox' import { CheckIcon } from 'lucide-react' export const Basic = () => ( Checkbox (true) return ( setChecked(e.checked)}> ) } ``` ### Indeterminate Checkbox In some cases, you may need a checkbox to represent a state that is neither checked nor unchecked, known as the indeterminate state. This can be achieved by setting the `checked` prop to `indeterminate`: ```tsx import { Checkbox } from '@ark-ui/react/checkbox' import { CheckIcon, MinusIcon } from 'lucide-react' export const Indeterminate = () => (Checkbox Checkbox {items.map((item) => ( ) ``` ### Render Prop Usage For cases where you need more flexibility in rendering, the Checkbox component offers the use of a render prop. The render prop function gives you access to the checkbox's API, allowing you to customize the checkbox control's rendering: ```tsx import { Checkbox } from '@ark-ui/react/checkbox' import { CheckIcon } from 'lucide-react' export const RenderProp = () => ({item.label} {(checkbox) => Checkbox {checkbox.checked.toString()} }Label Additional Info Error Info Checkbox Checkbox (true) return ( setChecked(e.checked)}> ) } ``` ### Indeterminate Checkbox In some cases, you may need a checkbox to represent a state that is neither checked nor unchecked, known as the indeterminate state. This can be achieved by setting the `checked` prop to `indeterminate`: ```tsx import { Checkbox } from '@ark-ui/solid/checkbox' import { CheckIcon, MinusIcon } from 'lucide-solid' export const Indeterminate = () => (Checkbox Checkbox {(item) => ( {item.label} {(checkbox) => Checkbox {checkbox().checked.toString()} }Label Additional Info Error Info Checkbox Checkbox Checkbox Checkbox {{ item.label }} Checkbox {{ checkbox.checked.toString() }} Label Additional Info Error Info Checkbox ` Required: true Default Value: `undefined` Description: undefined **`asChild`** Type: `boolean` Required: false Default Value: `undefined` Description: Use the provided child element as the default rendered element, combining their props and behavior. ## Accessibility Complies with the [Checkbox WAI-ARIA design pattern](https://www.w3.org/WAI/ARIA/apg/patterns/checkbox/). ### Keyboard Support **`Space`** Description: Toggle the checkbox # Clipboard (REACT) ## Anatomy To set up the Clipboard correctly, you'll need to understand its anatomy and how we name its parts. > Each part includes a `data-part` attribute to help identify them in the DOM. ## Examples Learn how to use the `Clipboard` component in your project. Let's take a look at the most basic example: ```tsx import { Clipboard } from '@ark-ui/react/clipboard' import { CheckIcon, ClipboardCopyIcon } from 'lucide-react' export const Basic = () => { return ( Copy this link }> Copy this link }> | ReactPortal | Promise<...>` Required: false Default Value: `undefined` Description: undefined ### Input #### Props **`asChild`** Type: `boolean` Required: false Default Value: `undefined` Description: Use the provided child element as the default rendered element, combining their props and behavior. #### Data Attributes **`data-scope`**: clipboard **`data-part`**: input **`data-copied`**: Present when copied state is true **`data-readonly`**: Present when read-only ### Label #### Props **`asChild`** Type: `boolean` Required: false Default Value: `undefined` Description: Use the provided child element as the default rendered element, combining their props and behavior. #### Data Attributes **`data-scope`**: clipboard **`data-part`**: label **`data-copied`**: Present when copied state is true ### RootProvider #### Props **`value`** Type: `UseClipboardReturn` Required: true Default Value: `undefined` Description: undefined **`asChild`** Type: `boolean` Required: false Default Value: `undefined` Description: Use the provided child element as the default rendered element, combining their props and behavior. ### Trigger #### Props **`asChild`** Type: `boolean` Required: false Default Value: `undefined` Description: Use the provided child element as the default rendered element, combining their props and behavior. #### Data Attributes **`data-scope`**: clipboard **`data-part`**: trigger **`data-copied`**: Present when copied state is true ### ValueText #### Props **`asChild`** Type: `boolean` Required: false Default Value: `undefined` Description: Use the provided child element as the default rendered element, combining their props and behavior. # Clipboard (SOLID) ## Anatomy To set up the Clipboard correctly, you'll need to understand its anatomy and how we name its parts. > Each part includes a `data-part` attribute to help identify them in the DOM. ## Examples Learn how to use the `Clipboard` component in your project. Let's take a look at the most basic example: ```tsx import { Clipboard } from '@ark-ui/solid/clipboard' import { CheckIcon, ClipboardCopyIcon } from 'lucide-solid' export const Basic = () => { return ( Copy this link }> Copy this link }> Copy this link Copy this link ` Required: true Default Value: `undefined` Description: undefined **`asChild`** Type: `boolean` Required: false Default Value: `undefined` Description: Use the provided child element as the default rendered element, combining their props and behavior. ### Trigger #### Props **`asChild`** Type: `boolean` Required: false Default Value: `undefined` Description: Use the provided child element as the default rendered element, combining their props and behavior. #### Data Attributes **`data-scope`**: clipboard **`data-part`**: trigger **`data-copied`**: Present when copied state is true ### ValueText #### Props **`asChild`** Type: `boolean` Required: false Default Value: `undefined` Description: Use the provided child element as the default rendered element, combining their props and behavior. # Collapsible (REACT) ## Animation You can use CSS animations to create smooth transitions for opening and closing the Collapsible content. Utilize the `data-state` attribute in combination with the `--height` CSS variable to animate the open and closed states. ```css @keyframes slideDown { from { height: 0; } to { height: var(--height); } } @keyframes slideUp { from { height: var(--height); } to { height: 0; } } [data-scope='collapsible'][data-part='content'][data-state='open'] { animation: slideDown 250ms; } [data-scope='collapsible'][data-part='content'][data-state='closed'] { animation: slideUp 200ms; } ``` ## Examples Learn how to use the `Collapsible` component in your project. Let's examine the most basic example: ```tsx import { Collapsible } from '@ark-ui/react/collapsible' export const Basic = () => ( Toggle Content alert('on exit')}> ) ``` ### Lazy Mount To delay the mounting of the `Collapsible.Content`, use the `lazyMount` prop: ```tsx import { Collapsible } from '@ark-ui/react/collapsible' export const LazyMount = () => (Toggle Content Toggle Content Toggle Content Toggle Content Toggle Content Toggle Content alert('on exit')}> ) ``` ### Lazy Mount To delay the mounting of the `Collapsible.Content`, use the `lazyMount` prop: ```tsx import { Collapsible } from '@ark-ui/solid/collapsible' export const LazyMount = () => (Toggle Content Toggle Content Toggle Content Toggle Content Toggle Content Toggle Content Toggle Content Toggle Content Toggle Content Toggle Content Toggle Content Color Toggle ColorFormat ✓ ✓ ✓ Pick color setColor(e.value)}> ) } ``` ### Using the Field Component The `Field` component helps manage form-related state and accessibility attributes of a color picker. It includes handling ARIA labels, helper text, and error text to ensure proper accessibility. ```tsx import { ColorPicker, parseColor } from '@ark-ui/react/color-picker' import { Field } from '@ark-ui/react/field' export const WithField = (props: Field.RootProps) => (Color ✓ ✓ ✓ Pick color Label Additional Info Error Info Color Toggle ColorFormat ✓ ✓ ✓ Pick color
When focus is on a trigger of a swatch, selects the color (and closes the color picker)
When focus is on the input or channel inputs, selects the color **`ArrowLeft`** Description: When focus is on the color area, decreases the hue value of the color
When focus is on the channel sliders, decreases the value of the channel **`ArrowRight`** Description: When focus is on the color area, increases the hue value of the color
When focus is on the channel sliders, increases the value of the channel **`ArrowUp`** Description: When focus is on the color area, increases the saturation value of the color
When focus is on the channel sliders, increases the value of the channel **`ArrowDown`** Description: When focus is on the color area, decreases the saturation value of the color
When focus is on the channel sliders, decreases the value of the channel **`Esc`** Description: Closes the color picker and moves focus to the trigger # Color Picker (SOLID) ## Anatomy To set up the color picker correctly, you'll need to understand its anatomy and how we name its parts. > Each part includes a `data-part` attribute to help identify them in the DOM. ## Examples Learn how to use the `ColorPicker` component in your project. Let's take a look at the most basic example ```tsx import { ColorPicker, parseColor } from '@ark-ui/solid/color-picker' export const Basic = () => { return (Color Toggle ColorFormat ✓ ✓ ✓ Pick color setColor(e.value)} onValueChangeEnd={(e) => console.log(e.valueAsString)} > ) } ``` ### Using the Field Component The `Field` component helps manage form-related state and accessibility attributes of a color picker. It includes handling ARIA labels, helper text, and error text to ensure proper accessibility. ```tsx import { ColorPicker, parseColor } from '@ark-ui/solid/color-picker' import { Field } from '@ark-ui/solid/field' export const WithField = (props: Field.RootProps) => (Color ✓ ✓ ✓ Pick color Label Additional Info Error Info Color Toggle ColorFormat ✓ ✓ ✓ Pick color
When focus is on a trigger of a swatch, selects the color (and closes the color picker)
When focus is on the input or channel inputs, selects the color **`ArrowLeft`** Description: When focus is on the color area, decreases the hue value of the color
When focus is on the channel sliders, decreases the value of the channel **`ArrowRight`** Description: When focus is on the color area, increases the hue value of the color
When focus is on the channel sliders, increases the value of the channel **`ArrowUp`** Description: When focus is on the color area, increases the saturation value of the color
When focus is on the channel sliders, increases the value of the channel **`ArrowDown`** Description: When focus is on the color area, decreases the saturation value of the color
When focus is on the channel sliders, decreases the value of the channel **`Esc`** Description: Closes the color picker and moves focus to the trigger # Color Picker (VUE) ## Anatomy To set up the color picker correctly, you'll need to understand its anatomy and how we name its parts. > Each part includes a `data-part` attribute to help identify them in the DOM. ## Examples Learn how to use the `ColorPicker` component in your project. Let's take a look at the most basic example ```vueColor Toggle ColorFormat ✓ ✓ ✓ Pick color Color ✓ ✓ ✓ Pick color Label Additional Info Error Info Color Toggle ColorFormat ✓ ✓ ✓ Pick color ` Required: true Default Value: `undefined` Description: undefined **`asChild`** Type: `boolean` Required: false Default Value: `undefined` Description: Use the provided child element as the default rendered element, combining their props and behavior. **`lazyMount`** Type: `boolean` Required: false Default Value: `false` Description: Whether to enable lazy mounting **`unmountOnExit`** Type: `boolean` Required: false Default Value: `false` Description: Whether to unmount on exit. ### SwatchGroup #### Props **`asChild`** Type: `boolean` Required: false Default Value: `undefined` Description: Use the provided child element as the default rendered element, combining their props and behavior. ### SwatchIndicator #### Props **`asChild`** Type: `boolean` Required: false Default Value: `undefined` Description: Use the provided child element as the default rendered element, combining their props and behavior. ### Swatch #### Props **`value`** Type: `string | Color` Required: true Default Value: `undefined` Description: The color value **`asChild`** Type: `boolean` Required: false Default Value: `undefined` Description: Use the provided child element as the default rendered element, combining their props and behavior. **`respectAlpha`** Type: `boolean` Required: false Default Value: `undefined` Description: Whether to include the alpha channel in the color #### Data Attributes **`data-scope`**: color-picker **`data-part`**: swatch **`data-state`**: "checked" | "unchecked" **`data-value`**: The value of the item ### SwatchTrigger #### Props **`value`** Type: `string | Color` Required: true Default Value: `undefined` Description: The color value **`asChild`** Type: `boolean` Required: false Default Value: `undefined` Description: Use the provided child element as the default rendered element, combining their props and behavior. **`disabled`** Type: `boolean` Required: false Default Value: `undefined` Description: Whether the swatch trigger is disabled #### Data Attributes **`data-scope`**: color-picker **`data-part`**: swatch-trigger **`data-state`**: "checked" | "unchecked" **`data-value`**: The value of the item **`data-disabled`**: Present when disabled ### TransparencyGrid #### Props **`asChild`** Type: `boolean` Required: false Default Value: `undefined` Description: Use the provided child element as the default rendered element, combining their props and behavior. **`size`** Type: `string` Required: false Default Value: `undefined` Description: undefined ### Trigger #### Props **`asChild`** Type: `boolean` Required: false Default Value: `undefined` Description: Use the provided child element as the default rendered element, combining their props and behavior. #### Data Attributes **`data-scope`**: color-picker **`data-part`**: trigger **`data-disabled`**: Present when disabled **`data-readonly`**: Present when read-only **`data-invalid`**: Present when invalid **`data-placement`**: The placement of the trigger **`data-state`**: "open" | "closed" **`data-focus`**: Present when focused ### ValueSwatch #### Props **`asChild`** Type: `boolean` Required: false Default Value: `undefined` Description: Use the provided child element as the default rendered element, combining their props and behavior. **`respectAlpha`** Type: `boolean` Required: false Default Value: `undefined` Description: Whether to include the alpha channel in the color ### ValueText #### Props **`asChild`** Type: `boolean` Required: false Default Value: `undefined` Description: Use the provided child element as the default rendered element, combining their props and behavior. #### Data Attributes **`data-scope`**: color-picker **`data-part`**: value-text **`data-disabled`**: Present when disabled **`data-focus`**: Present when focused ### View #### Props **`format`** Type: `ColorFormat` Required: true Default Value: `undefined` Description: undefined **`asChild`** Type: `boolean` Required: false Default Value: `undefined` Description: Use the provided child element as the default rendered element, combining their props and behavior. ## Accessibility ### Keyboard Support **`Enter`** Description: When focus is on the trigger, opens the color picker
When focus is on a trigger of a swatch, selects the color (and closes the color picker)
When focus is on the input or channel inputs, selects the color **`ArrowLeft`** Description: When focus is on the color area, decreases the hue value of the color
When focus is on the channel sliders, decreases the value of the channel **`ArrowRight`** Description: When focus is on the color area, increases the hue value of the color
When focus is on the channel sliders, increases the value of the channel **`ArrowUp`** Description: When focus is on the color area, increases the saturation value of the color
When focus is on the channel sliders, increases the value of the channel **`ArrowDown`** Description: When focus is on the color area, decreases the saturation value of the color
When focus is on the channel sliders, decreases the value of the channel **`Esc`** Description: Closes the color picker and moves focus to the trigger # Combobox (REACT) ## Anatomy To set up the combobox correctly, you'll need to understand its anatomy and how we name its parts. > Each part includes a `data-part` attribute to help identify them in the DOM. ## Examples Learn how to use the `Combobox` component in your project. Let's take a look at the most basic example ```tsx import { Combobox, createListCollection } from '@ark-ui/react/combobox' import { Portal } from '@ark-ui/react/portal' import { useMemo, useState } from 'react' const initialItems = ['React', 'Solid', 'Vue'] export const Basic = () => { const [items, setItems] = useState(initialItems) const collection = useMemo(() => createListCollection({ items }), [items]) const handleInputChange = (details: Combobox.InputValueChangeDetails) => { setItems(initialItems.filter((item) => item.toLowerCase().includes(details.inputValue.toLowerCase()))) } return (Framework Open Clear Frameworks {collection.items.map((item) => ({item} ✓ Framework Open Clear Frameworks {collection.items.map((item) => ({item.label} ✓ Label Open Clear {collection.items.map((item) => ( {item} ✓ Additional Info Error Info Framework Open Clear Frameworks {collection.items.map((item) => ({item} ✓ ` Required: true Default Value: `undefined` Description: The collection of items **`allowCustomValue`** Type: `boolean` Required: false Default Value: `undefined` Description: Whether to allow typing custom values in the input **`asChild`** Type: `boolean` Required: false Default Value: `undefined` Description: Use the provided child element as the default rendered element, combining their props and behavior. **`autoFocus`** Type: `boolean` Required: false Default Value: `undefined` Description: Whether to autofocus the input on mount **`closeOnSelect`** Type: `boolean` Required: false Default Value: `undefined` Description: Whether to close the combobox when an item is selected. **`composite`** Type: `boolean` Required: false Default Value: `true` Description: Whether the combobox is a composed with other composite widgets like tabs **`defaultHighlightedValue`** Type: `string` Required: false Default Value: `undefined` Description: The initial highlighted value of the combobox when rendered. Use when you don't need to control the highlighted value of the combobox. **`defaultInputValue`** Type: `string` Required: false Default Value: `""` Description: The initial value of the combobox's input when rendered. Use when you don't need to control the value of the combobox's input. **`defaultOpen`** Type: `boolean` Required: false Default Value: `undefined` Description: The initial open state of the combobox when rendered. Use when you don't need to control the open state of the combobox. **`defaultValue`** Type: `string[]` Required: false Default Value: `[]` Description: The initial value of the combobox's selected items when rendered. Use when you don't need to control the value of the combobox's selected items. **`disabled`** Type: `boolean` Required: false Default Value: `undefined` Description: Whether the combobox is disabled **`disableLayer`** Type: `boolean` Required: false Default Value: `undefined` Description: Whether to disable registering this a dismissable layer **`form`** Type: `string` Required: false Default Value: `undefined` Description: The associate form of the combobox. **`highlightedValue`** Type: `string` Required: false Default Value: `undefined` Description: The controlled highlighted value of the combobox **`id`** Type: `string` Required: false Default Value: `undefined` Description: The unique identifier of the machine. **`ids`** Type: `Partial<{ root: string label: string control: string input: string content: string trigger: string clearTrigger: string item(id: string, index?: number | undefined): string positioner: string itemGroup(id: string | number): string itemGroupLabel(id: string | number): string }>` Required: false Default Value: `undefined` Description: The ids of the elements in the combobox. Useful for composition. **`immediate`** Type: `boolean` Required: false Default Value: `undefined` Description: Whether to synchronize the present change immediately or defer it to the next frame **`inputBehavior`** Type: `'none' | 'autohighlight' | 'autocomplete'` Required: false Default Value: `"none"` Description: Defines the auto-completion behavior of the combobox. - `autohighlight`: The first focused item is highlighted as the user types - `autocomplete`: Navigating the listbox with the arrow keys selects the item and the input is updated **`inputValue`** Type: `string` Required: false Default Value: `undefined` Description: The controlled value of the combobox's input **`invalid`** Type: `boolean` Required: false Default Value: `undefined` Description: Whether the combobox is invalid **`lazyMount`** Type: `boolean` Required: false Default Value: `false` Description: Whether to enable lazy mounting **`loopFocus`** Type: `boolean` Required: false Default Value: `true` Description: Whether to loop the keyboard navigation through the items **`multiple`** Type: `boolean` Required: false Default Value: `undefined` Description: Whether to allow multiple selection. **Good to know:** When `multiple` is `true`, the `selectionBehavior` is automatically set to `clear`. It is recommended to render the selected items in a separate container. **`name`** Type: `string` Required: false Default Value: `undefined` Description: The `name` attribute of the combobox's input. Useful for form submission **`navigate`** Type: `(details: NavigateDetails) => void` Required: false Default Value: `undefined` Description: Function to navigate to the selected item **`onExitComplete`** Type: `VoidFunction` Required: false Default Value: `undefined` Description: Function called when the animation ends in the closed state **`onFocusOutside`** Type: `(event: FocusOutsideEvent) => void` Required: false Default Value: `undefined` Description: Function called when the focus is moved outside the component **`onHighlightChange`** Type: `(details: HighlightChangeDetails ) => void` Required: false Default Value: `undefined` Description: Function called when an item is highlighted using the pointer or keyboard navigation. **`onInputValueChange`** Type: `(details: InputValueChangeDetails) => void` Required: false Default Value: `undefined` Description: Function called when the input's value changes **`onInteractOutside`** Type: `(event: InteractOutsideEvent) => void` Required: false Default Value: `undefined` Description: Function called when an interaction happens outside the component **`onOpenChange`** Type: `(details: OpenChangeDetails) => void` Required: false Default Value: `undefined` Description: Function called when the popup is opened **`onPointerDownOutside`** Type: `(event: PointerDownOutsideEvent) => void` Required: false Default Value: `undefined` Description: Function called when the pointer is pressed down outside the component **`onValueChange`** Type: `(details: ValueChangeDetails ) => void` Required: false Default Value: `undefined` Description: Function called when a new item is selected **`open`** Type: `boolean` Required: false Default Value: `undefined` Description: The controlled open state of the combobox **`openOnChange`** Type: `boolean | ((details: InputValueChangeDetails) => boolean)` Required: false Default Value: `true` Description: Whether to show the combobox when the input value changes **`openOnClick`** Type: `boolean` Required: false Default Value: `false` Description: Whether to open the combobox popup on initial click on the input **`openOnKeyPress`** Type: `boolean` Required: false Default Value: `true` Description: Whether to open the combobox on arrow key press **`placeholder`** Type: `string` Required: false Default Value: `undefined` Description: The placeholder text of the combobox's input **`positioning`** Type: `PositioningOptions` Required: false Default Value: `{ placement: "bottom-start" }` Description: The positioning options to dynamically position the menu **`present`** Type: `boolean` Required: false Default Value: `undefined` Description: Whether the node is present (controlled by the user) **`readOnly`** Type: `boolean` Required: false Default Value: `undefined` Description: Whether the combobox is readonly. This puts the combobox in a "non-editable" mode but the user can still interact with it **`required`** Type: `boolean` Required: false Default Value: `undefined` Description: Whether the combobox is required **`scrollToIndexFn`** Type: `(details: ScrollToIndexDetails) => void` Required: false Default Value: `undefined` Description: Function to scroll to a specific index **`selectionBehavior`** Type: `'replace' | 'clear' | 'preserve'` Required: false Default Value: `"replace"` Description: The behavior of the combobox input when an item is selected - `replace`: The selected item string is set as the input value - `clear`: The input value is cleared - `preserve`: The input value is preserved **`translations`** Type: `IntlTranslations` Required: false Default Value: `undefined` Description: Specifies the localized strings that identifies the accessibility elements and their states **`unmountOnExit`** Type: `boolean` Required: false Default Value: `false` Description: Whether to unmount on exit. **`value`** Type: `string[]` Required: false Default Value: `undefined` Description: The controlled value of the combobox's selected items #### Data Attributes **`data-scope`**: combobox **`data-part`**: root **`data-invalid`**: Present when invalid **`data-readonly`**: Present when read-only ### ClearTrigger #### Props **`asChild`** Type: `boolean` Required: false Default Value: `undefined` Description: Use the provided child element as the default rendered element, combining their props and behavior. #### Data Attributes **`data-scope`**: combobox **`data-part`**: clear-trigger **`data-invalid`**: Present when invalid ### Content #### Props **`asChild`** Type: `boolean` Required: false Default Value: `undefined` Description: Use the provided child element as the default rendered element, combining their props and behavior. #### Data Attributes **`data-scope`**: combobox **`data-part`**: content **`data-state`**: "open" | "closed" **`data-placement`**: The placement of the content ### Control #### Props **`asChild`** Type: `boolean` Required: false Default Value: `undefined` Description: Use the provided child element as the default rendered element, combining their props and behavior. #### Data Attributes **`data-scope`**: combobox **`data-part`**: control **`data-state`**: "open" | "closed" **`data-focus`**: Present when focused **`data-disabled`**: Present when disabled **`data-invalid`**: Present when invalid ### Input #### Props **`asChild`** Type: `boolean` Required: false Default Value: `undefined` Description: Use the provided child element as the default rendered element, combining their props and behavior. #### Data Attributes **`data-scope`**: combobox **`data-part`**: input **`data-invalid`**: Present when invalid **`data-state`**: "open" | "closed" ### ItemGroupLabel #### Props **`asChild`** Type: `boolean` Required: false Default Value: `undefined` Description: Use the provided child element as the default rendered element, combining their props and behavior. ### ItemGroup #### Props **`asChild`** Type: `boolean` Required: false Default Value: `undefined` Description: Use the provided child element as the default rendered element, combining their props and behavior. ### ItemIndicator #### Props **`asChild`** Type: `boolean` Required: false Default Value: `undefined` Description: Use the provided child element as the default rendered element, combining their props and behavior. #### Data Attributes **`data-scope`**: combobox **`data-part`**: item-indicator **`data-state`**: "checked" | "unchecked" ### Item #### Props **`asChild`** Type: `boolean` Required: false Default Value: `undefined` Description: Use the provided child element as the default rendered element, combining their props and behavior. **`item`** Type: `any` Required: false Default Value: `undefined` Description: The item to render **`persistFocus`** Type: `boolean` Required: false Default Value: `undefined` Description: Whether hovering outside should clear the highlighted state #### Data Attributes **`data-scope`**: combobox **`data-part`**: item **`data-highlighted`**: Present when highlighted **`data-state`**: "checked" | "unchecked" **`data-disabled`**: Present when disabled **`data-value`**: The value of the item ### ItemText #### Props **`asChild`** Type: `boolean` Required: false Default Value: `undefined` Description: Use the provided child element as the default rendered element, combining their props and behavior. #### Data Attributes **`data-scope`**: combobox **`data-part`**: item-text **`data-state`**: "checked" | "unchecked" **`data-disabled`**: Present when disabled **`data-highlighted`**: Present when highlighted ### Label #### Props **`asChild`** Type: `boolean` Required: false Default Value: `undefined` Description: Use the provided child element as the default rendered element, combining their props and behavior. #### Data Attributes **`data-scope`**: combobox **`data-part`**: label **`data-readonly`**: Present when read-only **`data-disabled`**: Present when disabled **`data-invalid`**: Present when invalid **`data-focus`**: Present when focused ### List #### Props **`asChild`** Type: `boolean` Required: false Default Value: `undefined` Description: Use the provided child element as the default rendered element, combining their props and behavior. ### Positioner #### Props **`asChild`** Type: `boolean` Required: false Default Value: `undefined` Description: Use the provided child element as the default rendered element, combining their props and behavior. ### RootProvider #### Props **`value`** Type: `UseComboboxReturn ` Required: true Default Value: `undefined` Description: undefined **`asChild`** Type: `boolean` Required: false Default Value: `undefined` Description: Use the provided child element as the default rendered element, combining their props and behavior. **`immediate`** Type: `boolean` Required: false Default Value: `undefined` Description: Whether to synchronize the present change immediately or defer it to the next frame **`lazyMount`** Type: `boolean` Required: false Default Value: `false` Description: Whether to enable lazy mounting **`onExitComplete`** Type: `VoidFunction` Required: false Default Value: `undefined` Description: Function called when the animation ends in the closed state **`present`** Type: `boolean` Required: false Default Value: `undefined` Description: Whether the node is present (controlled by the user) **`unmountOnExit`** Type: `boolean` Required: false Default Value: `false` Description: Whether to unmount on exit. ### Trigger #### Props **`asChild`** Type: `boolean` Required: false Default Value: `undefined` Description: Use the provided child element as the default rendered element, combining their props and behavior. **`focusable`** Type: `boolean` Required: false Default Value: `undefined` Description: Whether the trigger is focusable #### Data Attributes **`data-scope`**: combobox **`data-part`**: trigger **`data-state`**: "open" | "closed" **`data-invalid`**: Present when invalid **`data-focusable`**: **`data-readonly`**: Present when read-only **`data-disabled`**: Present when disabled ## Accessibility Complies with the [Combobox WAI-ARIA design pattern](https://www.w3.org/WAI/ARIA/apg/patterns/combobox/). ### Keyboard Support **`ArrowDown`** Description: When the combobox is closed, opens the listbox and highlights to the first option. When the combobox is open, moves focus to the next option. **`ArrowUp`** Description: When the combobox is closed, opens the listbox and highlights to the last option. When the combobox is open, moves focus to the previous option. **`Home`** Description: When the combobox is open, moves focus to the first option. **`End`** Description: When the combobox is open, moves focus to the last option. **`Escape`** Description: Closes the listbox. **`Enter`** Description: Selects the highlighted option and closes the combobox. **`Esc`** Description: Closes the combobox # Combobox (SOLID) ## Anatomy To set up the combobox correctly, you'll need to understand its anatomy and how we name its parts. > Each part includes a `data-part` attribute to help identify them in the DOM. ## Examples Learn how to use the `Combobox` component in your project. Let's take a look at the most basic example ```tsx import { Combobox, createListCollection } from '@ark-ui/solid/combobox' import { For, createMemo, createSignal } from 'solid-js' import { Portal } from 'solid-js/web' const initialItems = ['React', 'Solid', 'Vue'] export const Basic = () => { const [items, setItems] = createSignal(initialItems) const collection = createMemo(() => createListCollection({ items: items() })) const handleInputChange = (details: Combobox.InputValueChangeDetails) => { setItems(initialItems.filter((item) => item.toLowerCase().includes(details.inputValue.toLowerCase()))) } return ( Framework Open Clear Frameworks {(item) => ( {item} ✓ Framework Open Clear Frameworks {(item) => ( {item.label} ✓ Label Open Clear {(item) => ( {item} ✓ Additional Info Error Info Framework Open Clear Frameworks {(item) => ( {item} ✓ ` Required: true Default Value: `undefined` Description: The collection of items **`allowCustomValue`** Type: `boolean` Required: false Default Value: `undefined` Description: Whether to allow typing custom values in the input **`asChild`** Type: `(props: ParentProps<'div'>) => Element` Required: false Default Value: `undefined` Description: Use the provided child element as the default rendered element, combining their props and behavior. **`autoFocus`** Type: `boolean` Required: false Default Value: `undefined` Description: Whether to autofocus the input on mount **`closeOnSelect`** Type: `boolean` Required: false Default Value: `undefined` Description: Whether to close the combobox when an item is selected. **`composite`** Type: `boolean` Required: false Default Value: `true` Description: Whether the combobox is a composed with other composite widgets like tabs **`defaultHighlightedValue`** Type: `string` Required: false Default Value: `undefined` Description: The initial highlighted value of the combobox when rendered. Use when you don't need to control the highlighted value of the combobox. **`defaultInputValue`** Type: `string` Required: false Default Value: `""` Description: The initial value of the combobox's input when rendered. Use when you don't need to control the value of the combobox's input. **`defaultOpen`** Type: `boolean` Required: false Default Value: `undefined` Description: The initial open state of the combobox when rendered. Use when you don't need to control the open state of the combobox. **`defaultValue`** Type: `string[]` Required: false Default Value: `[]` Description: The initial value of the combobox's selected items when rendered. Use when you don't need to control the value of the combobox's selected items. **`disabled`** Type: `boolean` Required: false Default Value: `undefined` Description: Whether the combobox is disabled **`disableLayer`** Type: `boolean` Required: false Default Value: `undefined` Description: Whether to disable registering this a dismissable layer **`form`** Type: `string` Required: false Default Value: `undefined` Description: The associate form of the combobox. **`highlightedValue`** Type: `string` Required: false Default Value: `undefined` Description: The controlled highlighted value of the combobox **`ids`** Type: `Partial<{ root: string label: string control: string input: string content: string trigger: string clearTrigger: string item(id: string, index?: number | undefined): string positioner: string itemGroup(id: string | number): string itemGroupLabel(id: string | number): string }>` Required: false Default Value: `undefined` Description: The ids of the elements in the combobox. Useful for composition. **`immediate`** Type: `boolean` Required: false Default Value: `undefined` Description: Whether to synchronize the present change immediately or defer it to the next frame **`inputBehavior`** Type: `'none' | 'autocomplete' | 'autohighlight'` Required: false Default Value: `"none"` Description: Defines the auto-completion behavior of the combobox. - `autohighlight`: The first focused item is highlighted as the user types - `autocomplete`: Navigating the listbox with the arrow keys selects the item and the input is updated **`inputValue`** Type: `string` Required: false Default Value: `undefined` Description: The controlled value of the combobox's input **`invalid`** Type: `boolean` Required: false Default Value: `undefined` Description: Whether the combobox is invalid **`lazyMount`** Type: `boolean` Required: false Default Value: `false` Description: Whether to enable lazy mounting **`loopFocus`** Type: `boolean` Required: false Default Value: `true` Description: Whether to loop the keyboard navigation through the items **`multiple`** Type: `boolean` Required: false Default Value: `undefined` Description: Whether to allow multiple selection. **Good to know:** When `multiple` is `true`, the `selectionBehavior` is automatically set to `clear`. It is recommended to render the selected items in a separate container. **`name`** Type: `string` Required: false Default Value: `undefined` Description: The `name` attribute of the combobox's input. Useful for form submission **`navigate`** Type: `(details: NavigateDetails) => void` Required: false Default Value: `undefined` Description: Function to navigate to the selected item **`onExitComplete`** Type: `VoidFunction` Required: false Default Value: `undefined` Description: Function called when the animation ends in the closed state **`onFocusOutside`** Type: `(event: FocusOutsideEvent) => void` Required: false Default Value: `undefined` Description: Function called when the focus is moved outside the component **`onHighlightChange`** Type: `(details: HighlightChangeDetails ) => void` Required: false Default Value: `undefined` Description: Function called when an item is highlighted using the pointer or keyboard navigation. **`onInputValueChange`** Type: `(details: InputValueChangeDetails) => void` Required: false Default Value: `undefined` Description: Function called when the input's value changes **`onInteractOutside`** Type: `(event: InteractOutsideEvent) => void` Required: false Default Value: `undefined` Description: Function called when an interaction happens outside the component **`onOpenChange`** Type: `(details: OpenChangeDetails) => void` Required: false Default Value: `undefined` Description: Function called when the popup is opened **`onPointerDownOutside`** Type: `(event: PointerDownOutsideEvent) => void` Required: false Default Value: `undefined` Description: Function called when the pointer is pressed down outside the component **`onValueChange`** Type: `(details: ValueChangeDetails ) => void` Required: false Default Value: `undefined` Description: Function called when a new item is selected **`open`** Type: `boolean` Required: false Default Value: `undefined` Description: The controlled open state of the combobox **`openOnChange`** Type: `boolean | ((details: InputValueChangeDetails) => boolean)` Required: false Default Value: `true` Description: Whether to show the combobox when the input value changes **`openOnClick`** Type: `boolean` Required: false Default Value: `false` Description: Whether to open the combobox popup on initial click on the input **`openOnKeyPress`** Type: `boolean` Required: false Default Value: `true` Description: Whether to open the combobox on arrow key press **`placeholder`** Type: `string` Required: false Default Value: `undefined` Description: The placeholder text of the combobox's input **`positioning`** Type: `PositioningOptions` Required: false Default Value: `{ placement: "bottom-start" }` Description: The positioning options to dynamically position the menu **`present`** Type: `boolean` Required: false Default Value: `undefined` Description: Whether the node is present (controlled by the user) **`readOnly`** Type: `boolean` Required: false Default Value: `undefined` Description: Whether the combobox is readonly. This puts the combobox in a "non-editable" mode but the user can still interact with it **`required`** Type: `boolean` Required: false Default Value: `undefined` Description: Whether the combobox is required **`scrollToIndexFn`** Type: `(details: ScrollToIndexDetails) => void` Required: false Default Value: `undefined` Description: Function to scroll to a specific index **`selectionBehavior`** Type: `'replace' | 'clear' | 'preserve'` Required: false Default Value: `"replace"` Description: The behavior of the combobox input when an item is selected - `replace`: The selected item string is set as the input value - `clear`: The input value is cleared - `preserve`: The input value is preserved **`translations`** Type: `IntlTranslations` Required: false Default Value: `undefined` Description: Specifies the localized strings that identifies the accessibility elements and their states **`unmountOnExit`** Type: `boolean` Required: false Default Value: `false` Description: Whether to unmount on exit. **`value`** Type: `string[]` Required: false Default Value: `undefined` Description: The controlled value of the combobox's selected items #### Data Attributes **`data-scope`**: combobox **`data-part`**: root **`data-invalid`**: Present when invalid **`data-readonly`**: Present when read-only ### ClearTrigger #### Props **`asChild`** Type: `(props: ParentProps<'button'>) => Element` Required: false Default Value: `undefined` Description: Use the provided child element as the default rendered element, combining their props and behavior. #### Data Attributes **`data-scope`**: combobox **`data-part`**: clear-trigger **`data-invalid`**: Present when invalid ### Content #### Props **`asChild`** Type: `(props: ParentProps<'div'>) => Element` Required: false Default Value: `undefined` Description: Use the provided child element as the default rendered element, combining their props and behavior. #### Data Attributes **`data-scope`**: combobox **`data-part`**: content **`data-state`**: "open" | "closed" **`data-placement`**: The placement of the content ### Control #### Props **`asChild`** Type: `(props: ParentProps<'div'>) => Element` Required: false Default Value: `undefined` Description: Use the provided child element as the default rendered element, combining their props and behavior. #### Data Attributes **`data-scope`**: combobox **`data-part`**: control **`data-state`**: "open" | "closed" **`data-focus`**: Present when focused **`data-disabled`**: Present when disabled **`data-invalid`**: Present when invalid ### Input #### Props **`asChild`** Type: `(props: ParentProps<'input'>) => Element` Required: false Default Value: `undefined` Description: Use the provided child element as the default rendered element, combining their props and behavior. #### Data Attributes **`data-scope`**: combobox **`data-part`**: input **`data-invalid`**: Present when invalid **`data-state`**: "open" | "closed" ### ItemGroupLabel #### Props **`asChild`** Type: `(props: ParentProps<'div'>) => Element` Required: false Default Value: `undefined` Description: Use the provided child element as the default rendered element, combining their props and behavior. ### ItemGroup #### Props **`asChild`** Type: `(props: ParentProps<'div'>) => Element` Required: false Default Value: `undefined` Description: Use the provided child element as the default rendered element, combining their props and behavior. ### ItemIndicator #### Props **`asChild`** Type: `(props: ParentProps<'div'>) => Element` Required: false Default Value: `undefined` Description: Use the provided child element as the default rendered element, combining their props and behavior. #### Data Attributes **`data-scope`**: combobox **`data-part`**: item-indicator **`data-state`**: "checked" | "unchecked" ### Item #### Props **`asChild`** Type: `(props: ParentProps<'div'>) => Element` Required: false Default Value: `undefined` Description: Use the provided child element as the default rendered element, combining their props and behavior. **`item`** Type: `any` Required: false Default Value: `undefined` Description: The item to render **`persistFocus`** Type: `boolean` Required: false Default Value: `undefined` Description: Whether hovering outside should clear the highlighted state #### Data Attributes **`data-scope`**: combobox **`data-part`**: item **`data-highlighted`**: Present when highlighted **`data-state`**: "checked" | "unchecked" **`data-disabled`**: Present when disabled **`data-value`**: The value of the item ### ItemText #### Props **`asChild`** Type: `(props: ParentProps<'span'>) => Element` Required: false Default Value: `undefined` Description: Use the provided child element as the default rendered element, combining their props and behavior. #### Data Attributes **`data-scope`**: combobox **`data-part`**: item-text **`data-state`**: "checked" | "unchecked" **`data-disabled`**: Present when disabled **`data-highlighted`**: Present when highlighted ### Label #### Props **`asChild`** Type: `(props: ParentProps<'label'>) => Element` Required: false Default Value: `undefined` Description: Use the provided child element as the default rendered element, combining their props and behavior. #### Data Attributes **`data-scope`**: combobox **`data-part`**: label **`data-readonly`**: Present when read-only **`data-disabled`**: Present when disabled **`data-invalid`**: Present when invalid **`data-focus`**: Present when focused ### List #### Props **`asChild`** Type: `(props: ParentProps<'div'>) => Element` Required: false Default Value: `undefined` Description: Use the provided child element as the default rendered element, combining their props and behavior. ### Positioner #### Props **`asChild`** Type: `(props: ParentProps<'div'>) => Element` Required: false Default Value: `undefined` Description: Use the provided child element as the default rendered element, combining their props and behavior. ### RootProvider #### Props **`value`** Type: `UseComboboxReturn ` Required: true Default Value: `undefined` Description: undefined **`asChild`** Type: `(props: ParentProps<'div'>) => Element` Required: false Default Value: `undefined` Description: Use the provided child element as the default rendered element, combining their props and behavior. **`immediate`** Type: `boolean` Required: false Default Value: `undefined` Description: Whether to synchronize the present change immediately or defer it to the next frame **`lazyMount`** Type: `boolean` Required: false Default Value: `false` Description: Whether to enable lazy mounting **`onExitComplete`** Type: `VoidFunction` Required: false Default Value: `undefined` Description: Function called when the animation ends in the closed state **`present`** Type: `boolean` Required: false Default Value: `undefined` Description: Whether the node is present (controlled by the user) **`unmountOnExit`** Type: `boolean` Required: false Default Value: `false` Description: Whether to unmount on exit. ### Trigger #### Props **`asChild`** Type: `(props: ParentProps<'button'>) => Element` Required: false Default Value: `undefined` Description: Use the provided child element as the default rendered element, combining their props and behavior. **`focusable`** Type: `boolean` Required: false Default Value: `undefined` Description: Whether the trigger is focusable #### Data Attributes **`data-scope`**: combobox **`data-part`**: trigger **`data-state`**: "open" | "closed" **`data-invalid`**: Present when invalid **`data-focusable`**: **`data-readonly`**: Present when read-only **`data-disabled`**: Present when disabled ## Accessibility Complies with the [Combobox WAI-ARIA design pattern](https://www.w3.org/WAI/ARIA/apg/patterns/combobox/). ### Keyboard Support **`ArrowDown`** Description: When the combobox is closed, opens the listbox and highlights to the first option. When the combobox is open, moves focus to the next option. **`ArrowUp`** Description: When the combobox is closed, opens the listbox and highlights to the last option. When the combobox is open, moves focus to the previous option. **`Home`** Description: When the combobox is open, moves focus to the first option. **`End`** Description: When the combobox is open, moves focus to the last option. **`Escape`** Description: Closes the listbox. **`Enter`** Description: Selects the highlighted option and closes the combobox. **`Esc`** Description: Closes the combobox # Combobox (VUE) ## Anatomy To set up the combobox correctly, you'll need to understand its anatomy and how we name its parts. > Each part includes a `data-part` attribute to help identify them in the DOM. ## Examples Learn how to use the `Combobox` component in your project. Let's take a look at the most basic example ```vue Framework Open Clear Frameworks {{ item }} ✓ Framework Open Clear Frameworks {{ item.label }} ✓ Label Open Clear Frameworks {{ item }} ✓ Additional Info Error Info Framework Open Clear Frameworks {{ item }} ✓ ` Required: false Default Value: `undefined` Description: The collection of items **`composite`** Type: `boolean` Required: false Default Value: `true` Description: Whether the combobox is a composed with other composite widgets like tabs **`defaultHighlightedValue`** Type: `string` Required: false Default Value: `undefined` Description: The initial highlighted value of the combobox when rendered. Use when you don't need to control the highlighted value of the combobox. **`defaultInputValue`** Type: `string` Required: false Default Value: `""` Description: The initial value of the combobox's input when rendered. Use when you don't need to control the value of the combobox's input. **`defaultOpen`** Type: `boolean` Required: false Default Value: `undefined` Description: The initial open state of the combobox when rendered. Use when you don't need to control the open state of the combobox. **`defaultValue`** Type: `string[]` Required: false Default Value: `[]` Description: The initial value of the combobox's selected items when rendered. Use when you don't need to control the value of the combobox's selected items. **`disabled`** Type: `boolean` Required: false Default Value: `undefined` Description: Whether the combobox is disabled **`disableLayer`** Type: `boolean` Required: false Default Value: `undefined` Description: Whether to disable registering this a dismissable layer **`form`** Type: `string` Required: false Default Value: `undefined` Description: The associate form of the combobox. **`highlightedValue`** Type: `string` Required: false Default Value: `undefined` Description: The controlled highlighted value of the combobox **`id`** Type: `string` Required: false Default Value: `undefined` Description: The unique identifier of the machine. **`ids`** Type: `Partial<{ root: string label: string control: string input: string content: string trigger: string clearTrigger: string item(id: string, index?: number | undefined): string positioner: string itemGroup(id: string | number): string itemGroupLabel(id: string | number): string }>` Required: false Default Value: `undefined` Description: The ids of the elements in the combobox. Useful for composition. **`inputBehavior`** Type: `'autocomplete' | 'none' | 'autohighlight'` Required: false Default Value: `"none"` Description: Defines the auto-completion behavior of the combobox. - `autohighlight`: The first focused item is highlighted as the user types - `autocomplete`: Navigating the listbox with the arrow keys selects the item and the input is updated **`inputValue`** Type: `string` Required: false Default Value: `undefined` Description: The controlled value of the combobox's input **`invalid`** Type: `boolean` Required: false Default Value: `undefined` Description: Whether the combobox is invalid **`lazyMount`** Type: `boolean` Required: false Default Value: `false` Description: Whether to enable lazy mounting **`loopFocus`** Type: `boolean` Required: false Default Value: `true` Description: Whether to loop the keyboard navigation through the items **`modelValue`** Type: `string[]` Required: false Default Value: `undefined` Description: The v-model value of the combobox **`multiple`** Type: `boolean` Required: false Default Value: `undefined` Description: Whether to allow multiple selection. **Good to know:** When `multiple` is `true`, the `selectionBehavior` is automatically set to `clear`. It is recommended to render the selected items in a separate container. **`name`** Type: `string` Required: false Default Value: `undefined` Description: The `name` attribute of the combobox's input. Useful for form submission **`navigate`** Type: `(details: NavigateDetails) => void` Required: false Default Value: `undefined` Description: Function to navigate to the selected item **`open`** Type: `boolean` Required: false Default Value: `undefined` Description: The controlled open state of the combobox **`openOnChange`** Type: `boolean | ((details: InputValueChangeDetails) => boolean)` Required: false Default Value: `true` Description: Whether to show the combobox when the input value changes **`openOnClick`** Type: `boolean` Required: false Default Value: `false` Description: Whether to open the combobox popup on initial click on the input **`openOnKeyPress`** Type: `boolean` Required: false Default Value: `true` Description: Whether to open the combobox on arrow key press **`placeholder`** Type: `string` Required: false Default Value: `undefined` Description: The placeholder text of the combobox's input **`positioning`** Type: `PositioningOptions` Required: false Default Value: `{ placement: "bottom-start" }` Description: The positioning options to dynamically position the menu **`readOnly`** Type: `boolean` Required: false Default Value: `undefined` Description: Whether the combobox is readonly. This puts the combobox in a "non-editable" mode but the user can still interact with it **`required`** Type: `boolean` Required: false Default Value: `undefined` Description: Whether the combobox is required **`scrollToIndexFn`** Type: `(details: ScrollToIndexDetails) => void` Required: false Default Value: `undefined` Description: Function to scroll to a specific index **`selectionBehavior`** Type: `'replace' | 'clear' | 'preserve'` Required: false Default Value: `"replace"` Description: The behavior of the combobox input when an item is selected - `replace`: The selected item string is set as the input value - `clear`: The input value is cleared - `preserve`: The input value is preserved **`translations`** Type: `IntlTranslations` Required: false Default Value: `undefined` Description: Specifies the localized strings that identifies the accessibility elements and their states **`unmountOnExit`** Type: `boolean` Required: false Default Value: `false` Description: Whether to unmount on exit. #### Data Attributes **`data-scope`**: combobox **`data-part`**: root **`data-invalid`**: Present when invalid **`data-readonly`**: Present when read-only ### ClearTrigger #### Props **`asChild`** Type: `boolean` Required: false Default Value: `undefined` Description: Use the provided child element as the default rendered element, combining their props and behavior. #### Data Attributes **`data-scope`**: combobox **`data-part`**: clear-trigger **`data-invalid`**: Present when invalid ### Content #### Props **`asChild`** Type: `boolean` Required: false Default Value: `undefined` Description: Use the provided child element as the default rendered element, combining their props and behavior. #### Data Attributes **`data-scope`**: combobox **`data-part`**: content **`data-state`**: "open" | "closed" **`data-placement`**: The placement of the content ### Control #### Props **`asChild`** Type: `boolean` Required: false Default Value: `undefined` Description: Use the provided child element as the default rendered element, combining their props and behavior. #### Data Attributes **`data-scope`**: combobox **`data-part`**: control **`data-state`**: "open" | "closed" **`data-focus`**: Present when focused **`data-disabled`**: Present when disabled **`data-invalid`**: Present when invalid ### Input #### Props **`asChild`** Type: `boolean` Required: false Default Value: `undefined` Description: Use the provided child element as the default rendered element, combining their props and behavior. #### Data Attributes **`data-scope`**: combobox **`data-part`**: input **`data-invalid`**: Present when invalid **`data-state`**: "open" | "closed" ### ItemGroupLabel #### Props **`asChild`** Type: `boolean` Required: false Default Value: `undefined` Description: Use the provided child element as the default rendered element, combining their props and behavior. ### ItemGroup #### Props **`asChild`** Type: `boolean` Required: false Default Value: `undefined` Description: Use the provided child element as the default rendered element, combining their props and behavior. **`id`** Type: `string` Required: false Default Value: `undefined` Description: undefined ### ItemIndicator #### Props **`asChild`** Type: `boolean` Required: false Default Value: `undefined` Description: Use the provided child element as the default rendered element, combining their props and behavior. #### Data Attributes **`data-scope`**: combobox **`data-part`**: item-indicator **`data-state`**: "checked" | "unchecked" ### Item #### Props **`asChild`** Type: `boolean` Required: false Default Value: `undefined` Description: Use the provided child element as the default rendered element, combining their props and behavior. **`item`** Type: `any` Required: false Default Value: `undefined` Description: The item to render **`persistFocus`** Type: `boolean` Required: false Default Value: `undefined` Description: Whether hovering outside should clear the highlighted state #### Data Attributes **`data-scope`**: combobox **`data-part`**: item **`data-highlighted`**: Present when highlighted **`data-state`**: "checked" | "unchecked" **`data-disabled`**: Present when disabled **`data-value`**: The value of the item ### ItemText #### Props **`asChild`** Type: `boolean` Required: false Default Value: `undefined` Description: Use the provided child element as the default rendered element, combining their props and behavior. #### Data Attributes **`data-scope`**: combobox **`data-part`**: item-text **`data-state`**: "checked" | "unchecked" **`data-disabled`**: Present when disabled **`data-highlighted`**: Present when highlighted ### Label #### Props **`asChild`** Type: `boolean` Required: false Default Value: `undefined` Description: Use the provided child element as the default rendered element, combining their props and behavior. #### Data Attributes **`data-scope`**: combobox **`data-part`**: label **`data-readonly`**: Present when read-only **`data-disabled`**: Present when disabled **`data-invalid`**: Present when invalid **`data-focus`**: Present when focused ### List #### Props **`asChild`** Type: `boolean` Required: false Default Value: `undefined` Description: Use the provided child element as the default rendered element, combining their props and behavior. ### Positioner #### Props **`asChild`** Type: `boolean` Required: false Default Value: `undefined` Description: Use the provided child element as the default rendered element, combining their props and behavior. ### RootProvider #### Props **`value`** Type: `ComboboxApi Label 📅 Clear {(datePicker) => ( <> Prev Next {datePicker.weekDays.map((weekDay, id) => ( {weekDay.short} ))}{datePicker.weeks.map((week, id) => ( {week.map((day, id) => ( ))}{day.day} {(datePicker) => ( <> Prev Next {datePicker.getMonthsGrid({ columns: 4, format: 'short' }).map((months, id) => ( {months.map((month, id) => ( ))}{month.label} {(datePicker) => ( <> Prev Next {datePicker.getYearsGrid({ columns: 4 }).map((years, id) => ( {years.map((year, id) => ( ))}{year.label} Label 📅 Clear Last 7 days {(datePicker) => ( <> Prev Next {datePicker.weekDays.map((weekDay, id) => ( {weekDay.short} ))}{datePicker.weeks.map((week, id) => ( {week.map((day, id) => ( ))}{day.day} {(datePicker) => ( <> Prev Next {datePicker.getMonthsGrid({ columns: 4, format: 'short' }).map((months, id) => ( {months.map((month, id) => ( ))}{month.label} {(datePicker) => ( <> Prev Next {datePicker.getYearsGrid({ columns: 4 }).map((years, id) => ( {years.map((year, id) => ( ))}{year.label} {(datePicker) => ( <> Prev Next {datePicker.weekDays.map((weekDay, id) => ( {weekDay.short} ))}{datePicker.weeks.map((week, id) => ( {week.map((day, id) => ( ))}{day.day} {(datePicker) => ( <> Prev Next {datePicker.getMonthsGrid({ columns: 4, format: 'short' }).map((months, id) => ( {months.map((month, id) => ( ))}{month.label} {(datePicker) => ( <> Prev Next {datePicker.getYearsGrid({ columns: 4 }).map((years, id) => ( {years.map((year, id) => ( ))}{year.label} Label 📅 Clear {(datePicker) => ( <> Prev Next {datePicker.weekDays.map((weekDay, id) => ( {weekDay.short} ))}{datePicker.weeks.map((week, id) => ( {week.map((day, id) => ( ))}{day.day} {(datePicker) => ( <> Prev Next {datePicker.getMonthsGrid({ columns: 4, format: 'short' }).map((months, id) => ( {months.map((month, id) => ( ))}{month.label} {(datePicker) => ( <> Prev Next {datePicker.getYearsGrid({ columns: 4 }).map((years, id) => ( {years.map((year, id) => ( ))}{year.label} Label 📅 Clear {(context) => ( <> Prev Next {(weekDay) => {weekDay().short} }{(week) => ( {(day) => ( {day().day} {(context) => ( <> Prev Next {(months) => ( {(month) => ( {month().label} {(context) => ( <> Prev Next {(years) => ( {(year) => ( {year().label} Label 📅 Clear Last 7 days {(context) => ( {(weekDay) => {weekDay().short} }{(week) => ( {(day) => ( {day().day} {(context) => { const offset = createMemo(() => context().getOffset({ months: 1 })) return ( {(weekDay) => {weekDay().short} }{(week) => ( {(day) => ( {day().day} {(context) => ( <> Prev Next {(weekDay) => {weekDay().short} }{(week) => ( {(day) => ( {day().day} Label 📅 Clear {(context) => ( <> Prev Next {(weekDay) => {weekDay().short} }{(week) => ( {(day) => ( {day().day} {(context) => ( <> Prev Next {(months) => ( {(month) => ( {month().label} {(context) => ( <> Prev Next {(years) => ( {(year) => ( {year().label} Label 📅 Clear Prev Next {{ weekDay.short }} {{ day.day }} Prev Next {{ month.label }} Prev Next {{ year.label }} Label 📅 Clear Last 7 days Prev Next {{ weekDay.short }} {{ day.day }} Prev Next {{ month.label }} Prev Next {{ year.label }} Prev Next {{ weekDay.short }} {{ day.day }} Prev Next {{ month.label }} Prev Next {{ year.label }} Label 📅 Clear Prev Next {{ weekDay.short }} {{ day.day }} Prev Next {{ month.label }} Prev Next {{ year.label }} ` Required: true Default Value: `undefined` Description: undefined **`asChild`** Type: `boolean` Required: false Default Value: `undefined` Description: Use the provided child element as the default rendered element, combining their props and behavior. **`lazyMount`** Type: `boolean` Required: false Default Value: `false` Description: Whether to enable lazy mounting **`unmountOnExit`** Type: `boolean` Required: false Default Value: `false` Description: Whether to unmount on exit. ### TableBody #### Props **`asChild`** Type: `boolean` Required: false Default Value: `undefined` Description: Use the provided child element as the default rendered element, combining their props and behavior. #### Data Attributes **`data-scope`**: date-picker **`data-part`**: table-body **`data-view`**: The view of the tablebody **`data-disabled`**: Present when disabled ### TableCell #### Props **`value`** Type: `Reactive ` Required: true Default Value: `undefined` Description: undefined **`asChild`** Type: `boolean` Required: false Default Value: `undefined` Description: Use the provided child element as the default rendered element, combining their props and behavior. **`columns`** Type: `number` Required: false Default Value: `undefined` Description: undefined **`disabled`** Type: `boolean` Required: false Default Value: `undefined` Description: undefined **`visibleRange`** Type: `VisibleRange` Required: false Default Value: `undefined` Description: undefined ### TableCellTrigger #### Props **`asChild`** Type: `boolean` Required: false Default Value: `undefined` Description: Use the provided child element as the default rendered element, combining their props and behavior. ### TableHead #### Props **`asChild`** Type: `boolean` Required: false Default Value: `undefined` Description: Use the provided child element as the default rendered element, combining their props and behavior. #### Data Attributes **`data-scope`**: date-picker **`data-part`**: table-head **`data-view`**: The view of the tablehead **`data-disabled`**: Present when disabled ### TableHeader #### Props **`asChild`** Type: `boolean` Required: false Default Value: `undefined` Description: Use the provided child element as the default rendered element, combining their props and behavior. #### Data Attributes **`data-scope`**: date-picker **`data-part`**: table-header **`data-view`**: The view of the tableheader **`data-disabled`**: Present when disabled ### Table #### Props **`asChild`** Type: `boolean` Required: false Default Value: `undefined` Description: Use the provided child element as the default rendered element, combining their props and behavior. **`columns`** Type: `number` Required: false Default Value: `undefined` Description: undefined **`id`** Type: `string` Required: false Default Value: `undefined` Description: undefined **`view`** Type: `DateView` Required: false Default Value: `undefined` Description: undefined #### Data Attributes **`data-scope`**: date-picker **`data-part`**: table **`data-columns`**: **`data-view`**: The view of the table ### TableRow #### Props **`asChild`** Type: `boolean` Required: false Default Value: `undefined` Description: Use the provided child element as the default rendered element, combining their props and behavior. #### Data Attributes **`data-scope`**: date-picker **`data-part`**: table-row **`data-disabled`**: Present when disabled **`data-view`**: The view of the tablerow ### Trigger #### Props **`asChild`** Type: `boolean` Required: false Default Value: `undefined` Description: Use the provided child element as the default rendered element, combining their props and behavior. #### Data Attributes **`data-scope`**: date-picker **`data-part`**: trigger **`data-placement`**: The placement of the trigger **`data-state`**: "open" | "closed" ### ViewControl #### Props **`asChild`** Type: `boolean` Required: false Default Value: `undefined` Description: Use the provided child element as the default rendered element, combining their props and behavior. #### Data Attributes **`data-scope`**: date-picker **`data-part`**: view-control **`data-view`**: The view of the viewcontrol ### View #### Props **`view`** Type: `DateView` Required: true Default Value: `undefined` Description: undefined **`asChild`** Type: `boolean` Required: false Default Value: `undefined` Description: Use the provided child element as the default rendered element, combining their props and behavior. #### Data Attributes **`data-scope`**: date-picker **`data-part`**: view **`data-view`**: The view of the view ### ViewTrigger #### Props **`asChild`** Type: `boolean` Required: false Default Value: `undefined` Description: Use the provided child element as the default rendered element, combining their props and behavior. #### Data Attributes **`data-scope`**: date-picker **`data-part`**: view-trigger **`data-view`**: The view of the viewtrigger ### YearSelect #### Props **`asChild`** Type: `boolean` Required: false Default Value: `undefined` Description: Use the provided child element as the default rendered element, combining their props and behavior. ## Accessibility ### Keyboard Support **`ArrowLeft`** Description: Moves focus to the previous day within the current week. **`ArrowRight`** Description: Moves focus to the next day within the current week. **`ArrowUp`** Description: Moves focus to the same day of the week in the previous week. **`ArrowDown`** Description: Moves focus to the same day of the week in the next week. **`Home`** Description: Moves focus to the first day of the current month. **`End`** Description: Moves focus to the last day of the current month. **`PageUp`** Description: Moves focus to the same day of the month in the previous month. **`PageDown`** Description: Moves focus to the same day of the month in the next month. **`Enter`** Description: Selects the focused date and closes the date picker. **`Esc`** Description: Closes the date picker without selecting any date. # Dialog (REACT) ## Anatomy To use the dialog component correctly, you'll need to understand its anatomy and how we name its parts. > Each part includes a `data-part` attribute to help identify them in the DOM. ## Examples Learn how to use the `Dialog` component in your project. Let's take a look at the most basic example ```tsx import { Dialog } from '@ark-ui/react/dialog' import { Portal } from '@ark-ui/react/portal' export const Basic = () => ( Open Dialog Dialog Title Dialog Description Close setIsOpen(e.open)}> ) } ``` ### Lazy Mounting Lazy mounting is a feature that allows the content of a dialog to be rendered only when the dialog is first opened. This is useful for performance optimization, especially when dialog content is large or complex. To enable lazy mounting, use the `lazyMount` prop on the `Dialog.Root` component. In addition, the `unmountOnExit` prop can be used in conjunction with `lazyMount` to unmount the dialog content when the Dialog is closed, freeing up resources. The next time the dialog is activated, its content will be re-rendered. ```tsx import { Dialog } from '@ark-ui/react/dialog' import { Portal } from '@ark-ui/react/portal' export const LazyMount = () => (Dialog Title Dialog Description Close console.log('onExitComplete invoked')}> ) ``` ### Using Render Function The Dialog component supports the use of a render function as a child for more control. This allows access to dialog states like `isOpen`: ```tsx import { Dialog } from '@ark-ui/react/dialog' import { Portal } from '@ark-ui/react/portal' export const RenderFn = () => (Open Dialog Dialog Title Dialog Description Close Open Dialog Dialog Title Dialog Description Close {(dialog) => Dialog is {dialog.open ? 'open' : 'closed'}
}Open Dialog Dialog Title Dialog Description Close Open Dialog Dialog Title Dialog Description Close setOpen(false)}> ) } ``` ### Lazy Mounting Lazy mounting is a feature that allows the content of a dialog to be rendered only when the dialog is first opened. This is useful for performance optimization, especially when dialog content is large or complex. To enable lazy mounting, use the `lazyMount` prop on the `Dialog.Root` component. In addition, the `unmountOnExit` prop can be used in conjunction with `lazyMount` to unmount the dialog content when the Dialog is closed, freeing up resources. The next time the dialog is activated, its content will be re-rendered. ```tsx import { Dialog } from '@ark-ui/solid/dialog' export const LazyMount = () => { return (Dialog Title Dialog Description Close Open Dialog Dialog Title Dialog Description Close Open Dialog Dialog Title Dialog Description Close {(context) => Dialog is {context().open ? 'open' : 'closed'}
}Open Dialog Dialog Title Dialog Description Close Open Dialog Dialog Title Dialog Description Close Dialog Title Dialog Description Close Open Dialog Dialog Title Dialog Description Close Open Dialog Dialog Title Dialog Description Close Dialog is {{ dialog.open ? 'open' : 'closed' }}
Open Dialog Dialog Title Dialog Description Close ` Required: true Default Value: `undefined` Description: undefined **`lazyMount`** Type: `boolean` Required: false Default Value: `false` Description: Whether to enable lazy mounting **`unmountOnExit`** Type: `boolean` Required: false Default Value: `false` Description: Whether to unmount on exit. ### Title #### Props **`asChild`** Type: `boolean` Required: false Default Value: `undefined` Description: Use the provided child element as the default rendered element, combining their props and behavior. ### Trigger #### Props **`asChild`** Type: `boolean` Required: false Default Value: `undefined` Description: Use the provided child element as the default rendered element, combining their props and behavior. #### Data Attributes **`data-scope`**: dialog **`data-part`**: trigger **`data-state`**: "open" | "closed" ## Accessibility Complies with the [Dialog WAI-ARIA design pattern](https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/). ### Keyboard Support **`Enter`** Description: When focus is on the trigger, opens the dialog. **`Tab`** Description: Moves focus to the next focusable element within the content. Focus is trapped within the dialog. **`Shift + Tab`** Description: Moves focus to the previous focusable element. Focus is trapped within the dialog. **`Esc`** Description: Closes the dialog and moves focus to trigger or the defined final focus element # Editable (REACT) ## Anatomy To set up the editable correctly, you'll need to understand its anatomy and how we name its parts. > Each part includes a `data-part` attribute to help identify them in the DOM. ## Examples Learn how to use the `Editable` component in your project. Let's take a look at the most basic example: ```tsx import { Editable } from '@ark-ui/react/editable' export const Basic = () => ( Label Label {(editable) => ( {editable.editing ? ( <> )}Save Cancel ) : (Edit )}{/*...*/} ``` ### Setting a maxWidth It is a common pattern to set a maximum of the editable as it auto-grows. To achieve this, set the `maxWidth` prop to the desired value. ```tsx{/*...*/} ``` ### Editing with double click The editable supports two modes of activating the "edit" state: - when the preview part is focused (with pointer or keyboard). - when the preview part is double-clicked. To change the mode to double-click, pass the prop `activationMode="dblclick"`. ```tsx{/*...*/} ``` ### Using the Field Component The `Field` component helps manage form-related state and accessibility attributes of an editable. It includes handling ARIA labels, helper text, and error text to ensure proper accessibility. ```tsx import { Editable } from '@ark-ui/react/editable' import { Field } from '@ark-ui/react/field' export const WithField = (props: Field.RootProps) => (Label Additional Info Error Info Label Label Label {(editable) => ( Edit}> Save Canvel {/*...*/} ``` ### Setting a maxWidth It is a common pattern to set a maximum of the editable as it auto-grows. To achieve this, set the `maxWidth` prop to the desired value. ```tsx{/*...*/} ``` ### Editing with double click The editable supports two modes of activating the "edit" state: - when the preview part is focused (with pointer or keyboard). - when the preview part is double-clicked. To change the mode to double-click, pass the prop `activationMode="dblclick"`. ```tsx{/*...*/} ``` ### Using the Field Component The `Field` component helps manage form-related state and accessibility attributes of an editable. It includes handling ARIA labels, helper text, and error text to ensure proper accessibility. ```tsx import { Editable } from '@ark-ui/solid/editable' import { Field } from '@ark-ui/solid/field' export const WithField = (props: Field.RootProps) => (Label Additional Info Error Info Label Label Label Save Cancel Edit {/*...*/} ``` ### Setting a maxWidth It is a common pattern to set a maximum of the editable as it auto-grows. To achieve this, set the `maxWidth` prop to the desired value. ```tsx{/*...*/} ``` ### Editing with double click The editable supports two modes of activating the "edit" state: - when the preview part is focused (with pointer or keyboard). - when the preview part is double-clicked. To change the mode to double-click, pass the prop `activationMode="dblclick"`. ```tsx{/*...*/} ``` ### Using the Field Component The `Field` component helps manage form-related state and accessibility attributes of an editable. It includes handling ARIA labels, helper text, and error text to ensure proper accessibility. ```vueLabel Additional Info Error Info Label ` Required: true Default Value: `undefined` Description: undefined **`asChild`** Type: `boolean` Required: false Default Value: `undefined` Description: Use the provided child element as the default rendered element, combining their props and behavior. ### SubmitTrigger #### Props **`asChild`** Type: `boolean` Required: false Default Value: `undefined` Description: Use the provided child element as the default rendered element, combining their props and behavior. ## Accessibility ### Keyboard Support **`Enter`** Description: Saves the edited content and exits edit mode. **`Escape`** Description: Discards the changes and exits edit mode. # Field (REACT) ## Examples The `Field` component provides contexts such as `invalid`, `disabled`, `required`, and `readOnly` for form elements. While most Ark UI components natively support these contexts, you can also use the `Field` component with standard HTML form elements. ### Input This example shows how to use the `Field` component with a standard input field. ```tsx import { Field } from '@ark-ui/react/field' export const Input = () => { return ( Label Some additional Info Error Info Label Some additional Info Error Info Label Some additional Info Error Info Label Some additional Info Error Info Label Additional Info Error Info Label Some additional Info Error Info | ReactPortal | Promise<...>` Required: false Default Value: `undefined` Description: undefined ### RootProvider #### Props **`value`** Type: `{ ariaDescribedby: string | undefined; ids: { root: string; control: string; label: string; errorText: string; helperText: string; }; refs: { rootRef: RefObject ; }; ... 11 more ...; getRequiredIndicatorProps: () => Omit<...>; }` Required: true Default Value: `undefined` Description: undefined **`asChild`** Type: `boolean` Required: false Default Value: `undefined` Description: Use the provided child element as the default rendered element, combining their props and behavior. ### Select #### Props **`asChild`** Type: `boolean` Required: false Default Value: `undefined` Description: Use the provided child element as the default rendered element, combining their props and behavior. ### Textarea #### Props **`asChild`** Type: `boolean` Required: false Default Value: `undefined` Description: Use the provided child element as the default rendered element, combining their props and behavior. **`autoresize`** Type: `boolean` Required: false Default Value: `false` Description: Whether the textarea should autoresize # Field (SOLID) ## Examples The `Field` component provides contexts such as `invalid`, `disabled`, `required`, and `readOnly` for form elements. While most Ark UI components natively support these contexts, you can also use the `Field` component with standard HTML form elements. ### Input This example shows how to use the `Field` component with a standard input field. ```tsx import { Field } from '@ark-ui/solid/field' export const Input = () => { return ( Label Some additional Info Error Info Label Some additional Info Error Info Label Some additional Info Error Info Label Some additional Info Error Info Label Additional Info Error Info Label Some additional Info Error Info ; }; ... 11 more ...; getRequiredIndicatorProps: () => { ...; }; }>` Required: true Default Value: `undefined` Description: undefined **`asChild`** Type: `(props: ParentProps<'div'>) => Element` Required: false Default Value: `undefined` Description: Use the provided child element as the default rendered element, combining their props and behavior. ### Select #### Props **`asChild`** Type: `(props: ParentProps<'select'>) => Element` Required: false Default Value: `undefined` Description: Use the provided child element as the default rendered element, combining their props and behavior. ### Textarea #### Props **`asChild`** Type: `(props: ParentProps<'textarea'>) => Element` Required: false Default Value: `undefined` Description: Use the provided child element as the default rendered element, combining their props and behavior. **`autoresize`** Type: `boolean` Required: false Default Value: `false` Description: Whether the textarea should autoresize # Field (VUE) ## Examples The `Field` component provides contexts such as `invalid`, `disabled`, `required`, and `readOnly` for form elements. While most Ark UI components natively support these contexts, you can also use the `Field` component with standard HTML form elements. ### Input This example shows how to use the `Field` component with a standard input field. ```vue Label Some additional Info Error Info Label Some additional Info Error Info Label Some additional Info Error Info Label Some additional Info Error Info Label Additional Info Error Info Label Some additional Info Error Info Legend Helper text Error text Legend Fieldset Helper Text Fieldset Error Text Label Field Helper Text Field Error Text Legend Fieldset Helper Text Fieldset Error Text Label ✔️ Field Heler Text Field Error Text ; }; disabled: boolean; invalid: boolean; getRootProps: () => Omit Legend Helper text Error text Legend Fieldset Helper Text Fieldset Error Text Label Field Helper Text Field Error Text Legend Fieldset Helper Text Fieldset Error Text Label ✔️ Field Heler Text Field Error Text Legend Helper text Error text Legend Fieldset Helper Text Fieldset Error Text Label Field Helper Text Field Error Text Legend Fieldset Helper Text Fieldset Error Text Checkbox ✔️ Field Heler Text Field Error Text File Upload Drag your file(s) here Choose file(s) {({ acceptedFiles }) => acceptedFiles.map((file) => ( X Label Select Additional Info Error Info File Upload Drag your file(s) here Choose file(s) {({ acceptedFiles }) => acceptedFiles.map((file) => ( X File Upload Drag your file(s) here Choose file(s) {(context) => ( {(file) => ( )}Any Icon X Label Select Additional Info Error Info File Upload Drag your file(s)here Choose file(s) {(context) => ( {(file) => ( )}Any Icon X File Upload Drop your files here Choose file(s) Generic IconX Label Select Additional Info Error Info File Upload Drop your files here Choose file(s) Generic IconX ` Required: true Default Value: `undefined` Description: undefined **`asChild`** Type: `boolean` Required: false Default Value: `undefined` Description: Use the provided child element as the default rendered element, combining their props and behavior. ### Trigger #### Props **`asChild`** Type: `boolean` Required: false Default Value: `undefined` Description: Use the provided child element as the default rendered element, combining their props and behavior. #### Data Attributes **`data-scope`**: file-upload **`data-part`**: trigger **`data-disabled`**: Present when disabled **`data-invalid`**: Present when invalid # Hover Card (REACT) ## Anatomy To set up the hover card correctly, you'll need to understand its anatomy and how we name its parts. > Each part includes a `data-part` attribute to help identify them in the DOM. ## Examples Learn how to use the `HoverCard` component in your project. Let's take a look at the most basic example: ```tsx import { HoverCard } from '@ark-ui/react/hover-card' import { Portal } from '@ark-ui/react/portal' export const Basic = () => ( Hover me setOpen(false)}> ) } ``` ### Custom Positioning The `HoverCard` component can be customized in its placement and distance from the trigger element through the `positioning` prop: ```tsx import { HoverCard } from '@ark-ui/react/hover-card' import { Portal } from '@ark-ui/react/portal' export const Positioning = () => (Hover me Hover me {(hoverCard) => Hover me {hoverCard.open ? '▲' : '▼'} }Hover me Hover me setOpen(false)}> ) } ``` ### Custom Positioning The `HoverCard` component can be customized in its placement and distance from the trigger element through the `positioning` prop: ```tsx import { HoverCard } from '@ark-ui/solid/hover-card' import { Portal } from 'solid-js/web' export const Positioning = () => (Hover me Hover me {(context) => Hover me {context().open ? '▲' : '▼'} }Hover me Hover me Hover me Hover me Hover me {{ hoverCard.open ? '▲' : '▼' }} Hover me ` Required: true Default Value: `undefined` Description: undefined **`lazyMount`** Type: `boolean` Required: false Default Value: `false` Description: Whether to enable lazy mounting **`unmountOnExit`** Type: `boolean` Required: false Default Value: `false` Description: Whether to unmount on exit. ### Trigger #### Props **`asChild`** Type: `boolean` Required: false Default Value: `undefined` Description: Use the provided child element as the default rendered element, combining their props and behavior. #### Data Attributes **`data-scope`**: hover-card **`data-part`**: trigger **`data-placement`**: The placement of the trigger **`data-state`**: "open" | "closed" # Menu (REACT) ## Anatomy To set up the menu correctly, you'll need to understand its anatomy and how we name its parts. > Each part includes a `data-part` attribute to help identify them in the DOM. ## Examples Learn how to use the `Menu` component in your project. Let's take a look at the most basic example: ```tsx import { Menu } from '@ark-ui/react/menu' export const Basic = () => ( Open menu ➡️ React Solid Vue Open menu ➡️ React Solid Vue Open menu JS Frameworks React Solid Vue CSS Frameworks Panda Tailwind Open menu React Solid Vue Right click me React Solid Vue Open menu JS Frameworks React Solid Vue CSS Frameworks Panda Tailwind Open menu ✅ Check me Open menu setValue(e.value)}> JS Frameworks {['React', 'Solid', 'Vue'].map((framework) => (✅ {framework} Open menu ➡️ React Solid Vue Open menu ➡️ React Solid Vue console.log(id)}> ) } ``` ### Grouping menu items When the number of menu items gets much, it might be useful to group related menu items. To achieve this, render the `Menu.ItemGroup` component around the `Menu.Item` components. The `Menu.ItemGroupLabel` component can be used to add a label to the group. ```tsx import { Menu } from '@ark-ui/solid/menu' export const Group = () => (Open menu ➡️ React Solid Vue Open menu JS Frameworks React Solid Vue CSS Frameworks Panda Tailwind Open menu React Solid Vue Right click me React Solid Vue Open menu JS Frameworks React Solid Vue CSS Frameworks Panda Tailwind Open menu ✅ Check me Open menu setValue(e.value)}> JS Frameworks {(framework) => ( ✅ {framework()} Open menu ➡️ React Solid Vue Open menu ➡️ React Solid Vue Open menu React Solid Vue Open menu JS Frameworks React Solid Vue CSS Frameworks Panda Tailwind Open menu React Solid Vue Right click me React Solid Vue Open menu JS Frameworks React Solid Vue CSS Frameworks Panda Tailwind Open menu ✅ Check me Open menu JS Frameworks ✅ {{ item }} Open menu ➡️ React Solid Vue Label -1 +1 Label -1 +1 Label -1 +1 Label -1 +1 Label -1 +1 Label -1 +1 Label -1 +1 Label -1 +1 Label -1 +1 Additional Info Error Info Label -1 +1 Label -1 +1 Label -1 +1 Label -1 +1 Label -1 +1 Label -1 +1 Label -1 +1 Label -1 +1 Label -1 +1 Label -1 +1 Additional Info Error Info Label -1 +1 Label -1 +1 Label -1 +1 Label -1 +1 Label -1 +1 Label -1 +1 Label -1 +1 Label -1 +1 Label -1 +1 Label -1 +1 Additional Info Error Info Label -1 +1 ` Required: true Default Value: `undefined` Description: undefined **`asChild`** Type: `boolean` Required: false Default Value: `undefined` Description: Use the provided child element as the default rendered element, combining their props and behavior. ### Scrubber #### Props **`asChild`** Type: `boolean` Required: false Default Value: `undefined` Description: Use the provided child element as the default rendered element, combining their props and behavior. #### Data Attributes **`data-scope`**: number-input **`data-part`**: scrubber **`data-disabled`**: Present when disabled ### ValueText #### Props **`asChild`** Type: `boolean` Required: false Default Value: `undefined` Description: Use the provided child element as the default rendered element, combining their props and behavior. #### Data Attributes **`data-scope`**: number-input **`data-part`**: value-text **`data-disabled`**: Present when disabled **`data-invalid`**: Present when invalid **`data-focus`**: Present when focused ## Accessibility Complies with the [Spinbutton WAI-ARIA design pattern](https://www.w3.org/WAI/ARIA/apg/patterns/spinbutton/). ### Keyboard Support **`ArrowUp`** Description: Increments the value of the number input by a predefined step. **`ArrowDown`** Description: Decrements the value of the number input by a predefined step. **`PageUp`** Description: Increments the value of the number input by a larger predefined step. **`PageDown`** Description: Decrements the value of the number input by a larger predefined step. **`Home`** Description: Sets the value of the number input to its minimum allowed value. **`End`** Description: Sets the value of the number input to its maximum allowed value. **`Enter`** Description: Submits the value entered in the number input. # Pagination (REACT) ## Anatomy To set up the pagination correctly, you'll need to understand its anatomy and how we name its parts. > Each part includes a `data-part` attribute to help identify them in the DOM. ## Examples Learn how to use the `Pagination` component in your project. Let's take a look at the most basic example: ```tsx import { Pagination } from '@ark-ui/react/pagination' export const Basic = () => ( Previous Page {(pagination) => pagination.pages.map((page, index) => page.type === 'page' ? ( {page.value} ) : (… ), ) }Next Page setCurrentPage(details.page)} > ) } ``` ### Customizing Pagination You can customize the Pagination component by setting various props such as `dir`, `pageSize`, `siblingCount`, and `translations`. Here's an example of a customized Pagination: ```tsx import { Pagination } from '@ark-ui/react/pagination' export const Customized = () => (Previous {(pagination) => pagination.pages.map((page, index) => page.type === 'page' ? ( {page.value} ) : (… ), ) }Next Page `Page ${details.page}`, }} > ) ``` ### Using the Root Provider The `RootProvider` component provides a context for the pagination. It accepts the value of the `usePagination` hook. You can leverage it to access the component state and methods from outside the pagination. ```tsx import { Pagination, usePagination } from '@ark-ui/react/pagination' export const RootProvider = () => { const pagination = usePagination({ count: 5000, pageSize: 10, siblingCount: 2 }) return ( <>Previous {(pagination) => pagination.pages.map((page, index) => page.type === 'page' ? ( {page.value} ) : (… ), ) }Next Page Previous Page {(pagination) => pagination.pages.map((page, index) => page.type === 'page' ? ( {page.value} ) : (… ), ) }Next Page Previous Page {(api) => ( {(page, index) => page.type === 'page' ? ( )}{page.value} ) : (… ) }Next Page setCurrentPage(details.page)} > ) } ``` ### Customizing Pagination You can customize the Pagination component by setting various props such as `dir`, `pageSize`, `siblingCount`, and `translations`. Here's an example of a customized Pagination: ```tsx import { Pagination } from '@ark-ui/solid/pagination' import { For } from 'solid-js' export const Customized = () => { return (Previous Page {(api) => ( {(page, index) => page.type === 'page' ? ( )}{page.value} ) : (… ) }Next Page `Page ${details.page}`, }} > ) } ``` ### Using the Root Provider The `RootProvider` component provides a context for the pagination. It accepts the value of the `usePagination` hook. You can leverage it to access the component state and methods from outside the pagination. ```tsx import { Pagination, usePagination } from '@ark-ui/solid/pagination' import { For } from 'solid-js' export const RootProvider = () => { const pagination = usePagination({ count: 5000, pageSize: 10, siblingCount: 2 }) return ( <>Previous Page {(api) => ( {(page, index) => page.type === 'page' ? ( )}{page.value} ) : (… ) }Next Page Previous Page {(api) => ( {(page, index) => page.type === 'page' ? ( )}{page.value} ) : (… ) }Next Page Previous Page {{ page.value }} … Next Page Previous Page {{ page.value }} … Next Page Previous Page {{ page.value }} … Next Page ` Required: true Default Value: `undefined` Description: undefined **`asChild`** Type: `boolean` Required: false Default Value: `undefined` Description: Use the provided child element as the default rendered element, combining their props and behavior. # Pin Input (REACT) ## Anatomy To set up the pin input correctly, you'll need to understand its anatomy and how we name its parts. > Each part includes a `data-part` attribute to help identify them in the DOM. ## Examples Learn how to use the `PinInput` component in your project. Let's take a look at the most basic example: ```tsx import { PinInput } from '@ark-ui/react/pin-input' export const Basic = () => ( alert(e.valueAsString)}> ) ``` ### Setting a default value To set the initial value of the pin input, set the `defaultValue` prop. ```tsx import { PinInput } from '@ark-ui/react/pin-input' export const InitialValue = () => (Label {[0, 1, 2].map((id, index) => ( ))} Label {[0, 1, 2].map((id, index) => ( ))} Label {[0, 1, 2].map((id, index) => ( ))} Label {[0, 1, 2].map((id, index) => ( ))} Label {[0, 1, 2].map((id, index) => ( ))} Label {[0, 1, 2].map((id, index) => ( ))} Label {[0, 1, 2].map((id, index) => ( ))} Additional Info Error Info Label {[0, 1, 2].map((id, index) => ( ))} alert(e.valueAsString)}> ) ``` ### Setting a default value To set the initial value of the pin input, set the `defaultValue` prop. ```tsx import { PinInput } from '@ark-ui/solid/pin-input' import { Index } from 'solid-js' export const InitialValue = () => (Label {(id) => } Label {(id) => } Label {(id) => } Label {(id) => } Label {(id) => } Label {(id) => } Label {(id) => } Additional Info Error Info Label {(id) => } Label Label Label Label Label Label Label Additional Info Error Info Label ` Required: true Default Value: `undefined` Description: undefined **`asChild`** Type: `boolean` Required: false Default Value: `undefined` Description: Use the provided child element as the default rendered element, combining their props and behavior. ## Accessibility ### Keyboard Support **`ArrowLeft`** Description: Moves focus to the previous input **`ArrowRight`** Description: Moves focus to the next input **`Backspace`** Description: Deletes the value in the current input and moves focus to the previous input **`Delete`** Description: Deletes the value in the current input **`Control + V`** Description: Pastes the value into the input fields # Popover (REACT) ## Anatomy To set up the popover correctly, you'll need to understand its anatomy and how we name its parts. > Each part includes a `data-part` attribute to help identify them in the DOM. ## Examples Learn how to use the `Popover` component in your project. Let's take a look at the most basic example: ```tsx import { Popover } from '@ark-ui/react/popover' import { ChevronRightIcon } from 'lucide-react' export const Basic = () => ( Click Me Title Description Click Me Title Description Click Me Title Description Close alert(open ? 'opened' : 'closed')}> ) } ``` ### Control the open state Use the `isOpen` prop to control the open state of the popover. ```tsx import { Popover } from '@ark-ui/react/popover' import { useState } from 'react' export const Controlled = () => { const [isOpen, setIsOpen] = useState(false) return ( <>Click Me Title Description Anchor Title Description Close Click Me Title Description Close Click Me Title Description Close Click Me Title Description Close Title Description
Note: If there are no focusable elements, focus is moved to the next focusable element after the trigger. **`Shift + Tab`** Description: Moves focus to the previous focusable element within the content
Note: If there are no focusable elements, focus is moved to the trigger. **`Esc`** Description: Closes the popover and moves focus to the trigger. # Popover (SOLID) ## Anatomy To set up the popover correctly, you'll need to understand its anatomy and how we name its parts. > Each part includes a `data-part` attribute to help identify them in the DOM. ## Examples Learn how to use the `Popover` component in your project. Let's take a look at the most basic example: ```tsx import { Popover } from '@ark-ui/solid/popover' import { ChevronRightIcon } from 'lucide-solid' export const Basic = () => (Click Me Title Description Click Me Title Description Click Me Title Description Close alert(open ? 'opened' : 'closed')}> ) } ``` ### Control the open state Use the `isOpen` prop to control the open state of the popover. ```tsx import { Popover } from '@ark-ui/solid/popover' import { createSignal } from 'solid-js' export const Controlled = () => { const [isOpen, setIsOpen] = createSignal(false) return ( <>Click Me Title Description Anchor Title Description Close Click Me Title Description Close Click Me Title Description Close Click Me Title Description Close Click Me Title Description
Note: If there are no focusable elements, focus is moved to the next focusable element after the trigger. **`Shift + Tab`** Description: Moves focus to the previous focusable element within the content
Note: If there are no focusable elements, focus is moved to the trigger. **`Esc`** Description: Closes the popover and moves focus to the trigger. # Popover (VUE) ## Anatomy To set up the popover correctly, you'll need to understand its anatomy and how we name its parts. > Each part includes a `data-part` attribute to help identify them in the DOM. ## Examples Learn how to use the `Popover` component in your project. Let's take a look at the most basic example: ```vueClick Me {{ '>' }} Title Description Click Me {{ '>' }} Title Description Click Me Title Description Close Click Me {{ '>' }} Title Description Anchor Title Description Close Click Me Title Description Close Click Me Title Description Close Click Me Title Description Close Click Me {{ '>' }} Title Description ` Required: true Default Value: `undefined` Description: undefined **`lazyMount`** Type: `boolean` Required: false Default Value: `false` Description: Whether to enable lazy mounting **`unmountOnExit`** Type: `boolean` Required: false Default Value: `false` Description: Whether to unmount on exit. ### Title #### Props **`asChild`** Type: `boolean` Required: false Default Value: `undefined` Description: Use the provided child element as the default rendered element, combining their props and behavior. ### Trigger #### Props **`asChild`** Type: `boolean` Required: false Default Value: `undefined` Description: Use the provided child element as the default rendered element, combining their props and behavior. #### Data Attributes **`data-scope`**: popover **`data-part`**: trigger **`data-placement`**: The placement of the trigger **`data-state`**: "open" | "closed" ## Accessibility ### Keyboard Support **`Space`** Description: Opens/closes the popover. **`Enter`** Description: Opens/closes the popover. **`Tab`** Description: Moves focus to the next focusable element within the content.
Note: If there are no focusable elements, focus is moved to the next focusable element after the trigger. **`Shift + Tab`** Description: Moves focus to the previous focusable element within the content
Note: If there are no focusable elements, focus is moved to the trigger. **`Esc`** Description: Closes the popover and moves focus to the trigger. # Progress - Circular (REACT) ## Anatomy To set up the progress correctly, you'll need to understand its anatomy and how we name its parts. > Each part includes a `data-part` attribute to help identify them in the DOM. ## Examples Learn how to use the `Progress` component in your project. Let's take a look at the most basic example: ```tsx import { Progress } from '@ark-ui/react/progress' export const Basic = () => (Label Label Label Label Label Label Label Label Label Label Label Label Label Label Label ` Required: true Default Value: `undefined` Description: undefined **`asChild`** Type: `boolean` Required: false Default Value: `undefined` Description: Use the provided child element as the default rendered element, combining their props and behavior. ### Track #### Props **`asChild`** Type: `boolean` Required: false Default Value: `undefined` Description: Use the provided child element as the default rendered element, combining their props and behavior. ### ValueText #### Props **`asChild`** Type: `boolean` Required: false Default Value: `undefined` Description: Use the provided child element as the default rendered element, combining their props and behavior. ### View #### Props **`state`** Type: `ProgressState` Required: true Default Value: `undefined` Description: undefined **`asChild`** Type: `boolean` Required: false Default Value: `undefined` Description: Use the provided child element as the default rendered element, combining their props and behavior. #### Data Attributes **`data-scope`**: progress **`data-part`**: view **`data-state`**: ## Accessibility Complies with the [the progressbar role requirements.](https://w3c.github.io/aria/#progressbar). # Progress - Linear (REACT) ## Anatomy To set up the progress correctly, you'll need to understand its anatomy and how we name its parts. > Each part includes a `data-part` attribute to help identify them in the DOM. ## Examples Learn how to use the `Progress` component in your project. Let's take a look at the most basic example: ```tsx import { Progress } from '@ark-ui/react/progress' export const Basic = () => ( Label Label Label Label Label Label Label Label Label Label Label Label Label Label Label Label Label ` Required: true Default Value: `undefined` Description: undefined **`asChild`** Type: `boolean` Required: false Default Value: `undefined` Description: Use the provided child element as the default rendered element, combining their props and behavior. ### Track #### Props **`asChild`** Type: `boolean` Required: false Default Value: `undefined` Description: Use the provided child element as the default rendered element, combining their props and behavior. ### ValueText #### Props **`asChild`** Type: `boolean` Required: false Default Value: `undefined` Description: Use the provided child element as the default rendered element, combining their props and behavior. ### View #### Props **`state`** Type: `ProgressState` Required: true Default Value: `undefined` Description: undefined **`asChild`** Type: `boolean` Required: false Default Value: `undefined` Description: Use the provided child element as the default rendered element, combining their props and behavior. #### Data Attributes **`data-scope`**: progress **`data-part`**: view **`data-state`**: ## Accessibility Complies with the [the progressbar role requirements.](https://w3c.github.io/aria/#progressbar). # QR Code (REACT) ## Anatomy To set up the QR code correctly, you'll need to understand its anatomy and how we name its parts. > Each part includes a `data-part` attribute to help identify them in the DOM. ## Examples Learn how to use the `QR Code` component in your project. Let's take a look at the most basic example: ```tsx import { QrCode } from '@ark-ui/react/qr-code' export const Basic = () => { return ( Download Download ``` ### With Overlay You can also add a logo or overlay to the QR code. This is useful when you want to brand the QR code. ```tsx import { QrCode } from '@ark-ui/react/qr-code' export const WithOverlay = () => { return (
Download Download ``` ### With Overlay You can also add a logo or overlay to the QR code. This is useful when you want to brand the QR code. ```tsx import { QrCode } from '@ark-ui/solid/qr-code' export const WithOverlay = () => { return (Download Download ``` ### With Overlay You can also add a logo or overlay to the QR code. This is useful when you want to brand the QR code. ```vue` Required: true Default Value: `undefined` Description: undefined **`asChild`** Type: `boolean` Required: false Default Value: `undefined` Description: Use the provided child element as the default rendered element, combining their props and behavior. # Radio Group (REACT) ## Anatomy To set up the radio group correctly, you'll need to understand its anatomy and how we name its parts. > Each part includes a `data-part` attribute to help identify them in the DOM. ### Design impact on the asChild property The `RadioGroup.Item` element of the radio group is a `label` element. This is because the radio group is a form control and should be associated with a label to provide context and meaning to the user. Otherwise, the HTML and accessibility structure will be invalid. > If you need to use the `asChild` property, make sure that the `label` element is the direct child of the > `RadioGroup.Item` component. ## Examples Learn how to use the `RadioGroup` component in your project. Let's take a look at the most basic example: ```tsx import { RadioGroup } from '@ark-ui/react/radio-group' export const Basic = () => { const frameworks = ['React', 'Solid', 'Vue'] return ( Framework {frameworks.map((framework) => ( {framework} Framework {frameworks.map((framework) => ({framework} Framework {frameworks.map((framework) => ({framework} console.log(details.value)}> ) } ``` ### Using the Root Provider The `RootProvider` component provides a context for the radio-group. It accepts the value of the `useRadio-group` hook. You can leverage it to access the component state and methods from outside the radio-group. ```tsx import { RadioGroup, useRadioGroup } from '@ark-ui/react/radio-group' export const RootProvider = () => { const frameworks = ['React', 'Solid', 'Vue'] const radioGroup = useRadioGroup() return ( <>Framework {frameworks.map((framework) => ({framework} Framework {frameworks.map((framework) => ( {framework} Framework {(framework) => ( {framework()} Framework {(framework) => ( {framework()} Framework {(framework) => ( {framework()} console.log(details.value)}> ) } ``` ### Using the Root Provider The `RootProvider` component provides a context for the radio-group. It accepts the value of the `useRadio-group` hook. You can leverage it to access the component state and methods from outside the radio-group. ```tsx import { RadioGroup, useRadioGroup } from '@ark-ui/solid/radio-group' import { Index } from 'solid-js' export const RootProvider = () => { const frameworks = ['React', 'Solid', 'Vue'] const radioGroup = useRadioGroup() return ( <>Framework {(framework) => ( {framework()} Framework {(framework) => ( {framework()} Framework {{ framework }} Framework {{ framework }} Framework {{ framework }} Framework {{ framework }} Framework {{ framework }} ` Required: true Default Value: `undefined` Description: undefined **`asChild`** Type: `boolean` Required: false Default Value: `undefined` Description: Use the provided child element as the default rendered element, combining their props and behavior. ## Accessibility Complies with the [Radio WAI-ARIA design pattern](https://www.w3.org/WAI/ARIA/apg/patterns/radio/). ### Keyboard Support **`Tab`** Description: Moves focus to either the checked radio item or the first radio item in the group. **`Space`** Description: When focus is on an unchecked radio item, checks it. **`ArrowDown`** Description: Moves focus and checks the next radio item in the group. **`ArrowRight`** Description: Moves focus and checks the next radio item in the group. **`ArrowUp`** Description: Moves focus to the previous radio item in the group. **`ArrowLeft`** Description: Moves focus to the previous radio item in the group. # Rating Group (REACT) ## Anatomy To set up the rating correctly, you'll need to understand its anatomy and how we name its parts. > Each part includes a `data-part` attribute to help identify them in the DOM. ## Examples Learn how to use the `RatingGroup` component in your project. Let's take a look at the most basic example: ```tsx import { RatingGroup } from '@ark-ui/react/rating-group' import { StarIcon } from 'lucide-react' export const Basic = () => ( Label {({ items }) => items.map((item) => ( {({ highlighted }) => (highlighted ? : )} Label {({ items }) => items.map((item) => ( {({ half, highlighted }) => { if (half) return if (highlighted) return return }} Label {({ items }) => items.map((item) => ( {({ highlighted }) => (highlighted ? : )} setValue(details.value)} allowHalf> ) } ``` ### Disabling the rating group To make the rating group disabled, set the `disabled` prop to `true`. ```tsx import { RatingGroup } from '@ark-ui/react/rating-group' import { StarIcon } from 'lucide-react' export const Disabled = () => (Label {({ items }) => items.map((item) => ( {({ highlighted }) => (highlighted ? : )} Label {({ items }) => items.map((item) => ( {({ highlighted }) => (highlighted ? : )} Label {({ items }) => items.map((item) => ( {({ highlighted }) => (highlighted ? : )} Label {({ items }) => items.map((item) => ( {({ highlighted }) => (highlighted ? : )} Label {({ items }) => items.map((item) => ( {({ highlighted }) => (highlighted ? : )} Additional Info Error Info Label {({ items }) => items.map((item) => ( {({ highlighted }) => (highlighted ? : )} Label {(context) => ( {(index) => ( )}{(context) => ( }> )} Label {(context) => ( {(index) => ( )}{(context) => context().half ? ( ) : context().highlighted ? ( ) : ( ) } Label {(context) => ( {(index) => ( )}{(context) => ( }> )} setValue(details.value)}> ) } ``` ### Disabling the rating group To make the rating group disabled, set the `disabled` prop to `true`. ```tsx import { RatingGroup } from '@ark-ui/solid/rating-group' import { StarIcon } from 'lucide-solid' import { Index, Show } from 'solid-js' export const Disabled = () => (Label {(context) => ( {(index) => ( )}{(context) => ( }> )} Label {(context) => ( {(index) => ( )}{(context) => ( }> )} Label {(context) => ( {(index) => ( )}{(context) => ( }> )} Label {(context) => ( {(index) => ( )}{(context) => ( }> )} Label {(context) => ( {(index) => ( )}{(context) => ( }> )} Additional Info Error Info Label {(context) => ( {(index) => ( )}{(context) => ( }> )} Label Label Label Label {{ value }} Label Label Label Label Additional Info Error Info Label ` Required: true Default Value: `undefined` Description: undefined **`asChild`** Type: `boolean` Required: false Default Value: `undefined` Description: Use the provided child element as the default rendered element, combining their props and behavior. ## Accessibility ### Keyboard Support **`ArrowRight`** Description: Moves focus to the next star, increasing the rating value based on the `allowHalf` property. **`ArrowLeft`** Description: Moves focus to the previous star, decreasing the rating value based on the `allowHalf` property. **`Enter`** Description: Selects the focused star in the rating group. # Segment Group (REACT) ## Anatomy To set up the segmented control correctly, you'll need to understand its anatomy and how we name its parts. > Each part includes a `data-part` attribute to help identify them in the DOM. ## Examples Learn how to use the `SegmentGroup` component in your project. Let's take a look at the most basic example: ```tsx import { SegmentGroup } from '@ark-ui/react/segment-group' export const Basic = () => { const frameworks = ['React', 'Solid', 'Svelte', 'Vue'] return ( {frameworks.map((framework) => ( {framework} {frameworks.map((framework) => ( {framework} ('React') return ( setValue(e.value)}> ) } ``` ### Disabled Segment To disable a segment, simply pass the `disabled` prop to the `SegmentGroup.Item` component: ```tsx import { SegmentGroup } from '@ark-ui/react/segment-group' export const Disabled = () => { const frameworks = ['React', 'Solid', 'Svelte', 'Vue'] return ({frameworks.map((framework) => ( {framework} {frameworks.map((framework) => ( {framework} {frameworks.map((framework) => ( {framework} {(framework) => ( {framework()} {(framework) => ( {framework()} ('React') return ( setValue(e.value)}> ) } ``` ### Disabled Segment To disable a segment, simply pass the `disabled` prop to the `SegmentGroup.Item` component: ```tsx import { SegmentGroup } from '@ark-ui/solid/segment-group' import { Index } from 'solid-js' export const Disabled = () => { const frameworks = ['React', 'Solid', 'Svelte', 'Vue'] return ({(framework) => ( {framework()} {(framework) => ( {framework()} {(framework) => ( {framework()} {{ framework }} {{ framework }} {{ framework }} {{ framework }} {{ framework }} ` Required: true Default Value: `undefined` Description: undefined **`asChild`** Type: `boolean` Required: false Default Value: `undefined` Description: Use the provided child element as the default rendered element, combining their props and behavior. ## Accessibility Complies with the [Radio WAI-ARIA design pattern](https://www.w3.org/WAI/ARIA/apg/patterns/radio/). ### Keyboard Support **`Tab`** Description: Moves focus to either the checked radio item or the first radio item in the group. **`Space`** Description: When focus is on an unchecked radio item, checks it. **`ArrowDown`** Description: Moves focus and checks the next radio item in the group. **`ArrowRight`** Description: Moves focus and checks the next radio item in the group. **`ArrowUp`** Description: Moves focus to the previous radio item in the group. **`ArrowLeft`** Description: Moves focus to the previous radio item in the group. # Select (REACT) ## Anatomy To set up the select correctly, you'll need to understand its anatomy and how we name its parts. > Each part includes a `data-part` attribute to help identify them in the DOM. ## Examples Learn how to use the `Select` component in your project. Let's take a look at the most basic example: ```tsx import { Portal } from '@ark-ui/react/portal' import { Select, createListCollection } from '@ark-ui/react/select' import { ChevronDownIcon } from 'lucide-react' export const Basic = () => { const collection = createListCollection({ items: ['React', 'Solid', 'Vue'] }) return ( Framework Clear Frameworks {collection.items.map((item) => ({item} ✓ Framework Clear Frameworks {collection.items.map((item) => ({item.label} ✓ Framework Clear Frameworks {collection.items.map((item) => ({item.label} ✓ - ({
items: [
{ label: 'React', value: 'react' },
{ label: 'Solid', value: 'solid' },
{ label: 'Vue', value: 'vue' },
{ label: 'Svelte', value: 'svelte', disabled: true },
],
})
return (
- `.
- **Textarea**: Fixed `ResizeObserver` warning.
- **Timer**: Fixed stopping issue when switching tabs; resolved issue where `action` prop was passed to `ActionTrigger`.
- **Toast**: Fixed keyboard navigation skipping close button.
- **Toggle Group**: Fixed `data-focus` not being removed on blur.
# Changelog (VUE)
## [Unreleased]
## [5.2.0] - 2025-03-22
### Added
- **[NEW] DownloadTrigger**: Added Component for downloading a blob or file, whether retrieved synchronously or
asynchronously.
```tsx
import { DownloadTrigger } from '@ark-ui/react/download-trigger'
export const DownloadImage = () => {
async function fetchImage() {
const response = await fetch('https://picsum.photos/200/300')
return response.blob()
}
return (
Download Image ) } ``` ### Changed - **NumberInput**: Set the default step to `0.01` when `formatOptions.style` was set to `percent`. - **[Breaking] Splitter**: Redesigned splitter machine to support more use cases and improve DX. Check out the [Splitter](https://ark-ui.com/react/docs/components/splitter) documentation for more details. ### Fixed - **Toast**: Fixed issue where setting `offsets` to `undefined` caused the machine to throw. - **Select**: Fixed issue where select `valueAsString` lost reactivity. ## [5.1.1] - 2025-03-17 ### Fixed - **Field**: Exported the missing `useField` hook. - **NumberInput**: `onValueChange` correctly received `valueAsNumber`. - **Slider**: Thumbs initialized correctly when `min` was set to a non-zero value. ## [5.1.0] - 2025-03-11 ### Added - Implemented support for reactive props in `use-*.ts` functions. ```tsx const value = ref(['React']) const accordionProps = computed(() => ({ multiple: true, value: value.value, onValueChange: (e) => (value.value = e.value), })) const accordion = useAccordion(accordionProps) ``` ### Fixed - **Checkbox**: `data-invalid` is no longer set when `invalid` is `false`. - **Combobox**: Fixed unexpected cursor movement when editing input. - **PinInput**: OTP SMS autofill now works as expected. - **RatingGroup**: Fixed incorrect focus placement on the label. - **TagsInput**: Improved caret detection to prevent unintended tag removal. - **Timer** - Fixed slowdown when switching tabs/windows. - Changed default `interval` from `250` to `1000`. ## [5.0.2] - 2025-03-06 ### Fixed - **Steps**: Fixed issue where `Steps.X` namespace was not exported. ## [5.0.1] - 2025-03-06 Ark UI just got a major performance boost! 🚀 ### What’s new in v5? - **Blazing-fast performance** – Every component runs smoother and renders faster. - **Smaller bundle size** – Leaner components and adapters for a more efficient build. We made this happen by using Vue's native reactive primitives instead of external stores. In our stress tests with **10,000 components**, Ark v5 delivered **1.5x–4x** better performance across the board. ### A quick note on tests Most component updates are non-breaking, but due to this change, some tests may need adjustments. For example: ```jsx // Before it('should open by default', () => { render(ComponentUnderTest, { props: { defaultOpen: true, }, }) expect(screen.getByRole('dialog')).toBeInTheDocument() }) // After it('should open by default', async () => { render(ComponentUnderTest, { props: { defaultOpen: true, }, }) expect(await screen.findByRole('dialog')).toBeInTheDocument() }) ``` #### Added - **Carousel**: ⚠️ Breaking change: Added required prop `slideCount` to `Carousel.Root` component. - **Clipboard**: Added `onValueChange` and `defaultValue` props. - **ColorPicker**: Added `defaultFormat` prop. - **Combobox**: Added `defaultHighlightedValue` and `defaultInputValue` props. - **DatePicker**: Added `defaultFocusedValue` prop, `getViewProps`, and `visibleRangeText`. - **HoverCard**: Expanded interaction handlers. - **Menu**: Added `defaultHighlightedValue` prop. - **Pagination**: Added `defaultPageSize` prop. - **PinInput**: Added `count` prop for better SSR aria-label. - **Progress**: Added `locale` and `formatOptions` props. - **QrCode**: Added `pixelSize` prop. - **Select**: Added `defaultHighlightedValue` prop. - **TagsInput**: Added `defaultInputValue` prop. - **Toggle**: Reintroduced toggle machine. #### Fixed - **Accordion**: Fixed issue in Safari where clicking triggers didn't show content. - **Avatar**: Fixed `api.setSrc` not working. - **Carousel**: Fixed pagination sync and initial page issues. - **File Upload**: Fixed drag-and-drop when `directory: true`. - **Menu**: Fixed context menu positioning not updating on right-click. - **Number Input**: Fixed `value` prop not being consumed. - **Pin Input**: Fixed focus warnings and editing issues. - **Progress**: Allowed more precise (decimal) values. - **Radio Group, Switch**: Improved focus behavior in Safari. - **Select**: Fixed regression where `multiple: true` didn't work. - **Steps**: Ensured ARIA attributes use valid values and wrapped ` - ` elements correctly within `
- `.
- **Textarea**: Fixed `ResizeObserver` warning.
- **Timer**: Fixed stopping issue when switching tabs; resolved issue where `action` prop was passed to `ActionTrigger`.
- **Toast**: Fixed keyboard navigation skipping close button.
- **Toggle Group**: Fixed `data-focus` not being removed on blur.
# Changelog (SOLID)
## [Unreleased]
## [5.2.0] - 2025-03-22
### Added
- **[NEW] DownloadTrigger**: Added Component for downloading a blob or file, whether retrieved synchronously or
asynchronously.
```tsx
import { DownloadTrigger } from '@ark-ui/react/download-trigger'
export const DownloadImage = () => {
async function fetchImage() {
const response = await fetch('https://picsum.photos/200/300')
return response.blob()
}
return (
Download Image ) } ``` ### Changed - **NumberInput**: Set the default step to `0.01` when `formatOptions.style` was set to `percent`. - **[Breaking] Splitter**: Redesigned splitter machine to support more use cases and improve DX. Check out the [Splitter](https://ark-ui.com/react/docs/components/splitter) documentation for more details. ### Fixed - **Toast**: Fixed issue where setting `offsets` to `undefined` caused the machine to throw. - **Select**: Fixed issue where select `valueAsString` lost reactivity. ## [5.1.1] - 2025-03-17 ### Fixed - **Field**: Exported the missing `useField` hook. - **NumberInput**: `onValueChange` correctly received `valueAsNumber`. - **Slider**: Thumbs initialized correctly when `min` was set to a non-zero value. ## [5.1.0] - 2025-03-11 ### Added - Implemented support for reactive props in `use-*.ts` functions. ```tsx const value = ref(['React']) const accordionProps = computed(() => ({ multiple: true, value: value.value, onValueChange: (e) => (value.value = e.value), })) const accordion = useAccordion(accordionProps) ``` ### Fixed - **Checkbox**: `data-invalid` is no longer set when `invalid` is `false`. - **Combobox**: Fixed unexpected cursor movement when editing input. - **PinInput**: OTP SMS autofill now works as expected. - **RatingGroup**: Fixed incorrect focus placement on the label. - **TagsInput**: Improved caret detection to prevent unintended tag removal. - **Timer** - Fixed slowdown when switching tabs/windows. - Changed default `interval` from `250` to `1000`. ## [5.0.2] - 2025-03-06 ### Fixed - **Steps**: Fixed issue where `Steps.X` namespace was not exported. ## [5.0.1] - 2025-03-06 Ark UI just got a major performance boost! 🚀 ### What’s new in v5? - **Blazing-fast performance** – Every component runs smoother and renders faster. - **Smaller bundle size** – Leaner components and adapters for a more efficient build. We made this happen by using Vue's native reactive primitives instead of external stores. In our stress tests with **10,000 components**, Ark v5 delivered **1.5x–4x** better performance across the board. ### A quick note on tests Most component updates are non-breaking, but due to this change, some tests may need adjustments. For example: ```jsx // Before it('should open by default', () => { render(ComponentUnderTest, { props: { defaultOpen: true, }, }) expect(screen.getByRole('dialog')).toBeInTheDocument() }) // After it('should open by default', async () => { render(ComponentUnderTest, { props: { defaultOpen: true, }, }) expect(await screen.findByRole('dialog')).toBeInTheDocument() }) ``` #### Added - **Carousel**: ⚠️ Breaking change: Added required prop `slideCount` to `Carousel.Root` component. - **Clipboard**: Added `onValueChange` and `defaultValue` props. - **ColorPicker**: Added `defaultFormat` prop. - **Combobox**: Added `defaultHighlightedValue` and `defaultInputValue` props. - **DatePicker**: Added `defaultFocusedValue` prop, `getViewProps`, and `visibleRangeText`. - **HoverCard**: Expanded interaction handlers. - **Menu**: Added `defaultHighlightedValue` prop. - **Pagination**: Added `defaultPageSize` prop. - **PinInput**: Added `count` prop for better SSR aria-label. - **Progress**: Added `locale` and `formatOptions` props. - **QrCode**: Added `pixelSize` prop. - **Select**: Added `defaultHighlightedValue` prop. - **TagsInput**: Added `defaultInputValue` prop. - **Toggle**: Reintroduced toggle machine. #### Fixed - **Accordion**: Fixed issue in Safari where clicking triggers didn't show content. - **Avatar**: Fixed `api.setSrc` not working. - **Carousel**: Fixed pagination sync and initial page issues. - **File Upload**: Fixed drag-and-drop when `directory: true`. - **Menu**: Fixed context menu positioning not updating on right-click. - **Number Input**: Fixed `value` prop not being consumed. - **Pin Input**: Fixed focus warnings and editing issues. - **Progress**: Allowed more precise (decimal) values. - **Radio Group, Switch**: Improved focus behavior in Safari. - **Select**: Fixed regression where `multiple: true` didn't work. - **Steps**: Ensured ARIA attributes use valid values and wrapped ` - ` elements correctly within `
- `.
- **Textarea**: Fixed `ResizeObserver` warning.
- **Timer**: Fixed stopping issue when switching tabs; resolved issue where `action` prop was passed to `ActionTrigger`.
- **Toast**: Fixed keyboard navigation skipping close button.
- **Toggle Group**: Fixed `data-focus` not being removed on blur.
# Changelog (REACT)
## [Unreleased]
### Changed
- Replaced custom ID generator with `$props.id()` rune.
## [0.3.0] - 2025-01-08
- Added `Format` component.
- Added `Progress` component.
## [0.2.0] - 2024-12-12
## Added
- Added `Ark` factory component for `asChild` prop.
- Added `Environment` component.
- Added `Collection` helpers.
- Added `Timer` component.
- Added `Highlight` component.
- Added `QrCode` component.
## [0.1.0] - 2024-11-27
### Added
- Added `Avatar` component.
## [0.0.0] - 2024-11-27
# Changelog (SOLID)
## [Unreleased]
### Changed
- Replaced custom ID generator with `$props.id()` rune.
## [0.3.0] - 2025-01-08
- Added `Format` component.
- Added `Progress` component.
## [0.2.0] - 2024-12-12
## Added
- Added `Ark` factory component for `asChild` prop.
- Added `Environment` component.
- Added `Collection` helpers.
- Added `Timer` component.
- Added `Highlight` component.
- Added `QrCode` component.
## [0.1.0] - 2024-11-27
### Added
- Added `Avatar` component.
## [0.0.0] - 2024-11-27
# Changelog (VUE)
## [Unreleased]
### Changed
- Replaced custom ID generator with `$props.id()` rune.
## [0.3.0] - 2025-01-08
- Added `Format` component.
- Added `Progress` component.
## [0.2.0] - 2024-12-12
## Added
- Added `Ark` factory component for `asChild` prop.
- Added `Environment` component.
- Added `Collection` helpers.
- Added `Timer` component.
- Added `Highlight` component.
- Added `QrCode` component.
## [0.1.0] - 2024-11-27
### Added
- Added `Avatar` component.
## [0.0.0] - 2024-11-27
# Changelog (REACT)
## [Unreleased]
## [5.2.0] - 2025-03-22
### Added
- **[NEW] DownloadTrigger**: Added Component for downloading a blob or file, whether retrieved synchronously or
asynchronously.
```tsx
import { DownloadTrigger } from '@ark-ui/react/download-trigger'
export const DownloadImage = () => {
async function fetchImage() {
const response = await fetch('https://picsum.photos/200/300')
return response.blob()
}
return (
Download Image ) } ``` ### Changed - **NumberInput**: Set the default step to `0.01` when `formatOptions.style` was set to `percent`. - **[Breaking] Splitter**: Redesigned splitter machine to support more use cases and improve DX. Check out the [Splitter](https://ark-ui.com/react/docs/components/splitter) documentation for more details. ### Fixed - **Toast**: Fixed issue where setting `offsets` to `undefined` caused the machine to throw. - **Select**: Fixed issue where select `valueAsString` lost reactivity. ## [5.1.1] - 2025-03-17 ### Fixed - **Field**: Exported the missing `useField` hook. - **NumberInput**: `onValueChange` correctly received `valueAsNumber`. - **Slider**: Thumbs initialized correctly when `min` was set to a non-zero value. ## [5.1.0] - 2025-03-11 ### Added - Implemented support for reactive props in `use-*.ts` functions. ```tsx const value = ref(['React']) const accordionProps = computed(() => ({ multiple: true, value: value.value, onValueChange: (e) => (value.value = e.value), })) const accordion = useAccordion(accordionProps) ``` ### Fixed - **Checkbox**: `data-invalid` is no longer set when `invalid` is `false`. - **Combobox**: Fixed unexpected cursor movement when editing input. - **PinInput**: OTP SMS autofill now works as expected. - **RatingGroup**: Fixed incorrect focus placement on the label. - **TagsInput**: Improved caret detection to prevent unintended tag removal. - **Timer** - Fixed slowdown when switching tabs/windows. - Changed default `interval` from `250` to `1000`. ## [5.0.2] - 2025-03-06 ### Fixed - **Steps**: Fixed issue where `Steps.X` namespace was not exported. ## [5.0.1] - 2025-03-06 Ark UI just got a major performance boost! 🚀 ### What’s new in v5? - **Blazing-fast performance** – Every component runs smoother and renders faster. - **Smaller bundle size** – Leaner components and adapters for a more efficient build. We made this happen by using Vue's native reactive primitives instead of external stores. In our stress tests with **10,000 components**, Ark v5 delivered **1.5x–4x** better performance across the board. ### A quick note on tests Most component updates are non-breaking, but due to this change, some tests may need adjustments. For example: ```jsx // Before it('should open by default', () => { render(ComponentUnderTest, { props: { defaultOpen: true, }, }) expect(screen.getByRole('dialog')).toBeInTheDocument() }) // After it('should open by default', async () => { render(ComponentUnderTest, { props: { defaultOpen: true, }, }) expect(await screen.findByRole('dialog')).toBeInTheDocument() }) ``` #### Added - **Carousel**: ⚠️ Breaking change: Added required prop `slideCount` to `Carousel.Root` component. - **Clipboard**: Added `onValueChange` and `defaultValue` props. - **ColorPicker**: Added `defaultFormat` prop. - **Combobox**: Added `defaultHighlightedValue` and `defaultInputValue` props. - **DatePicker**: Added `defaultFocusedValue` prop, `getViewProps`, and `visibleRangeText`. - **HoverCard**: Expanded interaction handlers. - **Menu**: Added `defaultHighlightedValue` prop. - **Pagination**: Added `defaultPageSize` prop. - **PinInput**: Added `count` prop for better SSR aria-label. - **Progress**: Added `locale` and `formatOptions` props. - **QrCode**: Added `pixelSize` prop. - **Select**: Added `defaultHighlightedValue` prop. - **TagsInput**: Added `defaultInputValue` prop. - **Toggle**: Reintroduced toggle machine. #### Fixed - **Accordion**: Fixed issue in Safari where clicking triggers didn't show content. - **Avatar**: Fixed `api.setSrc` not working. - **Carousel**: Fixed pagination sync and initial page issues. - **File Upload**: Fixed drag-and-drop when `directory: true`. - **Menu**: Fixed context menu positioning not updating on right-click. - **Number Input**: Fixed `value` prop not being consumed. - **Pin Input**: Fixed focus warnings and editing issues. - **Progress**: Allowed more precise (decimal) values. - **Radio Group, Switch**: Improved focus behavior in Safari. - **Select**: Fixed regression where `multiple: true` didn't work. - **Steps**: Ensured ARIA attributes use valid values and wrapped ` - ` elements correctly within `
- `.
- **Textarea**: Fixed `ResizeObserver` warning.
- **Timer**: Fixed stopping issue when switching tabs; resolved issue where `action` prop was passed to `ActionTrigger`.
- **Toast**: Fixed keyboard navigation skipping close button.
- **Toggle Group**: Fixed `data-focus` not being removed on blur.
# Changelog (VUE)
## [Unreleased]
## [5.2.0] - 2025-03-22
### Added
- **[NEW] DownloadTrigger**: Added Component for downloading a blob or file, whether retrieved synchronously or
asynchronously.
```tsx
import { DownloadTrigger } from '@ark-ui/solid/download-trigger'
export const DownloadImage = () => {
async function fetchImage() {
const response = await fetch('https://picsum.photos/200/300')
return response.blob()
}
return (
Download Image ) } ``` ### Changed - **NumberInput**: Set the default step to `0.01` when `formatOptions.style` was set to `percent`. - **[Breaking] Splitter**: Redesigned splitter machine to support more use cases and improve DX. Check out the [Splitter](https://ark-ui.com/solid/docs/components/splitter) documentation for more details. ### Fixed - **Presence**: Fixed issue where `onExitComplete` was not being called. - **Select**: Fixed issue where select `valueAsString` lost reactivity. - **Toast**: - Fixed issue where setting `offsets` to `undefined` caused the machine to throw. - Fixed issue where `onExitComplete` was not being called. ## [5.1.1] - 2025-03-17 ### Fixed - **Field**: Exported the missing `useField` hook. - **NumberInput**: `onValueChange` correctly received `valueAsNumber`. - **Slider**: Thumbs initialized correctly when `min` was set to a non-zero value. ## [5.1.0] - 2025-03-11 ### Added - Implemented support for reactive props in `use-*.ts` functions. ```tsx const accordionProps = createMemo(() => ({ multiple: true, value: value(), onValueChange: (e) => setValue(e.value), })) const accordion = useAccordion(accordionProps) ``` ### Fixed - **Checkbox**: `data-invalid` is no longer set when `invalid` is `false`. - **Combobox**: Fixed unexpected cursor movement when editing input. - **PinInput**: OTP SMS autofill now works as expected. - **RatingGroup**: Fixed incorrect focus placement on the label. - **TagsInput**: Improved caret detection to prevent unintended tag removal. - **Timer** - Fixed slowdown when switching tabs/windows. - Changed default `interval` from `250` to `1000`. ## [5.0.0] - 2025-03-06 Ark UI just got a major performance boost! 🚀 ### What’s new in v5? - **Blazing-fast performance** – Every component runs smoother and renders faster. - **Smaller bundle size** – Leaner components and adapters for a more efficient build. We made this happen by using Solid's native reactive primitives instead of external stores. In our stress tests with **10,000 components**, Ark v5 delivered **1.5x–4x** better performance across the board. ### A quick note on tests Most component updates are non-breaking, but due to this change, some tests may need adjustments. For example: ```jsx // Before it('should open by default', () => { render(() => ) expect(screen.getByRole('dialog')).toBeInTheDocument() }) // After it('should open by default', async () => { render(() => ) expect(await screen.findByRole('dialog')).toBeInTheDocument() }) ``` #### Added - **Carousel**: ⚠️ Breaking change: Added required prop `slideCount` to `Carousel.Root` component. - **Clipboard**: Added `onValueChange` and `defaultValue` props. - **ColorPicker**: Added `defaultFormat` prop. - **Combobox**: Added `defaultHighlightedValue` and `defaultInputValue` props. - **DatePicker**: Added `defaultFocusedValue` prop, `getViewProps`, and `visibleRangeText`. - **HoverCard**: Expanded interaction handlers. - **Menu**: Added `defaultHighlightedValue` prop. - **Pagination**: Added `defaultPageSize` prop. - **PinInput**: Added `count` prop for better SSR aria-label. - **Progress**: Added `locale` and `formatOptions` props. - **QrCode**: Added `pixelSize` prop. - **Select**: Added `defaultHighlightedValue` prop. - **TagsInput**: Added `defaultInputValue` prop. - **Toggle**: Reintroduced toggle machine. #### Fixed - **Accordion**: Fixed issue in Safari where clicking triggers didn't show content. - **Avatar**: Fixed `api.setSrc` not working. - **Carousel**: Fixed pagination sync and initial page issues. - **File Upload**: Fixed drag-and-drop when `directory: true`. - **Menu**: Fixed context menu positioning not updating on right-click. - **Number Input**: Fixed `value` prop not being consumed. - **Pin Input**: Fixed focus warnings and editing issues. - **Progress**: Allowed more precise (decimal) values. - **Radio Group, Switch**: Improved focus behavior in Safari. - **Select**: Fixed regression where `multiple: true` didn't work. - **Steps**: Ensured ARIA attributes use valid values and wrapped ` - ` elements correctly within `
- `.
- **Textarea**: Fixed `ResizeObserver` warning.
- **Timer**: Fixed stopping issue when switching tabs; resolved issue where `action` prop was passed to `ActionTrigger`.
- **Toast**: Fixed keyboard navigation skipping close button.
- **Toggle Group**: Fixed `data-focus` not being removed on blur.
# Changelog (SOLID)
## [Unreleased]
## [5.2.0] - 2025-03-22
### Added
- **[NEW] DownloadTrigger**: Added Component for downloading a blob or file, whether retrieved synchronously or
asynchronously.
```tsx
import { DownloadTrigger } from '@ark-ui/solid/download-trigger'
export const DownloadImage = () => {
async function fetchImage() {
const response = await fetch('https://picsum.photos/200/300')
return response.blob()
}
return (
Download Image ) } ``` ### Changed - **NumberInput**: Set the default step to `0.01` when `formatOptions.style` was set to `percent`. - **[Breaking] Splitter**: Redesigned splitter machine to support more use cases and improve DX. Check out the [Splitter](https://ark-ui.com/solid/docs/components/splitter) documentation for more details. ### Fixed - **Presence**: Fixed issue where `onExitComplete` was not being called. - **Select**: Fixed issue where select `valueAsString` lost reactivity. - **Toast**: - Fixed issue where setting `offsets` to `undefined` caused the machine to throw. - Fixed issue where `onExitComplete` was not being called. ## [5.1.1] - 2025-03-17 ### Fixed - **Field**: Exported the missing `useField` hook. - **NumberInput**: `onValueChange` correctly received `valueAsNumber`. - **Slider**: Thumbs initialized correctly when `min` was set to a non-zero value. ## [5.1.0] - 2025-03-11 ### Added - Implemented support for reactive props in `use-*.ts` functions. ```tsx const accordionProps = createMemo(() => ({ multiple: true, value: value(), onValueChange: (e) => setValue(e.value), })) const accordion = useAccordion(accordionProps) ``` ### Fixed - **Checkbox**: `data-invalid` is no longer set when `invalid` is `false`. - **Combobox**: Fixed unexpected cursor movement when editing input. - **PinInput**: OTP SMS autofill now works as expected. - **RatingGroup**: Fixed incorrect focus placement on the label. - **TagsInput**: Improved caret detection to prevent unintended tag removal. - **Timer** - Fixed slowdown when switching tabs/windows. - Changed default `interval` from `250` to `1000`. ## [5.0.0] - 2025-03-06 Ark UI just got a major performance boost! 🚀 ### What’s new in v5? - **Blazing-fast performance** – Every component runs smoother and renders faster. - **Smaller bundle size** – Leaner components and adapters for a more efficient build. We made this happen by using Solid's native reactive primitives instead of external stores. In our stress tests with **10,000 components**, Ark v5 delivered **1.5x–4x** better performance across the board. ### A quick note on tests Most component updates are non-breaking, but due to this change, some tests may need adjustments. For example: ```jsx // Before it('should open by default', () => { render(() => ) expect(screen.getByRole('dialog')).toBeInTheDocument() }) // After it('should open by default', async () => { render(() => ) expect(await screen.findByRole('dialog')).toBeInTheDocument() }) ``` #### Added - **Carousel**: ⚠️ Breaking change: Added required prop `slideCount` to `Carousel.Root` component. - **Clipboard**: Added `onValueChange` and `defaultValue` props. - **ColorPicker**: Added `defaultFormat` prop. - **Combobox**: Added `defaultHighlightedValue` and `defaultInputValue` props. - **DatePicker**: Added `defaultFocusedValue` prop, `getViewProps`, and `visibleRangeText`. - **HoverCard**: Expanded interaction handlers. - **Menu**: Added `defaultHighlightedValue` prop. - **Pagination**: Added `defaultPageSize` prop. - **PinInput**: Added `count` prop for better SSR aria-label. - **Progress**: Added `locale` and `formatOptions` props. - **QrCode**: Added `pixelSize` prop. - **Select**: Added `defaultHighlightedValue` prop. - **TagsInput**: Added `defaultInputValue` prop. - **Toggle**: Reintroduced toggle machine. #### Fixed - **Accordion**: Fixed issue in Safari where clicking triggers didn't show content. - **Avatar**: Fixed `api.setSrc` not working. - **Carousel**: Fixed pagination sync and initial page issues. - **File Upload**: Fixed drag-and-drop when `directory: true`. - **Menu**: Fixed context menu positioning not updating on right-click. - **Number Input**: Fixed `value` prop not being consumed. - **Pin Input**: Fixed focus warnings and editing issues. - **Progress**: Allowed more precise (decimal) values. - **Radio Group, Switch**: Improved focus behavior in Safari. - **Select**: Fixed regression where `multiple: true` didn't work. - **Steps**: Ensured ARIA attributes use valid values and wrapped ` - ` elements correctly within `
- `.
- **Textarea**: Fixed `ResizeObserver` warning.
- **Timer**: Fixed stopping issue when switching tabs; resolved issue where `action` prop was passed to `ActionTrigger`.
- **Toast**: Fixed keyboard navigation skipping close button.
- **Toggle Group**: Fixed `data-focus` not being removed on blur.
# Changelog (REACT)
## [Unreleased]
## [5.2.0] - 2025-03-22
### Added
- **[NEW] DownloadTrigger**: Added Component for downloading a blob or file, whether retrieved synchronously or
asynchronously.
```tsx
import { DownloadTrigger } from '@ark-ui/solid/download-trigger'
export const DownloadImage = () => {
async function fetchImage() {
const response = await fetch('https://picsum.photos/200/300')
return response.blob()
}
return (
Download Image ) } ``` ### Changed - **NumberInput**: Set the default step to `0.01` when `formatOptions.style` was set to `percent`. - **[Breaking] Splitter**: Redesigned splitter machine to support more use cases and improve DX. Check out the [Splitter](https://ark-ui.com/solid/docs/components/splitter) documentation for more details. ### Fixed - **Presence**: Fixed issue where `onExitComplete` was not being called. - **Select**: Fixed issue where select `valueAsString` lost reactivity. - **Toast**: - Fixed issue where setting `offsets` to `undefined` caused the machine to throw. - Fixed issue where `onExitComplete` was not being called. ## [5.1.1] - 2025-03-17 ### Fixed - **Field**: Exported the missing `useField` hook. - **NumberInput**: `onValueChange` correctly received `valueAsNumber`. - **Slider**: Thumbs initialized correctly when `min` was set to a non-zero value. ## [5.1.0] - 2025-03-11 ### Added - Implemented support for reactive props in `use-*.ts` functions. ```tsx const accordionProps = createMemo(() => ({ multiple: true, value: value(), onValueChange: (e) => setValue(e.value), })) const accordion = useAccordion(accordionProps) ``` ### Fixed - **Checkbox**: `data-invalid` is no longer set when `invalid` is `false`. - **Combobox**: Fixed unexpected cursor movement when editing input. - **PinInput**: OTP SMS autofill now works as expected. - **RatingGroup**: Fixed incorrect focus placement on the label. - **TagsInput**: Improved caret detection to prevent unintended tag removal. - **Timer** - Fixed slowdown when switching tabs/windows. - Changed default `interval` from `250` to `1000`. ## [5.0.0] - 2025-03-06 Ark UI just got a major performance boost! 🚀 ### What’s new in v5? - **Blazing-fast performance** – Every component runs smoother and renders faster. - **Smaller bundle size** – Leaner components and adapters for a more efficient build. We made this happen by using Solid's native reactive primitives instead of external stores. In our stress tests with **10,000 components**, Ark v5 delivered **1.5x–4x** better performance across the board. ### A quick note on tests Most component updates are non-breaking, but due to this change, some tests may need adjustments. For example: ```jsx // Before it('should open by default', () => { render(() => ) expect(screen.getByRole('dialog')).toBeInTheDocument() }) // After it('should open by default', async () => { render(() => ) expect(await screen.findByRole('dialog')).toBeInTheDocument() }) ``` #### Added - **Carousel**: ⚠️ Breaking change: Added required prop `slideCount` to `Carousel.Root` component. - **Clipboard**: Added `onValueChange` and `defaultValue` props. - **ColorPicker**: Added `defaultFormat` prop. - **Combobox**: Added `defaultHighlightedValue` and `defaultInputValue` props. - **DatePicker**: Added `defaultFocusedValue` prop, `getViewProps`, and `visibleRangeText`. - **HoverCard**: Expanded interaction handlers. - **Menu**: Added `defaultHighlightedValue` prop. - **Pagination**: Added `defaultPageSize` prop. - **PinInput**: Added `count` prop for better SSR aria-label. - **Progress**: Added `locale` and `formatOptions` props. - **QrCode**: Added `pixelSize` prop. - **Select**: Added `defaultHighlightedValue` prop. - **TagsInput**: Added `defaultInputValue` prop. - **Toggle**: Reintroduced toggle machine. #### Fixed - **Accordion**: Fixed issue in Safari where clicking triggers didn't show content. - **Avatar**: Fixed `api.setSrc` not working. - **Carousel**: Fixed pagination sync and initial page issues. - **File Upload**: Fixed drag-and-drop when `directory: true`. - **Menu**: Fixed context menu positioning not updating on right-click. - **Number Input**: Fixed `value` prop not being consumed. - **Pin Input**: Fixed focus warnings and editing issues. - **Progress**: Allowed more precise (decimal) values. - **Radio Group, Switch**: Improved focus behavior in Safari. - **Select**: Fixed regression where `multiple: true` didn't work. - **Steps**: Ensured ARIA attributes use valid values and wrapped ` - ` elements correctly within `
- `.
- **Textarea**: Fixed `ResizeObserver` warning.
- **Timer**: Fixed stopping issue when switching tabs; resolved issue where `action` prop was passed to `ActionTrigger`.
- **Toast**: Fixed keyboard navigation skipping close button.
- **Toggle Group**: Fixed `data-focus` not being removed on blur.
# Changelog (VUE)
## [Unreleased]
## [5.2.0] - 2025-03-22
### Added
- **[NEW] DownloadTrigger**: Added Component for downloading a blob or file, whether retrieved synchronously or
asynchronously.
```tsx
import { DownloadTrigger } from '@ark-ui/react/download-trigger'
export const DownloadImage = () => {
async function fetchImage() {
const response = await fetch('https://picsum.photos/200/300')
return response.blob()
}
return (
Download Image ) } ``` ### Changed - **NumberInput**: Set the default step to `0.01` when `formatOptions.style` was set to `percent`. - **[Breaking] Splitter**: Redesigned splitter machine to support more use cases and improve DX. Check out the [Splitter](https://ark-ui.com/react/docs/components/splitter) documentation for more details. ### Fixed - **Toast**: Fixed issue where setting `offsets` to `undefined` caused the machine to throw. - **Select**: Fixed issue where select `valueAsString` lost reactivity. ## [5.1.0] - 2025-03-17 ### Added - Added support for a cleanup function in `ref`. ### Fixed - **Field**: Exported the missing `useField` hook. - **NumberInput**: `onValueChange` correctly received `valueAsNumber`. - **Slider**: Thumbs initialized correctly when `min` was set to a non-zero value. ## [5.0.1] - 2025-03-11 ### Fixed - Effects now flush synchronously instead of using a microtask. - **Checkbox**: `data-invalid` is no longer set when `invalid` is `false`. - **Combobox**: Fixed unexpected cursor movement when editing input. - **PinInput**: OTP SMS autofill now works as expected. - **RatingGroup**: Fixed incorrect focus placement on the label. - **TagsInput**: Improved caret detection to prevent unintended tag removal. - **Timer** - Fixed slowdown when switching tabs/windows. - Changed default `interval` from `250` to `1000`. ## [5.0.0] - 2025-03-06 Ark UI just got a major performance boost! 🚀 ### What’s new in v5? - **Blazing-fast performance** – Every component runs smoother and renders faster. - **Smaller bundle size** – Leaner components and adapters for a more efficient build. We made this happen by using React’s native reactive primitives instead of external stores. In our stress tests with **10,000 components**, Ark v5 delivered **1.5x–4x** better performance across the board.  ### A quick note on tests Most component updates are non-breaking, but due to this change, some tests may need adjustments. For example: ```jsx // Before it('should open by default', () => { render() expect(screen.getByRole('dialog')).toBeInTheDocument() }) // After it('should open by default', async () => { render( ) expect(await screen.findByRole('dialog')).toBeInTheDocument() }) ``` #### Added - **Carousel**: ⚠️ Breaking change: Added required prop `slideCount` to `Carousel.Root` component. - **Clipboard**: Added `onValueChange` and `defaultValue` props. - **ColorPicker**: Added `defaultFormat` prop. - **Combobox**: Added `defaultHighlightedValue` and `defaultInputValue` props. - **DatePicker**: Added `defaultFocusedValue` prop, `getViewProps`, and `visibleRangeText`. - **HoverCard**: Expanded interaction handlers. - **Menu**: Added `defaultHighlightedValue` prop. - **Pagination**: Added `defaultPageSize` prop. - **PinInput**: Added `count` prop for better SSR aria-label. - **Progress**: Added `locale` and `formatOptions` props. - **QrCode**: Added `pixelSize` prop. - **Select**: Added `defaultHighlightedValue` prop. - **TagsInput**: Added `defaultInputValue` prop. - **Toggle**: Reintroduced toggle machine. #### Fixed - **Accordion**: Fixed issue in Safari where clicking triggers didn't show content. - **Avatar**: Fixed `api.setSrc` not working. - **Carousel**: Fixed pagination sync and initial page issues. - **File Upload**: Fixed drag-and-drop when `directory: true`. - **Menu**: Fixed context menu positioning not updating on right-click. - **Number Input**: Fixed `value` prop not being consumed. - **Pin Input**: Fixed focus warnings and editing issues. - **Progress**: Allowed more precise (decimal) values. - **Radio Group, Switch**: Improved focus behavior in Safari. - **Select**: Fixed regression where `multiple: true` didn't work. - **Steps**: Ensured ARIA attributes use valid values and wrapped ` - ` elements correctly within `
- `.
- **Textarea**: Fixed `ResizeObserver` warning.
- **Timer**: Fixed stopping issue when switching tabs; resolved issue where `action` prop was passed to `ActionTrigger`.
- **Toast**: Fixed keyboard navigation skipping close button.
- **Toggle Group**: Fixed `data-focus` not being removed on blur.
# Changelog (SOLID)
## [Unreleased]
## [5.2.0] - 2025-03-22
### Added
- **[NEW] DownloadTrigger**: Added Component for downloading a blob or file, whether retrieved synchronously or
asynchronously.
```tsx
import { DownloadTrigger } from '@ark-ui/react/download-trigger'
export const DownloadImage = () => {
async function fetchImage() {
const response = await fetch('https://picsum.photos/200/300')
return response.blob()
}
return (