Skip to content Skip to navigation Skip to topbar

Menu

Version 15.0.2Github StorybookPeer review pending

A Menu is a button that presents a list of items that users can choose to trigger an action.

Installation

yarn add @twilio-paste/menu - or - yarn add @twilio-paste/core

Usage

import {Menu, MenuButton, MenuItem, MenuSeparator, useMenuState} from '@twilio-paste/core/menu';
import {ChevronDownIcon} from '@twilio-paste/icons/esm/ChevronDownIcon';

const PreferencesMenu = () => {
  const menu = useMenuState();
  return (
    <>
      <MenuButton {...menu} variant="primary">
        Preferences <ChevronDownIcon decorative />
      </MenuButton>
      <Menu {...menu} aria-label="Preferences">
        <MenuItem {...menu}>Settings</MenuItem>
        <MenuItem {...menu} disabled>
          Extensions
        </MenuItem>
        <MenuSeparator {...menu} />
        <MenuItem {...menu}>Keyboard shortcuts</MenuItem>
      </Menu>
    </>
  );
};

Props

MenuInitialState

Inherited props

Paste components will often extend native HTML elements and as a result will inherit or extend their available properties. Below is a list of the props this component has inherited and are also available to use.

animated

If true, animating will be set to true when visible is updated. It'll wait for stopAnimation to be called or a CSS transition ends. If animated is set to a number, stopAnimation will be called only after the same number of milliseconds have passed.

Type: number | boolean

baseId

ID that will serve as a base for all the items IDs.

Type: string

currentId

The current focused item id.

undefined will automatically focus the first enabled composite item.
null will focus the base composite element and users will be able to navigate out of it using arrow keys.
If currentId is initially set to null, the base composite element itself will have focus and users will be able to navigate to it using arrow keys.

Type: string
Default: undefined

gutter

Offset between the reference and the popover on the main axis. Should not be combined with unstable_offset.

Type: number

loop

On one-dimensional composites:

true loops from the last item to the first item and vice-versa.
horizontal loops only if orientation is horizontal or not set.
vertical loops only if orientation is vertical or not set.
If currentId is initially set to null, the composite element will be focused in between the last and first items.

On two-dimensional composites:

true loops from the last row/column item to the first item in the same row/column and vice-versa. If it's the last item in the last row, it moves to the first item in the first row and vice-versa.
horizontal loops only from the last row item to the first item in the same row.
vertical loops only from the last column item to the first item in the column row.
If currentId is initially set to null, vertical loop will have no effect as moving down from the last row or up from the first row will focus the composite element.
If wrap matches the value of loop, it'll wrap between the last item in the last row or column and the first item in the first row or column and vice-versa.

Type: boolean | Orientation

modal

Toggles Dialog's modal state.

Non-modal: preventBodyScroll doesn't work and focus is free.
Modal: preventBodyScroll is automatically enabled, focus is trapped within the dialog and the dialog is rendered within a Portal by default.

Type: boolean

orientation

Defines the orientation of the composite widget. If the composite has a single row or column (one-dimensional), the orientation value determines which arrow keys can be used to move focus:

undefined: all arrow keys work.
horizontal: only left and right arrow keys work.
vertical: only up and down arrow keys work.

It doesn't have any effect on two-dimensional composites.

Type: Orientation
Default: undefined

placement

Actual placement.

Type: Placement

rtl

Determines how next and previous functions will behave. If rtl is set to true, they will be inverted. This only affects the composite widget behavior. You still need to set dir="rtl" on HTML/CSS.

Type: boolean

shift

Has effect only on two-dimensional composites. If enabled, moving up or down when there's no next item or the next item is disabled will shift to the item right before it.

Type: boolean

unstable_fixed

Whether or not the popover should have position set to fixed.

Type: boolean

unstable_flip

Flip the popover's placement when it starts to overlap its reference element.

Type: boolean

unstable_includesBaseElement

Type: boolean

unstable_offset

Offset between the reference and the popover: [main axis, alt axis]. Should not be combined with gutter.

Type: [string | number, string | number]

unstable_preventOverflow

Prevents popover from being positioned outside the boundary.

Type: boolean

unstable_values

Stores the values of radios and checkboxes within the menu.

Type: Record<string, any>

unstable_virtual

If enabled, the composite element will act as an aria-activedescendant container instead of roving tabindex. DOM focus will remain on the composite while its items receive virtual focus.

Type: boolean

visible

Whether it's visible or not.

Type: boolean

wrap

Has effect only on two-dimensional composites. If enabled, moving to the next item from the last one in a row or column will focus the first item in the next row or column and vice-versa.

true wraps between rows and columns.
horizontal wraps only between rows.
vertical wraps only between columns.
If loop matches the value of wrap, it'll wrap between the last item in the last row or column and the first item in the first row or column and vice-versa.

Type: boolean | Orientation

MenuStateReturn

animated RequiredRequired

If true, animating will be set to true when visible is updated. It'll wait for stopAnimation to be called or a CSS transition ends. If animated is set to a number, stopAnimation will be called only after the same number of milliseconds have passed.

Type: number | boolean

animating RequiredRequired

Whether it's animating or not.

Type: boolean

baseId RequiredRequired

ID that will serve as a base for all the items IDs.

Type: string

down RequiredRequired

Moves focus to the item below.

Type: (unstable_allTheWay?: boolean | undefined) => void

first RequiredRequired

Moves focus to the first item.

Type: () => void

groups RequiredRequired

Lists all the composite groups with their id and DOM ref. This state is automatically updated when registerGroup and unregisterGroup are called.

Type: Group[]

hide RequiredRequired

Changes the visible state to false

Type: () => void

items RequiredRequired

Lists all the composite items with their id, DOM ref, disabled state and groupId if any. This state is automatically updated when registerItem and unregisterItem are called.

Type: Item[]

last RequiredRequired

Moves focus to the last item.

Type: () => void

loop RequiredRequired

On one-dimensional composites:

true loops from the last item to the first item and vice-versa.
horizontal loops only if orientation is horizontal or not set.
vertical loops only if orientation is vertical or not set.
If currentId is initially set to null, the composite element will be focused in between the last and first items.

On two-dimensional composites:

true loops from the last row/column item to the first item in the same row/column and vice-versa. If it's the last item in the last row, it moves to the first item in the first row and vice-versa.
horizontal loops only from the last row item to the first item in the same row.
vertical loops only from the last column item to the first item in the column row.
If currentId is initially set to null, vertical loop will have no effect as moving down from the last row or up from the first row will focus the composite element.
If wrap matches the value of loop, it'll wrap between the last item in the last row or column and the first item in the first row or column and vice-versa.

Type: boolean | Orientation

modal RequiredRequired

Toggles Dialog's modal state.

Non-modal: preventBodyScroll doesn't work and focus is free.
Modal: preventBodyScroll is automatically enabled, focus is trapped within the dialog and the dialog is rendered within a Portal by default.

Type: boolean

move RequiredRequired

Moves focus to a given item ID.

Type: (id: string | null) => void

next RequiredRequired

Moves focus to the next item.

Type: (unstable_allTheWay?: boolean | undefined) => void

place RequiredRequired

Change the placement state.

Type: Dispatch<SetStateAction<Placement>>

placement RequiredRequired

Actual placement.

Type: Placement

previous RequiredRequired

Moves focus to the previous item.

Type: (unstable_allTheWay?: boolean | undefined) => void

registerGroup RequiredRequired

Registers a composite group.

Type: (group: Group) => void

registerItem RequiredRequired

Registers a composite item.

Type: (item: Item) => void

reset RequiredRequired

Resets to initial state.

Type: () => void

rtl RequiredRequired

Determines how next and previous functions will behave. If rtl is set to true, they will be inverted. This only affects the composite widget behavior. You still need to set dir="rtl" on HTML/CSS.

Type: boolean

setAnimated RequiredRequired

Sets animated.

Type: Dispatch<SetStateAction<number | boolean>>

setBaseId RequiredRequired

Sets baseId.

Type: Dispatch<SetStateAction<string>>

setCurrentId RequiredRequired

Sets currentId. This is different from composite.move as this only updates the currentId state without moving focus. When the composite widget gets focused by the user, the item referred by the currentId state will get focus.

Type: Dispatch<SetStateAction<string | null | undefined>>

setLoop RequiredRequired

Sets loop.

Type: Dispatch<SetStateAction<boolean | Orientation>>

setModal RequiredRequired

Sets modal.

Type: Dispatch<SetStateAction<boolean>>

setOrientation RequiredRequired

Sets orientation.

Type: Dispatch<SetStateAction<Orientation | undefined>>

setRTL RequiredRequired

Sets rtl.

Type: Dispatch<SetStateAction<boolean>>

setShift RequiredRequired

Sets shift.

Type: Dispatch<SetStateAction<boolean>>

setVisible RequiredRequired

Sets visible.

Type: Dispatch<SetStateAction<boolean>>

setWrap RequiredRequired

Sets wrap.

Type: Dispatch<SetStateAction<boolean | Orientation>>

shift RequiredRequired

Has effect only on two-dimensional composites. If enabled, moving up or down when there's no next item or the next item is disabled will shift to the item right before it.

Type: boolean

show RequiredRequired

Changes the visible state to true

Type: () => void

sort RequiredRequired

Sorts the composite.items based on the items position in the DOM. This is especially useful after modifying the composite items order in the DOM. Most of the time, though, you don't need to manually call this function as the re-ordering happens automatically.

Type: () => void

stopAnimation RequiredRequired

Stops animation. It's called automatically if there's a CSS transition.

Type: () => void

toggle RequiredRequired

Toggles the visible state

Type: () => void

unregisterGroup RequiredRequired

Unregisters a composite group.

Type: (id: string) => void

unregisterItem RequiredRequired

Unregisters a composite item.

Type: (id: string) => void

unstable_arrowRef RequiredRequired

The arrow element.

Type: RefObject<HTMLElement | null>

unstable_arrowStyles RequiredRequired

Arrow styles.

Type: CSSProperties

unstable_disclosureRef RequiredRequired

Type: MutableRefObject<HTMLElement | null>

unstable_hasActiveWidget RequiredRequired

Type: boolean

unstable_idCountRef RequiredRequired

Type: MutableRefObject<number>

unstable_includesBaseElement RequiredRequired

Type: boolean

unstable_moves RequiredRequired

Stores the number of moves that have been performed by calling move, next, previous, up, down, first or last.

Type: number
Default: 0

unstable_originalPlacement RequiredRequired

placement passed to the hook.

Type: Placement

unstable_popoverRef RequiredRequired

The popover element.

Type: RefObject<HTMLElement | null>

unstable_popoverStyles RequiredRequired

Popover styles.

Type: CSSProperties

unstable_referenceRef RequiredRequired

The reference element.

Type: RefObject<HTMLElement | null>

unstable_setHasActiveWidget RequiredRequired

Sets hasActiveWidget.

Type: Dispatch<SetStateAction<boolean>>

unstable_setIncludesBaseElement RequiredRequired

Sets includesBaseElement.

Type: Dispatch<SetStateAction<boolean>>

unstable_setValue RequiredRequired

Updates checkboxes and radios values within the menu.

Type: (name: string, value?: any) => void

unstable_setVirtual RequiredRequired

Sets virtual.

Type: Dispatch<SetStateAction<boolean>>

unstable_update RequiredRequired

Type: () => boolean

unstable_values RequiredRequired

Stores the values of radios and checkboxes within the menu.

Type: Record<string, any>

unstable_virtual RequiredRequired

If enabled, the composite element will act as an aria-activedescendant container instead of roving tabindex. DOM focus will remain on the composite while its items receive virtual focus.

Type: boolean

up RequiredRequired

Moves focus to the item above.

Type: (unstable_allTheWay?: boolean | undefined) => void

visible RequiredRequired

Whether it's visible or not.

Type: boolean

wrap RequiredRequired

Has effect only on two-dimensional composites. If enabled, moving to the next item from the last one in a row or column will focus the first item in the next row or column and vice-versa.

true wraps between rows and columns.
horizontal wraps only between rows.
vertical wraps only between columns.
If loop matches the value of wrap, it'll wrap between the last item in the last row or column and the first item in the first row or column and vice-versa.

Type: boolean | Orientation

Inherited props

MenuButton

baseId RequiredRequired

ID that will serve as a base for all the items IDs.

Type: string

first RequiredRequired

Moves focus to the first item.

Type: () => void

last RequiredRequired

Moves focus to the last item.

Type: () => void

placement RequiredRequired

Actual placement.

Type: Placement

show RequiredRequired

Changes the visible state to true

Type: () => void

toggle RequiredRequired

Toggles the visible state

Type: () => void

variant RequiredRequired

The different appearance variants for a button. Avoid using link variants when possible.

Type: | "reset" | "link" | "primary" | "primary_icon" | "secondary" | "secondary_icon" | "destructive" | "destructive_icon" | "destructive_link" | "destructive_secondary" | "inverse_link" | "inverse"
Default: 'primary'

as

The HTML tag to replace the default <button> tag.

Type: keyof IntrinsicElements
Default: 'button'

element

Overrides the default element name to apply unique styles with the Customization Provider.

Type: string
Default: 'BUTTON'

fullWidth

Sets the Button width to 100% of the parent container.

Type: boolean

href

A URL to route to. Must use as="a" for this prop to work.

Type: string
Default: null

i18nExternalLinkLabel

Title for showExternal icon

Type: string
Default: '(link takes you to an external page)'

loading

Prevent actions and show a loading spinner

Type: boolean

pressed

Sets the aria-pressed attribute. Must be used with 'secondary' or 'secondary_icon' variants.

Type: boolean

size

Type: ButtonSizes
Default: 'default'

target

Type: string

Inherited props

Paste components will often extend native HTML elements and as a result will inherit or extend their available properties. Below is a list of the props this component has inherited and are also available to use.

about

Type: string

accessKey

Type: string

aria-activedescendant

Identifies the currently active element when DOM focus is on a composite widget, textbox, group, or application.

Type: string

aria-atomic

Indicates whether assistive technologies will present all, or only parts of, the changed region based on the change notifications defined by the aria-relevant attribute.

Type: Booleanish

aria-autocomplete

Indicates whether inputting text could trigger display of one or more predictions of the user's intended value for an input and specifies how predictions would be presented if they are made.

Type: "none" | "list" | "inline" | "both"

aria-braillelabel

Defines a string value that labels the current element, which is intended to be converted into Braille.

Type: string

aria-brailleroledescription

Defines a human-readable, author-localized abbreviated description for the role of an element, which is intended to be converted into Braille.

Type: string

aria-busy

Type: Booleanish

aria-checked

Indicates the current "checked" state of checkboxes, radio buttons, and other widgets.

Type: boolean | "true" | "false" | "mixed"

aria-colcount

Defines the total number of columns in a table, grid, or treegrid.

Type: number

aria-colindex

Defines an element's column index or position with respect to the total number of columns within a table, grid, or treegrid.

Type: number

aria-colindextext

Defines a human readable text alternative of aria-colindex.

Type: string

aria-colspan

Defines the number of columns spanned by a cell or gridcell within a table, grid, or treegrid.

Type: number

aria-controls

Identifies the element (or elements) whose contents or presence are controlled by the current element.

Type: string

aria-current

Indicates the element that represents the current item within a container or set of related elements.

Type: | boolean | "true" | "false" | "page" | "step" | "location" | "date" | "time"

aria-describedby

Identifies the element (or elements) that describes the object.

Type: string

aria-description

Defines a string value that describes or annotates the current element.

Type: string

aria-details

Identifies the element that provides a detailed, extended description for the object.

Type: string

aria-disabled

Indicates that the element is perceivable but disabled, so it is not editable or otherwise operable.

Type: Booleanish

aria-dropeffect

Indicates what functions can be performed when a dragged object is released on the drop target.

Type: "move" | "none" | "link" | "copy" | "execute" | "popup"

aria-errormessage

Identifies the element that provides an error message for the object.

Type: string

aria-expanded

Indicates whether the element, or another grouping element it controls, is currently expanded or collapsed.

Type: Booleanish

aria-flowto

Identifies the next element (or elements) in an alternate reading order of content which, at the user's discretion, allows assistive technology to override the general default of reading in document source order.

Type: string

aria-grabbed

Indicates an element's "grabbed" state in a drag-and-drop operation.

Type: Booleanish

aria-haspopup

Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by an element.

Type: | boolean | "true" | "false" | "dialog" | "grid" | "listbox" | "menu" | "tree"

aria-hidden

Indicates whether the element is exposed to an accessibility API.

Type: Booleanish

aria-invalid

Indicates the entered value does not conform to the format expected by the application.

Type: boolean | "true" | "false" | "grammar" | "spelling"

aria-keyshortcuts

Indicates keyboard shortcuts that an author has implemented to activate or give focus to an element.

Type: string

aria-label

Defines a string value that labels the current element.

Type: string

aria-labelledby

Identifies the element (or elements) that labels the current element.

Type: string

aria-level

Defines the hierarchical level of an element within a structure.

Type: number

aria-live

Indicates that an element will be updated, and describes the types of updates the user agents, assistive technologies, and user can expect from the live region.

Type: "off" | "assertive" | "polite"

aria-modal

Indicates whether an element is modal when displayed.

Type: Booleanish

aria-multiline

Indicates whether a text box accepts multiple lines of input or only a single line.

Type: Booleanish

aria-multiselectable

Indicates that the user may select more than one item from the current selectable descendants.

Type: Booleanish

aria-orientation

Indicates whether the element's orientation is horizontal, vertical, or unknown/ambiguous.

Type: "horizontal" | "vertical"

aria-owns

Identifies an element (or elements) in order to define a visual, functional, or contextual parent/child relationship between DOM elements where the DOM hierarchy cannot be used to represent the relationship.

Type: string

aria-placeholder

Defines a short hint (a word or short phrase) intended to aid the user with data entry when the control has no value. A hint could be a sample value or a brief description of the expected format.

Type: string

aria-posinset

Defines an element's number or position in the current set of listitems or treeitems. Not required if all elements in the set are present in the DOM.

Type: number

aria-pressed

Indicates the current "pressed" state of toggle buttons.

Type: boolean | "true" | "false" | "mixed"

aria-readonly

Indicates that the element is not editable, but is otherwise operable.

Type: Booleanish

aria-relevant

Indicates what notifications the user agent will trigger when the accessibility tree within a live region is modified.

Type: | "text" | "additions" | "additions removals" | "additions text" | "all" | "removals" | "removals additions" | "removals text" | "text additions" | "text removals"

aria-required

Indicates that user input is required on the element before a form may be submitted.

Type: Booleanish

aria-roledescription

Defines a human-readable, author-localized description for the role of an element.

Type: string

aria-rowcount

Defines the total number of rows in a table, grid, or treegrid.

Type: number

aria-rowindex

Defines an element's row index or position with respect to the total number of rows within a table, grid, or treegrid.

Type: number

aria-rowindextext

Defines a human readable text alternative of aria-rowindex.

Type: string

aria-rowspan

Defines the number of rows spanned by a cell or gridcell within a table, grid, or treegrid.

Type: number

aria-selected

Indicates the current "selected" state of various widgets.

Type: Booleanish

aria-setsize

Defines the number of items in the current set of listitems or treeitems. Not required if all elements in the set are present in the DOM.

Type: number

aria-sort

Indicates if items in a table or grid are sorted in ascending or descending order.

Type: "none" | "ascending" | "descending" | "other"

aria-valuemax

Defines the maximum allowed value for a range widget.

Type: number

aria-valuemin

Defines the minimum allowed value for a range widget.

Type: number

aria-valuenow

Defines the current value for a range widget.

Type: number

aria-valuetext

Defines the human readable text alternative of aria-valuenow for a range widget.

Type: string

autoCapitalize

Type: | (string & {}) | "off" | "none" | "on" | "sentences" | "words" | "characters"

autoCorrect

Type: string

autoFocus

Type: boolean

autoSave

Type: string

className

Type: string

color

Responsive style prop of Text Color tokens for the CSS color property

Type: | string | (string & (TextColorOptions | null)[]) | (string & { [x: string]: TextColorOptions | undefined [x: number]: TextColorOptions | undefined })

content

Style prop for the CSS content property

Type: string

contentEditable

Type: Booleanish | "inherit" | "plaintext-only"

contextMenu

Type: string

currentId

The current focused item id.

undefined will automatically focus the first enabled composite item.
null will focus the base composite element and users will be able to navigate out of it using arrow keys.
If currentId is initially set to null, the base composite element itself will have focus and users will be able to navigate to it using arrow keys.

Type: string
Default: undefined

dangerouslySetInnerHTML

Type: { __html: string | TrustedHTML }

datatype

Type: string

defaultChecked

Type: boolean

defaultValue

Type: string | number | readonly string[]

dir

Type: string

disabled

Same as the HTML attribute.

Prevent actions from firing on this Button

Type: boolean

draggable

Type: Booleanish

enterKeyHint

Type: | "next" | "previous" | "enter" | "done" | "go" | "search" | "send"

focusable

When an element is disabled, it may still be focusable. It works similarly to readOnly on form elements. In this case, only aria-disabled will be set.

Type: boolean

form

Type: string

formAction

Type: string | ((formData: FormData) => void | Promise<void>)

formEncType

Type: string

formMethod

Type: string

formNoValidate

Type: boolean

formTarget

Type: string

hidden

Type: boolean

hide

Changes the visible state to false

Type: () => void

id

Type: string

inert

Type: boolean

inlist

Type: any

inputMode

Hints at the type of data that might be entered by the user while editing the element or its contents

Type: | "none" | "search" | "text" | "tel" | "url" | "email" | "numeric" | "decimal"

is

Specify that a standard HTML element should behave like a defined custom built-in element

Type: string

itemID

Type: string

itemProp

Type: string

itemRef

Type: string

itemScope

Type: boolean

itemType

Type: string

key

Type: Key

lang

Type: string

move

Moves focus to a given item ID.

Type: (id: string | null) => void

name

Type: string

nonce

Type: string

onAbort

Type: ReactEventHandler<any> & ReactEventHandler<HTMLButtonElement>

onAbortCapture

Type: ReactEventHandler<any> & ReactEventHandler<HTMLButtonElement>

onAnimationEnd

Type: AnimationEventHandler<any> & AnimationEventHandler<HTMLButtonElement>

onAnimationEndCapture

Type: AnimationEventHandler<any> & AnimationEventHandler<HTMLButtonElement>

onAnimationIteration

Type: AnimationEventHandler<any> & AnimationEventHandler<HTMLButtonElement>

onAnimationIterationCapture

Type: AnimationEventHandler<any> & AnimationEventHandler<HTMLButtonElement>

onAnimationStart

Type: AnimationEventHandler<any> & AnimationEventHandler<HTMLButtonElement>

onAnimationStartCapture

Type: AnimationEventHandler<any> & AnimationEventHandler<HTMLButtonElement>

onAuxClick

Type: MouseEventHandler<any> & MouseEventHandler<HTMLButtonElement>

onAuxClickCapture

Type: MouseEventHandler<any> & MouseEventHandler<HTMLButtonElement>

onBeforeInput

Type: FormEventHandler<any> & FormEventHandler<HTMLButtonElement>

onBeforeInputCapture

Type: FormEventHandler<any> & FormEventHandler<HTMLButtonElement>

onBeforeToggle

Type: ToggleEventHandler<any> & ToggleEventHandler<HTMLButtonElement>

onBlur

Type: FocusEventHandler<any> & FocusEventHandler<HTMLButtonElement>

onBlurCapture

Type: FocusEventHandler<any> & FocusEventHandler<HTMLButtonElement>

onCanPlay

Type: ReactEventHandler<any> & ReactEventHandler<HTMLButtonElement>

onCanPlayCapture

Type: ReactEventHandler<any> & ReactEventHandler<HTMLButtonElement>

onCanPlayThrough

Type: ReactEventHandler<any> & ReactEventHandler<HTMLButtonElement>

onCanPlayThroughCapture

Type: ReactEventHandler<any> & ReactEventHandler<HTMLButtonElement>

onChange

Type: FormEventHandler<any> & FormEventHandler<HTMLButtonElement>

onChangeCapture

Type: FormEventHandler<any> & FormEventHandler<HTMLButtonElement>

onClick

Type: MouseEventHandler<any> & MouseEventHandler<HTMLButtonElement>

onClickCapture

Type: MouseEventHandler<any> & MouseEventHandler<HTMLButtonElement>

onCompositionEnd

Type: CompositionEventHandler<any> & CompositionEventHandler<HTMLButtonElement>

onCompositionEndCapture

Type: CompositionEventHandler<any> & CompositionEventHandler<HTMLButtonElement>

onCompositionStart

Type: CompositionEventHandler<any> & CompositionEventHandler<HTMLButtonElement>

onCompositionStartCapture

Type: CompositionEventHandler<any> & CompositionEventHandler<HTMLButtonElement>

onCompositionUpdate

Type: CompositionEventHandler<any> & CompositionEventHandler<HTMLButtonElement>

onCompositionUpdateCapture

Type: CompositionEventHandler<any> & CompositionEventHandler<HTMLButtonElement>

onContextMenu

Type: MouseEventHandler<any> & MouseEventHandler<HTMLButtonElement>

onContextMenuCapture

Type: MouseEventHandler<any> & MouseEventHandler<HTMLButtonElement>

onCopy

Type: ClipboardEventHandler<any> & ClipboardEventHandler<HTMLButtonElement>

onCopyCapture

Type: ClipboardEventHandler<any> & ClipboardEventHandler<HTMLButtonElement>

onCut

Type: ClipboardEventHandler<any> & ClipboardEventHandler<HTMLButtonElement>

onCutCapture

Type: ClipboardEventHandler<any> & ClipboardEventHandler<HTMLButtonElement>

onDoubleClick

Type: MouseEventHandler<any> & MouseEventHandler<HTMLButtonElement>

onDoubleClickCapture

Type: MouseEventHandler<any> & MouseEventHandler<HTMLButtonElement>

onDrag

Type: DragEventHandler<any> & DragEventHandler<HTMLButtonElement>

onDragCapture

Type: DragEventHandler<any> & DragEventHandler<HTMLButtonElement>

onDragEnd

Type: DragEventHandler<any> & DragEventHandler<HTMLButtonElement>

onDragEndCapture

Type: DragEventHandler<any> & DragEventHandler<HTMLButtonElement>

onDragEnter

Type: DragEventHandler<any> & DragEventHandler<HTMLButtonElement>

onDragEnterCapture

Type: DragEventHandler<any> & DragEventHandler<HTMLButtonElement>

onDragExit

Type: DragEventHandler<any> & DragEventHandler<HTMLButtonElement>

onDragExitCapture

Type: DragEventHandler<any> & DragEventHandler<HTMLButtonElement>

onDragLeave

Type: DragEventHandler<any> & DragEventHandler<HTMLButtonElement>

onDragLeaveCapture

Type: DragEventHandler<any> & DragEventHandler<HTMLButtonElement>

onDragOver

Type: DragEventHandler<any> & DragEventHandler<HTMLButtonElement>

onDragOverCapture

Type: DragEventHandler<any> & DragEventHandler<HTMLButtonElement>

onDragStart

Type: DragEventHandler<any> & DragEventHandler<HTMLButtonElement>

onDragStartCapture

Type: DragEventHandler<any> & DragEventHandler<HTMLButtonElement>

onDrop

Type: DragEventHandler<any> & DragEventHandler<HTMLButtonElement>

onDropCapture

Type: DragEventHandler<any> & DragEventHandler<HTMLButtonElement>

onDurationChange

Type: ReactEventHandler<any> & ReactEventHandler<HTMLButtonElement>

onDurationChangeCapture

Type: ReactEventHandler<any> & ReactEventHandler<HTMLButtonElement>

onEmptied

Type: ReactEventHandler<any> & ReactEventHandler<HTMLButtonElement>

onEmptiedCapture

Type: ReactEventHandler<any> & ReactEventHandler<HTMLButtonElement>

onEncrypted

Type: ReactEventHandler<any> & ReactEventHandler<HTMLButtonElement>

onEncryptedCapture

Type: ReactEventHandler<any> & ReactEventHandler<HTMLButtonElement>

onEnded

Type: ReactEventHandler<any> & ReactEventHandler<HTMLButtonElement>

onEndedCapture

Type: ReactEventHandler<any> & ReactEventHandler<HTMLButtonElement>

onError

Type: ReactEventHandler<any> & ReactEventHandler<HTMLButtonElement>

onErrorCapture

Type: ReactEventHandler<any> & ReactEventHandler<HTMLButtonElement>

onFocus

Type: FocusEventHandler<any> & FocusEventHandler<HTMLButtonElement>

onFocusCapture

Type: FocusEventHandler<any> & FocusEventHandler<HTMLButtonElement>

onGotPointerCapture

Type: PointerEventHandler<any> & PointerEventHandler<HTMLButtonElement>

onGotPointerCaptureCapture

Type: PointerEventHandler<any> & PointerEventHandler<HTMLButtonElement>

onInput

Type: FormEventHandler<any> & FormEventHandler<HTMLButtonElement>

onInputCapture

Type: FormEventHandler<any> & FormEventHandler<HTMLButtonElement>

onInvalid

Type: FormEventHandler<any> & FormEventHandler<HTMLButtonElement>

onInvalidCapture

Type: FormEventHandler<any> & FormEventHandler<HTMLButtonElement>

onKeyDown

Type: KeyboardEventHandler<any> & KeyboardEventHandler<HTMLButtonElement>

onKeyDownCapture

Type: KeyboardEventHandler<any> & KeyboardEventHandler<HTMLButtonElement>

onKeyPress

Type: KeyboardEventHandler<any> & KeyboardEventHandler<HTMLButtonElement>

onKeyPressCapture

Type: KeyboardEventHandler<any> & KeyboardEventHandler<HTMLButtonElement>

onKeyUp

Type: KeyboardEventHandler<any> & KeyboardEventHandler<HTMLButtonElement>

onKeyUpCapture

Type: KeyboardEventHandler<any> & KeyboardEventHandler<HTMLButtonElement>

onLoad

Type: ReactEventHandler<any> & ReactEventHandler<HTMLButtonElement>

onLoadCapture

Type: ReactEventHandler<any> & ReactEventHandler<HTMLButtonElement>

onLoadedData

Type: ReactEventHandler<any> & ReactEventHandler<HTMLButtonElement>

onLoadedDataCapture

Type: ReactEventHandler<any> & ReactEventHandler<HTMLButtonElement>

onLoadedMetadata

Type: ReactEventHandler<any> & ReactEventHandler<HTMLButtonElement>

onLoadedMetadataCapture

Type: ReactEventHandler<any> & ReactEventHandler<HTMLButtonElement>

onLoadStart

Type: ReactEventHandler<any> & ReactEventHandler<HTMLButtonElement>

onLoadStartCapture

Type: ReactEventHandler<any> & ReactEventHandler<HTMLButtonElement>

onLostPointerCapture

Type: PointerEventHandler<any> & PointerEventHandler<HTMLButtonElement>

onLostPointerCaptureCapture

Type: PointerEventHandler<any> & PointerEventHandler<HTMLButtonElement>

onMouseDown

Type: MouseEventHandler<any> & MouseEventHandler<HTMLButtonElement>

onMouseDownCapture

Type: MouseEventHandler<any> & MouseEventHandler<HTMLButtonElement>

onMouseEnter

Type: MouseEventHandler<any> & MouseEventHandler<HTMLButtonElement>

onMouseLeave

Type: MouseEventHandler<any> & MouseEventHandler<HTMLButtonElement>

onMouseMove

Type: MouseEventHandler<any> & MouseEventHandler<HTMLButtonElement>

onMouseMoveCapture

Type: MouseEventHandler<any> & MouseEventHandler<HTMLButtonElement>

onMouseOut

Type: MouseEventHandler<any> & MouseEventHandler<HTMLButtonElement>

onMouseOutCapture

Type: MouseEventHandler<any> & MouseEventHandler<HTMLButtonElement>

onMouseOver

Type: MouseEventHandler<any> & MouseEventHandler<HTMLButtonElement>

onMouseOverCapture

Type: MouseEventHandler<any> & MouseEventHandler<HTMLButtonElement>

onMouseUp

Type: MouseEventHandler<any> & MouseEventHandler<HTMLButtonElement>

onMouseUpCapture

Type: MouseEventHandler<any> & MouseEventHandler<HTMLButtonElement>

onPaste

Type: ClipboardEventHandler<any> & ClipboardEventHandler<HTMLButtonElement>

onPasteCapture

Type: ClipboardEventHandler<any> & ClipboardEventHandler<HTMLButtonElement>

onPause

Type: ReactEventHandler<any> & ReactEventHandler<HTMLButtonElement>

onPauseCapture

Type: ReactEventHandler<any> & ReactEventHandler<HTMLButtonElement>

onPlay

Type: ReactEventHandler<any> & ReactEventHandler<HTMLButtonElement>

onPlayCapture

Type: ReactEventHandler<any> & ReactEventHandler<HTMLButtonElement>

onPlaying

Type: ReactEventHandler<any> & ReactEventHandler<HTMLButtonElement>

onPlayingCapture

Type: ReactEventHandler<any> & ReactEventHandler<HTMLButtonElement>

onPointerCancel

Type: PointerEventHandler<any> & PointerEventHandler<HTMLButtonElement>

onPointerCancelCapture

Type: PointerEventHandler<any> & PointerEventHandler<HTMLButtonElement>

onPointerDown

Type: PointerEventHandler<any> & PointerEventHandler<HTMLButtonElement>

onPointerDownCapture

Type: PointerEventHandler<any> & PointerEventHandler<HTMLButtonElement>

onPointerEnter

Type: PointerEventHandler<any> & PointerEventHandler<HTMLButtonElement>

onPointerLeave

Type: PointerEventHandler<any> & PointerEventHandler<HTMLButtonElement>

onPointerMove

Type: PointerEventHandler<any> & PointerEventHandler<HTMLButtonElement>

onPointerMoveCapture

Type: PointerEventHandler<any> & PointerEventHandler<HTMLButtonElement>

onPointerOut

Type: PointerEventHandler<any> & PointerEventHandler<HTMLButtonElement>

onPointerOutCapture

Type: PointerEventHandler<any> & PointerEventHandler<HTMLButtonElement>

onPointerOver

Type: PointerEventHandler<any> & PointerEventHandler<HTMLButtonElement>

onPointerOverCapture

Type: PointerEventHandler<any> & PointerEventHandler<HTMLButtonElement>

onPointerUp

Type: PointerEventHandler<any> & PointerEventHandler<HTMLButtonElement>

onPointerUpCapture

Type: PointerEventHandler<any> & PointerEventHandler<HTMLButtonElement>

onProgress

Type: ReactEventHandler<any> & ReactEventHandler<HTMLButtonElement>

onProgressCapture

Type: ReactEventHandler<any> & ReactEventHandler<HTMLButtonElement>

onRateChange

Type: ReactEventHandler<any> & ReactEventHandler<HTMLButtonElement>

onRateChangeCapture

Type: ReactEventHandler<any> & ReactEventHandler<HTMLButtonElement>

onReset

Type: FormEventHandler<any> & FormEventHandler<HTMLButtonElement>

onResetCapture

Type: FormEventHandler<any> & FormEventHandler<HTMLButtonElement>

onResize

Type: ReactEventHandler<any> & ReactEventHandler<HTMLButtonElement>

onResizeCapture

Type: ReactEventHandler<any> & ReactEventHandler<HTMLButtonElement>

onScroll

Type: UIEventHandler<any> & UIEventHandler<HTMLButtonElement>

onScrollCapture

Type: UIEventHandler<any> & UIEventHandler<HTMLButtonElement>

onSeeked

Type: ReactEventHandler<any> & ReactEventHandler<HTMLButtonElement>

onSeekedCapture

Type: ReactEventHandler<any> & ReactEventHandler<HTMLButtonElement>

onSeeking

Type: ReactEventHandler<any> & ReactEventHandler<HTMLButtonElement>

onSeekingCapture

Type: ReactEventHandler<any> & ReactEventHandler<HTMLButtonElement>

onSelect

Type: ReactEventHandler<any> & ReactEventHandler<HTMLButtonElement>

onSelectCapture

Type: ReactEventHandler<any> & ReactEventHandler<HTMLButtonElement>

onStalled

Type: ReactEventHandler<any> & ReactEventHandler<HTMLButtonElement>

onStalledCapture

Type: ReactEventHandler<any> & ReactEventHandler<HTMLButtonElement>

onSubmit

Type: FormEventHandler<any> & FormEventHandler<HTMLButtonElement>

onSubmitCapture

Type: FormEventHandler<any> & FormEventHandler<HTMLButtonElement>

onSuspend

Type: ReactEventHandler<any> & ReactEventHandler<HTMLButtonElement>

onSuspendCapture

Type: ReactEventHandler<any> & ReactEventHandler<HTMLButtonElement>

onTimeUpdate

Type: ReactEventHandler<any> & ReactEventHandler<HTMLButtonElement>

onTimeUpdateCapture

Type: ReactEventHandler<any> & ReactEventHandler<HTMLButtonElement>

onToggle

Type: ToggleEventHandler<any> & ToggleEventHandler<HTMLButtonElement>

onTouchCancel

Type: TouchEventHandler<any> & TouchEventHandler<HTMLButtonElement>

onTouchCancelCapture

Type: TouchEventHandler<any> & TouchEventHandler<HTMLButtonElement>

onTouchEnd

Type: TouchEventHandler<any> & TouchEventHandler<HTMLButtonElement>

onTouchEndCapture

Type: TouchEventHandler<any> & TouchEventHandler<HTMLButtonElement>

onTouchMove

Type: TouchEventHandler<any> & TouchEventHandler<HTMLButtonElement>

onTouchMoveCapture

Type: TouchEventHandler<any> & TouchEventHandler<HTMLButtonElement>

onTouchStart

Type: TouchEventHandler<any> & TouchEventHandler<HTMLButtonElement>

onTouchStartCapture

Type: TouchEventHandler<any> & TouchEventHandler<HTMLButtonElement>

onTransitionCancel

Type: TransitionEventHandler<any> & TransitionEventHandler<HTMLButtonElement>

onTransitionCancelCapture

Type: TransitionEventHandler<any> & TransitionEventHandler<HTMLButtonElement>

onTransitionEnd

Type: TransitionEventHandler<any> & TransitionEventHandler<HTMLButtonElement>

onTransitionEndCapture

Type: TransitionEventHandler<any> & TransitionEventHandler<HTMLButtonElement>

onTransitionRun

Type: TransitionEventHandler<any> & TransitionEventHandler<HTMLButtonElement>

onTransitionRunCapture

Type: TransitionEventHandler<any> & TransitionEventHandler<HTMLButtonElement>

onTransitionStart

Type: TransitionEventHandler<any> & TransitionEventHandler<HTMLButtonElement>

onTransitionStartCapture

Type: TransitionEventHandler<any> & TransitionEventHandler<HTMLButtonElement>

onVolumeChange

Type: ReactEventHandler<any> & ReactEventHandler<HTMLButtonElement>

onVolumeChangeCapture

Type: ReactEventHandler<any> & ReactEventHandler<HTMLButtonElement>

onWaiting

Type: ReactEventHandler<any> & ReactEventHandler<HTMLButtonElement>

onWaitingCapture

Type: ReactEventHandler<any> & ReactEventHandler<HTMLButtonElement>

onWheel

Type: WheelEventHandler<any> & WheelEventHandler<HTMLButtonElement>

onWheelCapture

Type: WheelEventHandler<any> & WheelEventHandler<HTMLButtonElement>

popover

Type: "" | "auto" | "manual"

popoverTarget

Type: string

popoverTargetAction

Type: "toggle" | "hide" | "show"

prefix

Type: string

property

Type: string

radioGroup

Type: string

ref

Allows getting a ref to the component instance. Once the component unmounts, React will set ref.current to null (or call the ref with null if you passed a callback ref).

Type: | ((instance: any) => void | (() => VoidOrUndefinedOnly)) | RefObject<any>

rel

Type: string

resource

Type: string

results

Type: number

rev

Type: string

role

Type: AriaRole

security

Type: string

slot

Type: string

spellCheck

Type: Booleanish

style

Type: CSSProperties

suppressContentEditableWarning

Type: boolean

suppressHydrationWarning

Type: boolean

tabIndex

Type: 0 | -1

title

Type: string

translate

Type: "yes" | "no"

type

Use at least one submit button per <form>. Outside of forms use button (default).

Type: "reset" | "button" | "submit"
Default: 'button'

typeof

Type: string

unselectable

Type: "off" | "on"

unstable_arrowStyles

Arrow styles.

Type: CSSProperties

unstable_clickOnEnter

Whether or not trigger click on pressing Enter.

Type: boolean

unstable_clickOnSpace

Whether or not trigger click on pressing Space.

Type: boolean

unstable_disclosureRef

Type: MutableRefObject<HTMLElement | null>

unstable_moves

Stores the number of moves that have been performed by calling move, next, previous, up, down, first or last.

Type: number
Default: 0

unstable_popoverStyles

Popover styles.

Type: CSSProperties

unstable_referenceRef

The reference element.

Type: RefObject<HTMLElement | null>

unstable_system

Options passed to reakit-system-*

Type: any

value

Type: string | number | readonly string[]

visible

Whether it's visible or not.

Type: boolean

vocab

Type: string

wrapElement

Function returned by the hook to wrap the element to which html props will be passed.

Type: (element: ReactNode) => ReactNode

MenuBadge

baseId RequiredRequired

ID that will serve as a base for all the items IDs.

Type: string

first RequiredRequired

Moves focus to the first item.

Type: () => void

i18nButtonLabel RequiredRequired

Accessible label for the button that opens the menu

Type: string

last RequiredRequired

Moves focus to the last item.

Type: () => void

placement RequiredRequired

Actual placement.

Type: Placement

show RequiredRequired

Changes the visible state to true

Type: () => void

toggle RequiredRequired

Toggles the visible state

Type: () => void

variant RequiredRequired

Type: | "default" | "neutral" | "warning" | "error" | "success" | "new" | "subaccount" | "decorative10" | "decorative20" | "decorative30" | "decorative40" | "brand10" | "brand20" | "brand30" | "neutral_counter" | "error_counter" | "notification_counter" | "info"
Default: null

as

The HTML tag to replace the default <button> tag.

Type: keyof IntrinsicElements
Default: 'button'

element

Overrides the default element name to apply unique styles with the Customization Provider.

Type: string
Default: 'BUTTON'

fullWidth

Sets the Button width to 100% of the parent container.

Type: boolean

href

A URL to route to. Must use as="a" for this prop to work.

Type: string
Default: null

i18nExternalLinkLabel

Title for showExternal icon

Type: string
Default: '(link takes you to an external page)'

loading

Prevent actions and show a loading spinner

Type: boolean

pressed

Sets the aria-pressed attribute. Must be used with 'secondary' or 'secondary_icon' variants.

Type: boolean

size

Type: ButtonSizes
Default: 'default'

target

Type: string

Inherited props

Paste components will often extend native HTML elements and as a result will inherit or extend their available properties. Below is a list of the props this component has inherited and are also available to use.

about

Type: string

accessKey

Type: string

aria-activedescendant

Identifies the currently active element when DOM focus is on a composite widget, textbox, group, or application.

Type: string

aria-atomic

Indicates whether assistive technologies will present all, or only parts of, the changed region based on the change notifications defined by the aria-relevant attribute.

Type: Booleanish

aria-autocomplete

Indicates whether inputting text could trigger display of one or more predictions of the user's intended value for an input and specifies how predictions would be presented if they are made.

Type: "none" | "list" | "inline" | "both"

aria-braillelabel

Defines a string value that labels the current element, which is intended to be converted into Braille.

Type: string

aria-brailleroledescription

Defines a human-readable, author-localized abbreviated description for the role of an element, which is intended to be converted into Braille.

Type: string

aria-busy

Type: Booleanish

aria-checked

Indicates the current "checked" state of checkboxes, radio buttons, and other widgets.

Type: boolean | "true" | "false" | "mixed"

aria-colcount

Defines the total number of columns in a table, grid, or treegrid.

Type: number

aria-colindex

Defines an element's column index or position with respect to the total number of columns within a table, grid, or treegrid.

Type: number

aria-colindextext

Defines a human readable text alternative of aria-colindex.

Type: string

aria-colspan

Defines the number of columns spanned by a cell or gridcell within a table, grid, or treegrid.

Type: number

aria-controls

Identifies the element (or elements) whose contents or presence are controlled by the current element.

Type: string

aria-current

Indicates the element that represents the current item within a container or set of related elements.

Type: | boolean | "true" | "false" | "page" | "step" | "location" | "date" | "time"

aria-describedby

Identifies the element (or elements) that describes the object.

Type: string

aria-description

Defines a string value that describes or annotates the current element.

Type: string

aria-details

Identifies the element that provides a detailed, extended description for the object.

Type: string

aria-disabled

Indicates that the element is perceivable but disabled, so it is not editable or otherwise operable.

Type: Booleanish

aria-dropeffect

Indicates what functions can be performed when a dragged object is released on the drop target.

Type: "move" | "none" | "link" | "copy" | "execute" | "popup"

aria-errormessage

Identifies the element that provides an error message for the object.

Type: string

aria-expanded

Indicates whether the element, or another grouping element it controls, is currently expanded or collapsed.

Type: Booleanish

aria-flowto

Identifies the next element (or elements) in an alternate reading order of content which, at the user's discretion, allows assistive technology to override the general default of reading in document source order.

Type: string

aria-grabbed

Indicates an element's "grabbed" state in a drag-and-drop operation.

Type: Booleanish

aria-haspopup

Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by an element.

Type: | boolean | "true" | "false" | "dialog" | "grid" | "listbox" | "menu" | "tree"

aria-hidden

Indicates whether the element is exposed to an accessibility API.

Type: Booleanish

aria-invalid

Indicates the entered value does not conform to the format expected by the application.

Type: boolean | "true" | "false" | "grammar" | "spelling"

aria-keyshortcuts

Indicates keyboard shortcuts that an author has implemented to activate or give focus to an element.

Type: string

aria-label

Defines a string value that labels the current element.

Type: string

aria-labelledby

Identifies the element (or elements) that labels the current element.

Type: string

aria-level

Defines the hierarchical level of an element within a structure.

Type: number

aria-live

Indicates that an element will be updated, and describes the types of updates the user agents, assistive technologies, and user can expect from the live region.

Type: "off" | "assertive" | "polite"

aria-modal

Indicates whether an element is modal when displayed.

Type: Booleanish

aria-multiline

Indicates whether a text box accepts multiple lines of input or only a single line.

Type: Booleanish

aria-multiselectable

Indicates that the user may select more than one item from the current selectable descendants.

Type: Booleanish

aria-orientation

Indicates whether the element's orientation is horizontal, vertical, or unknown/ambiguous.

Type: "horizontal" | "vertical"

aria-owns

Identifies an element (or elements) in order to define a visual, functional, or contextual parent/child relationship between DOM elements where the DOM hierarchy cannot be used to represent the relationship.

Type: string

aria-placeholder

Defines a short hint (a word or short phrase) intended to aid the user with data entry when the control has no value. A hint could be a sample value or a brief description of the expected format.

Type: string

aria-posinset

Defines an element's number or position in the current set of listitems or treeitems. Not required if all elements in the set are present in the DOM.

Type: number

aria-pressed

Indicates the current "pressed" state of toggle buttons.

Type: boolean | "true" | "false" | "mixed"

aria-readonly

Indicates that the element is not editable, but is otherwise operable.

Type: Booleanish

aria-relevant

Indicates what notifications the user agent will trigger when the accessibility tree within a live region is modified.

Type: | "text" | "additions" | "additions removals" | "additions text" | "all" | "removals" | "removals additions" | "removals text" | "text additions" | "text removals"

aria-required

Indicates that user input is required on the element before a form may be submitted.

Type: Booleanish

aria-roledescription

Defines a human-readable, author-localized description for the role of an element.

Type: string

aria-rowcount

Defines the total number of rows in a table, grid, or treegrid.

Type: number

aria-rowindex

Defines an element's row index or position with respect to the total number of rows within a table, grid, or treegrid.

Type: number

aria-rowindextext

Defines a human readable text alternative of aria-rowindex.

Type: string

aria-rowspan

Defines the number of rows spanned by a cell or gridcell within a table, grid, or treegrid.

Type: number

aria-selected

Indicates the current "selected" state of various widgets.

Type: Booleanish

aria-setsize

Defines the number of items in the current set of listitems or treeitems. Not required if all elements in the set are present in the DOM.

Type: number

aria-sort

Indicates if items in a table or grid are sorted in ascending or descending order.

Type: "none" | "ascending" | "descending" | "other"

aria-valuemax

Defines the maximum allowed value for a range widget.

Type: number

aria-valuemin

Defines the minimum allowed value for a range widget.

Type: number

aria-valuenow

Defines the current value for a range widget.

Type: number

aria-valuetext

Defines the human readable text alternative of aria-valuenow for a range widget.

Type: string

autoCapitalize

Type: | (string & {}) | "off" | "none" | "on" | "sentences" | "words" | "characters"

autoCorrect

Type: string

autoFocus

Type: boolean

autoSave

Type: string

className

Type: string

color

Type: string

content

Style prop for the CSS content property

Type: string

contentEditable

Type: Booleanish | "inherit" | "plaintext-only"

contextMenu

Type: string

currentId

The current focused item id.

undefined will automatically focus the first enabled composite item.
null will focus the base composite element and users will be able to navigate out of it using arrow keys.
If currentId is initially set to null, the base composite element itself will have focus and users will be able to navigate to it using arrow keys.

Type: string
Default: undefined

dangerouslySetInnerHTML

Type: { __html: string | TrustedHTML }

datatype

Type: string

defaultChecked

Type: boolean

defaultValue

Type: string | number | readonly string[]

dir

Type: string

disabled

Same as the HTML attribute.

Prevent actions from firing on this Button

Type: boolean

draggable

Type: Booleanish

enterKeyHint

Type: | "next" | "previous" | "enter" | "done" | "go" | "search" | "send"

focusable

When an element is disabled, it may still be focusable. It works similarly to readOnly on form elements. In this case, only aria-disabled will be set.

Type: boolean

form

Type: string

formAction

Type: string | ((formData: FormData) => void | Promise<void>)

formEncType

Type: string

formMethod

Type: string

formNoValidate

Type: boolean

formTarget

Type: string

hidden

Type: boolean

hide

Changes the visible state to false

Type: () => void

id

Type: string

inert

Type: boolean

inlist

Type: any

inputMode

Hints at the type of data that might be entered by the user while editing the element or its contents

Type: | "none" | "search" | "text" | "tel" | "url" | "email" | "numeric" | "decimal"

is

Specify that a standard HTML element should behave like a defined custom built-in element

Type: string

itemID

Type: string

itemProp

Type: string

itemRef

Type: string

itemScope

Type: boolean

itemType

Type: string

key

Type: Key

lang

Type: string

move

Moves focus to a given item ID.

Type: (id: string | null) => void

name

Type: string

nonce

Type: string

onAbort

Type: ReactEventHandler<any> & ReactEventHandler<HTMLButtonElement>

onAbortCapture

Type: ReactEventHandler<any> & ReactEventHandler<HTMLButtonElement>

onAnimationEnd

Type: AnimationEventHandler<any> & AnimationEventHandler<HTMLButtonElement>

onAnimationEndCapture

Type: AnimationEventHandler<any> & AnimationEventHandler<HTMLButtonElement>

onAnimationIteration

Type: AnimationEventHandler<any> & AnimationEventHandler<HTMLButtonElement>

onAnimationIterationCapture

Type: AnimationEventHandler<any> & AnimationEventHandler<HTMLButtonElement>

onAnimationStart

Type: AnimationEventHandler<any> & AnimationEventHandler<HTMLButtonElement>

onAnimationStartCapture

Type: AnimationEventHandler<any> & AnimationEventHandler<HTMLButtonElement>

onAuxClick

Type: MouseEventHandler<any> & MouseEventHandler<HTMLButtonElement>

onAuxClickCapture

Type: MouseEventHandler<any> & MouseEventHandler<HTMLButtonElement>

onBeforeInput

Type: FormEventHandler<any> & FormEventHandler<HTMLButtonElement>

onBeforeInputCapture

Type: FormEventHandler<any> & FormEventHandler<HTMLButtonElement>

onBeforeToggle

Type: ToggleEventHandler<any> & ToggleEventHandler<HTMLButtonElement>

onBlur

Type: FocusEventHandler<any> & FocusEventHandler<HTMLButtonElement>

onBlurCapture

Type: FocusEventHandler<any> & FocusEventHandler<HTMLButtonElement>

onCanPlay

Type: ReactEventHandler<any> & ReactEventHandler<HTMLButtonElement>

onCanPlayCapture

Type: ReactEventHandler<any> & ReactEventHandler<HTMLButtonElement>

onCanPlayThrough

Type: ReactEventHandler<any> & ReactEventHandler<HTMLButtonElement>

onCanPlayThroughCapture

Type: ReactEventHandler<any> & ReactEventHandler<HTMLButtonElement>

onChange

Type: FormEventHandler<any> & FormEventHandler<HTMLButtonElement>

onChangeCapture

Type: FormEventHandler<any> & FormEventHandler<HTMLButtonElement>

onClick

Type: MouseEventHandler<any> & MouseEventHandler<HTMLButtonElement>

onClickCapture

Type: MouseEventHandler<any> & MouseEventHandler<HTMLButtonElement>

onCompositionEnd

Type: CompositionEventHandler<any> & CompositionEventHandler<HTMLButtonElement>

onCompositionEndCapture

Type: CompositionEventHandler<any> & CompositionEventHandler<HTMLButtonElement>

onCompositionStart

Type: CompositionEventHandler<any> & CompositionEventHandler<HTMLButtonElement>

onCompositionStartCapture

Type: CompositionEventHandler<any> & CompositionEventHandler<HTMLButtonElement>

onCompositionUpdate

Type: CompositionEventHandler<any> & CompositionEventHandler<HTMLButtonElement>

onCompositionUpdateCapture

Type: CompositionEventHandler<any> & CompositionEventHandler<HTMLButtonElement>

onContextMenu

Type: MouseEventHandler<any> & MouseEventHandler<HTMLButtonElement>

onContextMenuCapture

Type: MouseEventHandler<any> & MouseEventHandler<HTMLButtonElement>

onCopy

Type: ClipboardEventHandler<any> & ClipboardEventHandler<HTMLButtonElement>

onCopyCapture

Type: ClipboardEventHandler<any> & ClipboardEventHandler<HTMLButtonElement>

onCut

Type: ClipboardEventHandler<any> & ClipboardEventHandler<HTMLButtonElement>

onCutCapture

Type: ClipboardEventHandler<any> & ClipboardEventHandler<HTMLButtonElement>

onDoubleClick

Type: MouseEventHandler<any> & MouseEventHandler<HTMLButtonElement>

onDoubleClickCapture

Type: MouseEventHandler<any> & MouseEventHandler<HTMLButtonElement>

onDrag

Type: DragEventHandler<any> & DragEventHandler<HTMLButtonElement>

onDragCapture

Type: DragEventHandler<any> & DragEventHandler<HTMLButtonElement>

onDragEnd

Type: DragEventHandler<any> & DragEventHandler<HTMLButtonElement>

onDragEndCapture

Type: DragEventHandler<any> & DragEventHandler<HTMLButtonElement>

onDragEnter

Type: DragEventHandler<any> & DragEventHandler<HTMLButtonElement>

onDragEnterCapture

Type: DragEventHandler<any> & DragEventHandler<HTMLButtonElement>

onDragExit

Type: DragEventHandler<any> & DragEventHandler<HTMLButtonElement>

onDragExitCapture

Type: DragEventHandler<any> & DragEventHandler<HTMLButtonElement>

onDragLeave

Type: DragEventHandler<any> & DragEventHandler<HTMLButtonElement>

onDragLeaveCapture

Type: DragEventHandler<any> & DragEventHandler<HTMLButtonElement>

onDragOver

Type: DragEventHandler<any> & DragEventHandler<HTMLButtonElement>

onDragOverCapture

Type: DragEventHandler<any> & DragEventHandler<HTMLButtonElement>

onDragStart

Type: DragEventHandler<any> & DragEventHandler<HTMLButtonElement>

onDragStartCapture

Type: DragEventHandler<any> & DragEventHandler<HTMLButtonElement>

onDrop

Type: DragEventHandler<any> & DragEventHandler<HTMLButtonElement>

onDropCapture

Type: DragEventHandler<any> & DragEventHandler<HTMLButtonElement>

onDurationChange

Type: ReactEventHandler<any> & ReactEventHandler<HTMLButtonElement>

onDurationChangeCapture

Type: ReactEventHandler<any> & ReactEventHandler<HTMLButtonElement>

onEmptied

Type: ReactEventHandler<any> & ReactEventHandler<HTMLButtonElement>

onEmptiedCapture

Type: ReactEventHandler<any> & ReactEventHandler<HTMLButtonElement>

onEncrypted

Type: ReactEventHandler<any> & ReactEventHandler<HTMLButtonElement>

onEncryptedCapture

Type: ReactEventHandler<any> & ReactEventHandler<HTMLButtonElement>

onEnded

Type: ReactEventHandler<any> & ReactEventHandler<HTMLButtonElement>

onEndedCapture

Type: ReactEventHandler<any> & ReactEventHandler<HTMLButtonElement>

onError

Type: ReactEventHandler<any> & ReactEventHandler<HTMLButtonElement>

onErrorCapture

Type: ReactEventHandler<any> & ReactEventHandler<HTMLButtonElement>

onFocus

Type: FocusEventHandler<any> & FocusEventHandler<HTMLButtonElement>

onFocusCapture

Type: FocusEventHandler<any> & FocusEventHandler<HTMLButtonElement>

onGotPointerCapture

Type: PointerEventHandler<any> & PointerEventHandler<HTMLButtonElement>

onGotPointerCaptureCapture

Type: PointerEventHandler<any> & PointerEventHandler<HTMLButtonElement>

onInput

Type: FormEventHandler<any> & FormEventHandler<HTMLButtonElement>

onInputCapture

Type: FormEventHandler<any> & FormEventHandler<HTMLButtonElement>

onInvalid

Type: FormEventHandler<any> & FormEventHandler<HTMLButtonElement>

onInvalidCapture

Type: FormEventHandler<any> & FormEventHandler<HTMLButtonElement>

onKeyDown

Type: KeyboardEventHandler<any> & KeyboardEventHandler<HTMLButtonElement>

onKeyDownCapture

Type: KeyboardEventHandler<any> & KeyboardEventHandler<HTMLButtonElement>

onKeyPress

Type: KeyboardEventHandler<any> & KeyboardEventHandler<HTMLButtonElement>

onKeyPressCapture

Type: KeyboardEventHandler<any> & KeyboardEventHandler<HTMLButtonElement>

onKeyUp

Type: KeyboardEventHandler<any> & KeyboardEventHandler<HTMLButtonElement>

onKeyUpCapture

Type: KeyboardEventHandler<any> & KeyboardEventHandler<HTMLButtonElement>

onLoad

Type: ReactEventHandler<any> & ReactEventHandler<HTMLButtonElement>

onLoadCapture

Type: ReactEventHandler<any> & ReactEventHandler<HTMLButtonElement>

onLoadedData

Type: ReactEventHandler<any> & ReactEventHandler<HTMLButtonElement>

onLoadedDataCapture

Type: ReactEventHandler<any> & ReactEventHandler<HTMLButtonElement>

onLoadedMetadata

Type: ReactEventHandler<any> & ReactEventHandler<HTMLButtonElement>

onLoadedMetadataCapture

Type: ReactEventHandler<any> & ReactEventHandler<HTMLButtonElement>

onLoadStart

Type: ReactEventHandler<any> & ReactEventHandler<HTMLButtonElement>

onLoadStartCapture

Type: ReactEventHandler<any> & ReactEventHandler<HTMLButtonElement>

onLostPointerCapture

Type: PointerEventHandler<any> & PointerEventHandler<HTMLButtonElement>

onLostPointerCaptureCapture

Type: PointerEventHandler<any> & PointerEventHandler<HTMLButtonElement>

onMouseDown

Type: MouseEventHandler<any> & MouseEventHandler<HTMLButtonElement>

onMouseDownCapture

Type: MouseEventHandler<any> & MouseEventHandler<HTMLButtonElement>

onMouseEnter

Type: MouseEventHandler<any> & MouseEventHandler<HTMLButtonElement>

onMouseLeave

Type: MouseEventHandler<any> & MouseEventHandler<HTMLButtonElement>

onMouseMove

Type: MouseEventHandler<any> & MouseEventHandler<HTMLButtonElement>

onMouseMoveCapture

Type: MouseEventHandler<any> & MouseEventHandler<HTMLButtonElement>

onMouseOut

Type: MouseEventHandler<any> & MouseEventHandler<HTMLButtonElement>

onMouseOutCapture

Type: MouseEventHandler<any> & MouseEventHandler<HTMLButtonElement>

onMouseOver

Type: MouseEventHandler<any> & MouseEventHandler<HTMLButtonElement>

onMouseOverCapture

Type: MouseEventHandler<any> & MouseEventHandler<HTMLButtonElement>

onMouseUp

Type: MouseEventHandler<any> & MouseEventHandler<HTMLButtonElement>

onMouseUpCapture

Type: MouseEventHandler<any> & MouseEventHandler<HTMLButtonElement>

onPaste

Type: ClipboardEventHandler<any> & ClipboardEventHandler<HTMLButtonElement>

onPasteCapture

Type: ClipboardEventHandler<any> & ClipboardEventHandler<HTMLButtonElement>

onPause

Type: ReactEventHandler<any> & ReactEventHandler<HTMLButtonElement>

onPauseCapture

Type: ReactEventHandler<any> & ReactEventHandler<HTMLButtonElement>

onPlay

Type: ReactEventHandler<any> & ReactEventHandler<HTMLButtonElement>

onPlayCapture

Type: ReactEventHandler<any> & ReactEventHandler<HTMLButtonElement>

onPlaying

Type: ReactEventHandler<any> & ReactEventHandler<HTMLButtonElement>

onPlayingCapture

Type: ReactEventHandler<any> & ReactEventHandler<HTMLButtonElement>

onPointerCancel

Type: PointerEventHandler<any> & PointerEventHandler<HTMLButtonElement>

onPointerCancelCapture

Type: PointerEventHandler<any> & PointerEventHandler<HTMLButtonElement>

onPointerDown

Type: PointerEventHandler<any> & PointerEventHandler<HTMLButtonElement>

onPointerDownCapture

Type: PointerEventHandler<any> & PointerEventHandler<HTMLButtonElement>

onPointerEnter

Type: PointerEventHandler<any> & PointerEventHandler<HTMLButtonElement>

onPointerLeave

Type: PointerEventHandler<any> & PointerEventHandler<HTMLButtonElement>

onPointerMove

Type: PointerEventHandler<any> & PointerEventHandler<HTMLButtonElement>

onPointerMoveCapture

Type: PointerEventHandler<any> & PointerEventHandler<HTMLButtonElement>

onPointerOut

Type: PointerEventHandler<any> & PointerEventHandler<HTMLButtonElement>

onPointerOutCapture

Type: PointerEventHandler<any> & PointerEventHandler<HTMLButtonElement>

onPointerOver

Type: PointerEventHandler<any> & PointerEventHandler<HTMLButtonElement>

onPointerOverCapture

Type: PointerEventHandler<any> & PointerEventHandler<HTMLButtonElement>

onPointerUp

Type: PointerEventHandler<any> & PointerEventHandler<HTMLButtonElement>

onPointerUpCapture

Type: PointerEventHandler<any> & PointerEventHandler<HTMLButtonElement>

onProgress

Type: ReactEventHandler<any> & ReactEventHandler<HTMLButtonElement>

onProgressCapture

Type: ReactEventHandler<any> & ReactEventHandler<HTMLButtonElement>

onRateChange

Type: ReactEventHandler<any> & ReactEventHandler<HTMLButtonElement>

onRateChangeCapture

Type: ReactEventHandler<any> & ReactEventHandler<HTMLButtonElement>

onReset

Type: FormEventHandler<any> & FormEventHandler<HTMLButtonElement>

onResetCapture

Type: FormEventHandler<any> & FormEventHandler<HTMLButtonElement>

onResize

Type: ReactEventHandler<any> & ReactEventHandler<HTMLButtonElement>

onResizeCapture

Type: ReactEventHandler<any> & ReactEventHandler<HTMLButtonElement>

onScroll

Type: UIEventHandler<any> & UIEventHandler<HTMLButtonElement>

onScrollCapture

Type: UIEventHandler<any> & UIEventHandler<HTMLButtonElement>

onSeeked

Type: ReactEventHandler<any> & ReactEventHandler<HTMLButtonElement>

onSeekedCapture

Type: ReactEventHandler<any> & ReactEventHandler<HTMLButtonElement>

onSeeking

Type: ReactEventHandler<any> & ReactEventHandler<HTMLButtonElement>

onSeekingCapture

Type: ReactEventHandler<any> & ReactEventHandler<HTMLButtonElement>

onSelect

Type: ReactEventHandler<any> & ReactEventHandler<HTMLButtonElement>

onSelectCapture

Type: ReactEventHandler<any> & ReactEventHandler<HTMLButtonElement>

onStalled

Type: ReactEventHandler<any> & ReactEventHandler<HTMLButtonElement>

onStalledCapture

Type: ReactEventHandler<any> & ReactEventHandler<HTMLButtonElement>

onSubmit

Type: FormEventHandler<any> & FormEventHandler<HTMLButtonElement>

onSubmitCapture

Type: FormEventHandler<any> & FormEventHandler<HTMLButtonElement>

onSuspend

Type: ReactEventHandler<any> & ReactEventHandler<HTMLButtonElement>

onSuspendCapture

Type: ReactEventHandler<any> & ReactEventHandler<HTMLButtonElement>

onTimeUpdate

Type: ReactEventHandler<any> & ReactEventHandler<HTMLButtonElement>

onTimeUpdateCapture

Type: ReactEventHandler<any> & ReactEventHandler<HTMLButtonElement>

onToggle

Type: ToggleEventHandler<any> & ToggleEventHandler<HTMLButtonElement>

onTouchCancel

Type: TouchEventHandler<any> & TouchEventHandler<HTMLButtonElement>

onTouchCancelCapture

Type: TouchEventHandler<any> & TouchEventHandler<HTMLButtonElement>

onTouchEnd

Type: TouchEventHandler<any> & TouchEventHandler<HTMLButtonElement>

onTouchEndCapture

Type: TouchEventHandler<any> & TouchEventHandler<HTMLButtonElement>

onTouchMove

Type: TouchEventHandler<any> & TouchEventHandler<HTMLButtonElement>

onTouchMoveCapture

Type: TouchEventHandler<any> & TouchEventHandler<HTMLButtonElement>

onTouchStart

Type: TouchEventHandler<any> & TouchEventHandler<HTMLButtonElement>

onTouchStartCapture

Type: TouchEventHandler<any> & TouchEventHandler<HTMLButtonElement>

onTransitionCancel

Type: TransitionEventHandler<any> & TransitionEventHandler<HTMLButtonElement>

onTransitionCancelCapture

Type: TransitionEventHandler<any> & TransitionEventHandler<HTMLButtonElement>

onTransitionEnd

Type: TransitionEventHandler<any> & TransitionEventHandler<HTMLButtonElement>

onTransitionEndCapture

Type: TransitionEventHandler<any> & TransitionEventHandler<HTMLButtonElement>

onTransitionRun

Type: TransitionEventHandler<any> & TransitionEventHandler<HTMLButtonElement>

onTransitionRunCapture

Type: TransitionEventHandler<any> & TransitionEventHandler<HTMLButtonElement>

onTransitionStart

Type: TransitionEventHandler<any> & TransitionEventHandler<HTMLButtonElement>

onTransitionStartCapture

Type: TransitionEventHandler<any> & TransitionEventHandler<HTMLButtonElement>

onVolumeChange

Type: ReactEventHandler<any> & ReactEventHandler<HTMLButtonElement>

onVolumeChangeCapture

Type: ReactEventHandler<any> & ReactEventHandler<HTMLButtonElement>

onWaiting

Type: ReactEventHandler<any> & ReactEventHandler<HTMLButtonElement>

onWaitingCapture

Type: ReactEventHandler<any> & ReactEventHandler<HTMLButtonElement>

onWheel

Type: WheelEventHandler<any> & WheelEventHandler<HTMLButtonElement>

onWheelCapture

Type: WheelEventHandler<any> & WheelEventHandler<HTMLButtonElement>

popover

Type: "" | "auto" | "manual"

popoverTarget

Type: string

popoverTargetAction

Type: "toggle" | "hide" | "show"

prefix

Type: string

property

Type: string

radioGroup

Type: string

ref

Allows getting a ref to the component instance. Once the component unmounts, React will set ref.current to null (or call the ref with null if you passed a callback ref).

Type: | ((instance: any) => void | (() => VoidOrUndefinedOnly)) | RefObject<any>

rel

Type: string

resource

Type: string

results

Type: number

rev

Type: string

role

Type: AriaRole

security

Type: string

slot

Type: string

spellCheck

Type: Booleanish

style

Type: CSSProperties

suppressContentEditableWarning

Type: boolean

suppressHydrationWarning

Type: boolean

tabIndex

Type: 0 | -1

title

Type: string

translate

Type: "yes" | "no"

type

Use at least one submit button per <form>. Outside of forms use button (default).

Type: "reset" | "button" | "submit"
Default: 'button'

typeof

Type: string

unselectable

Type: "off" | "on"

unstable_arrowStyles

Arrow styles.

Type: CSSProperties

unstable_clickOnEnter

Whether or not trigger click on pressing Enter.

Type: boolean

unstable_clickOnSpace

Whether or not trigger click on pressing Space.

Type: boolean

unstable_disclosureRef

Type: MutableRefObject<HTMLElement | null>

unstable_moves

Stores the number of moves that have been performed by calling move, next, previous, up, down, first or last.

Type: number
Default: 0

unstable_popoverStyles

Popover styles.

Type: CSSProperties

unstable_referenceRef

The reference element.

Type: RefObject<HTMLElement | null>

unstable_system

Options passed to reakit-system-*

Type: any

value

Type: string | number | readonly string[]

visible

Whether it's visible or not.

Type: boolean

vocab

Type: string

wrapElement

Function returned by the hook to wrap the element to which html props will be passed.

Type: (element: ReactNode) => ReactNode

SubMenuButton

baseId RequiredRequired

ID that will serve as a base for all the items IDs.

Type: string

first RequiredRequired

Moves focus to the first item.

Type: () => void

last RequiredRequired

Moves focus to the last item.

Type: () => void

placement RequiredRequired

Actual placement.

Type: Placement

show RequiredRequired

Changes the visible state to true

Type: () => void

toggle RequiredRequired

Toggles the visible state

Type: () => void

element

Overrides the default element name to apply unique styles with the Customization Provider

Type: string
Default: '"SUBMENU_BUTTON"

Inherited props

Paste components will often extend native HTML elements and as a result will inherit or extend their available properties. Below is a list of the props this component has inherited and are also available to use.

about

Type: string

accessKey

Type: string

aria-activedescendant

Identifies the currently active element when DOM focus is on a composite widget, textbox, group, or application.

Type: string

aria-atomic

Indicates whether assistive technologies will present all, or only parts of, the changed region based on the change notifications defined by the aria-relevant attribute.

Type: Booleanish

aria-autocomplete

Indicates whether inputting text could trigger display of one or more predictions of the user's intended value for an input and specifies how predictions would be presented if they are made.

Type: "none" | "list" | "inline" | "both"

aria-braillelabel

Defines a string value that labels the current element, which is intended to be converted into Braille.

Type: string

aria-brailleroledescription

Defines a human-readable, author-localized abbreviated description for the role of an element, which is intended to be converted into Braille.

Type: string

aria-busy

Type: Booleanish

aria-checked

Indicates the current "checked" state of checkboxes, radio buttons, and other widgets.

Type: boolean | "true" | "false" | "mixed"

aria-colcount

Defines the total number of columns in a table, grid, or treegrid.

Type: number

aria-colindex

Defines an element's column index or position with respect to the total number of columns within a table, grid, or treegrid.

Type: number

aria-colindextext

Defines a human readable text alternative of aria-colindex.

Type: string

aria-colspan

Defines the number of columns spanned by a cell or gridcell within a table, grid, or treegrid.

Type: number

aria-controls

Identifies the element (or elements) whose contents or presence are controlled by the current element.

Type: string

aria-current

Indicates the element that represents the current item within a container or set of related elements.

Type: | boolean | "true" | "false" | "page" | "step" | "location" | "date" | "time"

aria-describedby

Identifies the element (or elements) that describes the object.

Type: string

aria-description

Defines a string value that describes or annotates the current element.

Type: string

aria-details

Identifies the element that provides a detailed, extended description for the object.

Type: string

aria-disabled

Indicates that the element is perceivable but disabled, so it is not editable or otherwise operable.

Type: Booleanish

aria-dropeffect

Indicates what functions can be performed when a dragged object is released on the drop target.

Type: "move" | "none" | "link" | "copy" | "execute" | "popup"

aria-errormessage

Identifies the element that provides an error message for the object.

Type: string

aria-expanded

Indicates whether the element, or another grouping element it controls, is currently expanded or collapsed.

Type: Booleanish

aria-flowto

Identifies the next element (or elements) in an alternate reading order of content which, at the user's discretion, allows assistive technology to override the general default of reading in document source order.

Type: string

aria-grabbed

Indicates an element's "grabbed" state in a drag-and-drop operation.

Type: Booleanish

aria-haspopup

Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by an element.

Type: | boolean | "true" | "false" | "dialog" | "grid" | "listbox" | "menu" | "tree"

aria-hidden

Indicates whether the element is exposed to an accessibility API.

Type: Booleanish

aria-invalid

Indicates the entered value does not conform to the format expected by the application.

Type: boolean | "true" | "false" | "grammar" | "spelling"

aria-keyshortcuts

Indicates keyboard shortcuts that an author has implemented to activate or give focus to an element.

Type: string

aria-label

Defines a string value that labels the current element.

Type: string

aria-labelledby

Identifies the element (or elements) that labels the current element.

Type: string

aria-level

Defines the hierarchical level of an element within a structure.

Type: number

aria-live

Indicates that an element will be updated, and describes the types of updates the user agents, assistive technologies, and user can expect from the live region.

Type: "off" | "assertive" | "polite"

aria-modal

Indicates whether an element is modal when displayed.

Type: Booleanish

aria-multiline

Indicates whether a text box accepts multiple lines of input or only a single line.

Type: Booleanish

aria-multiselectable

Indicates that the user may select more than one item from the current selectable descendants.

Type: Booleanish

aria-orientation

Indicates whether the element's orientation is horizontal, vertical, or unknown/ambiguous.

Type: "horizontal" | "vertical"

aria-owns

Identifies an element (or elements) in order to define a visual, functional, or contextual parent/child relationship between DOM elements where the DOM hierarchy cannot be used to represent the relationship.

Type: string

aria-placeholder

Defines a short hint (a word or short phrase) intended to aid the user with data entry when the control has no value. A hint could be a sample value or a brief description of the expected format.

Type: string

aria-posinset

Defines an element's number or position in the current set of listitems or treeitems. Not required if all elements in the set are present in the DOM.

Type: number

aria-pressed

Indicates the current "pressed" state of toggle buttons.

Type: boolean | "true" | "false" | "mixed"

aria-readonly

Indicates that the element is not editable, but is otherwise operable.

Type: Booleanish

aria-relevant

Indicates what notifications the user agent will trigger when the accessibility tree within a live region is modified.

Type: | "text" | "additions" | "additions removals" | "additions text" | "all" | "removals" | "removals additions" | "removals text" | "text additions" | "text removals"

aria-required

Indicates that user input is required on the element before a form may be submitted.

Type: Booleanish

aria-roledescription

Defines a human-readable, author-localized description for the role of an element.

Type: string

aria-rowcount

Defines the total number of rows in a table, grid, or treegrid.

Type: number

aria-rowindex

Defines an element's row index or position with respect to the total number of rows within a table, grid, or treegrid.

Type: number

aria-rowindextext

Defines a human readable text alternative of aria-rowindex.

Type: string

aria-rowspan

Defines the number of rows spanned by a cell or gridcell within a table, grid, or treegrid.

Type: number

aria-selected

Indicates the current "selected" state of various widgets.

Type: Booleanish

aria-setsize

Defines the number of items in the current set of listitems or treeitems. Not required if all elements in the set are present in the DOM.

Type: number

aria-sort

Indicates if items in a table or grid are sorted in ascending or descending order.

Type: "none" | "ascending" | "descending" | "other"

aria-valuemax

Defines the maximum allowed value for a range widget.

Type: number

aria-valuemin

Defines the minimum allowed value for a range widget.

Type: number

aria-valuenow

Defines the current value for a range widget.

Type: number

aria-valuetext

Defines the human readable text alternative of aria-valuenow for a range widget.

Type: string

autoCapitalize

Type: | (string & {}) | "off" | "none" | "on" | "sentences" | "words" | "characters"

autoCorrect

Type: string

autoFocus

Type: boolean

autoSave

Type: string

className

Type: string

color

Type: string

content

Type: string

contentEditable

Type: Booleanish | "inherit" | "plaintext-only"

contextMenu

Type: string

currentId

The current focused item id.

undefined will automatically focus the first enabled composite item.
null will focus the base composite element and users will be able to navigate out of it using arrow keys.
If currentId is initially set to null, the base composite element itself will have focus and users will be able to navigate to it using arrow keys.

Type: string
Default: undefined

dangerouslySetInnerHTML

Type: { __html: string | TrustedHTML }

datatype

Type: string

defaultChecked

Type: boolean

defaultValue

Type: string | number | readonly string[]

dir

Type: string

disabled

Same as the HTML attribute.

Type: boolean

draggable

Type: Booleanish

enterKeyHint

Type: | "next" | "previous" | "enter" | "done" | "go" | "search" | "send"

focusable

When an element is disabled, it may still be focusable. It works similarly to readOnly on form elements. In this case, only aria-disabled will be set.

Type: boolean

form

Type: string

formAction

Type: string | ((formData: FormData) => void | Promise<void>)

formEncType

Type: string

formMethod

Type: string

formNoValidate

Type: boolean

formTarget

Type: string

hidden

Type: boolean

hide

Changes the visible state to false

Type: () => void

id

Type: string

inert

Type: boolean

inlist

Type: any

inputMode

Hints at the type of data that might be entered by the user while editing the element or its contents

Type: | "none" | "search" | "text" | "tel" | "url" | "email" | "numeric" | "decimal"

is

Specify that a standard HTML element should behave like a defined custom built-in element

Type: string

itemID

Type: string

itemProp

Type: string

itemRef

Type: string

itemScope

Type: boolean

itemType

Type: string

key

Type: Key

lang

Type: string

move

Moves focus to a given item ID.

Type: (id: string | null) => void

name

Type: string

nonce

Type: string

onAbort

Type: ReactEventHandler<any>

onAbortCapture

Type: ReactEventHandler<any>

onAnimationEnd

Type: AnimationEventHandler<any>

onAnimationEndCapture

Type: AnimationEventHandler<any>

onAnimationIteration

Type: AnimationEventHandler<any>

onAnimationIterationCapture

Type: AnimationEventHandler<any>

onAnimationStart

Type: AnimationEventHandler<any>

onAnimationStartCapture

Type: AnimationEventHandler<any>

onAuxClick

Type: MouseEventHandler<any>

onAuxClickCapture

Type: MouseEventHandler<any>

onBeforeInput

Type: FormEventHandler<any>

onBeforeInputCapture

Type: FormEventHandler<any>

onBeforeToggle

Type: ToggleEventHandler<any>

onBlur

Type: FocusEventHandler<any>

onBlurCapture

Type: FocusEventHandler<any>

onCanPlay

Type: ReactEventHandler<any>

onCanPlayCapture

Type: ReactEventHandler<any>

onCanPlayThrough

Type: ReactEventHandler<any>

onCanPlayThroughCapture

Type: ReactEventHandler<any>

onChange

Type: FormEventHandler<any>

onChangeCapture

Type: FormEventHandler<any>

onClick

Type: MouseEventHandler<any>

onClickCapture

Type: MouseEventHandler<any>

onCompositionEnd

Type: CompositionEventHandler<any>

onCompositionEndCapture

Type: CompositionEventHandler<any>

onCompositionStart

Type: CompositionEventHandler<any>

onCompositionStartCapture

Type: CompositionEventHandler<any>

onCompositionUpdate

Type: CompositionEventHandler<any>

onCompositionUpdateCapture

Type: CompositionEventHandler<any>

onContextMenu

Type: MouseEventHandler<any>

onContextMenuCapture

Type: MouseEventHandler<any>

onCopy

Type: ClipboardEventHandler<any>

onCopyCapture

Type: ClipboardEventHandler<any>

onCut

Type: ClipboardEventHandler<any>

onCutCapture

Type: ClipboardEventHandler<any>

onDoubleClick

Type: MouseEventHandler<any>

onDoubleClickCapture

Type: MouseEventHandler<any>

onDrag

Type: DragEventHandler<any>

onDragCapture

Type: DragEventHandler<any>

onDragEnd

Type: DragEventHandler<any>

onDragEndCapture

Type: DragEventHandler<any>

onDragEnter

Type: DragEventHandler<any>

onDragEnterCapture

Type: DragEventHandler<any>

onDragExit

Type: DragEventHandler<any>

onDragExitCapture

Type: DragEventHandler<any>

onDragLeave

Type: DragEventHandler<any>

onDragLeaveCapture

Type: DragEventHandler<any>

onDragOver

Type: DragEventHandler<any>

onDragOverCapture

Type: DragEventHandler<any>

onDragStart

Type: DragEventHandler<any>

onDragStartCapture

Type: DragEventHandler<any>

onDrop

Type: DragEventHandler<any>

onDropCapture

Type: DragEventHandler<any>

onDurationChange

Type: ReactEventHandler<any>

onDurationChangeCapture

Type: ReactEventHandler<any>

onEmptied

Type: ReactEventHandler<any>

onEmptiedCapture

Type: ReactEventHandler<any>

onEncrypted

Type: ReactEventHandler<any>

onEncryptedCapture

Type: ReactEventHandler<any>

onEnded

Type: ReactEventHandler<any>

onEndedCapture

Type: ReactEventHandler<any>

onError

Type: ReactEventHandler<any>

onErrorCapture

Type: ReactEventHandler<any>

onFocus

Type: FocusEventHandler<any>

onFocusCapture

Type: FocusEventHandler<any>

onGotPointerCapture

Type: PointerEventHandler<any>

onGotPointerCaptureCapture

Type: PointerEventHandler<any>

onInput

Type: FormEventHandler<any>

onInputCapture

Type: FormEventHandler<any>

onInvalid

Type: FormEventHandler<any>

onInvalidCapture

Type: FormEventHandler<any>

onKeyDown

Type: KeyboardEventHandler<any>

onKeyDownCapture

Type: KeyboardEventHandler<any>

onKeyPress

Type: KeyboardEventHandler<any>

onKeyPressCapture

Type: KeyboardEventHandler<any>

onKeyUp

Type: KeyboardEventHandler<any>

onKeyUpCapture

Type: KeyboardEventHandler<any>

onLoad

Type: ReactEventHandler<any>

onLoadCapture

Type: ReactEventHandler<any>

onLoadedData

Type: ReactEventHandler<any>

onLoadedDataCapture

Type: ReactEventHandler<any>

onLoadedMetadata

Type: ReactEventHandler<any>

onLoadedMetadataCapture

Type: ReactEventHandler<any>

onLoadStart

Type: ReactEventHandler<any>

onLoadStartCapture

Type: ReactEventHandler<any>

onLostPointerCapture

Type: PointerEventHandler<any>

onLostPointerCaptureCapture

Type: PointerEventHandler<any>

onMouseDown

Type: MouseEventHandler<any>

onMouseDownCapture

Type: MouseEventHandler<any>

onMouseEnter

Type: MouseEventHandler<any>

onMouseLeave

Type: MouseEventHandler<any>

onMouseMove

Type: MouseEventHandler<any>

onMouseMoveCapture

Type: MouseEventHandler<any>

onMouseOut

Type: MouseEventHandler<any>

onMouseOutCapture

Type: MouseEventHandler<any>

onMouseOver

Type: MouseEventHandler<any>

onMouseOverCapture

Type: MouseEventHandler<any>

onMouseUp

Type: MouseEventHandler<any>

onMouseUpCapture

Type: MouseEventHandler<any>

onPaste

Type: ClipboardEventHandler<any>

onPasteCapture

Type: ClipboardEventHandler<any>

onPause

Type: ReactEventHandler<any>

onPauseCapture

Type: ReactEventHandler<any>

onPlay

Type: ReactEventHandler<any>

onPlayCapture

Type: ReactEventHandler<any>

onPlaying

Type: ReactEventHandler<any>

onPlayingCapture

Type: ReactEventHandler<any>

onPointerCancel

Type: PointerEventHandler<any>

onPointerCancelCapture

Type: PointerEventHandler<any>

onPointerDown

Type: PointerEventHandler<any>

onPointerDownCapture

Type: PointerEventHandler<any>

onPointerEnter

Type: PointerEventHandler<any>

onPointerLeave

Type: PointerEventHandler<any>

onPointerMove

Type: PointerEventHandler<any>

onPointerMoveCapture

Type: PointerEventHandler<any>

onPointerOut

Type: PointerEventHandler<any>

onPointerOutCapture

Type: PointerEventHandler<any>

onPointerOver

Type: PointerEventHandler<any>

onPointerOverCapture

Type: PointerEventHandler<any>

onPointerUp

Type: PointerEventHandler<any>

onPointerUpCapture

Type: PointerEventHandler<any>

onProgress

Type: ReactEventHandler<any>

onProgressCapture

Type: ReactEventHandler<any>

onRateChange

Type: ReactEventHandler<any>

onRateChangeCapture

Type: ReactEventHandler<any>

onReset

Type: FormEventHandler<any>

onResetCapture

Type: FormEventHandler<any>

onResize

Type: ReactEventHandler<any>

onResizeCapture

Type: ReactEventHandler<any>

onScroll

Type: UIEventHandler<any>

onScrollCapture

Type: UIEventHandler<any>

onSeeked

Type: ReactEventHandler<any>

onSeekedCapture

Type: ReactEventHandler<any>

onSeeking

Type: ReactEventHandler<any>

onSeekingCapture

Type: ReactEventHandler<any>

onSelect

Type: ReactEventHandler<any>

onSelectCapture

Type: ReactEventHandler<any>

onStalled

Type: ReactEventHandler<any>

onStalledCapture

Type: ReactEventHandler<any>

onSubmit

Type: FormEventHandler<any>

onSubmitCapture

Type: FormEventHandler<any>

onSuspend

Type: ReactEventHandler<any>

onSuspendCapture

Type: ReactEventHandler<any>

onTimeUpdate

Type: ReactEventHandler<any>

onTimeUpdateCapture

Type: ReactEventHandler<any>

onToggle

Type: ToggleEventHandler<any>

onTouchCancel

Type: TouchEventHandler<any>

onTouchCancelCapture

Type: TouchEventHandler<any>

onTouchEnd

Type: TouchEventHandler<any>

onTouchEndCapture

Type: TouchEventHandler<any>

onTouchMove

Type: TouchEventHandler<any>

onTouchMoveCapture

Type: TouchEventHandler<any>

onTouchStart

Type: TouchEventHandler<any>

onTouchStartCapture

Type: TouchEventHandler<any>

onTransitionCancel

Type: TransitionEventHandler<any>

onTransitionCancelCapture

Type: TransitionEventHandler<any>

onTransitionEnd

Type: TransitionEventHandler<any>

onTransitionEndCapture

Type: TransitionEventHandler<any>

onTransitionRun

Type: TransitionEventHandler<any>

onTransitionRunCapture

Type: TransitionEventHandler<any>

onTransitionStart

Type: TransitionEventHandler<any>

onTransitionStartCapture

Type: TransitionEventHandler<any>

onVolumeChange

Type: ReactEventHandler<any>

onVolumeChangeCapture

Type: ReactEventHandler<any>

onWaiting

Type: ReactEventHandler<any>

onWaitingCapture

Type: ReactEventHandler<any>

onWheel

Type: WheelEventHandler<any>

onWheelCapture

Type: WheelEventHandler<any>

popover

Type: "" | "auto" | "manual"

popoverTarget

Type: string

popoverTargetAction

Type: "toggle" | "hide" | "show"

prefix

Type: string

property

Type: string

radioGroup

Type: string

ref

Allows getting a ref to the component instance. Once the component unmounts, React will set ref.current to null (or call the ref with null if you passed a callback ref).

Type: | ((instance: any) => void | (() => VoidOrUndefinedOnly)) | RefObject<any>

rel

Type: string

resource

Type: string

results

Type: number

rev

Type: string

role

Type: AriaRole

security

Type: string

slot

Type: string

spellCheck

Type: Booleanish

style

Type: CSSProperties

suppressContentEditableWarning

Type: boolean

suppressHydrationWarning

Type: boolean

tabIndex

Type: number

title

Type: string

translate

Type: "yes" | "no"

type

Type: "reset" | "button" | "submit"

typeof

Type: string

unselectable

Type: "off" | "on"

unstable_arrowStyles

Arrow styles.

Type: CSSProperties

unstable_clickOnEnter

Whether or not trigger click on pressing Enter.

Type: boolean

unstable_clickOnSpace

Whether or not trigger click on pressing Space.

Type: boolean

unstable_disclosureRef

Type: MutableRefObject<HTMLElement | null>

unstable_moves

Stores the number of moves that have been performed by calling move, next, previous, up, down, first or last.

Type: number
Default: 0

unstable_popoverStyles

Popover styles.

Type: CSSProperties

unstable_referenceRef

The reference element.

Type: RefObject<HTMLElement | null>

unstable_system

Options passed to reakit-system-*

Type: any

value

Type: string | number | readonly string[]

visible

Whether it's visible or not.

Type: boolean

vocab

Type: string

wrapElement

Function returned by the hook to wrap the element to which html props will be passed.

Type: (element: ReactNode) => ReactNode

MenuItem

down RequiredRequired

Moves focus to the item below.

Type: (unstable_allTheWay?: boolean | undefined) => void

first RequiredRequired

Moves focus to the first item.

Type: () => void

items RequiredRequired

Lists all the composite items with their id, DOM ref, disabled state and groupId if any. This state is automatically updated when registerItem and unregisterItem are called.

Type: Item[]

last RequiredRequired

Moves focus to the last item.

Type: () => void

move RequiredRequired

Moves focus to a given item ID.

Type: (id: string | null) => void

next RequiredRequired

Moves focus to the next item.

Type: (unstable_allTheWay?: boolean | undefined) => void

previous RequiredRequired

Moves focus to the previous item.

Type: (unstable_allTheWay?: boolean | undefined) => void

registerItem RequiredRequired

Registers a composite item.

Type: (item: Item) => void

setCurrentId RequiredRequired

Sets currentId. This is different from composite.move as this only updates the currentId state without moving focus. When the composite widget gets focused by the user, the item referred by the currentId state will get focus.

Type: Dispatch<SetStateAction<string | null | undefined>>

unregisterItem RequiredRequired

Unregisters a composite item.

Type: (id: string) => void

up RequiredRequired

Moves focus to the item above.

Type: (unstable_allTheWay?: boolean | undefined) => void

as

Type: any

element

Overrides the default element name to apply unique styles with the Customization Provider

Type: string
Default: 'MENU_ITEM'

href

Pass href prop to render an anchor element.

Type: string

variant

Type: MenuItemVariant

Inherited props

Paste components will often extend native HTML elements and as a result will inherit or extend their available properties. Below is a list of the props this component has inherited and are also available to use.

about

Type: string

accessKey

Type: string

aria-activedescendant

Identifies the currently active element when DOM focus is on a composite widget, textbox, group, or application.

Type: string

aria-atomic

Indicates whether assistive technologies will present all, or only parts of, the changed region based on the change notifications defined by the aria-relevant attribute.

Type: Booleanish

aria-autocomplete

Indicates whether inputting text could trigger display of one or more predictions of the user's intended value for an input and specifies how predictions would be presented if they are made.

Type: "none" | "list" | "inline" | "both"

aria-braillelabel

Defines a string value that labels the current element, which is intended to be converted into Braille.

Type: string

aria-brailleroledescription

Defines a human-readable, author-localized abbreviated description for the role of an element, which is intended to be converted into Braille.

Type: string

aria-busy

Type: Booleanish

aria-checked

Indicates the current "checked" state of checkboxes, radio buttons, and other widgets.

Type: boolean | "true" | "false" | "mixed"

aria-colcount

Defines the total number of columns in a table, grid, or treegrid.

Type: number

aria-colindex

Defines an element's column index or position with respect to the total number of columns within a table, grid, or treegrid.

Type: number

aria-colindextext

Defines a human readable text alternative of aria-colindex.

Type: string

aria-colspan

Defines the number of columns spanned by a cell or gridcell within a table, grid, or treegrid.

Type: number

aria-controls

Identifies the element (or elements) whose contents or presence are controlled by the current element.

Type: string

aria-current

Indicates the element that represents the current item within a container or set of related elements.

Type: | boolean | "true" | "false" | "page" | "step" | "location" | "date" | "time"

aria-describedby

Identifies the element (or elements) that describes the object.

Type: string

aria-description

Defines a string value that describes or annotates the current element.

Type: string

aria-details

Identifies the element that provides a detailed, extended description for the object.

Type: string

aria-disabled

Indicates that the element is perceivable but disabled, so it is not editable or otherwise operable.

Type: Booleanish

aria-dropeffect

Indicates what functions can be performed when a dragged object is released on the drop target.

Type: "move" | "none" | "link" | "copy" | "execute" | "popup"

aria-errormessage

Identifies the element that provides an error message for the object.

Type: string

aria-expanded

Indicates whether the element, or another grouping element it controls, is currently expanded or collapsed.

Type: Booleanish

aria-flowto

Identifies the next element (or elements) in an alternate reading order of content which, at the user's discretion, allows assistive technology to override the general default of reading in document source order.

Type: string

aria-grabbed

Indicates an element's "grabbed" state in a drag-and-drop operation.

Type: Booleanish

aria-haspopup

Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by an element.

Type: | boolean | "true" | "false" | "dialog" | "grid" | "listbox" | "menu" | "tree"

aria-hidden

Indicates whether the element is exposed to an accessibility API.

Type: Booleanish

aria-invalid

Indicates the entered value does not conform to the format expected by the application.

Type: boolean | "true" | "false" | "grammar" | "spelling"

aria-keyshortcuts

Indicates keyboard shortcuts that an author has implemented to activate or give focus to an element.

Type: string

aria-label

Defines a string value that labels the current element.

Type: string

aria-labelledby

Identifies the element (or elements) that labels the current element.

Type: string

aria-level

Defines the hierarchical level of an element within a structure.

Type: number

aria-live

Indicates that an element will be updated, and describes the types of updates the user agents, assistive technologies, and user can expect from the live region.

Type: "off" | "assertive" | "polite"

aria-modal

Indicates whether an element is modal when displayed.

Type: Booleanish

aria-multiline

Indicates whether a text box accepts multiple lines of input or only a single line.

Type: Booleanish

aria-multiselectable

Indicates that the user may select more than one item from the current selectable descendants.

Type: Booleanish

aria-orientation

Indicates whether the element's orientation is horizontal, vertical, or unknown/ambiguous.

Type: "horizontal" | "vertical"

aria-owns

Identifies an element (or elements) in order to define a visual, functional, or contextual parent/child relationship between DOM elements where the DOM hierarchy cannot be used to represent the relationship.

Type: string

aria-placeholder

Defines a short hint (a word or short phrase) intended to aid the user with data entry when the control has no value. A hint could be a sample value or a brief description of the expected format.

Type: string

aria-posinset

Defines an element's number or position in the current set of listitems or treeitems. Not required if all elements in the set are present in the DOM.

Type: number

aria-pressed

Indicates the current "pressed" state of toggle buttons.

Type: boolean | "true" | "false" | "mixed"

aria-readonly

Indicates that the element is not editable, but is otherwise operable.

Type: Booleanish

aria-relevant

Indicates what notifications the user agent will trigger when the accessibility tree within a live region is modified.

Type: | "text" | "additions" | "additions removals" | "additions text" | "all" | "removals" | "removals additions" | "removals text" | "text additions" | "text removals"

aria-required

Indicates that user input is required on the element before a form may be submitted.

Type: Booleanish

aria-roledescription

Defines a human-readable, author-localized description for the role of an element.

Type: string

aria-rowcount

Defines the total number of rows in a table, grid, or treegrid.

Type: number

aria-rowindex

Defines an element's row index or position with respect to the total number of rows within a table, grid, or treegrid.

Type: number

aria-rowindextext

Defines a human readable text alternative of aria-rowindex.

Type: string

aria-rowspan

Defines the number of rows spanned by a cell or gridcell within a table, grid, or treegrid.

Type: number

aria-selected

Indicates the current "selected" state of various widgets.

Type: Booleanish

aria-setsize

Defines the number of items in the current set of listitems or treeitems. Not required if all elements in the set are present in the DOM.

Type: number

aria-sort

Indicates if items in a table or grid are sorted in ascending or descending order.

Type: "none" | "ascending" | "descending" | "other"

aria-valuemax

Defines the maximum allowed value for a range widget.

Type: number

aria-valuemin

Defines the minimum allowed value for a range widget.

Type: number

aria-valuenow

Defines the current value for a range widget.

Type: number

aria-valuetext

Defines the human readable text alternative of aria-valuenow for a range widget.

Type: string

autoCapitalize

Type: | (string & {}) | "off" | "none" | "on" | "sentences" | "words" | "characters"

autoCorrect

Type: string

autoFocus

Type: boolean

autoSave

Type: string

baseId

ID that will serve as a base for all the items IDs.

Type: string

className

Type: string

color

Type: string

content

Type: string

contentEditable

Type: Booleanish | "inherit" | "plaintext-only"

contextMenu

Type: string

currentId

The current focused item id.

undefined will automatically focus the first enabled composite item.
null will focus the base composite element and users will be able to navigate out of it using arrow keys.
If currentId is initially set to null, the base composite element itself will have focus and users will be able to navigate to it using arrow keys.

Type: string
Default: undefined

dangerouslySetInnerHTML

Type: { __html: string | TrustedHTML }

datatype

Type: string

defaultChecked

Type: boolean

defaultValue

Type: string | number | readonly string[]

dir

Type: string

disabled

Same as the HTML attribute.

Type: boolean

draggable

Type: Booleanish

enterKeyHint

Type: | "next" | "previous" | "enter" | "done" | "go" | "search" | "send"

focusable

When an element is disabled, it may still be focusable. It works similarly to readOnly on form elements. In this case, only aria-disabled will be set.

Type: boolean

hidden

Type: boolean

hide

Changes the visible state to false

Type: () => void

id

Same as the HTML attribute.

Type: string

inert

Type: boolean

inlist

Type: any

inputMode

Hints at the type of data that might be entered by the user while editing the element or its contents

Type: | "none" | "search" | "text" | "tel" | "url" | "email" | "numeric" | "decimal"

is

Specify that a standard HTML element should behave like a defined custom built-in element

Type: string

itemID

Type: string

itemProp

Type: string

itemRef

Type: string

itemScope

Type: boolean

itemType

Type: string

key

Type: Key

lang

Type: string

nonce

Type: string

onAbort

Type: ReactEventHandler<any>

onAbortCapture

Type: ReactEventHandler<any>

onAnimationEnd

Type: AnimationEventHandler<any>

onAnimationEndCapture

Type: AnimationEventHandler<any>

onAnimationIteration

Type: AnimationEventHandler<any>

onAnimationIterationCapture

Type: AnimationEventHandler<any>

onAnimationStart

Type: AnimationEventHandler<any>

onAnimationStartCapture

Type: AnimationEventHandler<any>

onAuxClick

Type: MouseEventHandler<any>

onAuxClickCapture

Type: MouseEventHandler<any>

onBeforeInput

Type: FormEventHandler<any>

onBeforeInputCapture

Type: FormEventHandler<any>

onBeforeToggle

Type: ToggleEventHandler<any>

onBlur

Type: FocusEventHandler<any>

onBlurCapture

Type: FocusEventHandler<any>

onCanPlay

Type: ReactEventHandler<any>

onCanPlayCapture

Type: ReactEventHandler<any>

onCanPlayThrough

Type: ReactEventHandler<any>

onCanPlayThroughCapture

Type: ReactEventHandler<any>

onChange

Type: FormEventHandler<any>

onChangeCapture

Type: FormEventHandler<any>

onClick

Type: MouseEventHandler<any>

onClickCapture

Type: MouseEventHandler<any>

onCompositionEnd

Type: CompositionEventHandler<any>

onCompositionEndCapture

Type: CompositionEventHandler<any>

onCompositionStart

Type: CompositionEventHandler<any>

onCompositionStartCapture

Type: CompositionEventHandler<any>

onCompositionUpdate

Type: CompositionEventHandler<any>

onCompositionUpdateCapture

Type: CompositionEventHandler<any>

onContextMenu

Type: MouseEventHandler<any>

onContextMenuCapture

Type: MouseEventHandler<any>

onCopy

Type: ClipboardEventHandler<any>

onCopyCapture

Type: ClipboardEventHandler<any>

onCut

Type: ClipboardEventHandler<any>

onCutCapture

Type: ClipboardEventHandler<any>

onDoubleClick

Type: MouseEventHandler<any>

onDoubleClickCapture

Type: MouseEventHandler<any>

onDrag

Type: DragEventHandler<any>

onDragCapture

Type: DragEventHandler<any>

onDragEnd

Type: DragEventHandler<any>

onDragEndCapture

Type: DragEventHandler<any>

onDragEnter

Type: DragEventHandler<any>

onDragEnterCapture

Type: DragEventHandler<any>

onDragExit

Type: DragEventHandler<any>

onDragExitCapture

Type: DragEventHandler<any>

onDragLeave

Type: DragEventHandler<any>

onDragLeaveCapture

Type: DragEventHandler<any>

onDragOver

Type: DragEventHandler<any>

onDragOverCapture

Type: DragEventHandler<any>

onDragStart

Type: DragEventHandler<any>

onDragStartCapture

Type: DragEventHandler<any>

onDrop

Type: DragEventHandler<any>

onDropCapture

Type: DragEventHandler<any>

onDurationChange

Type: ReactEventHandler<any>

onDurationChangeCapture

Type: ReactEventHandler<any>

onEmptied

Type: ReactEventHandler<any>

onEmptiedCapture

Type: ReactEventHandler<any>

onEncrypted

Type: ReactEventHandler<any>

onEncryptedCapture

Type: ReactEventHandler<any>

onEnded

Type: ReactEventHandler<any>

onEndedCapture

Type: ReactEventHandler<any>

onError

Type: ReactEventHandler<any>

onErrorCapture

Type: ReactEventHandler<any>

onFocus

Type: FocusEventHandler<any>

onFocusCapture

Type: FocusEventHandler<any>

onGotPointerCapture

Type: PointerEventHandler<any>

onGotPointerCaptureCapture

Type: PointerEventHandler<any>

onInput

Type: FormEventHandler<any>

onInputCapture

Type: FormEventHandler<any>

onInvalid

Type: FormEventHandler<any>

onInvalidCapture

Type: FormEventHandler<any>

onKeyDown

Type: KeyboardEventHandler<any>

onKeyDownCapture

Type: KeyboardEventHandler<any>

onKeyPress

Type: KeyboardEventHandler<any>

onKeyPressCapture

Type: KeyboardEventHandler<any>

onKeyUp

Type: KeyboardEventHandler<any>

onKeyUpCapture

Type: KeyboardEventHandler<any>

onLoad

Type: ReactEventHandler<any>

onLoadCapture

Type: ReactEventHandler<any>

onLoadedData

Type: ReactEventHandler<any>

onLoadedDataCapture

Type: ReactEventHandler<any>

onLoadedMetadata

Type: ReactEventHandler<any>

onLoadedMetadataCapture

Type: ReactEventHandler<any>

onLoadStart

Type: ReactEventHandler<any>

onLoadStartCapture

Type: ReactEventHandler<any>

onLostPointerCapture

Type: PointerEventHandler<any>

onLostPointerCaptureCapture

Type: PointerEventHandler<any>

onMouseDown

Type: MouseEventHandler<any>

onMouseDownCapture

Type: MouseEventHandler<any>

onMouseEnter

Type: MouseEventHandler<any>

onMouseLeave

Type: MouseEventHandler<any>

onMouseMove

Type: MouseEventHandler<any>

onMouseMoveCapture

Type: MouseEventHandler<any>

onMouseOut

Type: MouseEventHandler<any>

onMouseOutCapture

Type: MouseEventHandler<any>

onMouseOver

Type: MouseEventHandler<any>

onMouseOverCapture

Type: MouseEventHandler<any>

onMouseUp

Type: MouseEventHandler<any>

onMouseUpCapture

Type: MouseEventHandler<any>

onPaste

Type: ClipboardEventHandler<any>

onPasteCapture

Type: ClipboardEventHandler<any>

onPause

Type: ReactEventHandler<any>

onPauseCapture

Type: ReactEventHandler<any>

onPlay

Type: ReactEventHandler<any>

onPlayCapture

Type: ReactEventHandler<any>

onPlaying

Type: ReactEventHandler<any>

onPlayingCapture

Type: ReactEventHandler<any>

onPointerCancel

Type: PointerEventHandler<any>

onPointerCancelCapture

Type: PointerEventHandler<any>

onPointerDown

Type: PointerEventHandler<any>

onPointerDownCapture

Type: PointerEventHandler<any>

onPointerEnter

Type: PointerEventHandler<any>

onPointerLeave

Type: PointerEventHandler<any>

onPointerMove

Type: PointerEventHandler<any>

onPointerMoveCapture

Type: PointerEventHandler<any>

onPointerOut

Type: PointerEventHandler<any>

onPointerOutCapture

Type: PointerEventHandler<any>

onPointerOver

Type: PointerEventHandler<any>

onPointerOverCapture

Type: PointerEventHandler<any>

onPointerUp

Type: PointerEventHandler<any>

onPointerUpCapture

Type: PointerEventHandler<any>

onProgress

Type: ReactEventHandler<any>

onProgressCapture

Type: ReactEventHandler<any>

onRateChange

Type: ReactEventHandler<any>

onRateChangeCapture

Type: ReactEventHandler<any>

onReset

Type: FormEventHandler<any>

onResetCapture

Type: FormEventHandler<any>

onResize

Type: ReactEventHandler<any>

onResizeCapture

Type: ReactEventHandler<any>

onScroll

Type: UIEventHandler<any>

onScrollCapture

Type: UIEventHandler<any>

onSeeked

Type: ReactEventHandler<any>

onSeekedCapture

Type: ReactEventHandler<any>

onSeeking

Type: ReactEventHandler<any>

onSeekingCapture

Type: ReactEventHandler<any>

onSelect

Type: ReactEventHandler<any>

onSelectCapture

Type: ReactEventHandler<any>

onStalled

Type: ReactEventHandler<any>

onStalledCapture

Type: ReactEventHandler<any>

onSubmit

Type: FormEventHandler<any>

onSubmitCapture

Type: FormEventHandler<any>

onSuspend

Type: ReactEventHandler<any>

onSuspendCapture

Type: ReactEventHandler<any>

onTimeUpdate

Type: ReactEventHandler<any>

onTimeUpdateCapture

Type: ReactEventHandler<any>

onToggle

Type: ToggleEventHandler<any>

onTouchCancel

Type: TouchEventHandler<any>

onTouchCancelCapture

Type: TouchEventHandler<any>

onTouchEnd

Type: TouchEventHandler<any>

onTouchEndCapture

Type: TouchEventHandler<any>

onTouchMove

Type: TouchEventHandler<any>

onTouchMoveCapture

Type: TouchEventHandler<any>

onTouchStart

Type: TouchEventHandler<any>

onTouchStartCapture

Type: TouchEventHandler<any>

onTransitionCancel

Type: TransitionEventHandler<any>

onTransitionCancelCapture

Type: TransitionEventHandler<any>

onTransitionEnd

Type: TransitionEventHandler<any>

onTransitionEndCapture

Type: TransitionEventHandler<any>

onTransitionRun

Type: TransitionEventHandler<any>

onTransitionRunCapture

Type: TransitionEventHandler<any>

onTransitionStart

Type: TransitionEventHandler<any>

onTransitionStartCapture

Type: TransitionEventHandler<any>

onVolumeChange

Type: ReactEventHandler<any>

onVolumeChangeCapture

Type: ReactEventHandler<any>

onWaiting

Type: ReactEventHandler<any>

onWaitingCapture

Type: ReactEventHandler<any>

onWheel

Type: WheelEventHandler<any>

onWheelCapture

Type: WheelEventHandler<any>

orientation

Defines the orientation of the composite widget. If the composite has a single row or column (one-dimensional), the orientation value determines which arrow keys can be used to move focus:

undefined: all arrow keys work.
horizontal: only left and right arrow keys work.
vertical: only up and down arrow keys work.

It doesn't have any effect on two-dimensional composites.

Type: Orientation
Default: undefined

placement

Actual placement.

Type: Placement

popover

Type: "" | "auto" | "manual"

popoverTarget

Type: string

popoverTargetAction

Type: "toggle" | "hide" | "show"

prefix

Type: string

property

Type: string

radioGroup

Type: string

ref

Allows getting a ref to the component instance. Once the component unmounts, React will set ref.current to null (or call the ref with null if you passed a callback ref).

Type: | ((instance: any) => void | (() => VoidOrUndefinedOnly)) | RefObject<any>

rel

Type: string

resource

Type: string

results

Type: number

rev

Type: string

role

Type: AriaRole

security

Type: string

slot

Type: string

spellCheck

Type: Booleanish

style

Type: CSSProperties

suppressContentEditableWarning

Type: boolean

suppressHydrationWarning

Type: boolean

tabIndex

Type: number

title

Type: string

translate

Type: "yes" | "no"

typeof

Type: string

unselectable

Type: "off" | "on"

unstable_arrowStyles

Arrow styles.

Type: CSSProperties

unstable_clickOnEnter

Whether or not trigger click on pressing Enter.

Type: boolean

unstable_clickOnSpace

Whether or not trigger click on pressing Space.

Type: boolean

unstable_hasActiveWidget

Type: boolean

unstable_idCountRef

Type: MutableRefObject<number>

unstable_moves

Stores the number of moves that have been performed by calling move, next, previous, up, down, first or last.

Type: number
Default: 0

unstable_popoverStyles

Popover styles.

Type: CSSProperties

unstable_system

Options passed to reakit-system-*

Type: any

unstable_virtual

If enabled, the composite element will act as an aria-activedescendant container instead of roving tabindex. DOM focus will remain on the composite while its items receive virtual focus.

Type: boolean

visible

Whether it's visible or not.

Type: boolean

vocab

Type: string

wrapElement

Function returned by the hook to wrap the element to which html props will be passed.

Type: (element: ReactNode) => ReactNode

MenuItemCheckbox

down RequiredRequired

Moves focus to the item below.

Type: (unstable_allTheWay?: boolean | undefined) => void

first RequiredRequired

Moves focus to the first item.

Type: () => void

items RequiredRequired

Lists all the composite items with their id, DOM ref, disabled state and groupId if any. This state is automatically updated when registerItem and unregisterItem are called.

Type: Item[]

last RequiredRequired

Moves focus to the last item.

Type: () => void

move RequiredRequired

Moves focus to a given item ID.

Type: (id: string | null) => void

name RequiredRequired

MenuItemCheckbox's name as in menu.values.

Type: string

next RequiredRequired

Moves focus to the next item.

Type: (unstable_allTheWay?: boolean | undefined) => void

previous RequiredRequired

Moves focus to the previous item.

Type: (unstable_allTheWay?: boolean | undefined) => void

registerItem RequiredRequired

Registers a composite item.

Type: (item: Item) => void

setCurrentId RequiredRequired

Sets currentId. This is different from composite.move as this only updates the currentId state without moving focus. When the composite widget gets focused by the user, the item referred by the currentId state will get focus.

Type: Dispatch<SetStateAction<string | null | undefined>>

unregisterItem RequiredRequired

Unregisters a composite item.

Type: (id: string) => void

unstable_setValue RequiredRequired

Updates checkboxes and radios values within the menu.

Type: (name: string, value?: any) => void

unstable_values RequiredRequired

Stores the values of radios and checkboxes within the menu.

Type: Record<string, any>

up RequiredRequired

Moves focus to the item above.

Type: (unstable_allTheWay?: boolean | undefined) => void

as

Type: any

element

Overrides the default element name to apply unique styles with the Customization Provider

Type: string
Default: MENU_ITEM_CHECKBOX

href

Pass href prop to render an anchor element.

Type: string

variant

Type: MenuItemVariant

Inherited props

Paste components will often extend native HTML elements and as a result will inherit or extend their available properties. Below is a list of the props this component has inherited and are also available to use.

about

Type: string

accept

Type: string

accessKey

Type: string

alt

Type: string

aria-activedescendant

Identifies the currently active element when DOM focus is on a composite widget, textbox, group, or application.

Type: string

aria-atomic

Indicates whether assistive technologies will present all, or only parts of, the changed region based on the change notifications defined by the aria-relevant attribute.

Type: Booleanish

aria-autocomplete

Indicates whether inputting text could trigger display of one or more predictions of the user's intended value for an input and specifies how predictions would be presented if they are made.

Type: "none" | "list" | "inline" | "both"

aria-braillelabel

Defines a string value that labels the current element, which is intended to be converted into Braille.

Type: string

aria-brailleroledescription

Defines a human-readable, author-localized abbreviated description for the role of an element, which is intended to be converted into Braille.

Type: string

aria-busy

Type: Booleanish

aria-checked

Indicates the current "checked" state of checkboxes, radio buttons, and other widgets.

Type: boolean | "true" | "false" | "mixed"

aria-colcount

Defines the total number of columns in a table, grid, or treegrid.

Type: number

aria-colindex

Defines an element's column index or position with respect to the total number of columns within a table, grid, or treegrid.

Type: number

aria-colindextext

Defines a human readable text alternative of aria-colindex.

Type: string

aria-colspan

Defines the number of columns spanned by a cell or gridcell within a table, grid, or treegrid.

Type: number

aria-controls

Identifies the element (or elements) whose contents or presence are controlled by the current element.

Type: string

aria-current

Indicates the element that represents the current item within a container or set of related elements.

Type: | boolean | "true" | "false" | "page" | "step" | "location" | "date" | "time"

aria-describedby

Identifies the element (or elements) that describes the object.

Type: string

aria-description

Defines a string value that describes or annotates the current element.

Type: string

aria-details

Identifies the element that provides a detailed, extended description for the object.

Type: string

aria-disabled

Indicates that the element is perceivable but disabled, so it is not editable or otherwise operable.

Type: Booleanish

aria-dropeffect

Indicates what functions can be performed when a dragged object is released on the drop target.

Type: "move" | "none" | "link" | "copy" | "execute" | "popup"

aria-errormessage

Identifies the element that provides an error message for the object.

Type: string

aria-expanded

Indicates whether the element, or another grouping element it controls, is currently expanded or collapsed.

Type: Booleanish

aria-flowto

Identifies the next element (or elements) in an alternate reading order of content which, at the user's discretion, allows assistive technology to override the general default of reading in document source order.

Type: string

aria-grabbed

Indicates an element's "grabbed" state in a drag-and-drop operation.

Type: Booleanish

aria-haspopup

Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by an element.

Type: | boolean | "true" | "false" | "dialog" | "grid" | "listbox" | "menu" | "tree"

aria-hidden

Indicates whether the element is exposed to an accessibility API.

Type: Booleanish

aria-invalid

Indicates the entered value does not conform to the format expected by the application.

Type: boolean | "true" | "false" | "grammar" | "spelling"

aria-keyshortcuts

Indicates keyboard shortcuts that an author has implemented to activate or give focus to an element.

Type: string

aria-label

Defines a string value that labels the current element.

Type: string

aria-labelledby

Identifies the element (or elements) that labels the current element.

Type: string

aria-level

Defines the hierarchical level of an element within a structure.

Type: number

aria-live

Indicates that an element will be updated, and describes the types of updates the user agents, assistive technologies, and user can expect from the live region.

Type: "off" | "assertive" | "polite"

aria-modal

Indicates whether an element is modal when displayed.

Type: Booleanish

aria-multiline

Indicates whether a text box accepts multiple lines of input or only a single line.

Type: Booleanish

aria-multiselectable

Indicates that the user may select more than one item from the current selectable descendants.

Type: Booleanish

aria-orientation

Indicates whether the element's orientation is horizontal, vertical, or unknown/ambiguous.

Type: "horizontal" | "vertical"

aria-owns

Identifies an element (or elements) in order to define a visual, functional, or contextual parent/child relationship between DOM elements where the DOM hierarchy cannot be used to represent the relationship.

Type: string

aria-placeholder

Defines a short hint (a word or short phrase) intended to aid the user with data entry when the control has no value. A hint could be a sample value or a brief description of the expected format.

Type: string

aria-posinset

Defines an element's number or position in the current set of listitems or treeitems. Not required if all elements in the set are present in the DOM.

Type: number

aria-pressed

Indicates the current "pressed" state of toggle buttons.

Type: boolean | "true" | "false" | "mixed"

aria-readonly

Indicates that the element is not editable, but is otherwise operable.

Type: Booleanish

aria-relevant

Indicates what notifications the user agent will trigger when the accessibility tree within a live region is modified.

Type: | "text" | "additions" | "additions removals" | "additions text" | "all" | "removals" | "removals additions" | "removals text" | "text additions" | "text removals"

aria-required

Indicates that user input is required on the element before a form may be submitted.

Type: Booleanish

aria-roledescription

Defines a human-readable, author-localized description for the role of an element.

Type: string

aria-rowcount

Defines the total number of rows in a table, grid, or treegrid.

Type: number

aria-rowindex

Defines an element's row index or position with respect to the total number of rows within a table, grid, or treegrid.

Type: number

aria-rowindextext

Defines a human readable text alternative of aria-rowindex.

Type: string

aria-rowspan

Defines the number of rows spanned by a cell or gridcell within a table, grid, or treegrid.

Type: number

aria-selected

Indicates the current "selected" state of various widgets.

Type: Booleanish

aria-setsize

Defines the number of items in the current set of listitems or treeitems. Not required if all elements in the set are present in the DOM.

Type: number

aria-sort

Indicates if items in a table or grid are sorted in ascending or descending order.

Type: "none" | "ascending" | "descending" | "other"

aria-valuemax

Defines the maximum allowed value for a range widget.

Type: number

aria-valuemin

Defines the minimum allowed value for a range widget.

Type: number

aria-valuenow

Defines the current value for a range widget.

Type: number

aria-valuetext

Defines the human readable text alternative of aria-valuenow for a range widget.

Type: string

autoCapitalize

Type: | (string & {}) | "off" | "none" | "on" | "sentences" | "words" | "characters"

autoComplete

Type: HTMLInputAutoCompleteAttribute

autoCorrect

Type: string

autoFocus

Type: boolean

autoSave

Type: string

baseId

ID that will serve as a base for all the items IDs.

Type: string

capture

Type: boolean | "user" | "environment"

checked

Checkbox's checked state. If present, it's used instead of state.

Type: boolean

className

Type: string

color

Type: string

content

Type: string

contentEditable

Type: Booleanish | "inherit" | "plaintext-only"

contextMenu

Type: string

currentId

The current focused item id.

undefined will automatically focus the first enabled composite item.
null will focus the base composite element and users will be able to navigate out of it using arrow keys.
If currentId is initially set to null, the base composite element itself will have focus and users will be able to navigate to it using arrow keys.

Type: string
Default: undefined

dangerouslySetInnerHTML

Type: { __html: string | TrustedHTML }

datatype

Type: string

defaultChecked

Type: boolean

defaultValue

Type: string | number | readonly string[]

dir

Type: string

disabled

Same as the HTML attribute.

Type: boolean

draggable

Type: Booleanish

enterKeyHint

Type: | "next" | "previous" | "enter" | "done" | "go" | "search" | "send"

focusable

When an element is disabled, it may still be focusable. It works similarly to readOnly on form elements. In this case, only aria-disabled will be set.

Type: boolean

form

Type: string

formAction

Type: string | ((formData: FormData) => void | Promise<void>)

formEncType

Type: string

formMethod

Type: string

formNoValidate

Type: boolean

formTarget

Type: string

height

Type: string | number

hidden

Type: boolean

hide

Changes the visible state to false

Type: () => void

id

Same as the HTML attribute.

Type: string

inert

Type: boolean

inlist

Type: any

inputMode

Hints at the type of data that might be entered by the user while editing the element or its contents

Type: | "none" | "search" | "text" | "tel" | "url" | "email" | "numeric" | "decimal"

is

Specify that a standard HTML element should behave like a defined custom built-in element

Type: string

itemID

Type: string

itemProp

Type: string

itemRef

Type: string

itemScope

Type: boolean

itemType

Type: string

key

Type: Key

lang

Type: string

list

Type: string

max

Type: string | number

maxLength

Type: number

min

Type: string | number

minLength

Type: number

multiple

Type: boolean

nonce

Type: string

onAbort

Type: ReactEventHandler<any>

onAbortCapture

Type: ReactEventHandler<any>

onAnimationEnd

Type: AnimationEventHandler<any>

onAnimationEndCapture

Type: AnimationEventHandler<any>

onAnimationIteration

Type: AnimationEventHandler<any>

onAnimationIterationCapture

Type: AnimationEventHandler<any>

onAnimationStart

Type: AnimationEventHandler<any>

onAnimationStartCapture

Type: AnimationEventHandler<any>

onAuxClick

Type: MouseEventHandler<any>

onAuxClickCapture

Type: MouseEventHandler<any>

onBeforeInput

Type: FormEventHandler<any>

onBeforeInputCapture

Type: FormEventHandler<any>

onBeforeToggle

Type: ToggleEventHandler<any>

onBlur

Type: FocusEventHandler<any>

onBlurCapture

Type: FocusEventHandler<any>

onCanPlay

Type: ReactEventHandler<any>

onCanPlayCapture

Type: ReactEventHandler<any>

onCanPlayThrough

Type: ReactEventHandler<any>

onCanPlayThroughCapture

Type: ReactEventHandler<any>

onChange

Type: FormEventHandler<any> & ChangeEventHandler<any>

onChangeCapture

Type: FormEventHandler<any>

onClick

Type: MouseEventHandler<any>

onClickCapture

Type: MouseEventHandler<any>

onCompositionEnd

Type: CompositionEventHandler<any>

onCompositionEndCapture

Type: CompositionEventHandler<any>

onCompositionStart

Type: CompositionEventHandler<any>

onCompositionStartCapture

Type: CompositionEventHandler<any>

onCompositionUpdate

Type: CompositionEventHandler<any>

onCompositionUpdateCapture

Type: CompositionEventHandler<any>

onContextMenu

Type: MouseEventHandler<any>

onContextMenuCapture

Type: MouseEventHandler<any>

onCopy

Type: ClipboardEventHandler<any>

onCopyCapture

Type: ClipboardEventHandler<any>

onCut

Type: ClipboardEventHandler<any>

onCutCapture

Type: ClipboardEventHandler<any>

onDoubleClick

Type: MouseEventHandler<any>

onDoubleClickCapture

Type: MouseEventHandler<any>

onDrag

Type: DragEventHandler<any>

onDragCapture

Type: DragEventHandler<any>

onDragEnd

Type: DragEventHandler<any>

onDragEndCapture

Type: DragEventHandler<any>

onDragEnter

Type: DragEventHandler<any>

onDragEnterCapture

Type: DragEventHandler<any>

onDragExit

Type: DragEventHandler<any>

onDragExitCapture

Type: DragEventHandler<any>

onDragLeave

Type: DragEventHandler<any>

onDragLeaveCapture

Type: DragEventHandler<any>

onDragOver

Type: DragEventHandler<any>

onDragOverCapture

Type: DragEventHandler<any>

onDragStart

Type: DragEventHandler<any>

onDragStartCapture

Type: DragEventHandler<any>

onDrop

Type: DragEventHandler<any>

onDropCapture

Type: DragEventHandler<any>

onDurationChange

Type: ReactEventHandler<any>

onDurationChangeCapture

Type: ReactEventHandler<any>

onEmptied

Type: ReactEventHandler<any>

onEmptiedCapture

Type: ReactEventHandler<any>

onEncrypted

Type: ReactEventHandler<any>

onEncryptedCapture

Type: ReactEventHandler<any>

onEnded

Type: ReactEventHandler<any>

onEndedCapture

Type: ReactEventHandler<any>

onError

Type: ReactEventHandler<any>

onErrorCapture

Type: ReactEventHandler<any>

onFocus

Type: FocusEventHandler<any>

onFocusCapture

Type: FocusEventHandler<any>

onGotPointerCapture

Type: PointerEventHandler<any>

onGotPointerCaptureCapture

Type: PointerEventHandler<any>

onInput

Type: FormEventHandler<any>

onInputCapture

Type: FormEventHandler<any>

onInvalid

Type: FormEventHandler<any>

onInvalidCapture

Type: FormEventHandler<any>

onKeyDown

Type: KeyboardEventHandler<any>

onKeyDownCapture

Type: KeyboardEventHandler<any>

onKeyPress

Type: KeyboardEventHandler<any>

onKeyPressCapture

Type: KeyboardEventHandler<any>

onKeyUp

Type: KeyboardEventHandler<any>

onKeyUpCapture

Type: KeyboardEventHandler<any>

onLoad

Type: ReactEventHandler<any>

onLoadCapture

Type: ReactEventHandler<any>

onLoadedData

Type: ReactEventHandler<any>

onLoadedDataCapture

Type: ReactEventHandler<any>

onLoadedMetadata

Type: ReactEventHandler<any>

onLoadedMetadataCapture

Type: ReactEventHandler<any>

onLoadStart

Type: ReactEventHandler<any>

onLoadStartCapture

Type: ReactEventHandler<any>

onLostPointerCapture

Type: PointerEventHandler<any>

onLostPointerCaptureCapture

Type: PointerEventHandler<any>

onMouseDown

Type: MouseEventHandler<any>

onMouseDownCapture

Type: MouseEventHandler<any>

onMouseEnter

Type: MouseEventHandler<any>

onMouseLeave

Type: MouseEventHandler<any>

onMouseMove

Type: MouseEventHandler<any>

onMouseMoveCapture

Type: MouseEventHandler<any>

onMouseOut

Type: MouseEventHandler<any>

onMouseOutCapture

Type: MouseEventHandler<any>

onMouseOver

Type: MouseEventHandler<any>

onMouseOverCapture

Type: MouseEventHandler<any>

onMouseUp

Type: MouseEventHandler<any>

onMouseUpCapture

Type: MouseEventHandler<any>

onPaste

Type: ClipboardEventHandler<any>

onPasteCapture

Type: ClipboardEventHandler<any>

onPause

Type: ReactEventHandler<any>

onPauseCapture

Type: ReactEventHandler<any>

onPlay

Type: ReactEventHandler<any>

onPlayCapture

Type: ReactEventHandler<any>

onPlaying

Type: ReactEventHandler<any>

onPlayingCapture

Type: ReactEventHandler<any>

onPointerCancel

Type: PointerEventHandler<any>

onPointerCancelCapture

Type: PointerEventHandler<any>

onPointerDown

Type: PointerEventHandler<any>

onPointerDownCapture

Type: PointerEventHandler<any>

onPointerEnter

Type: PointerEventHandler<any>

onPointerLeave

Type: PointerEventHandler<any>

onPointerMove

Type: PointerEventHandler<any>

onPointerMoveCapture

Type: PointerEventHandler<any>

onPointerOut

Type: PointerEventHandler<any>

onPointerOutCapture

Type: PointerEventHandler<any>

onPointerOver

Type: PointerEventHandler<any>

onPointerOverCapture

Type: PointerEventHandler<any>

onPointerUp

Type: PointerEventHandler<any>

onPointerUpCapture

Type: PointerEventHandler<any>

onProgress

Type: ReactEventHandler<any>

onProgressCapture

Type: ReactEventHandler<any>

onRateChange

Type: ReactEventHandler<any>

onRateChangeCapture

Type: ReactEventHandler<any>

onReset

Type: FormEventHandler<any>

onResetCapture

Type: FormEventHandler<any>

onResize

Type: ReactEventHandler<any>

onResizeCapture

Type: ReactEventHandler<any>

onScroll

Type: UIEventHandler<any>

onScrollCapture

Type: UIEventHandler<any>

onSeeked

Type: ReactEventHandler<any>

onSeekedCapture

Type: ReactEventHandler<any>

onSeeking

Type: ReactEventHandler<any>

onSeekingCapture

Type: ReactEventHandler<any>

onSelect

Type: ReactEventHandler<any>

onSelectCapture

Type: ReactEventHandler<any>

onStalled

Type: ReactEventHandler<any>

onStalledCapture

Type: ReactEventHandler<any>

onSubmit

Type: FormEventHandler<any>

onSubmitCapture

Type: FormEventHandler<any>

onSuspend

Type: ReactEventHandler<any>

onSuspendCapture

Type: ReactEventHandler<any>

onTimeUpdate

Type: ReactEventHandler<any>

onTimeUpdateCapture

Type: ReactEventHandler<any>

onToggle

Type: ToggleEventHandler<any>

onTouchCancel

Type: TouchEventHandler<any>

onTouchCancelCapture

Type: TouchEventHandler<any>

onTouchEnd

Type: TouchEventHandler<any>

onTouchEndCapture

Type: TouchEventHandler<any>

onTouchMove

Type: TouchEventHandler<any>

onTouchMoveCapture

Type: TouchEventHandler<any>

onTouchStart

Type: TouchEventHandler<any>

onTouchStartCapture

Type: TouchEventHandler<any>

onTransitionCancel

Type: TransitionEventHandler<any>

onTransitionCancelCapture

Type: TransitionEventHandler<any>

onTransitionEnd

Type: TransitionEventHandler<any>

onTransitionEndCapture

Type: TransitionEventHandler<any>

onTransitionRun

Type: TransitionEventHandler<any>

onTransitionRunCapture

Type: TransitionEventHandler<any>

onTransitionStart

Type: TransitionEventHandler<any>

onTransitionStartCapture

Type: TransitionEventHandler<any>

onVolumeChange

Type: ReactEventHandler<any>

onVolumeChangeCapture

Type: ReactEventHandler<any>

onWaiting

Type: ReactEventHandler<any>

onWaitingCapture

Type: ReactEventHandler<any>

onWheel

Type: WheelEventHandler<any>

onWheelCapture

Type: WheelEventHandler<any>

orientation

Defines the orientation of the composite widget. If the composite has a single row or column (one-dimensional), the orientation value determines which arrow keys can be used to move focus:

undefined: all arrow keys work.
horizontal: only left and right arrow keys work.
vertical: only up and down arrow keys work.

It doesn't have any effect on two-dimensional composites.

Type: Orientation
Default: undefined

pattern

Type: string

placeholder

Type: string

placement

Actual placement.

Type: Placement

popover

Type: "" | "auto" | "manual"

popoverTarget

Type: string

popoverTargetAction

Type: "toggle" | "hide" | "show"

prefix

Type: string

property

Type: string

radioGroup

Type: string

readOnly

Type: boolean

ref

Allows getting a ref to the component instance. Once the component unmounts, React will set ref.current to null (or call the ref with null if you passed a callback ref).

Type: | ((instance: any) => void | (() => VoidOrUndefinedOnly)) | RefObject<any>

rel

Type: string

required

Type: boolean

resource

Type: string

results

Type: number

rev

Type: string

role

Type: AriaRole

security

Type: string

setState

Sets state.

Type: Dispatch< SetStateAction<boolean | (string | number)[] | "indeterminate"> >

size

Type: number

slot

Type: string

spellCheck

Type: Booleanish

src

Type: string

state

Stores the state of the checkbox. If checkboxes that share this state have defined a value prop, it's going to be an array.

Type: boolean | (string | number)[] | "indeterminate"

step

Type: string | number

style

Type: CSSProperties

suppressContentEditableWarning

Type: boolean

suppressHydrationWarning

Type: boolean

tabIndex

Type: number

title

Type: string

translate

Type: "yes" | "no"

type

Type: HTMLInputTypeAttribute

typeof

Type: string

unselectable

Type: "off" | "on"

unstable_arrowStyles

Arrow styles.

Type: CSSProperties

unstable_clickOnEnter

Whether or not trigger click on pressing Enter.

Type: boolean

unstable_clickOnSpace

Whether or not trigger click on pressing Space.

Type: boolean

unstable_hasActiveWidget

Type: boolean

unstable_idCountRef

Type: MutableRefObject<number>

unstable_moves

Stores the number of moves that have been performed by calling move, next, previous, up, down, first or last.

Type: number
Default: 0

unstable_popoverStyles

Popover styles.

Type: CSSProperties

unstable_system

Options passed to reakit-system-*

Type: any

unstable_virtual

If enabled, the composite element will act as an aria-activedescendant container instead of roving tabindex. DOM focus will remain on the composite while its items receive virtual focus.

Type: boolean

value

Checkbox's value is going to be used when multiple checkboxes share the same state. Checking a checkbox with value will add it to the state array.

Type: (string | number) & (string | number | readonly string[])

visible

Whether it's visible or not.

Type: boolean

vocab

Type: string

width

Type: string | number

wrapElement

Function returned by the hook to wrap the element to which html props will be passed.

Type: (element: ReactNode) => ReactNode

MenuItemRadio

down RequiredRequired

Moves focus to the item below.

Type: (unstable_allTheWay?: boolean | undefined) => void

first RequiredRequired

Moves focus to the first item.

Type: () => void

items RequiredRequired

Lists all the composite items with their id, DOM ref, disabled state and groupId if any. This state is automatically updated when registerItem and unregisterItem are called.

Type: Item[]

last RequiredRequired

Moves focus to the last item.

Type: () => void

move RequiredRequired

Moves focus to a given item ID.

Type: (id: string | null) => void

name RequiredRequired

MenuItemRadio's name as in menu.values.

Type: string

next RequiredRequired

Moves focus to the next item.

Type: (unstable_allTheWay?: boolean | undefined) => void

previous RequiredRequired

Moves focus to the previous item.

Type: (unstable_allTheWay?: boolean | undefined) => void

registerItem RequiredRequired

Registers a composite item.

Type: (item: Item) => void

setCurrentId RequiredRequired

Sets currentId. This is different from composite.move as this only updates the currentId state without moving focus. When the composite widget gets focused by the user, the item referred by the currentId state will get focus.

Type: Dispatch<SetStateAction<string | null | undefined>>

unregisterItem RequiredRequired

Unregisters a composite item.

Type: (id: string) => void

unstable_setValue RequiredRequired

Updates checkboxes and radios values within the menu.

Type: (name: string, value?: any) => void

unstable_values RequiredRequired

Stores the values of radios and checkboxes within the menu.

Type: Record<string, any>

up RequiredRequired

Moves focus to the item above.

Type: (unstable_allTheWay?: boolean | undefined) => void

value RequiredRequired

Same as the value attribute.

Type: | string | number | (string & readonly string[]) | (number & readonly string[])

as

Type: any

element

Overrides the default element name to apply unique styles with the Customization Provider

Type: string
Default: MENU_ITEM_CHECKBOX

href

Pass href prop to render an anchor element.

Type: string

variant

Type: MenuItemVariant

Inherited props

Paste components will often extend native HTML elements and as a result will inherit or extend their available properties. Below is a list of the props this component has inherited and are also available to use.

about

Type: string

accept

Type: string

accessKey

Type: string

alt

Type: string

aria-activedescendant

Identifies the currently active element when DOM focus is on a composite widget, textbox, group, or application.

Type: string

aria-atomic

Indicates whether assistive technologies will present all, or only parts of, the changed region based on the change notifications defined by the aria-relevant attribute.

Type: Booleanish

aria-autocomplete

Indicates whether inputting text could trigger display of one or more predictions of the user's intended value for an input and specifies how predictions would be presented if they are made.

Type: "none" | "list" | "inline" | "both"

aria-braillelabel

Defines a string value that labels the current element, which is intended to be converted into Braille.

Type: string

aria-brailleroledescription

Defines a human-readable, author-localized abbreviated description for the role of an element, which is intended to be converted into Braille.

Type: string

aria-busy

Type: Booleanish

aria-checked

Indicates the current "checked" state of checkboxes, radio buttons, and other widgets.

Type: boolean | "true" | "false" | "mixed"

aria-colcount

Defines the total number of columns in a table, grid, or treegrid.

Type: number

aria-colindex

Defines an element's column index or position with respect to the total number of columns within a table, grid, or treegrid.

Type: number

aria-colindextext

Defines a human readable text alternative of aria-colindex.

Type: string

aria-colspan

Defines the number of columns spanned by a cell or gridcell within a table, grid, or treegrid.

Type: number

aria-controls

Identifies the element (or elements) whose contents or presence are controlled by the current element.

Type: string

aria-current

Indicates the element that represents the current item within a container or set of related elements.

Type: | boolean | "true" | "false" | "page" | "step" | "location" | "date" | "time"

aria-describedby

Identifies the element (or elements) that describes the object.

Type: string

aria-description

Defines a string value that describes or annotates the current element.

Type: string

aria-details

Identifies the element that provides a detailed, extended description for the object.

Type: string

aria-disabled

Indicates that the element is perceivable but disabled, so it is not editable or otherwise operable.

Type: Booleanish

aria-dropeffect

Indicates what functions can be performed when a dragged object is released on the drop target.

Type: "move" | "none" | "link" | "copy" | "execute" | "popup"

aria-errormessage

Identifies the element that provides an error message for the object.

Type: string

aria-expanded

Indicates whether the element, or another grouping element it controls, is currently expanded or collapsed.

Type: Booleanish

aria-flowto

Identifies the next element (or elements) in an alternate reading order of content which, at the user's discretion, allows assistive technology to override the general default of reading in document source order.

Type: string

aria-grabbed

Indicates an element's "grabbed" state in a drag-and-drop operation.

Type: Booleanish

aria-haspopup

Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by an element.

Type: | boolean | "true" | "false" | "dialog" | "grid" | "listbox" | "menu" | "tree"

aria-hidden

Indicates whether the element is exposed to an accessibility API.

Type: Booleanish

aria-invalid

Indicates the entered value does not conform to the format expected by the application.

Type: boolean | "true" | "false" | "grammar" | "spelling"

aria-keyshortcuts

Indicates keyboard shortcuts that an author has implemented to activate or give focus to an element.

Type: string

aria-label

Defines a string value that labels the current element.

Type: string

aria-labelledby

Identifies the element (or elements) that labels the current element.

Type: string

aria-level

Defines the hierarchical level of an element within a structure.

Type: number

aria-live

Indicates that an element will be updated, and describes the types of updates the user agents, assistive technologies, and user can expect from the live region.

Type: "off" | "assertive" | "polite"

aria-modal

Indicates whether an element is modal when displayed.

Type: Booleanish

aria-multiline

Indicates whether a text box accepts multiple lines of input or only a single line.

Type: Booleanish

aria-multiselectable

Indicates that the user may select more than one item from the current selectable descendants.

Type: Booleanish

aria-orientation

Indicates whether the element's orientation is horizontal, vertical, or unknown/ambiguous.

Type: "horizontal" | "vertical"

aria-owns

Identifies an element (or elements) in order to define a visual, functional, or contextual parent/child relationship between DOM elements where the DOM hierarchy cannot be used to represent the relationship.

Type: string

aria-placeholder

Defines a short hint (a word or short phrase) intended to aid the user with data entry when the control has no value. A hint could be a sample value or a brief description of the expected format.

Type: string

aria-posinset

Defines an element's number or position in the current set of listitems or treeitems. Not required if all elements in the set are present in the DOM.

Type: number

aria-pressed

Indicates the current "pressed" state of toggle buttons.

Type: boolean | "true" | "false" | "mixed"

aria-readonly

Indicates that the element is not editable, but is otherwise operable.

Type: Booleanish

aria-relevant

Indicates what notifications the user agent will trigger when the accessibility tree within a live region is modified.

Type: | "text" | "additions" | "additions removals" | "additions text" | "all" | "removals" | "removals additions" | "removals text" | "text additions" | "text removals"

aria-required

Indicates that user input is required on the element before a form may be submitted.

Type: Booleanish

aria-roledescription

Defines a human-readable, author-localized description for the role of an element.

Type: string

aria-rowcount

Defines the total number of rows in a table, grid, or treegrid.

Type: number

aria-rowindex

Defines an element's row index or position with respect to the total number of rows within a table, grid, or treegrid.

Type: number

aria-rowindextext

Defines a human readable text alternative of aria-rowindex.

Type: string

aria-rowspan

Defines the number of rows spanned by a cell or gridcell within a table, grid, or treegrid.

Type: number

aria-selected

Indicates the current "selected" state of various widgets.

Type: Booleanish

aria-setsize

Defines the number of items in the current set of listitems or treeitems. Not required if all elements in the set are present in the DOM.

Type: number

aria-sort

Indicates if items in a table or grid are sorted in ascending or descending order.

Type: "none" | "ascending" | "descending" | "other"

aria-valuemax

Defines the maximum allowed value for a range widget.

Type: number

aria-valuemin

Defines the minimum allowed value for a range widget.

Type: number

aria-valuenow

Defines the current value for a range widget.

Type: number

aria-valuetext

Defines the human readable text alternative of aria-valuenow for a range widget.

Type: string

autoCapitalize

Type: | (string & {}) | "off" | "none" | "on" | "sentences" | "words" | "characters"

autoComplete

Type: HTMLInputAutoCompleteAttribute

autoCorrect

Type: string

autoFocus

Type: boolean

autoSave

Type: string

baseId

ID that will serve as a base for all the items IDs.

Type: string

capture

Type: boolean | "user" | "environment"

checked

Same as the checked attribute.

Type: boolean

className

Type: string

color

Type: string

content

Type: string

contentEditable

Type: Booleanish | "inherit" | "plaintext-only"

contextMenu

Type: string

currentId

The current focused item id.

undefined will automatically focus the first enabled composite item.
null will focus the base composite element and users will be able to navigate out of it using arrow keys.
If currentId is initially set to null, the base composite element itself will have focus and users will be able to navigate to it using arrow keys.

Type: string
Default: undefined

dangerouslySetInnerHTML

Type: { __html: string | TrustedHTML }

datatype

Type: string

defaultChecked

Type: boolean

defaultValue

Type: string | number | readonly string[]

dir

Type: string

disabled

Same as the HTML attribute.

Type: boolean

draggable

Type: Booleanish

enterKeyHint

Type: | "next" | "previous" | "enter" | "done" | "go" | "search" | "send"

focusable

When an element is disabled, it may still be focusable. It works similarly to readOnly on form elements. In this case, only aria-disabled will be set.

Type: boolean

form

Type: string

formAction

Type: string | ((formData: FormData) => void | Promise<void>)

formEncType

Type: string

formMethod

Type: string

formNoValidate

Type: boolean

formTarget

Type: string

height

Type: string | number

hidden

Type: boolean

hide

Changes the visible state to false

Type: () => void

id

Same as the HTML attribute.

Type: string

inert

Type: boolean

inlist

Type: any

inputMode

Hints at the type of data that might be entered by the user while editing the element or its contents

Type: | "none" | "search" | "text" | "tel" | "url" | "email" | "numeric" | "decimal"

is

Specify that a standard HTML element should behave like a defined custom built-in element

Type: string

itemID

Type: string

itemProp

Type: string

itemRef

Type: string

itemScope

Type: boolean

itemType

Type: string

key

Type: Key

lang

Type: string

list

Type: string

max

Type: string | number

maxLength

Type: number

min

Type: string | number

minLength

Type: number

multiple

Type: boolean

nonce

Type: string

onAbort

Type: ReactEventHandler<any>

onAbortCapture

Type: ReactEventHandler<any>

onAnimationEnd

Type: AnimationEventHandler<any>

onAnimationEndCapture

Type: AnimationEventHandler<any>

onAnimationIteration

Type: AnimationEventHandler<any>

onAnimationIterationCapture

Type: AnimationEventHandler<any>

onAnimationStart

Type: AnimationEventHandler<any>

onAnimationStartCapture

Type: AnimationEventHandler<any>

onAuxClick

Type: MouseEventHandler<any>

onAuxClickCapture

Type: MouseEventHandler<any>

onBeforeInput

Type: FormEventHandler<any>

onBeforeInputCapture

Type: FormEventHandler<any>

onBeforeToggle

Type: ToggleEventHandler<any>

onBlur

Type: FocusEventHandler<any>

onBlurCapture

Type: FocusEventHandler<any>

onCanPlay

Type: ReactEventHandler<any>

onCanPlayCapture

Type: ReactEventHandler<any>

onCanPlayThrough

Type: ReactEventHandler<any>

onCanPlayThroughCapture

Type: ReactEventHandler<any>

onChange

Type: FormEventHandler<any> & ChangeEventHandler<any>

onChangeCapture

Type: FormEventHandler<any>

onClick

Type: MouseEventHandler<any>

onClickCapture

Type: MouseEventHandler<any>

onCompositionEnd

Type: CompositionEventHandler<any>

onCompositionEndCapture

Type: CompositionEventHandler<any>

onCompositionStart

Type: CompositionEventHandler<any>

onCompositionStartCapture

Type: CompositionEventHandler<any>

onCompositionUpdate

Type: CompositionEventHandler<any>

onCompositionUpdateCapture

Type: CompositionEventHandler<any>

onContextMenu

Type: MouseEventHandler<any>

onContextMenuCapture

Type: MouseEventHandler<any>

onCopy

Type: ClipboardEventHandler<any>

onCopyCapture

Type: ClipboardEventHandler<any>

onCut

Type: ClipboardEventHandler<any>

onCutCapture

Type: ClipboardEventHandler<any>

onDoubleClick

Type: MouseEventHandler<any>

onDoubleClickCapture

Type: MouseEventHandler<any>

onDrag

Type: DragEventHandler<any>

onDragCapture

Type: DragEventHandler<any>

onDragEnd

Type: DragEventHandler<any>

onDragEndCapture

Type: DragEventHandler<any>

onDragEnter

Type: DragEventHandler<any>

onDragEnterCapture

Type: DragEventHandler<any>

onDragExit

Type: DragEventHandler<any>

onDragExitCapture

Type: DragEventHandler<any>

onDragLeave

Type: DragEventHandler<any>

onDragLeaveCapture

Type: DragEventHandler<any>

onDragOver

Type: DragEventHandler<any>

onDragOverCapture

Type: DragEventHandler<any>

onDragStart

Type: DragEventHandler<any>

onDragStartCapture

Type: DragEventHandler<any>

onDrop

Type: DragEventHandler<any>

onDropCapture

Type: DragEventHandler<any>

onDurationChange

Type: ReactEventHandler<any>

onDurationChangeCapture

Type: ReactEventHandler<any>

onEmptied

Type: ReactEventHandler<any>

onEmptiedCapture

Type: ReactEventHandler<any>

onEncrypted

Type: ReactEventHandler<any>

onEncryptedCapture

Type: ReactEventHandler<any>

onEnded

Type: ReactEventHandler<any>

onEndedCapture

Type: ReactEventHandler<any>

onError

Type: ReactEventHandler<any>

onErrorCapture

Type: ReactEventHandler<any>

onFocus

Type: FocusEventHandler<any>

onFocusCapture

Type: FocusEventHandler<any>

onGotPointerCapture

Type: PointerEventHandler<any>

onGotPointerCaptureCapture

Type: PointerEventHandler<any>

onInput

Type: FormEventHandler<any>

onInputCapture

Type: FormEventHandler<any>

onInvalid

Type: FormEventHandler<any>

onInvalidCapture

Type: FormEventHandler<any>

onKeyDown

Type: KeyboardEventHandler<any>

onKeyDownCapture

Type: KeyboardEventHandler<any>

onKeyPress

Type: KeyboardEventHandler<any>

onKeyPressCapture

Type: KeyboardEventHandler<any>

onKeyUp

Type: KeyboardEventHandler<any>

onKeyUpCapture

Type: KeyboardEventHandler<any>

onLoad

Type: ReactEventHandler<any>

onLoadCapture

Type: ReactEventHandler<any>

onLoadedData

Type: ReactEventHandler<any>

onLoadedDataCapture

Type: ReactEventHandler<any>

onLoadedMetadata

Type: ReactEventHandler<any>

onLoadedMetadataCapture

Type: ReactEventHandler<any>

onLoadStart

Type: ReactEventHandler<any>

onLoadStartCapture

Type: ReactEventHandler<any>

onLostPointerCapture

Type: PointerEventHandler<any>

onLostPointerCaptureCapture

Type: PointerEventHandler<any>

onMouseDown

Type: MouseEventHandler<any>

onMouseDownCapture

Type: MouseEventHandler<any>

onMouseEnter

Type: MouseEventHandler<any>

onMouseLeave

Type: MouseEventHandler<any>

onMouseMove

Type: MouseEventHandler<any>

onMouseMoveCapture

Type: MouseEventHandler<any>

onMouseOut

Type: MouseEventHandler<any>

onMouseOutCapture

Type: MouseEventHandler<any>

onMouseOver

Type: MouseEventHandler<any>

onMouseOverCapture

Type: MouseEventHandler<any>

onMouseUp

Type: MouseEventHandler<any>

onMouseUpCapture

Type: MouseEventHandler<any>

onPaste

Type: ClipboardEventHandler<any>

onPasteCapture

Type: ClipboardEventHandler<any>

onPause

Type: ReactEventHandler<any>

onPauseCapture

Type: ReactEventHandler<any>

onPlay

Type: ReactEventHandler<any>

onPlayCapture

Type: ReactEventHandler<any>

onPlaying

Type: ReactEventHandler<any>

onPlayingCapture

Type: ReactEventHandler<any>

onPointerCancel

Type: PointerEventHandler<any>

onPointerCancelCapture

Type: PointerEventHandler<any>

onPointerDown

Type: PointerEventHandler<any>

onPointerDownCapture

Type: PointerEventHandler<any>

onPointerEnter

Type: PointerEventHandler<any>

onPointerLeave

Type: PointerEventHandler<any>

onPointerMove

Type: PointerEventHandler<any>

onPointerMoveCapture

Type: PointerEventHandler<any>

onPointerOut

Type: PointerEventHandler<any>

onPointerOutCapture

Type: PointerEventHandler<any>

onPointerOver

Type: PointerEventHandler<any>

onPointerOverCapture

Type: PointerEventHandler<any>

onPointerUp

Type: PointerEventHandler<any>

onPointerUpCapture

Type: PointerEventHandler<any>

onProgress

Type: ReactEventHandler<any>

onProgressCapture

Type: ReactEventHandler<any>

onRateChange

Type: ReactEventHandler<any>

onRateChangeCapture

Type: ReactEventHandler<any>

onReset

Type: FormEventHandler<any>

onResetCapture

Type: FormEventHandler<any>

onResize

Type: ReactEventHandler<any>

onResizeCapture

Type: ReactEventHandler<any>

onScroll

Type: UIEventHandler<any>

onScrollCapture

Type: UIEventHandler<any>

onSeeked

Type: ReactEventHandler<any>

onSeekedCapture

Type: ReactEventHandler<any>

onSeeking

Type: ReactEventHandler<any>

onSeekingCapture

Type: ReactEventHandler<any>

onSelect

Type: ReactEventHandler<any>

onSelectCapture

Type: ReactEventHandler<any>

onStalled

Type: ReactEventHandler<any>

onStalledCapture

Type: ReactEventHandler<any>

onSubmit

Type: FormEventHandler<any>

onSubmitCapture

Type: FormEventHandler<any>

onSuspend

Type: ReactEventHandler<any>

onSuspendCapture

Type: ReactEventHandler<any>

onTimeUpdate

Type: ReactEventHandler<any>

onTimeUpdateCapture

Type: ReactEventHandler<any>

onToggle

Type: ToggleEventHandler<any>

onTouchCancel

Type: TouchEventHandler<any>

onTouchCancelCapture

Type: TouchEventHandler<any>

onTouchEnd

Type: TouchEventHandler<any>

onTouchEndCapture

Type: TouchEventHandler<any>

onTouchMove

Type: TouchEventHandler<any>

onTouchMoveCapture

Type: TouchEventHandler<any>

onTouchStart

Type: TouchEventHandler<any>

onTouchStartCapture

Type: TouchEventHandler<any>

onTransitionCancel

Type: TransitionEventHandler<any>

onTransitionCancelCapture

Type: TransitionEventHandler<any>

onTransitionEnd

Type: TransitionEventHandler<any>

onTransitionEndCapture

Type: TransitionEventHandler<any>

onTransitionRun

Type: TransitionEventHandler<any>

onTransitionRunCapture

Type: TransitionEventHandler<any>

onTransitionStart

Type: TransitionEventHandler<any>

onTransitionStartCapture

Type: TransitionEventHandler<any>

onVolumeChange

Type: ReactEventHandler<any>

onVolumeChangeCapture

Type: ReactEventHandler<any>

onWaiting

Type: ReactEventHandler<any>

onWaitingCapture

Type: ReactEventHandler<any>

onWheel

Type: WheelEventHandler<any>

onWheelCapture

Type: WheelEventHandler<any>

orientation

Defines the orientation of the composite widget. If the composite has a single row or column (one-dimensional), the orientation value determines which arrow keys can be used to move focus:

undefined: all arrow keys work.
horizontal: only left and right arrow keys work.
vertical: only up and down arrow keys work.

It doesn't have any effect on two-dimensional composites.

Type: Orientation
Default: undefined

pattern

Type: string

placeholder

Type: string

placement

Actual placement.

Type: Placement

popover

Type: "" | "auto" | "manual"

popoverTarget

Type: string

popoverTargetAction

Type: "toggle" | "hide" | "show"

prefix

Type: string

property

Type: string

radioGroup

Type: string

readOnly

Type: boolean

ref

Allows getting a ref to the component instance. Once the component unmounts, React will set ref.current to null (or call the ref with null if you passed a callback ref).

Type: | ((instance: any) => void | (() => VoidOrUndefinedOnly)) | RefObject<any>

rel

Type: string

required

Type: boolean

resource

Type: string

results

Type: number

rev

Type: string

role

Type: AriaRole

security

Type: string

setState

Sets state.

Type: Dispatch<SetStateAction<string | number | undefined>>

size

Type: number

slot

Type: string

spellCheck

Type: Booleanish

src

Type: string

state

The value attribute of the current checked radio.

Type: string | number

step

Type: string | number

style

Type: CSSProperties

suppressContentEditableWarning

Type: boolean

suppressHydrationWarning

Type: boolean

tabIndex

Type: number

title

Type: string

translate

Type: "yes" | "no"

type

Type: HTMLInputTypeAttribute

typeof

Type: string

unselectable

Type: "off" | "on"

unstable_arrowStyles

Arrow styles.

Type: CSSProperties

unstable_checkOnFocus

Type: boolean

unstable_clickOnEnter

Whether or not trigger click on pressing Enter.

Type: boolean

unstable_clickOnSpace

Whether or not trigger click on pressing Space.

Type: boolean

unstable_hasActiveWidget

Type: boolean

unstable_idCountRef

Type: MutableRefObject<number>

unstable_moves

Stores the number of moves that have been performed by calling move, next, previous, up, down, first or last.

Type: number
Default: 0

unstable_popoverStyles

Popover styles.

Type: CSSProperties

unstable_system

Options passed to reakit-system-*

Type: any

unstable_virtual

If enabled, the composite element will act as an aria-activedescendant container instead of roving tabindex. DOM focus will remain on the composite while its items receive virtual focus.

Type: boolean

visible

Whether it's visible or not.

Type: boolean

vocab

Type: string

width

Type: string | number

wrapElement

Function returned by the hook to wrap the element to which html props will be passed.

Type: (element: ReactNode) => ReactNode

MenuGroup

label RequiredRequired

Accessible name of the MenuGroup.

Type: string

element

Overrides the default element name to apply unique styles with the Customization Provider

Type: string
Default: MENU_GROUP

icon

Pass a decorative Paste icon to display with the group label.

Type: string | number | bigint | boolean | ReactElement<unknown, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal | Promise<...>

Inherited props

Paste components will often extend native HTML elements and as a result will inherit or extend their available properties. Below is a list of the props this component has inherited and are also available to use.

about

Type: string

accessKey

Type: string

aria-activedescendant

Identifies the currently active element when DOM focus is on a composite widget, textbox, group, or application.

Type: string

aria-atomic

Indicates whether assistive technologies will present all, or only parts of, the changed region based on the change notifications defined by the aria-relevant attribute.

Type: Booleanish

aria-autocomplete

Indicates whether inputting text could trigger display of one or more predictions of the user's intended value for an input and specifies how predictions would be presented if they are made.

Type: "none" | "list" | "inline" | "both"

aria-braillelabel

Defines a string value that labels the current element, which is intended to be converted into Braille.

Type: string

aria-brailleroledescription

Defines a human-readable, author-localized abbreviated description for the role of an element, which is intended to be converted into Braille.

Type: string

aria-busy

Type: Booleanish

aria-checked

Indicates the current "checked" state of checkboxes, radio buttons, and other widgets.

Type: boolean | "true" | "false" | "mixed"

aria-colcount

Defines the total number of columns in a table, grid, or treegrid.

Type: number

aria-colindex

Defines an element's column index or position with respect to the total number of columns within a table, grid, or treegrid.

Type: number

aria-colindextext

Defines a human readable text alternative of aria-colindex.

Type: string

aria-colspan

Defines the number of columns spanned by a cell or gridcell within a table, grid, or treegrid.

Type: number

aria-controls

Identifies the element (or elements) whose contents or presence are controlled by the current element.

Type: string

aria-current

Indicates the element that represents the current item within a container or set of related elements.

Type: | boolean | "true" | "false" | "page" | "step" | "location" | "date" | "time"

aria-describedby

Identifies the element (or elements) that describes the object.

Type: string

aria-description

Defines a string value that describes or annotates the current element.

Type: string

aria-details

Identifies the element that provides a detailed, extended description for the object.

Type: string

aria-disabled

Indicates that the element is perceivable but disabled, so it is not editable or otherwise operable.

Type: Booleanish

aria-dropeffect

Indicates what functions can be performed when a dragged object is released on the drop target.

Type: "move" | "none" | "link" | "copy" | "execute" | "popup"

aria-errormessage

Identifies the element that provides an error message for the object.

Type: string

aria-expanded

Indicates whether the element, or another grouping element it controls, is currently expanded or collapsed.

Type: Booleanish

aria-flowto

Identifies the next element (or elements) in an alternate reading order of content which, at the user's discretion, allows assistive technology to override the general default of reading in document source order.

Type: string

aria-grabbed

Indicates an element's "grabbed" state in a drag-and-drop operation.

Type: Booleanish

aria-haspopup

Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by an element.

Type: | boolean | "true" | "false" | "dialog" | "grid" | "listbox" | "menu" | "tree"

aria-hidden

Indicates whether the element is exposed to an accessibility API.

Type: Booleanish

aria-invalid

Indicates the entered value does not conform to the format expected by the application.

Type: boolean | "true" | "false" | "grammar" | "spelling"

aria-keyshortcuts

Indicates keyboard shortcuts that an author has implemented to activate or give focus to an element.

Type: string

aria-label

Defines a string value that labels the current element.

Type: string

aria-labelledby

Identifies the element (or elements) that labels the current element.

Type: string

aria-level

Defines the hierarchical level of an element within a structure.

Type: number

aria-live

Indicates that an element will be updated, and describes the types of updates the user agents, assistive technologies, and user can expect from the live region.

Type: "off" | "assertive" | "polite"

aria-modal

Indicates whether an element is modal when displayed.

Type: Booleanish

aria-multiline

Indicates whether a text box accepts multiple lines of input or only a single line.

Type: Booleanish

aria-multiselectable

Indicates that the user may select more than one item from the current selectable descendants.

Type: Booleanish

aria-orientation

Indicates whether the element's orientation is horizontal, vertical, or unknown/ambiguous.

Type: "horizontal" | "vertical"

aria-owns

Identifies an element (or elements) in order to define a visual, functional, or contextual parent/child relationship between DOM elements where the DOM hierarchy cannot be used to represent the relationship.

Type: string

aria-placeholder

Defines a short hint (a word or short phrase) intended to aid the user with data entry when the control has no value. A hint could be a sample value or a brief description of the expected format.

Type: string

aria-posinset

Defines an element's number or position in the current set of listitems or treeitems. Not required if all elements in the set are present in the DOM.

Type: number

aria-pressed

Indicates the current "pressed" state of toggle buttons.

Type: boolean | "true" | "false" | "mixed"

aria-readonly

Indicates that the element is not editable, but is otherwise operable.

Type: Booleanish

aria-relevant

Indicates what notifications the user agent will trigger when the accessibility tree within a live region is modified.

Type: | "text" | "additions" | "additions removals" | "additions text" | "all" | "removals" | "removals additions" | "removals text" | "text additions" | "text removals"

aria-required

Indicates that user input is required on the element before a form may be submitted.

Type: Booleanish

aria-roledescription

Defines a human-readable, author-localized description for the role of an element.

Type: string

aria-rowcount

Defines the total number of rows in a table, grid, or treegrid.

Type: number

aria-rowindex

Defines an element's row index or position with respect to the total number of rows within a table, grid, or treegrid.

Type: number

aria-rowindextext

Defines a human readable text alternative of aria-rowindex.

Type: string

aria-rowspan

Defines the number of rows spanned by a cell or gridcell within a table, grid, or treegrid.

Type: number

aria-selected

Indicates the current "selected" state of various widgets.

Type: Booleanish

aria-setsize

Defines the number of items in the current set of listitems or treeitems. Not required if all elements in the set are present in the DOM.

Type: number

aria-sort

Indicates if items in a table or grid are sorted in ascending or descending order.

Type: "none" | "ascending" | "descending" | "other"

aria-valuemax

Defines the maximum allowed value for a range widget.

Type: number

aria-valuemin

Defines the minimum allowed value for a range widget.

Type: number

aria-valuenow

Defines the current value for a range widget.

Type: number

aria-valuetext

Defines the human readable text alternative of aria-valuenow for a range widget.

Type: string

autoCapitalize

Type: | (string & {}) | "off" | "none" | "on" | "sentences" | "words" | "characters"

autoCorrect

Type: string

autoFocus

Type: boolean

autoSave

Type: string

content

Type: string

contentEditable

Type: Booleanish | "inherit" | "plaintext-only"

contextMenu

Type: string

dangerouslySetInnerHTML

Type: { __html: string | TrustedHTML }

datatype

Type: string

defaultChecked

Type: boolean

defaultValue

Type: string | number | readonly string[]

dir

Type: string

draggable

Type: Booleanish

enterKeyHint

Type: | "next" | "previous" | "enter" | "done" | "go" | "search" | "send"

hidden

Type: boolean

id

Type: string

inert

Type: boolean

inlist

Type: any

inputMode

Hints at the type of data that might be entered by the user while editing the element or its contents

Type: | "none" | "search" | "text" | "tel" | "url" | "email" | "numeric" | "decimal"

is

Specify that a standard HTML element should behave like a defined custom built-in element

Type: string

itemID

Type: string

itemProp

Type: string

itemRef

Type: string

itemScope

Type: boolean

itemType

Type: string

key

Type: Key

lang

Type: string

nonce

Type: string

onAbort

Type: ReactEventHandler<HTMLDivElement>

onAbortCapture

Type: ReactEventHandler<HTMLDivElement>

onAnimationEnd

Type: AnimationEventHandler<HTMLDivElement>

onAnimationEndCapture

Type: AnimationEventHandler<HTMLDivElement>

onAnimationIteration

Type: AnimationEventHandler<HTMLDivElement>

onAnimationIterationCapture

Type: AnimationEventHandler<HTMLDivElement>

onAnimationStart

Type: AnimationEventHandler<HTMLDivElement>

onAnimationStartCapture

Type: AnimationEventHandler<HTMLDivElement>

onAuxClick

Type: MouseEventHandler<HTMLDivElement>

onAuxClickCapture

Type: MouseEventHandler<HTMLDivElement>

onBeforeInput

Type: FormEventHandler<HTMLDivElement>

onBeforeInputCapture

Type: FormEventHandler<HTMLDivElement>

onBeforeToggle

Type: ToggleEventHandler<HTMLDivElement>

onBlur

Type: FocusEventHandler<HTMLDivElement>

onBlurCapture

Type: FocusEventHandler<HTMLDivElement>

onCanPlay

Type: ReactEventHandler<HTMLDivElement>

onCanPlayCapture

Type: ReactEventHandler<HTMLDivElement>

onCanPlayThrough

Type: ReactEventHandler<HTMLDivElement>

onCanPlayThroughCapture

Type: ReactEventHandler<HTMLDivElement>

onChange

Type: FormEventHandler<HTMLDivElement>

onChangeCapture

Type: FormEventHandler<HTMLDivElement>

onClick

Type: MouseEventHandler<HTMLDivElement>

onClickCapture

Type: MouseEventHandler<HTMLDivElement>

onCompositionEnd

Type: CompositionEventHandler<HTMLDivElement>

onCompositionEndCapture

Type: CompositionEventHandler<HTMLDivElement>

onCompositionStart

Type: CompositionEventHandler<HTMLDivElement>

onCompositionStartCapture

Type: CompositionEventHandler<HTMLDivElement>

onCompositionUpdate

Type: CompositionEventHandler<HTMLDivElement>

onCompositionUpdateCapture

Type: CompositionEventHandler<HTMLDivElement>

onContextMenu

Type: MouseEventHandler<HTMLDivElement>

onContextMenuCapture

Type: MouseEventHandler<HTMLDivElement>

onCopy

Type: ClipboardEventHandler<HTMLDivElement>

onCopyCapture

Type: ClipboardEventHandler<HTMLDivElement>

onCut

Type: ClipboardEventHandler<HTMLDivElement>

onCutCapture

Type: ClipboardEventHandler<HTMLDivElement>

onDoubleClick

Type: MouseEventHandler<HTMLDivElement>

onDoubleClickCapture

Type: MouseEventHandler<HTMLDivElement>

onDrag

Type: DragEventHandler<HTMLDivElement>

onDragCapture

Type: DragEventHandler<HTMLDivElement>

onDragEnd

Type: DragEventHandler<HTMLDivElement>

onDragEndCapture

Type: DragEventHandler<HTMLDivElement>

onDragEnter

Type: DragEventHandler<HTMLDivElement>

onDragEnterCapture

Type: DragEventHandler<HTMLDivElement>

onDragExit

Type: DragEventHandler<HTMLDivElement>

onDragExitCapture

Type: DragEventHandler<HTMLDivElement>

onDragLeave

Type: DragEventHandler<HTMLDivElement>

onDragLeaveCapture

Type: DragEventHandler<HTMLDivElement>

onDragOver

Type: DragEventHandler<HTMLDivElement>

onDragOverCapture

Type: DragEventHandler<HTMLDivElement>

onDragStart

Type: DragEventHandler<HTMLDivElement>

onDragStartCapture

Type: DragEventHandler<HTMLDivElement>

onDrop

Type: DragEventHandler<HTMLDivElement>

onDropCapture

Type: DragEventHandler<HTMLDivElement>

onDurationChange

Type: ReactEventHandler<HTMLDivElement>

onDurationChangeCapture

Type: ReactEventHandler<HTMLDivElement>

onEmptied

Type: ReactEventHandler<HTMLDivElement>

onEmptiedCapture

Type: ReactEventHandler<HTMLDivElement>

onEncrypted

Type: ReactEventHandler<HTMLDivElement>

onEncryptedCapture

Type: ReactEventHandler<HTMLDivElement>

onEnded

Type: ReactEventHandler<HTMLDivElement>

onEndedCapture

Type: ReactEventHandler<HTMLDivElement>

onError

Type: ReactEventHandler<HTMLDivElement>

onErrorCapture

Type: ReactEventHandler<HTMLDivElement>

onFocus

Type: FocusEventHandler<HTMLDivElement>

onFocusCapture

Type: FocusEventHandler<HTMLDivElement>

onGotPointerCapture

Type: PointerEventHandler<HTMLDivElement>

onGotPointerCaptureCapture

Type: PointerEventHandler<HTMLDivElement>

onInput

Type: FormEventHandler<HTMLDivElement>

onInputCapture

Type: FormEventHandler<HTMLDivElement>

onInvalid

Type: FormEventHandler<HTMLDivElement>

onInvalidCapture

Type: FormEventHandler<HTMLDivElement>

onKeyDown

Type: KeyboardEventHandler<HTMLDivElement>

onKeyDownCapture

Type: KeyboardEventHandler<HTMLDivElement>

onKeyPress

Type: KeyboardEventHandler<HTMLDivElement>

onKeyPressCapture

Type: KeyboardEventHandler<HTMLDivElement>

onKeyUp

Type: KeyboardEventHandler<HTMLDivElement>

onKeyUpCapture

Type: KeyboardEventHandler<HTMLDivElement>

onLoad

Type: ReactEventHandler<HTMLDivElement>

onLoadCapture

Type: ReactEventHandler<HTMLDivElement>

onLoadedData

Type: ReactEventHandler<HTMLDivElement>

onLoadedDataCapture

Type: ReactEventHandler<HTMLDivElement>

onLoadedMetadata

Type: ReactEventHandler<HTMLDivElement>

onLoadedMetadataCapture

Type: ReactEventHandler<HTMLDivElement>

onLoadStart

Type: ReactEventHandler<HTMLDivElement>

onLoadStartCapture

Type: ReactEventHandler<HTMLDivElement>

onLostPointerCapture

Type: PointerEventHandler<HTMLDivElement>

onLostPointerCaptureCapture

Type: PointerEventHandler<HTMLDivElement>

onMouseDown

Type: MouseEventHandler<HTMLDivElement>

onMouseDownCapture

Type: MouseEventHandler<HTMLDivElement>

onMouseEnter

Type: MouseEventHandler<HTMLDivElement>

onMouseLeave

Type: MouseEventHandler<HTMLDivElement>

onMouseMove

Type: MouseEventHandler<HTMLDivElement>

onMouseMoveCapture

Type: MouseEventHandler<HTMLDivElement>

onMouseOut

Type: MouseEventHandler<HTMLDivElement>

onMouseOutCapture

Type: MouseEventHandler<HTMLDivElement>

onMouseOver

Type: MouseEventHandler<HTMLDivElement>

onMouseOverCapture

Type: MouseEventHandler<HTMLDivElement>

onMouseUp

Type: MouseEventHandler<HTMLDivElement>

onMouseUpCapture

Type: MouseEventHandler<HTMLDivElement>

onPaste

Type: ClipboardEventHandler<HTMLDivElement>

onPasteCapture

Type: ClipboardEventHandler<HTMLDivElement>

onPause

Type: ReactEventHandler<HTMLDivElement>

onPauseCapture

Type: ReactEventHandler<HTMLDivElement>

onPlay

Type: ReactEventHandler<HTMLDivElement>

onPlayCapture

Type: ReactEventHandler<HTMLDivElement>

onPlaying

Type: ReactEventHandler<HTMLDivElement>

onPlayingCapture

Type: ReactEventHandler<HTMLDivElement>

onPointerCancel

Type: PointerEventHandler<HTMLDivElement>

onPointerCancelCapture

Type: PointerEventHandler<HTMLDivElement>

onPointerDown

Type: PointerEventHandler<HTMLDivElement>

onPointerDownCapture

Type: PointerEventHandler<HTMLDivElement>

onPointerEnter

Type: PointerEventHandler<HTMLDivElement>

onPointerLeave

Type: PointerEventHandler<HTMLDivElement>

onPointerMove

Type: PointerEventHandler<HTMLDivElement>

onPointerMoveCapture

Type: PointerEventHandler<HTMLDivElement>

onPointerOut

Type: PointerEventHandler<HTMLDivElement>

onPointerOutCapture

Type: PointerEventHandler<HTMLDivElement>

onPointerOver

Type: PointerEventHandler<HTMLDivElement>

onPointerOverCapture

Type: PointerEventHandler<HTMLDivElement>

onPointerUp

Type: PointerEventHandler<HTMLDivElement>

onPointerUpCapture

Type: PointerEventHandler<HTMLDivElement>

onProgress

Type: ReactEventHandler<HTMLDivElement>

onProgressCapture

Type: ReactEventHandler<HTMLDivElement>

onRateChange

Type: ReactEventHandler<HTMLDivElement>

onRateChangeCapture

Type: ReactEventHandler<HTMLDivElement>

onReset

Type: FormEventHandler<HTMLDivElement>

onResetCapture

Type: FormEventHandler<HTMLDivElement>

onResize

Type: ReactEventHandler<HTMLDivElement>

onResizeCapture

Type: ReactEventHandler<HTMLDivElement>

onScroll

Type: UIEventHandler<HTMLDivElement>

onScrollCapture

Type: UIEventHandler<HTMLDivElement>

onSeeked

Type: ReactEventHandler<HTMLDivElement>

onSeekedCapture

Type: ReactEventHandler<HTMLDivElement>

onSeeking

Type: ReactEventHandler<HTMLDivElement>

onSeekingCapture

Type: ReactEventHandler<HTMLDivElement>

onSelect

Type: ReactEventHandler<HTMLDivElement>

onSelectCapture

Type: ReactEventHandler<HTMLDivElement>

onStalled

Type: ReactEventHandler<HTMLDivElement>

onStalledCapture

Type: ReactEventHandler<HTMLDivElement>

onSubmit

Type: FormEventHandler<HTMLDivElement>

onSubmitCapture

Type: FormEventHandler<HTMLDivElement>

onSuspend

Type: ReactEventHandler<HTMLDivElement>

onSuspendCapture

Type: ReactEventHandler<HTMLDivElement>

onTimeUpdate

Type: ReactEventHandler<HTMLDivElement>

onTimeUpdateCapture

Type: ReactEventHandler<HTMLDivElement>

onToggle

Type: ToggleEventHandler<HTMLDivElement>

onTouchCancel

Type: TouchEventHandler<HTMLDivElement>

onTouchCancelCapture

Type: TouchEventHandler<HTMLDivElement>

onTouchEnd

Type: TouchEventHandler<HTMLDivElement>

onTouchEndCapture

Type: TouchEventHandler<HTMLDivElement>

onTouchMove

Type: TouchEventHandler<HTMLDivElement>

onTouchMoveCapture

Type: TouchEventHandler<HTMLDivElement>

onTouchStart

Type: TouchEventHandler<HTMLDivElement>

onTouchStartCapture

Type: TouchEventHandler<HTMLDivElement>

onTransitionCancel

Type: TransitionEventHandler<HTMLDivElement>

onTransitionCancelCapture

Type: TransitionEventHandler<HTMLDivElement>

onTransitionEnd

Type: TransitionEventHandler<HTMLDivElement>

onTransitionEndCapture

Type: TransitionEventHandler<HTMLDivElement>

onTransitionRun

Type: TransitionEventHandler<HTMLDivElement>

onTransitionRunCapture

Type: TransitionEventHandler<HTMLDivElement>

onTransitionStart

Type: TransitionEventHandler<HTMLDivElement>

onTransitionStartCapture

Type: TransitionEventHandler<HTMLDivElement>

onVolumeChange

Type: ReactEventHandler<HTMLDivElement>

onVolumeChangeCapture

Type: ReactEventHandler<HTMLDivElement>

onWaiting

Type: ReactEventHandler<HTMLDivElement>

onWaitingCapture

Type: ReactEventHandler<HTMLDivElement>

onWheel

Type: WheelEventHandler<HTMLDivElement>

onWheelCapture

Type: WheelEventHandler<HTMLDivElement>

popover

Type: "" | "auto" | "manual"

popoverTarget

Type: string

popoverTargetAction

Type: "toggle" | "hide" | "show"

prefix

Type: string

property

Type: string

radioGroup

Type: string

rel

Type: string

resource

Type: string

results

Type: number

rev

Type: string

role

Type: AriaRole

security

Type: string

slot

Type: string

spellCheck

Type: Booleanish

suppressContentEditableWarning

Type: boolean

suppressHydrationWarning

Type: boolean

tabIndex

Type: number

title

Type: string

translate

Type: "yes" | "no"

typeof

Type: string

unselectable

Type: "off" | "on"

vocab

Type: string

MenuSeparator

element

Type: string

Inherited props

Paste components will often extend native HTML elements and as a result will inherit or extend their available properties. Below is a list of the props this component has inherited and are also available to use.

about

Type: string

accessKey

Type: string

aria-activedescendant

Identifies the currently active element when DOM focus is on a composite widget, textbox, group, or application.

Type: string

aria-atomic

Indicates whether assistive technologies will present all, or only parts of, the changed region based on the change notifications defined by the aria-relevant attribute.

Type: Booleanish

aria-autocomplete

Indicates whether inputting text could trigger display of one or more predictions of the user's intended value for an input and specifies how predictions would be presented if they are made.

Type: "none" | "list" | "inline" | "both"

aria-braillelabel

Defines a string value that labels the current element, which is intended to be converted into Braille.

Type: string

aria-brailleroledescription

Defines a human-readable, author-localized abbreviated description for the role of an element, which is intended to be converted into Braille.

Type: string

aria-busy

Type: Booleanish

aria-checked

Indicates the current "checked" state of checkboxes, radio buttons, and other widgets.

Type: boolean | "true" | "false" | "mixed"

aria-colcount

Defines the total number of columns in a table, grid, or treegrid.

Type: number

aria-colindex

Defines an element's column index or position with respect to the total number of columns within a table, grid, or treegrid.

Type: number

aria-colindextext

Defines a human readable text alternative of aria-colindex.

Type: string

aria-colspan

Defines the number of columns spanned by a cell or gridcell within a table, grid, or treegrid.

Type: number

aria-controls

Identifies the element (or elements) whose contents or presence are controlled by the current element.

Type: string

aria-current

Indicates the element that represents the current item within a container or set of related elements.

Type: | boolean | "true" | "false" | "page" | "step" | "location" | "date" | "time"

aria-describedby

Identifies the element (or elements) that describes the object.

Type: string

aria-description

Defines a string value that describes or annotates the current element.

Type: string

aria-details

Identifies the element that provides a detailed, extended description for the object.

Type: string

aria-disabled

Indicates that the element is perceivable but disabled, so it is not editable or otherwise operable.

Type: Booleanish

aria-dropeffect

Indicates what functions can be performed when a dragged object is released on the drop target.

Type: "move" | "none" | "link" | "copy" | "execute" | "popup"

aria-errormessage

Identifies the element that provides an error message for the object.

Type: string

aria-expanded

Indicates whether the element, or another grouping element it controls, is currently expanded or collapsed.

Type: Booleanish

aria-flowto

Identifies the next element (or elements) in an alternate reading order of content which, at the user's discretion, allows assistive technology to override the general default of reading in document source order.

Type: string

aria-grabbed

Indicates an element's "grabbed" state in a drag-and-drop operation.

Type: Booleanish

aria-haspopup

Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by an element.

Type: | boolean | "true" | "false" | "dialog" | "grid" | "listbox" | "menu" | "tree"

aria-hidden

Indicates whether the element is exposed to an accessibility API.

Type: Booleanish

aria-invalid

Indicates the entered value does not conform to the format expected by the application.

Type: boolean | "true" | "false" | "grammar" | "spelling"

aria-keyshortcuts

Indicates keyboard shortcuts that an author has implemented to activate or give focus to an element.

Type: string

aria-label

Defines a string value that labels the current element.

Type: string

aria-labelledby

Identifies the element (or elements) that labels the current element.

Type: string

aria-level

Defines the hierarchical level of an element within a structure.

Type: number

aria-live

Indicates that an element will be updated, and describes the types of updates the user agents, assistive technologies, and user can expect from the live region.

Type: "off" | "assertive" | "polite"

aria-modal

Indicates whether an element is modal when displayed.

Type: Booleanish

aria-multiline

Indicates whether a text box accepts multiple lines of input or only a single line.

Type: Booleanish

aria-multiselectable

Indicates that the user may select more than one item from the current selectable descendants.

Type: Booleanish

aria-orientation

Indicates whether the element's orientation is horizontal, vertical, or unknown/ambiguous.

Type: "horizontal" | "vertical"

aria-owns

Identifies an element (or elements) in order to define a visual, functional, or contextual parent/child relationship between DOM elements where the DOM hierarchy cannot be used to represent the relationship.

Type: string

aria-placeholder

Defines a short hint (a word or short phrase) intended to aid the user with data entry when the control has no value. A hint could be a sample value or a brief description of the expected format.

Type: string

aria-posinset

Defines an element's number or position in the current set of listitems or treeitems. Not required if all elements in the set are present in the DOM.

Type: number

aria-pressed

Indicates the current "pressed" state of toggle buttons.

Type: boolean | "true" | "false" | "mixed"

aria-readonly

Indicates that the element is not editable, but is otherwise operable.

Type: Booleanish

aria-relevant

Indicates what notifications the user agent will trigger when the accessibility tree within a live region is modified.

Type: | "text" | "additions" | "additions removals" | "additions text" | "all" | "removals" | "removals additions" | "removals text" | "text additions" | "text removals"

aria-required

Indicates that user input is required on the element before a form may be submitted.

Type: Booleanish

aria-roledescription

Defines a human-readable, author-localized description for the role of an element.

Type: string

aria-rowcount

Defines the total number of rows in a table, grid, or treegrid.

Type: number

aria-rowindex

Defines an element's row index or position with respect to the total number of rows within a table, grid, or treegrid.

Type: number

aria-rowindextext

Defines a human readable text alternative of aria-rowindex.

Type: string

aria-rowspan

Defines the number of rows spanned by a cell or gridcell within a table, grid, or treegrid.

Type: number

aria-selected

Indicates the current "selected" state of various widgets.

Type: Booleanish

aria-setsize

Defines the number of items in the current set of listitems or treeitems. Not required if all elements in the set are present in the DOM.

Type: number

aria-sort

Indicates if items in a table or grid are sorted in ascending or descending order.

Type: "none" | "ascending" | "descending" | "other"

aria-valuemax

Defines the maximum allowed value for a range widget.

Type: number

aria-valuemin

Defines the minimum allowed value for a range widget.

Type: number

aria-valuenow

Defines the current value for a range widget.

Type: number

aria-valuetext

Defines the human readable text alternative of aria-valuenow for a range widget.

Type: string

autoCapitalize

Type: | (string & {}) | "off" | "none" | "on" | "sentences" | "words" | "characters"

autoCorrect

Type: string

autoFocus

Type: boolean

autoSave

Type: string

className

Type: string

color

Type: string

content

Type: string

contentEditable

Type: Booleanish | "inherit" | "plaintext-only"

contextMenu

Type: string

dangerouslySetInnerHTML

Type: { __html: string | TrustedHTML }

datatype

Type: string

defaultChecked

Type: boolean

defaultValue

Type: string | number | readonly string[]

dir

Type: string

draggable

Type: Booleanish

enterKeyHint

Type: | "next" | "previous" | "enter" | "done" | "go" | "search" | "send"

hidden

Type: boolean

id

Type: string

inert

Type: boolean

inlist

Type: any

inputMode

Hints at the type of data that might be entered by the user while editing the element or its contents

Type: | "none" | "search" | "text" | "tel" | "url" | "email" | "numeric" | "decimal"

is

Specify that a standard HTML element should behave like a defined custom built-in element

Type: string

itemID

Type: string

itemProp

Type: string

itemRef

Type: string

itemScope

Type: boolean

itemType

Type: string

key

Type: Key

lang

Type: string

nonce

Type: string

onAbort

Type: ReactEventHandler<any>

onAbortCapture

Type: ReactEventHandler<any>

onAnimationEnd

Type: AnimationEventHandler<any>

onAnimationEndCapture

Type: AnimationEventHandler<any>

onAnimationIteration

Type: AnimationEventHandler<any>

onAnimationIterationCapture

Type: AnimationEventHandler<any>

onAnimationStart

Type: AnimationEventHandler<any>

onAnimationStartCapture

Type: AnimationEventHandler<any>

onAuxClick

Type: MouseEventHandler<any>

onAuxClickCapture

Type: MouseEventHandler<any>

onBeforeInput

Type: FormEventHandler<any>

onBeforeInputCapture

Type: FormEventHandler<any>

onBeforeToggle

Type: ToggleEventHandler<any>

onBlur

Type: FocusEventHandler<any>

onBlurCapture

Type: FocusEventHandler<any>

onCanPlay

Type: ReactEventHandler<any>

onCanPlayCapture

Type: ReactEventHandler<any>

onCanPlayThrough

Type: ReactEventHandler<any>

onCanPlayThroughCapture

Type: ReactEventHandler<any>

onChange

Type: FormEventHandler<any>

onChangeCapture

Type: FormEventHandler<any>

onClick

Type: MouseEventHandler<any>

onClickCapture

Type: MouseEventHandler<any>

onCompositionEnd

Type: CompositionEventHandler<any>

onCompositionEndCapture

Type: CompositionEventHandler<any>

onCompositionStart

Type: CompositionEventHandler<any>

onCompositionStartCapture

Type: CompositionEventHandler<any>

onCompositionUpdate

Type: CompositionEventHandler<any>

onCompositionUpdateCapture

Type: CompositionEventHandler<any>

onContextMenu

Type: MouseEventHandler<any>

onContextMenuCapture

Type: MouseEventHandler<any>

onCopy

Type: ClipboardEventHandler<any>

onCopyCapture

Type: ClipboardEventHandler<any>

onCut

Type: ClipboardEventHandler<any>

onCutCapture

Type: ClipboardEventHandler<any>

onDoubleClick

Type: MouseEventHandler<any>

onDoubleClickCapture

Type: MouseEventHandler<any>

onDrag

Type: DragEventHandler<any>

onDragCapture

Type: DragEventHandler<any>

onDragEnd

Type: DragEventHandler<any>

onDragEndCapture

Type: DragEventHandler<any>

onDragEnter

Type: DragEventHandler<any>

onDragEnterCapture

Type: DragEventHandler<any>

onDragExit

Type: DragEventHandler<any>

onDragExitCapture

Type: DragEventHandler<any>

onDragLeave

Type: DragEventHandler<any>

onDragLeaveCapture

Type: DragEventHandler<any>

onDragOver

Type: DragEventHandler<any>

onDragOverCapture

Type: DragEventHandler<any>

onDragStart

Type: DragEventHandler<any>

onDragStartCapture

Type: DragEventHandler<any>

onDrop

Type: DragEventHandler<any>

onDropCapture

Type: DragEventHandler<any>

onDurationChange

Type: ReactEventHandler<any>

onDurationChangeCapture

Type: ReactEventHandler<any>

onEmptied

Type: ReactEventHandler<any>

onEmptiedCapture

Type: ReactEventHandler<any>

onEncrypted

Type: ReactEventHandler<any>

onEncryptedCapture

Type: ReactEventHandler<any>

onEnded

Type: ReactEventHandler<any>

onEndedCapture

Type: ReactEventHandler<any>

onError

Type: ReactEventHandler<any>

onErrorCapture

Type: ReactEventHandler<any>

onFocus

Type: FocusEventHandler<any>

onFocusCapture

Type: FocusEventHandler<any>

onGotPointerCapture

Type: PointerEventHandler<any>

onGotPointerCaptureCapture

Type: PointerEventHandler<any>

onInput

Type: FormEventHandler<any>

onInputCapture

Type: FormEventHandler<any>

onInvalid

Type: FormEventHandler<any>

onInvalidCapture

Type: FormEventHandler<any>

onKeyDown

Type: KeyboardEventHandler<any>

onKeyDownCapture

Type: KeyboardEventHandler<any>

onKeyPress

Type: KeyboardEventHandler<any>

onKeyPressCapture

Type: KeyboardEventHandler<any>

onKeyUp

Type: KeyboardEventHandler<any>

onKeyUpCapture

Type: KeyboardEventHandler<any>

onLoad

Type: ReactEventHandler<any>

onLoadCapture

Type: ReactEventHandler<any>

onLoadedData

Type: ReactEventHandler<any>

onLoadedDataCapture

Type: ReactEventHandler<any>

onLoadedMetadata

Type: ReactEventHandler<any>

onLoadedMetadataCapture

Type: ReactEventHandler<any>

onLoadStart

Type: ReactEventHandler<any>

onLoadStartCapture

Type: ReactEventHandler<any>

onLostPointerCapture

Type: PointerEventHandler<any>

onLostPointerCaptureCapture

Type: PointerEventHandler<any>

onMouseDown

Type: MouseEventHandler<any>

onMouseDownCapture

Type: MouseEventHandler<any>

onMouseEnter

Type: MouseEventHandler<any>

onMouseLeave

Type: MouseEventHandler<any>

onMouseMove

Type: MouseEventHandler<any>

onMouseMoveCapture

Type: MouseEventHandler<any>

onMouseOut

Type: MouseEventHandler<any>

onMouseOutCapture

Type: MouseEventHandler<any>

onMouseOver

Type: MouseEventHandler<any>

onMouseOverCapture

Type: MouseEventHandler<any>

onMouseUp

Type: MouseEventHandler<any>

onMouseUpCapture

Type: MouseEventHandler<any>

onPaste

Type: ClipboardEventHandler<any>

onPasteCapture

Type: ClipboardEventHandler<any>

onPause

Type: ReactEventHandler<any>

onPauseCapture

Type: ReactEventHandler<any>

onPlay

Type: ReactEventHandler<any>

onPlayCapture

Type: ReactEventHandler<any>

onPlaying

Type: ReactEventHandler<any>

onPlayingCapture

Type: ReactEventHandler<any>

onPointerCancel

Type: PointerEventHandler<any>

onPointerCancelCapture

Type: PointerEventHandler<any>

onPointerDown

Type: PointerEventHandler<any>

onPointerDownCapture

Type: PointerEventHandler<any>

onPointerEnter

Type: PointerEventHandler<any>

onPointerLeave

Type: PointerEventHandler<any>

onPointerMove

Type: PointerEventHandler<any>

onPointerMoveCapture

Type: PointerEventHandler<any>

onPointerOut

Type: PointerEventHandler<any>

onPointerOutCapture

Type: PointerEventHandler<any>

onPointerOver

Type: PointerEventHandler<any>

onPointerOverCapture

Type: PointerEventHandler<any>

onPointerUp

Type: PointerEventHandler<any>

onPointerUpCapture

Type: PointerEventHandler<any>

onProgress

Type: ReactEventHandler<any>

onProgressCapture

Type: ReactEventHandler<any>

onRateChange

Type: ReactEventHandler<any>

onRateChangeCapture

Type: ReactEventHandler<any>

onReset

Type: FormEventHandler<any>

onResetCapture

Type: FormEventHandler<any>

onResize

Type: ReactEventHandler<any>

onResizeCapture

Type: ReactEventHandler<any>

onScroll

Type: UIEventHandler<any>

onScrollCapture

Type: UIEventHandler<any>

onSeeked

Type: ReactEventHandler<any>

onSeekedCapture

Type: ReactEventHandler<any>

onSeeking

Type: ReactEventHandler<any>

onSeekingCapture

Type: ReactEventHandler<any>

onSelect

Type: ReactEventHandler<any>

onSelectCapture

Type: ReactEventHandler<any>

onStalled

Type: ReactEventHandler<any>

onStalledCapture

Type: ReactEventHandler<any>

onSubmit

Type: FormEventHandler<any>

onSubmitCapture

Type: FormEventHandler<any>

onSuspend

Type: ReactEventHandler<any>

onSuspendCapture

Type: ReactEventHandler<any>

onTimeUpdate

Type: ReactEventHandler<any>

onTimeUpdateCapture

Type: ReactEventHandler<any>

onToggle

Type: ToggleEventHandler<any>

onTouchCancel

Type: TouchEventHandler<any>

onTouchCancelCapture

Type: TouchEventHandler<any>

onTouchEnd

Type: TouchEventHandler<any>

onTouchEndCapture

Type: TouchEventHandler<any>

onTouchMove

Type: TouchEventHandler<any>

onTouchMoveCapture

Type: TouchEventHandler<any>

onTouchStart

Type: TouchEventHandler<any>

onTouchStartCapture

Type: TouchEventHandler<any>

onTransitionCancel

Type: TransitionEventHandler<any>

onTransitionCancelCapture

Type: TransitionEventHandler<any>

onTransitionEnd

Type: TransitionEventHandler<any>

onTransitionEndCapture

Type: TransitionEventHandler<any>

onTransitionRun

Type: TransitionEventHandler<any>

onTransitionRunCapture

Type: TransitionEventHandler<any>

onTransitionStart

Type: TransitionEventHandler<any>

onTransitionStartCapture

Type: TransitionEventHandler<any>

onVolumeChange

Type: ReactEventHandler<any>

onVolumeChangeCapture

Type: ReactEventHandler<any>

onWaiting

Type: ReactEventHandler<any>

onWaitingCapture

Type: ReactEventHandler<any>

onWheel

Type: WheelEventHandler<any>

onWheelCapture

Type: WheelEventHandler<any>

orientation

Separator's orientation.

Type: "horizontal" | "vertical"

popover

Type: "" | "auto" | "manual"

popoverTarget

Type: string

popoverTargetAction

Type: "toggle" | "hide" | "show"

prefix

Type: string

property

Type: string

radioGroup

Type: string

ref

Allows getting a ref to the component instance. Once the component unmounts, React will set ref.current to null (or call the ref with null if you passed a callback ref).

Type: | ((instance: any) => void | (() => VoidOrUndefinedOnly)) | RefObject<any>

rel

Type: string

resource

Type: string

results

Type: number

rev

Type: string

role

Type: AriaRole

security

Type: string

slot

Type: string

spellCheck

Type: Booleanish

style

Type: CSSProperties

suppressContentEditableWarning

Type: boolean

suppressHydrationWarning

Type: boolean

tabIndex

Type: number

title

Type: string

translate

Type: "yes" | "no"

typeof

Type: string

unselectable

Type: "off" | "on"

unstable_system

Options passed to reakit-system-*

Type: any

vocab

Type: string

wrapElement

Function returned by the hook to wrap the element to which html props will be passed.

Type: (element: ReactNode) => ReactNode

aria-label RequiredRequired

Defines a string value that labels the current element.

Type: string

baseId RequiredRequired

ID that will serve as a base for all the items IDs.

Type: string

first RequiredRequired

Moves focus to the first item.

Type: () => void

items RequiredRequired

Lists all the composite items with their id, DOM ref, disabled state and groupId if any. This state is automatically updated when registerItem and unregisterItem are called.

Type: Item[]

last RequiredRequired

Moves focus to the last item.

Type: () => void

move RequiredRequired

Moves focus to a given item ID.

Type: (id: string | null) => void

next RequiredRequired

Moves focus to the next item.

Type: (unstable_allTheWay?: boolean | undefined) => void

placement RequiredRequired

Actual placement.

Type: Placement

previous RequiredRequired

Moves focus to the previous item.

Type: (unstable_allTheWay?: boolean | undefined) => void

setCurrentId RequiredRequired

Sets currentId. This is different from composite.move as this only updates the currentId state without moving focus. When the composite widget gets focused by the user, the item referred by the currentId state will get focus.

Type: Dispatch<SetStateAction<string | null | undefined>>

element

Type: string

Inherited props

Paste components will often extend native HTML elements and as a result will inherit or extend their available properties. Below is a list of the props this component has inherited and are also available to use.

about

Type: string

accessKey

Type: string

animated

If true, animating will be set to true when visible is updated. It'll wait for stopAnimation to be called or a CSS transition ends. If animated is set to a number, stopAnimation will be called only after the same number of milliseconds have passed.

Type: number | boolean

animating

Whether it's animating or not.

Type: boolean

aria-activedescendant

Identifies the currently active element when DOM focus is on a composite widget, textbox, group, or application.

Type: string

aria-atomic

Indicates whether assistive technologies will present all, or only parts of, the changed region based on the change notifications defined by the aria-relevant attribute.

Type: Booleanish

aria-autocomplete

Indicates whether inputting text could trigger display of one or more predictions of the user's intended value for an input and specifies how predictions would be presented if they are made.

Type: "none" | "list" | "inline" | "both"

aria-braillelabel

Defines a string value that labels the current element, which is intended to be converted into Braille.

Type: string

aria-brailleroledescription

Defines a human-readable, author-localized abbreviated description for the role of an element, which is intended to be converted into Braille.

Type: string

aria-busy

Type: Booleanish

aria-checked

Indicates the current "checked" state of checkboxes, radio buttons, and other widgets.

Type: boolean | "true" | "false" | "mixed"

aria-colcount

Defines the total number of columns in a table, grid, or treegrid.

Type: number

aria-colindex

Defines an element's column index or position with respect to the total number of columns within a table, grid, or treegrid.

Type: number

aria-colindextext

Defines a human readable text alternative of aria-colindex.

Type: string

aria-colspan

Defines the number of columns spanned by a cell or gridcell within a table, grid, or treegrid.

Type: number

aria-controls

Identifies the element (or elements) whose contents or presence are controlled by the current element.

Type: string

aria-current

Indicates the element that represents the current item within a container or set of related elements.

Type: | boolean | "true" | "false" | "page" | "step" | "location" | "date" | "time"

aria-describedby

Identifies the element (or elements) that describes the object.

Type: string

aria-description

Defines a string value that describes or annotates the current element.

Type: string

aria-details

Identifies the element that provides a detailed, extended description for the object.

Type: string

aria-disabled

Indicates that the element is perceivable but disabled, so it is not editable or otherwise operable.

Type: Booleanish

aria-dropeffect

Indicates what functions can be performed when a dragged object is released on the drop target.

Type: "move" | "none" | "link" | "copy" | "execute" | "popup"

aria-errormessage

Identifies the element that provides an error message for the object.

Type: string

aria-expanded

Indicates whether the element, or another grouping element it controls, is currently expanded or collapsed.

Type: Booleanish

aria-flowto

Identifies the next element (or elements) in an alternate reading order of content which, at the user's discretion, allows assistive technology to override the general default of reading in document source order.

Type: string

aria-grabbed

Indicates an element's "grabbed" state in a drag-and-drop operation.

Type: Booleanish

aria-haspopup

Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by an element.

Type: | boolean | "true" | "false" | "dialog" | "grid" | "listbox" | "menu" | "tree"

aria-hidden

Indicates whether the element is exposed to an accessibility API.

Type: Booleanish

aria-invalid

Indicates the entered value does not conform to the format expected by the application.

Type: boolean | "true" | "false" | "grammar" | "spelling"

aria-keyshortcuts

Indicates keyboard shortcuts that an author has implemented to activate or give focus to an element.

Type: string

aria-labelledby

Identifies the element (or elements) that labels the current element.

Type: string

aria-level

Defines the hierarchical level of an element within a structure.

Type: number

aria-live

Indicates that an element will be updated, and describes the types of updates the user agents, assistive technologies, and user can expect from the live region.

Type: "off" | "assertive" | "polite"

aria-modal

Indicates whether an element is modal when displayed.

Type: Booleanish

aria-multiline

Indicates whether a text box accepts multiple lines of input or only a single line.

Type: Booleanish

aria-multiselectable

Indicates that the user may select more than one item from the current selectable descendants.

Type: Booleanish

aria-orientation

Indicates whether the element's orientation is horizontal, vertical, or unknown/ambiguous.

Type: "horizontal" | "vertical"

aria-owns

Identifies an element (or elements) in order to define a visual, functional, or contextual parent/child relationship between DOM elements where the DOM hierarchy cannot be used to represent the relationship.

Type: string

aria-placeholder

Defines a short hint (a word or short phrase) intended to aid the user with data entry when the control has no value. A hint could be a sample value or a brief description of the expected format.

Type: string

aria-posinset

Defines an element's number or position in the current set of listitems or treeitems. Not required if all elements in the set are present in the DOM.

Type: number

aria-pressed

Indicates the current "pressed" state of toggle buttons.

Type: boolean | "true" | "false" | "mixed"

aria-readonly

Indicates that the element is not editable, but is otherwise operable.

Type: Booleanish

aria-relevant

Indicates what notifications the user agent will trigger when the accessibility tree within a live region is modified.

Type: | "text" | "additions" | "additions removals" | "additions text" | "all" | "removals" | "removals additions" | "removals text" | "text additions" | "text removals"

aria-required

Indicates that user input is required on the element before a form may be submitted.

Type: Booleanish

aria-roledescription

Defines a human-readable, author-localized description for the role of an element.

Type: string

aria-rowcount

Defines the total number of rows in a table, grid, or treegrid.

Type: number

aria-rowindex

Defines an element's row index or position with respect to the total number of rows within a table, grid, or treegrid.

Type: number

aria-rowindextext

Defines a human readable text alternative of aria-rowindex.

Type: string

aria-rowspan

Defines the number of rows spanned by a cell or gridcell within a table, grid, or treegrid.

Type: number

aria-selected

Indicates the current "selected" state of various widgets.

Type: Booleanish

aria-setsize

Defines the number of items in the current set of listitems or treeitems. Not required if all elements in the set are present in the DOM.

Type: number

aria-sort

Indicates if items in a table or grid are sorted in ascending or descending order.

Type: "none" | "ascending" | "descending" | "other"

aria-valuemax

Defines the maximum allowed value for a range widget.

Type: number

aria-valuemin

Defines the minimum allowed value for a range widget.

Type: number

aria-valuenow

Defines the current value for a range widget.

Type: number

aria-valuetext

Defines the human readable text alternative of aria-valuenow for a range widget.

Type: string

autoCapitalize

Type: | (string & {}) | "off" | "none" | "on" | "sentences" | "words" | "characters"

autoCorrect

Type: string

autoFocus

Type: boolean

autoSave

Type: string

className

Type: string

color

Type: string

content

Type: string

contentEditable

Type: Booleanish | "inherit" | "plaintext-only"

contextMenu

Type: string

currentId

The current focused item id.

undefined will automatically focus the first enabled composite item.
null will focus the base composite element and users will be able to navigate out of it using arrow keys.
If currentId is initially set to null, the base composite element itself will have focus and users will be able to navigate to it using arrow keys.

Type: string
Default: undefined

dangerouslySetInnerHTML

Type: { __html: string | TrustedHTML }

datatype

Type: string

defaultChecked

Type: boolean

defaultValue

Type: string | number | readonly string[]

dir

Type: string

disabled

Same as the HTML attribute.

Type: boolean

draggable

Type: Booleanish

enterKeyHint

Type: | "next" | "previous" | "enter" | "done" | "go" | "search" | "send"

focusable

When an element is disabled, it may still be focusable. It works similarly to readOnly on form elements. In this case, only aria-disabled will be set.

Type: boolean

groups

Lists all the composite groups with their id and DOM ref. This state is automatically updated when registerGroup and unregisterGroup are called.

Type: Group[]

hidden

Type: boolean

hide

Changes the visible state to false

Type: () => void

hideOnClickOutside

When enabled, user can hide the dialog by clicking outside it.

Type: boolean

id

Type: string

inert

Type: boolean

inlist

Type: any

inputMode

Hints at the type of data that might be entered by the user while editing the element or its contents

Type: | "none" | "search" | "text" | "tel" | "url" | "email" | "numeric" | "decimal"

is

Specify that a standard HTML element should behave like a defined custom built-in element

Type: string

itemID

Type: string

itemProp

Type: string

itemRef

Type: string

itemScope

Type: boolean

itemType

Type: string

key

Type: Key

lang

Type: string

modal

Toggles Dialog's modal state.

Non-modal: preventBodyScroll doesn't work and focus is free.
Modal: preventBodyScroll is automatically enabled, focus is trapped within the dialog and the dialog is rendered within a Portal by default.

Type: boolean

nonce

Type: string

onAbort

Type: ReactEventHandler<any>

onAbortCapture

Type: ReactEventHandler<any>

onAnimationEnd

Type: AnimationEventHandler<any>

onAnimationEndCapture

Type: AnimationEventHandler<any>

onAnimationIteration

Type: AnimationEventHandler<any>

onAnimationIterationCapture

Type: AnimationEventHandler<any>

onAnimationStart

Type: AnimationEventHandler<any>

onAnimationStartCapture

Type: AnimationEventHandler<any>

onAuxClick

Type: MouseEventHandler<any>

onAuxClickCapture

Type: MouseEventHandler<any>

onBeforeInput

Type: FormEventHandler<any>

onBeforeInputCapture

Type: FormEventHandler<any>

onBeforeToggle

Type: ToggleEventHandler<any>

onBlur

Type: FocusEventHandler<any>

onBlurCapture

Type: FocusEventHandler<any>

onCanPlay

Type: ReactEventHandler<any>

onCanPlayCapture

Type: ReactEventHandler<any>

onCanPlayThrough

Type: ReactEventHandler<any>

onCanPlayThroughCapture

Type: ReactEventHandler<any>

onChange

Type: FormEventHandler<any>

onChangeCapture

Type: FormEventHandler<any>

onClick

Type: MouseEventHandler<any>

onClickCapture

Type: MouseEventHandler<any>

onCompositionEnd

Type: CompositionEventHandler<any>

onCompositionEndCapture

Type: CompositionEventHandler<any>

onCompositionStart

Type: CompositionEventHandler<any>

onCompositionStartCapture

Type: CompositionEventHandler<any>

onCompositionUpdate

Type: CompositionEventHandler<any>

onCompositionUpdateCapture

Type: CompositionEventHandler<any>

onContextMenu

Type: MouseEventHandler<any>

onContextMenuCapture

Type: MouseEventHandler<any>

onCopy

Type: ClipboardEventHandler<any>

onCopyCapture

Type: ClipboardEventHandler<any>

onCut

Type: ClipboardEventHandler<any>

onCutCapture

Type: ClipboardEventHandler<any>

onDoubleClick

Type: MouseEventHandler<any>

onDoubleClickCapture

Type: MouseEventHandler<any>

onDrag

Type: DragEventHandler<any>

onDragCapture

Type: DragEventHandler<any>

onDragEnd

Type: DragEventHandler<any>

onDragEndCapture

Type: DragEventHandler<any>

onDragEnter

Type: DragEventHandler<any>

onDragEnterCapture

Type: DragEventHandler<any>

onDragExit

Type: DragEventHandler<any>

onDragExitCapture

Type: DragEventHandler<any>

onDragLeave

Type: DragEventHandler<any>

onDragLeaveCapture

Type: DragEventHandler<any>

onDragOver

Type: DragEventHandler<any>

onDragOverCapture

Type: DragEventHandler<any>

onDragStart

Type: DragEventHandler<any>

onDragStartCapture

Type: DragEventHandler<any>

onDrop

Type: DragEventHandler<any>

onDropCapture

Type: DragEventHandler<any>

onDurationChange

Type: ReactEventHandler<any>

onDurationChangeCapture

Type: ReactEventHandler<any>

onEmptied

Type: ReactEventHandler<any>

onEmptiedCapture

Type: ReactEventHandler<any>

onEncrypted

Type: ReactEventHandler<any>

onEncryptedCapture

Type: ReactEventHandler<any>

onEnded

Type: ReactEventHandler<any>

onEndedCapture

Type: ReactEventHandler<any>

onError

Type: ReactEventHandler<any>

onErrorCapture

Type: ReactEventHandler<any>

onFocus

Type: FocusEventHandler<any>

onFocusCapture

Type: FocusEventHandler<any>

onGotPointerCapture

Type: PointerEventHandler<any>

onGotPointerCaptureCapture

Type: PointerEventHandler<any>

onInput

Type: FormEventHandler<any>

onInputCapture

Type: FormEventHandler<any>

onInvalid

Type: FormEventHandler<any>

onInvalidCapture

Type: FormEventHandler<any>

onKeyDown

Type: KeyboardEventHandler<any>

onKeyDownCapture

Type: KeyboardEventHandler<any>

onKeyPress

Type: KeyboardEventHandler<any>

onKeyPressCapture

Type: KeyboardEventHandler<any>

onKeyUp

Type: KeyboardEventHandler<any>

onKeyUpCapture

Type: KeyboardEventHandler<any>

onLoad

Type: ReactEventHandler<any>

onLoadCapture

Type: ReactEventHandler<any>

onLoadedData

Type: ReactEventHandler<any>

onLoadedDataCapture

Type: ReactEventHandler<any>

onLoadedMetadata

Type: ReactEventHandler<any>

onLoadedMetadataCapture

Type: ReactEventHandler<any>

onLoadStart

Type: ReactEventHandler<any>

onLoadStartCapture

Type: ReactEventHandler<any>

onLostPointerCapture

Type: PointerEventHandler<any>

onLostPointerCaptureCapture

Type: PointerEventHandler<any>

onMouseDown

Type: MouseEventHandler<any>

onMouseDownCapture

Type: MouseEventHandler<any>

onMouseEnter

Type: MouseEventHandler<any>

onMouseLeave

Type: MouseEventHandler<any>

onMouseMove

Type: MouseEventHandler<any>

onMouseMoveCapture

Type: MouseEventHandler<any>

onMouseOut

Type: MouseEventHandler<any>

onMouseOutCapture

Type: MouseEventHandler<any>

onMouseOver

Type: MouseEventHandler<any>

onMouseOverCapture

Type: MouseEventHandler<any>

onMouseUp

Type: MouseEventHandler<any>

onMouseUpCapture

Type: MouseEventHandler<any>

onPaste

Type: ClipboardEventHandler<any>

onPasteCapture

Type: ClipboardEventHandler<any>

onPause

Type: ReactEventHandler<any>

onPauseCapture

Type: ReactEventHandler<any>

onPlay

Type: ReactEventHandler<any>

onPlayCapture

Type: ReactEventHandler<any>

onPlaying

Type: ReactEventHandler<any>

onPlayingCapture

Type: ReactEventHandler<any>

onPointerCancel

Type: PointerEventHandler<any>

onPointerCancelCapture

Type: PointerEventHandler<any>

onPointerDown

Type: PointerEventHandler<any>

onPointerDownCapture

Type: PointerEventHandler<any>

onPointerEnter

Type: PointerEventHandler<any>

onPointerLeave

Type: PointerEventHandler<any>

onPointerMove

Type: PointerEventHandler<any>

onPointerMoveCapture

Type: PointerEventHandler<any>

onPointerOut

Type: PointerEventHandler<any>

onPointerOutCapture

Type: PointerEventHandler<any>

onPointerOver

Type: PointerEventHandler<any>

onPointerOverCapture

Type: PointerEventHandler<any>

onPointerUp

Type: PointerEventHandler<any>

onPointerUpCapture

Type: PointerEventHandler<any>

onProgress

Type: ReactEventHandler<any>

onProgressCapture

Type: ReactEventHandler<any>

onRateChange

Type: ReactEventHandler<any>

onRateChangeCapture

Type: ReactEventHandler<any>

onReset

Type: FormEventHandler<any>

onResetCapture

Type: FormEventHandler<any>

onResize

Type: ReactEventHandler<any>

onResizeCapture

Type: ReactEventHandler<any>

onScroll

Type: UIEventHandler<any>

onScrollCapture

Type: UIEventHandler<any>

onSeeked

Type: ReactEventHandler<any>

onSeekedCapture

Type: ReactEventHandler<any>

onSeeking

Type: ReactEventHandler<any>

onSeekingCapture

Type: ReactEventHandler<any>

onSelect

Type: ReactEventHandler<any>

onSelectCapture

Type: ReactEventHandler<any>

onStalled

Type: ReactEventHandler<any>

onStalledCapture

Type: ReactEventHandler<any>

onSubmit

Type: FormEventHandler<any>

onSubmitCapture

Type: FormEventHandler<any>

onSuspend

Type: ReactEventHandler<any>

onSuspendCapture

Type: ReactEventHandler<any>

onTimeUpdate

Type: ReactEventHandler<any>

onTimeUpdateCapture

Type: ReactEventHandler<any>

onToggle

Type: ToggleEventHandler<any>

onTouchCancel

Type: TouchEventHandler<any>

onTouchCancelCapture

Type: TouchEventHandler<any>

onTouchEnd

Type: TouchEventHandler<any>

onTouchEndCapture

Type: TouchEventHandler<any>

onTouchMove

Type: TouchEventHandler<any>

onTouchMoveCapture

Type: TouchEventHandler<any>

onTouchStart

Type: TouchEventHandler<any>

onTouchStartCapture

Type: TouchEventHandler<any>

onTransitionCancel

Type: TransitionEventHandler<any>

onTransitionCancelCapture

Type: TransitionEventHandler<any>

onTransitionEnd

Type: TransitionEventHandler<any>

onTransitionEndCapture

Type: TransitionEventHandler<any>

onTransitionRun

Type: TransitionEventHandler<any>

onTransitionRunCapture

Type: TransitionEventHandler<any>

onTransitionStart

Type: TransitionEventHandler<any>

onTransitionStartCapture

Type: TransitionEventHandler<any>

onVolumeChange

Type: ReactEventHandler<any>

onVolumeChangeCapture

Type: ReactEventHandler<any>

onWaiting

Type: ReactEventHandler<any>

onWaitingCapture

Type: ReactEventHandler<any>

onWheel

Type: WheelEventHandler<any>

onWheelCapture

Type: WheelEventHandler<any>

orientation

Defines the orientation of the composite widget. If the composite has a single row or column (one-dimensional), the orientation value determines which arrow keys can be used to move focus:

undefined: all arrow keys work.
horizontal: only left and right arrow keys work.
vertical: only up and down arrow keys work.

It doesn't have any effect on two-dimensional composites.

Type: Orientation
Default: undefined

popover

Type: "" | "auto" | "manual"

popoverTarget

Type: string

popoverTargetAction

Type: "toggle" | "hide" | "show"

prefix

Type: string

preventBodyScroll

When enabled, user can't scroll on body when the dialog is visible. This option doesn't work if the dialog isn't modal.

Type: boolean

property

Type: string

radioGroup

Type: string

ref

Allows getting a ref to the component instance. Once the component unmounts, React will set ref.current to null (or call the ref with null if you passed a callback ref).

Type: | ((instance: any) => void | (() => VoidOrUndefinedOnly)) | RefObject<any>

rel

Type: string

resource

Type: string

results

Type: number

rev

Type: string

role

Type: AriaRole

security

Type: string

slot

Type: string

spellCheck

Type: Booleanish

stopAnimation

Stops animation. It's called automatically if there's a CSS transition.

Type: () => void

style

Type: CSSProperties

suppressContentEditableWarning

Type: boolean

suppressHydrationWarning

Type: boolean

tabIndex

Type: number

title

Type: string

translate

Type: "yes" | "no"

typeof

Type: string

unselectable

Type: "off" | "on"

unstable_autoFocusOnHide

Whether or not to move focus when the dialog hides.

Type: boolean

unstable_autoFocusOnShow

Whether or not to move focus when the dialog shows.

Type: boolean

unstable_disclosureRef

Type: MutableRefObject<HTMLElement | null>

unstable_finalFocusRef

The element that will be focused when the dialog hides. When not set, the disclosure component will be used.

Type: RefObject<HTMLElement>

unstable_initialFocusRef

The element that will be focused when the dialog shows. When not set, the first tabbable element within the dialog will be used.

Type: RefObject<HTMLElement>

unstable_moves

Stores the number of moves that have been performed by calling move, next, previous, up, down, first or last.

Type: number
Default: 0

unstable_orphan

Whether or not the dialog should be a child of its parent. Opening a nested orphan dialog will close its parent dialog if hideOnClickOutside is set to true on the parent. It will be set to false if modal is false.

Type: boolean

unstable_popoverRef

The popover element.

Type: RefObject<HTMLElement | null>

unstable_popoverStyles

Popover styles.

Type: CSSProperties

unstable_system

Options passed to reakit-system-*

Type: any

unstable_virtual

If enabled, the composite element will act as an aria-activedescendant container instead of roving tabindex. DOM focus will remain on the composite while its items receive virtual focus.

Type: boolean

visible

Whether it's visible or not.

Type: boolean

vocab

Type: string

wrap

Has effect only on two-dimensional composites. If enabled, moving to the next item from the last one in a row or column will focus the first item in the next row or column and vice-versa.

true wraps between rows and columns.
horizontal wraps only between rows.
vertical wraps only between columns.
If loop matches the value of wrap, it'll wrap between the last item in the last row or column and the first item in the first row or column and vice-versa.

Type: boolean | Orientation

wrapElement

Function returned by the hook to wrap the element to which html props will be passed.

Type: (element: ReactNode) => ReactNode