LoadingSpinner

Der LoadingSpinner signalisiert, dass Inhalte im Hintergrund geladen werden.

import { LoadingSpinner } from "@mittwald/flow-react-components";

<LoadingSpinner />

Best Practices

Setze den LoadingSpinner nur bei unbestimmter Dauer ein. Bei konkret darstellbarem Fortschritt eignet sich eine ProgressBar‍, bei kurzem initialem Laden mit bekannter Layout-Struktur ein Skeleton‍.
Setze ihn nur bei relevanter Ladezeit ein, als Faustregel ab etwa einer Sekunde. Bei sehr kurzen Ladezeiten bringt visuelles Feedback meist keinen Mehrwert.
Kombiniere ihn bei längeren Ladezeiten mit einer IllustratedMessage‍. So erhält der User zusätzliche Informationen.
Platziere ihn dort, wohin der User nach dem Laden schauen soll.
Zeige nicht zu viele Spinner gleichzeitig. Mehrere gleichzeitig wirken schnell unruhig.

Color

Im Standardfall wird der LoadingSpinner in der Color Default verwendet – ein neutraler Ton mit guter Sichtbarkeit, der nicht von der übrigen Benutzeroberfläche ablenkt.

Light und Dark

Auf farbigen oder dekorativen Hintergründen kann der LoadingSpinner in Light oder Dark dargestellt werden. Welche Color wann passt, beschreibt Color‍.

Properties

Property	Type	Description
`color`	default (default) \| dark \| light \| dark-static \| light-static	The color of the loading spinner.
`size`	s \| m (default) \| l	The size of the icon.
`status`	info \| success \| warning \| danger \| unavailable	The elements status. @deprecated Use `color` instead.
`string`	string \| number
`id`	string
`children`	ReactNode
`width`	string \| number
`offset`	string \| number
`className`	string
`style`	CSSProperties
`lang`	string
`end`	string \| number
`slot`	string
`type`	string
`height`	string \| number
`max`	string \| number
`min`	string \| number
`suppressHydrationWarning`	boolean
`nonce`	string
`tabIndex`	number
`role`	AriaRole
`part`	string	@see https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/part
`dangerouslySetInnerHTML`	{ __html: string \| TrustedHTML; }
`orientation`	string \| number
`clipPath`	string
`filter`	string
`mask`	string
`path`	string
`spacing`	string \| number
`operator`	string \| number
`target`	string
`href`	string
`media`	string
`origin`	string \| number
`method`	string
`crossOrigin`	CrossOrigin
`accentHeight`	string \| number
`accumulate`	none \| sum
`additive`	replace \| sum
`alignmentBaseline`	inherit \| auto \| middle \| alphabetic \| hanging \| ideographic \| mathematical \| baseline \| before-edge \| text-before-edge \| central \| after-edge \| text-after-edge
`allowReorder`	yes \| no
`alphabetic`	string \| number
`amplitude`	string \| number
`arabicForm`	initial \| medial \| terminal \| isolated
`ascent`	string \| number
`attributeName`	string
`attributeType`	string
`autoReverse`	Booleanish
`azimuth`	string \| number
`baseFrequency`	string \| number
`baselineShift`	string \| number
`baseProfile`	string \| number
`bbox`	string \| number
`begin`	string \| number
`bias`	string \| number
`by`	string \| number
`calcMode`	string \| number
`capHeight`	string \| number
`clip`	string \| number
`clipPathUnits`	string \| number
`clipRule`	string \| number
`colorInterpolation`	string \| number
`colorInterpolationFilters`	inherit \| auto \| sRGB \| linearRGB
`colorProfile`	string \| number
`colorRendering`	string \| number
`contentScriptType`	string \| number
`contentStyleType`	string \| number
`cursor`	string \| number
`cx`	string \| number
`cy`	string \| number
`d`	string
`decelerate`	string \| number
`descent`	string \| number
`diffuseConstant`	string \| number
`direction`	string \| number
`display`	string \| number
`divisor`	string \| number
`dominantBaseline`	inherit \| auto \| middle \| alphabetic \| hanging \| ideographic \| mathematical \| text-before-edge \| central \| text-after-edge \| use-script \| no-change \| reset-size
`dur`	string \| number
`dx`	string \| number
`dy`	string \| number
`edgeMode`	string \| number
`elevation`	string \| number
`enableBackground`	string \| number
`exponent`	string \| number
`externalResourcesRequired`	Booleanish
`fill`	string
`fillOpacity`	string \| number
`fillRule`	inherit \| nonzero \| evenodd
`filterRes`	string \| number
`filterUnits`	string \| number
`floodColor`	string \| number
`floodOpacity`	string \| number
`focusable`	Booleanish \| auto
`fontFamily`	string
`fontSize`	string \| number
`fontSizeAdjust`	string \| number
`fontStretch`	string \| number
`fontStyle`	string \| number
`fontVariant`	string \| number
`fontWeight`	string \| number
`format`	string \| number
`fr`	string \| number
`from`	string \| number
`fx`	string \| number
`fy`	string \| number
`g1`	string \| number
`g2`	string \| number
`glyphName`	string \| number
`glyphOrientationHorizontal`	string \| number
`glyphOrientationVertical`	string \| number
`glyphRef`	string \| number
`gradientTransform`	string
`gradientUnits`	string
`hanging`	string \| number
`horizAdvX`	string \| number
`horizOriginX`	string \| number
`ideographic`	string \| number
`imageRendering`	string \| number
`in2`	string \| number
`in`	string
`intercept`	string \| number
`k1`	string \| number
`k2`	string \| number
`k3`	string \| number
`k4`	string \| number
`k`	string \| number
`kernelMatrix`	string \| number
`kernelUnitLength`	string \| number
`kerning`	string \| number
`keyPoints`	string \| number
`keySplines`	string \| number
`keyTimes`	string \| number
`lengthAdjust`	string \| number
`letterSpacing`	string \| number
`lightingColor`	string \| number
`limitingConeAngle`	string \| number
`local`	string \| number
`markerEnd`	string
`markerHeight`	string \| number
`markerMid`	string
`markerStart`	string
`markerUnits`	string \| number
`markerWidth`	string \| number
`maskContentUnits`	string \| number
`maskUnits`	string \| number
`mathematical`	string \| number
`mode`	string \| number
`numOctaves`	string \| number
`opacity`	string \| number
`order`	string \| number
`orient`	string \| number
`overflow`	string \| number
`overlinePosition`	string \| number
`overlineThickness`	string \| number
`paintOrder`	string \| number
`panose1`	string \| number
`pathLength`	string \| number
`patternContentUnits`	string
`patternTransform`	string \| number
`patternUnits`	string
`pointerEvents`	string \| number
`points`	string
`pointsAtX`	string \| number
`pointsAtY`	string \| number
`pointsAtZ`	string \| number
`preserveAlpha`	Booleanish
`preserveAspectRatio`	string
`primitiveUnits`	string \| number
`r`	string \| number
`radius`	string \| number
`refX`	string \| number
`refY`	string \| number
`renderingIntent`	string \| number
`repeatCount`	string \| number
`repeatDur`	string \| number
`requiredExtensions`	string \| number
`requiredFeatures`	string \| number
`restart`	string \| number
`result`	string
`rotate`	string \| number
`rx`	string \| number
`ry`	string \| number
`scale`	string \| number
`seed`	string \| number
`shapeRendering`	string \| number
`slope`	string \| number
`specularConstant`	string \| number
`specularExponent`	string \| number
`speed`	string \| number
`spreadMethod`	string
`startOffset`	string \| number
`stdDeviation`	string \| number
`stemh`	string \| number
`stemv`	string \| number
`stitchTiles`	string \| number
`stopColor`	string
`stopOpacity`	string \| number
`strikethroughPosition`	string \| number
`strikethroughThickness`	string \| number
`stroke`	string
`strokeDasharray`	string \| number
`strokeDashoffset`	string \| number
`strokeLinecap`	inherit \| round \| butt \| square
`strokeLinejoin`	inherit \| round \| miter \| bevel
`strokeMiterlimit`	string \| number
`strokeOpacity`	string \| number
`strokeWidth`	string \| number
`surfaceScale`	string \| number
`systemLanguage`	string \| number
`tableValues`	string \| number
`targetX`	string \| number
`targetY`	string \| number
`textAnchor`	start \| end \| inherit \| middle
`textDecoration`	string \| number
`textLength`	string \| number
`textRendering`	string \| number
`to`	string \| number
`transform`	string
`u1`	string \| number
`u2`	string \| number
`underlinePosition`	string \| number
`underlineThickness`	string \| number
`unicode`	string \| number
`unicodeBidi`	string \| number
`unicodeRange`	string \| number
`unitsPerEm`	string \| number
`vAlphabetic`	string \| number
`values`	string
`vectorEffect`	string \| number
`version`	string
`vertAdvY`	string \| number
`vertOriginX`	string \| number
`vertOriginY`	string \| number
`vHanging`	string \| number
`vIdeographic`	string \| number
`viewBox`	string
`viewTarget`	string \| number
`visibility`	string \| number
`vMathematical`	string \| number
`widths`	string \| number
`wordSpacing`	string \| number
`writingMode`	string \| number
`x1`	string \| number
`x2`	string \| number
`x`	string \| number
`xChannelSelector`	string
`xHeight`	string \| number
`xlinkActuate`	string
`xlinkArcrole`	string
`xlinkHref`	string
`xlinkRole`	string
`xlinkShow`	string
`xlinkTitle`	string
`xlinkType`	string
`xmlBase`	string
`xmlLang`	string
`xmlns`	string
`xmlnsXlink`	string
`xmlSpace`	string
`y1`	string \| number
`y2`	string \| number
`y`	string \| number
`yChannelSelector`	string
`z`	string \| number
`zoomAndPan`	string
`wrapWith`	ReactElement<unknown, string \| JSXElementConstructor<any>>	A React element the component is wrapped with. The element is cloned and receives the component as its only child — useful to render the component inside a link, a tooltip trigger or any other wrapper without changing the surrounding markup.
`ref`	Ref<HTMLSpanElement>	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). @see React Docs
`key`	Key

Events

Property	Type	Description
`onClick`	MouseEventHandler<HTMLElement>
`onClickCapture`	MouseEventHandler<HTMLElement>
`onAuxClick`	MouseEventHandler<HTMLElement>
`onAuxClickCapture`	MouseEventHandler<HTMLElement>
`onContextMenu`	MouseEventHandler<HTMLElement>
`onContextMenuCapture`	MouseEventHandler<HTMLElement>
`onDoubleClick`	MouseEventHandler<HTMLElement>
`onDoubleClickCapture`	MouseEventHandler<HTMLElement>
`onMouseDown`	MouseEventHandler<HTMLElement>
`onMouseDownCapture`	MouseEventHandler<HTMLElement>
`onMouseEnter`	MouseEventHandler<HTMLElement>
`onMouseLeave`	MouseEventHandler<HTMLElement>
`onMouseMove`	MouseEventHandler<HTMLElement>
`onMouseMoveCapture`	MouseEventHandler<HTMLElement>
`onMouseOut`	MouseEventHandler<HTMLElement>
`onMouseOutCapture`	MouseEventHandler<HTMLElement>
`onMouseOver`	MouseEventHandler<HTMLElement>
`onMouseOverCapture`	MouseEventHandler<HTMLElement>
`onMouseUp`	MouseEventHandler<HTMLElement>
`onMouseUpCapture`	MouseEventHandler<HTMLElement>
`onTouchCancel`	TouchEventHandler<HTMLElement>
`onTouchCancelCapture`	TouchEventHandler<HTMLElement>
`onTouchEnd`	TouchEventHandler<HTMLElement>
`onTouchEndCapture`	TouchEventHandler<HTMLElement>
`onTouchMove`	TouchEventHandler<HTMLElement>
`onTouchMoveCapture`	TouchEventHandler<HTMLElement>
`onTouchStart`	TouchEventHandler<HTMLElement>
`onTouchStartCapture`	TouchEventHandler<HTMLElement>
`onPointerDown`	PointerEventHandler<HTMLElement>
`onPointerDownCapture`	PointerEventHandler<HTMLElement>
`onPointerMove`	PointerEventHandler<HTMLElement>
`onPointerMoveCapture`	PointerEventHandler<HTMLElement>
`onPointerUp`	PointerEventHandler<HTMLElement>
`onPointerUpCapture`	PointerEventHandler<HTMLElement>
`onPointerCancel`	PointerEventHandler<HTMLElement>
`onPointerCancelCapture`	PointerEventHandler<HTMLElement>
`onPointerEnter`	PointerEventHandler<HTMLElement>
`onPointerLeave`	PointerEventHandler<HTMLElement>
`onPointerOver`	PointerEventHandler<HTMLElement>
`onPointerOverCapture`	PointerEventHandler<HTMLElement>
`onPointerOut`	PointerEventHandler<HTMLElement>
`onPointerOutCapture`	PointerEventHandler<HTMLElement>
`onGotPointerCapture`	PointerEventHandler<HTMLElement>
`onGotPointerCaptureCapture`	PointerEventHandler<HTMLElement>
`onLostPointerCapture`	PointerEventHandler<HTMLElement>
`onLostPointerCaptureCapture`	PointerEventHandler<HTMLElement>
`onScroll`	UIEventHandler<HTMLElement>
`onScrollCapture`	UIEventHandler<HTMLElement>
`onWheel`	WheelEventHandler<HTMLElement>
`onWheelCapture`	WheelEventHandler<HTMLElement>
`onAnimationStart`	AnimationEventHandler<HTMLElement>
`onAnimationStartCapture`	AnimationEventHandler<HTMLElement>
`onAnimationEnd`	AnimationEventHandler<HTMLElement>
`onAnimationEndCapture`	AnimationEventHandler<HTMLElement>
`onAnimationIteration`	AnimationEventHandler<HTMLElement>
`onAnimationIterationCapture`	AnimationEventHandler<HTMLElement>
`onTransitionCancel`	TransitionEventHandler<HTMLElement>
`onTransitionCancelCapture`	TransitionEventHandler<HTMLElement>
`onTransitionEnd`	TransitionEventHandler<HTMLElement>
`onTransitionEndCapture`	TransitionEventHandler<HTMLElement>
`onTransitionRun`	TransitionEventHandler<HTMLElement>
`onTransitionRunCapture`	TransitionEventHandler<HTMLElement>
`onTransitionStart`	TransitionEventHandler<HTMLElement>
`onTransitionStartCapture`	TransitionEventHandler<HTMLElement>
`onFocus`	FocusEventHandler<HTMLElement>
`onBlur`	FocusEventHandler<HTMLElement>
`onKeyDown`	KeyboardEventHandler<HTMLElement>
`onKeyUp`	KeyboardEventHandler<HTMLElement>
`onChange`	ChangeEventHandler<HTMLElement, Element>
`onCopy`	ClipboardEventHandler<HTMLElement>
`onCut`	ClipboardEventHandler<HTMLElement>
`onPaste`	ClipboardEventHandler<HTMLElement>
`onCompositionStart`	CompositionEventHandler<HTMLElement>
`onCompositionEnd`	CompositionEventHandler<HTMLElement>
`onCompositionUpdate`	CompositionEventHandler<HTMLElement>
`onSelect`	ReactEventHandler<HTMLElement>
`onBeforeInput`	InputEventHandler<HTMLElement>
`onInput`	InputEventHandler<HTMLElement>
`onCopyCapture`	ClipboardEventHandler<HTMLElement>
`onCutCapture`	ClipboardEventHandler<HTMLElement>
`onPasteCapture`	ClipboardEventHandler<HTMLElement>
`onCompositionEndCapture`	CompositionEventHandler<HTMLElement>
`onCompositionStartCapture`	CompositionEventHandler<HTMLElement>
`onCompositionUpdateCapture`	CompositionEventHandler<HTMLElement>
`onFocusCapture`	FocusEventHandler<HTMLElement>
`onBlurCapture`	FocusEventHandler<HTMLElement>
`onChangeCapture`	ChangeEventHandler<HTMLElement, Element>
`onBeforeInputCapture`	InputEventHandler<HTMLElement>
`onInputCapture`	InputEventHandler<HTMLElement>
`onReset`	ReactEventHandler<HTMLElement>
`onResetCapture`	ReactEventHandler<HTMLElement>
`onSubmit`	SubmitEventHandler<HTMLElement>
`onSubmitCapture`	SubmitEventHandler<HTMLElement>
`onInvalid`	ReactEventHandler<HTMLElement>
`onInvalidCapture`	ReactEventHandler<HTMLElement>
`onLoad`	ReactEventHandler<HTMLElement>
`onLoadCapture`	ReactEventHandler<HTMLElement>
`onError`	ReactEventHandler<HTMLElement>
`onErrorCapture`	ReactEventHandler<HTMLElement>
`onKeyDownCapture`	KeyboardEventHandler<HTMLElement>
`onKeyPress`	KeyboardEventHandler<HTMLElement>	@deprecated Use `onKeyUp` or `onKeyDown` instead
`onKeyPressCapture`	KeyboardEventHandler<HTMLElement>	@deprecated Use `onKeyUpCapture` or `onKeyDownCapture` instead
`onKeyUpCapture`	KeyboardEventHandler<HTMLElement>
`onAbort`	ReactEventHandler<HTMLElement>
`onAbortCapture`	ReactEventHandler<HTMLElement>
`onCanPlay`	ReactEventHandler<HTMLElement>
`onCanPlayCapture`	ReactEventHandler<HTMLElement>
`onCanPlayThrough`	ReactEventHandler<HTMLElement>
`onCanPlayThroughCapture`	ReactEventHandler<HTMLElement>
`onDurationChange`	ReactEventHandler<HTMLElement>
`onDurationChangeCapture`	ReactEventHandler<HTMLElement>
`onEmptied`	ReactEventHandler<HTMLElement>
`onEmptiedCapture`	ReactEventHandler<HTMLElement>
`onEncrypted`	ReactEventHandler<HTMLElement>
`onEncryptedCapture`	ReactEventHandler<HTMLElement>
`onEnded`	ReactEventHandler<HTMLElement>
`onEndedCapture`	ReactEventHandler<HTMLElement>
`onLoadedData`	ReactEventHandler<HTMLElement>
`onLoadedDataCapture`	ReactEventHandler<HTMLElement>
`onLoadedMetadata`	ReactEventHandler<HTMLElement>
`onLoadedMetadataCapture`	ReactEventHandler<HTMLElement>
`onLoadStart`	ReactEventHandler<HTMLElement>
`onLoadStartCapture`	ReactEventHandler<HTMLElement>
`onPause`	ReactEventHandler<HTMLElement>
`onPauseCapture`	ReactEventHandler<HTMLElement>
`onPlay`	ReactEventHandler<HTMLElement>
`onPlayCapture`	ReactEventHandler<HTMLElement>
`onPlaying`	ReactEventHandler<HTMLElement>
`onPlayingCapture`	ReactEventHandler<HTMLElement>
`onProgress`	ReactEventHandler<HTMLElement>
`onProgressCapture`	ReactEventHandler<HTMLElement>
`onRateChange`	ReactEventHandler<HTMLElement>
`onRateChangeCapture`	ReactEventHandler<HTMLElement>
`onSeeked`	ReactEventHandler<HTMLElement>
`onSeekedCapture`	ReactEventHandler<HTMLElement>
`onSeeking`	ReactEventHandler<HTMLElement>
`onSeekingCapture`	ReactEventHandler<HTMLElement>
`onStalled`	ReactEventHandler<HTMLElement>
`onStalledCapture`	ReactEventHandler<HTMLElement>
`onSuspend`	ReactEventHandler<HTMLElement>
`onSuspendCapture`	ReactEventHandler<HTMLElement>
`onTimeUpdate`	ReactEventHandler<HTMLElement>
`onTimeUpdateCapture`	ReactEventHandler<HTMLElement>
`onVolumeChange`	ReactEventHandler<HTMLElement>
`onVolumeChangeCapture`	ReactEventHandler<HTMLElement>
`onWaiting`	ReactEventHandler<HTMLElement>
`onWaitingCapture`	ReactEventHandler<HTMLElement>
`onDrag`	DragEventHandler<HTMLElement>
`onDragCapture`	DragEventHandler<HTMLElement>
`onDragEnd`	DragEventHandler<HTMLElement>
`onDragEndCapture`	DragEventHandler<HTMLElement>
`onDragEnter`	DragEventHandler<HTMLElement>
`onDragEnterCapture`	DragEventHandler<HTMLElement>
`onDragExit`	DragEventHandler<HTMLElement>
`onDragExitCapture`	DragEventHandler<HTMLElement>
`onDragLeave`	DragEventHandler<HTMLElement>
`onDragLeaveCapture`	DragEventHandler<HTMLElement>
`onDragOver`	DragEventHandler<HTMLElement>
`onDragOverCapture`	DragEventHandler<HTMLElement>
`onDragStart`	DragEventHandler<HTMLElement>
`onDragStartCapture`	DragEventHandler<HTMLElement>
`onDrop`	DragEventHandler<HTMLElement>
`onDropCapture`	DragEventHandler<HTMLElement>
`onSelectCapture`	ReactEventHandler<HTMLElement>
`onScrollEnd`	UIEventHandler<HTMLElement>
`onScrollEndCapture`	UIEventHandler<HTMLElement>
`onToggle`	ToggleEventHandler<HTMLElement>
`onBeforeToggle`	ToggleEventHandler<HTMLElement>

Accessibility

Property	Type	Description
`aria-label`	string	Defines a string value that labels the current element. @see aria-labelledby.
`aria-labelledby`	string	Identifies the element (or elements) that labels the current element. @see aria-describedby.
`aria-describedby`	string	Identifies the element (or elements) that describes the object. @see aria-labelledby
`aria-details`	string	Identifies the element that provides a detailed, extended description for the object. @see aria-describedby.
`aria-activedescendant`	string	Identifies the currently active element when DOM focus is on a composite widget, textbox, group, or application.
`aria-autocomplete`	list \| none \| inline \| both	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.
`aria-haspopup`	boolean \| false \| true \| menu \| listbox \| tree \| grid \| dialog	Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by an element.
`aria-controls`	string	Identifies the element (or elements) whose contents or presence are controlled by the current element. @see aria-owns.
`aria-errormessage`	string	Identifies the element that provides an error message for the object. @see aria-invalid @see aria-describedby.
`aria-atomic`	Booleanish	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.
`aria-braillelabel`	string	Defines a string value that labels the current element, which is intended to be converted into Braille. @see aria-label.
`aria-brailleroledescription`	string	Defines a human-readable, author-localized abbreviated description for the role of an element, which is intended to be converted into Braille. @see aria-roledescription.
`aria-busy`	Booleanish
`aria-checked`	boolean \| false \| true \| mixed	Indicates the current "checked" state of checkboxes, radio buttons, and other widgets. @see aria-pressed @see aria-selected.
`aria-colcount`	number	Defines the total number of columns in a table, grid, or treegrid. @see aria-colindex.
`aria-colindex`	number	Defines an element's column index or position with respect to the total number of columns within a table, grid, or treegrid. @see aria-colcount @see aria-colspan.
`aria-colindextext`	string	Defines a human readable text alternative of aria-colindex. @see aria-rowindextext.
`aria-colspan`	number	Defines the number of columns spanned by a cell or gridcell within a table, grid, or treegrid. @see aria-colindex @see aria-rowspan.
`aria-current`	boolean \| step \| false \| true \| page \| location \| date \| time	Indicates the element that represents the current item within a container or set of related elements.
`aria-description`	string	Defines a string value that describes or annotates the current element. @see related aria-describedby.
`aria-disabled`	Booleanish	Indicates that the element is perceivable but disabled, so it is not editable or otherwise operable. @see aria-hidden @see aria-readonly.
`aria-dropeffect`	none \| link \| copy \| execute \| move \| popup	Indicates what functions can be performed when a dragged object is released on the drop target. @deprecated in ARIA 1.1
`aria-expanded`	Booleanish	Indicates whether the element, or another grouping element it controls, is currently expanded or collapsed.
`aria-flowto`	string	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.
`aria-grabbed`	Booleanish	Indicates an element's "grabbed" state in a drag-and-drop operation. @deprecated in ARIA 1.1
`aria-hidden`	Booleanish	Indicates whether the element is exposed to an accessibility API. @see aria-disabled.
`aria-invalid`	boolean \| false \| true \| grammar \| spelling	Indicates the entered value does not conform to the format expected by the application. @see aria-errormessage.
`aria-keyshortcuts`	string	Indicates keyboard shortcuts that an author has implemented to activate or give focus to an element.
`aria-level`	number	Defines the hierarchical level of an element within a structure.
`aria-live`	off \| assertive \| polite	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.
`aria-modal`	Booleanish	Indicates whether an element is modal when displayed.
`aria-multiline`	Booleanish	Indicates whether a text box accepts multiple lines of input or only a single line.
`aria-multiselectable`	Booleanish	Indicates that the user may select more than one item from the current selectable descendants.
`aria-orientation`	horizontal \| vertical	Indicates whether the element's orientation is horizontal, vertical, or unknown/ambiguous.
`aria-owns`	string	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. @see aria-controls.
`aria-placeholder`	string	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.
`aria-posinset`	number	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. @see aria-setsize.
`aria-pressed`	boolean \| false \| true \| mixed	Indicates the current "pressed" state of toggle buttons. @see aria-checked @see aria-selected.
`aria-readonly`	Booleanish	Indicates that the element is not editable, but is otherwise operable. @see aria-disabled.
`aria-relevant`	text \| additions \| additions removals \| additions text \| all \| removals \| removals additions \| removals text \| text additions \| text removals	Indicates what notifications the user agent will trigger when the accessibility tree within a live region is modified. @see aria-atomic.
`aria-required`	Booleanish	Indicates that user input is required on the element before a form may be submitted.
`aria-roledescription`	string	Defines a human-readable, author-localized description for the role of an element.
`aria-rowcount`	number	Defines the total number of rows in a table, grid, or treegrid. @see aria-rowindex.
`aria-rowindex`	number	Defines an element's row index or position with respect to the total number of rows within a table, grid, or treegrid. @see aria-rowcount @see aria-rowspan.
`aria-rowindextext`	string	Defines a human readable text alternative of aria-rowindex. @see aria-colindextext.
`aria-rowspan`	number	Defines the number of rows spanned by a cell or gridcell within a table, grid, or treegrid. @see aria-rowindex @see aria-colspan.
`aria-selected`	Booleanish	Indicates the current "selected" state of various widgets. @see aria-checked @see aria-pressed.
`aria-setsize`	number	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. @see aria-posinset.
`aria-sort`	none \| ascending \| descending \| other	Indicates if items in a table or grid are sorted in ascending or descending order.
`aria-valuemax`	number	Defines the maximum allowed value for a range widget.
`aria-valuemin`	number	Defines the minimum allowed value for a range widget.
`aria-valuenow`	number	Defines the current value for a range widget. @see aria-valuetext.
`aria-valuetext`	string	Defines the human readable text alternative of aria-valuenow for a range widget.

Components

Integrations