Interface MultiSelectProps

Hierarchy

  • Omit<SelectProps, "children">

    Hierarchy

    • MultiSelectProps

Properties

__css? _active? _activeLink? _activeStep? _after? _autofill? _before? _checked? _dark? _disabled? _empty? _even? _expanded? _first? _focus? _focusVisible? _focusWithin? _fullScreen? _grabbed? _groupActive? _groupChecked? _groupDisabled? _groupFocus? _groupFocusVisible? _groupFocusWithin? _groupHover? _groupInvalid? _hidden? _highlighted? _hover? _indeterminate? _invalid? _last? _light? _loading? _ltr? _mediaDark? _mediaReduceMotion? _notFirst? _notLast? _odd? _peerActive? _peerChecked? _peerDisabled? _peerFocus? _peerFocusVisible? _peerFocusWithin? _peerHover? _peerInvalid? _peerPlaceholderShown? _placeholder? _placeholderShown? _pressed? _readOnly? _rtl? _selected? _selection? _valid? _visited? about? accessKey? actionGroupProps? alignContent? alignItems? alignSelf? animation? appearance? apply? aria-activedescendant? aria-atomic? aria-autocomplete? aria-busy? aria-checked? aria-colcount? aria-colindex? aria-colspan? aria-controls? aria-current? aria-describedby? aria-details? aria-disabled? aria-dropeffect? aria-errormessage? aria-expanded? aria-flowto? aria-grabbed? aria-haspopup? aria-hidden? aria-invalid? aria-keyshortcuts? aria-label? aria-labelledby? aria-level? aria-live? aria-modal? aria-multiline? aria-multiselectable? aria-orientation? aria-owns? aria-placeholder? aria-posinset? aria-pressed? aria-readonly? aria-relevant? aria-required? aria-roledescription? aria-rowcount? aria-rowindex? aria-rowspan? aria-selected? aria-setsize? aria-sort? aria-valuemax? aria-valuemin? aria-valuenow? aria-valuetext? arrowPadding? as? autoCapitalize? autoComplete? autoCorrect? autoFocus? autoSave? backdropBlur? backdropBrightness? backdropContrast? backdropFilter? backdropHueRotate? backdropInvert? backdropSaturate? background? backgroundAttachment? backgroundBlendMode? backgroundClip? backgroundColor? backgroundImage? backgroundPosition? backgroundRepeat? backgroundSize? bg? bgAttachment? bgBlendMode? bgClip? bgColor? bgGradient? bgImage? bgImg? bgPos? bgPosition? bgRepeat? bgSize? blendMode? blockSize? blur? border? borderBlock? borderBlockEnd? borderBlockEndColor? borderBlockEndStyle? borderBlockEndWidth? borderBlockStart? borderBlockStartColor? borderBlockStartStyle? borderBlockStartWidth? borderBottom? borderBottomColor? borderBottomEndRadius? borderBottomLeftRadius? borderBottomRadius? borderBottomRightRadius? borderBottomStartRadius? borderBottomStyle? borderBottomWidth? borderColor? borderEnd? borderEndColor? borderEndEndRadius? borderEndRadius? borderEndStartRadius? borderEndStyle? borderEndWidth? borderInline? borderInlineEnd? borderInlineEndColor? borderInlineEndRadius? borderInlineEndStyle? borderInlineEndWidth? borderInlineStart? borderInlineStartColor? borderInlineStartRadius? borderInlineStartStyle? borderInlineStartWidth? borderLeft? borderLeftColor? borderLeftRadius? borderLeftStyle? borderLeftWidth? borderRadius? borderRight? borderRightColor? borderRightRadius? borderRightStyle? borderRightWidth? borderStart? borderStartColor? borderStartEndRadius? borderStartRadius? borderStartStartRadius? borderStartStyle? borderStartWidth? borderStyle? borderTop? borderTopColor? borderTopEndRadius? borderTopLeftRadius? borderTopRadius? borderTopRightRadius? borderTopStartRadius? borderTopStyle? borderTopWidth? borderWidth? borderX? borderY? bottom? boundary? boxDecorationBreak? boxShadow? boxSize? boxSizing? brightness? children? className? clipPath? color? columnGap? contentEditable? contextMenu? contrast? controlProps? create? css? cursor? dangerouslySetInnerHTML? datatype? defaultChecked? defaultValue? dir? direction? disabled? display? draggable? dropShadow? duplicates? enabled? eventListeners? experimental_spaceX? experimental_spaceY? fill? filter? filterFn? flex? flexBasis? flexDir? flexDirection? flexFlow? flexGrow? flexShrink? flexWrap? flip? float? fontFamily? fontSize? fontStyle? fontWeight? form? gap? getDebounce? getOption? gridArea? gridAutoColumns? gridAutoFlow? gridAutoRows? gridColumn? gridColumnEnd? gridColumnGap? gridColumnStart? gridGap? gridRow? gridRowEnd? gridRowGap? gridRowStart? gridTemplate? gridTemplateAreas? gridTemplateColumns? gridTemplateRows? gutter? h? height? hidden? hueRotate? id? inlineSize? inlist? inputMode? inset? insetBlock? insetBlockEnd? insetBlockStart? insetEnd? insetInline? insetInlineEnd? insetInlineStart? insetStart? insetX? insetY? invert? is? isolation? itemID? itemProp? itemRef? itemScope? itemType? justifyContent? justifyItems? justifySelf? key? label? labelProps? lang? layerStyle? left? letterSpacing? lineHeight? listProps? listStyleImage? listStyleImg? listStylePos? listStylePosition? listStyleType? m? margin? marginBlock? marginBlockEnd? marginBlockStart? marginBottom? marginEnd? marginInline? marginInlineEnd? marginInlineStart? marginLeft? marginRight? marginStart? marginTop? marginX? marginY? matchWidth? maxBlockSize? maxH? maxHeight? maxInlineSize? maxW? maxWidth? mb? me? minBlockSize? minH? minHeight? minInlineSize? minW? minWidth? mixBlendMode? ml? modifiers? mr? ms? mt? multiple? mx? my? name? noOfLines? objectFit? objectPosition? offset? onAbort? onAbortCapture? onAnimationEnd? onAnimationEndCapture? onAnimationIteration? onAnimationIterationCapture? onAnimationStart? onAnimationStartCapture? onAuxClick? onAuxClickCapture? onBeforeInput? onBeforeInputCapture? onBlur? onBlurCapture? onCanPlay? onCanPlayCapture? onCanPlayThrough? onCanPlayThroughCapture? onChange onChangeCapture? onClick? onClickCapture? onCompositionEnd? onCompositionEndCapture? onCompositionStart? onCompositionStartCapture? onCompositionUpdate? onCompositionUpdateCapture? onContextMenu? onContextMenuCapture? onCopy? onCopyCapture? onCut? onCutCapture? onDoubleClick? onDoubleClickCapture? onDrag? onDragCapture? onDragEnd? onDragEndCapture? onDragEnter? onDragEnterCapture? onDragExit? onDragExitCapture? onDragLeave? onDragLeaveCapture? onDragOver? onDragOverCapture? onDragStart? onDragStartCapture? onDrop? onDropCapture? onDurationChange? onDurationChangeCapture? onEmptied? onEmptiedCapture? onEncrypted? onEncryptedCapture? onEnded? onEndedCapture? onError? onErrorCapture? onFocus? onFocusCapture? onGotPointerCapture? onGotPointerCaptureCapture? onInput? onInputCapture? onInvalid? onInvalidCapture? onKeyDown? onKeyDownCapture? onKeyPress? onKeyPressCapture? onKeyUp? onKeyUpCapture? onLoad? onLoadCapture? onLoadStart? onLoadStartCapture? onLoadedData? onLoadedDataCapture? onLoadedMetadata? onLoadedMetadataCapture? onLostPointerCapture? onLostPointerCaptureCapture? onMouseDown? onMouseDownCapture? onMouseEnter? onMouseLeave? onMouseMove? onMouseMoveCapture? onMouseOut? onMouseOutCapture? onMouseOver? onMouseOverCapture? onMouseUp? onMouseUpCapture? onPaste? onPasteCapture? onPause? onPauseCapture? onPlay? onPlayCapture? onPlaying? onPlayingCapture? onPointerCancel? onPointerCancelCapture? onPointerDown? onPointerDownCapture? onPointerEnter? onPointerEnterCapture? onPointerLeave? onPointerLeaveCapture? onPointerMove? onPointerMoveCapture? onPointerOut? onPointerOutCapture? onPointerOver? onPointerOverCapture? onPointerUp? onPointerUpCapture? onProgress? onProgressCapture? onRateChange? onRateChangeCapture? onReset? onResetCapture? onScroll? onScrollCapture? onSeeked? onSeekedCapture? onSeeking? onSeekingCapture? onSelectCapture? onStalled? onStalledCapture? onSubmit? onSubmitCapture? onSuspend? onSuspendCapture? onTimeUpdate? onTimeUpdateCapture? onTouchCancel? onTouchCancelCapture? onTouchEnd? onTouchEndCapture? onTouchMove? onTouchMoveCapture? onTouchStart? onTouchStartCapture? onTransitionEnd? onTransitionEndCapture? onVolumeChange? onVolumeChangeCapture? onWaiting? onWaitingCapture? onWheel? onWheelCapture? opacity? options? order? outline? outlineColor? outlineOffset? overflow? overflowWrap? overflowX? overflowY? overscroll? overscrollBehavior? overscrollBehaviorX? overscrollBehaviorY? overscrollX? overscrollY? p? padding? paddingBlock? paddingBlockEnd? paddingBlockStart? paddingBottom? paddingEnd? paddingInline? paddingInlineEnd? paddingInlineStart? paddingLeft? paddingRight? paddingStart? paddingTop? paddingX? paddingY? pb? pe? pl? placeContent? placeItems? placeSelf? placeholder? placement? pointerEvents? pos? position? pr? prefix? preventOverflow? property? ps? pt? px? py? radioGroup? required? resize? resource? results? right? ring? ringColor? ringInset? ringOffset? ringOffsetColor? role? rotate? rounded? roundedBottom? roundedBottomEnd? roundedBottomLeft? roundedBottomRight? roundedBottomStart? roundedEnd? roundedLeft? roundedRight? roundedStart? roundedTop? roundedTopEnd? roundedTopLeft? roundedTopRight? roundedTopStart? rowGap? saturate? scale? scaleX? scaleY? scrollBehavior? scrollMargin? scrollMarginBottom? scrollMarginLeft? scrollMarginRight? scrollMarginTop? scrollMarginX? scrollMarginY? scrollPadding? scrollPaddingBottom? scrollPaddingLeft? scrollPaddingRight? scrollPaddingTop? scrollPaddingX? scrollPaddingY? scrollSnapAlign? scrollSnapStop? scrollSnapType? scrollToIndex? searchPlaceholder? security? selectedListProps? selectionVisibleIn? shadow? shiftAmount? single? size? skewX? skewY? slot? spellCheck? srOnly? stateReducer? strategy? stroke? style? suppressContentEditableWarning? suppressHydrationWarning? sx? tabIndex? textAlign? textColor? textDecor? textDecoration? textDecorationColor? textDecorationLine? textDecorationStyle? textDecorationThickness? textOverflow? textShadow? textStyle? textTransform? textUnderlineOffset? title? top? transform? transformOrigin? transition? transitionDelay? transitionDuration? transitionProperty? transitionTimingFunction? translate? translateX? translateY? typeof? unselectable? userSelect? value? verticalAlign? visibility? vocab? w? whiteSpace? width? willChange? wordBreak? zIndex?

Properties

Optional Private __css

__css?: SystemStyleObject

Used for internal css management

Optional _active

_active?: SystemStyleObject

Styles for CSS Selector &:active

Optional _activeLink

_activeLink?: SystemStyleObject

Used to style the active link in a navigation Styles for CSS Selector &[aria-current=page]

Optional _activeStep

_activeStep?: SystemStyleObject

Used to style the current step within a process Styles for CSS Selector &[aria-current=step]

Optional _after

_after?: SystemStyleObject

Styles for CSS selector &::after

NOTE:When using this, ensure the content is wrapped in a backtick.

Example

<Box _after={{content:`""` }}/>

Optional _autofill

_autofill?: SystemStyleObject

Styles for CSS Selector &:-webkit-autofill

Optional _before

_before?: SystemStyleObject

Styles for CSS selector &::before

NOTE:When using this, ensure the content is wrapped in a backtick.

Example

<Box _before={{content:`""` }}/>

Optional _checked

_checked?: SystemStyleObject

Styles to apply when the ARIA attribute aria-checked is true

  • CSS selector &[aria-checked=true]

Optional _dark

_dark?: SystemStyleObject

Styles for when data-theme is applied to any parent of this component or element.

Optional _disabled

_disabled?: SystemStyleObject

Styles to apply when this element is disabled. The passed styles are applied to these CSS selectors:

  • &[aria-disabled=true]
  • &:disabled
  • &[data-disabled]

Optional _empty

_empty?: SystemStyleObject

Styles for CSS selector &:empty

Optional _even

_even?: SystemStyleObject

Styles for CSS Selector &:nth-child(even)

Optional _expanded

_expanded?: SystemStyleObject

Styles to apply when the ARIA attribute aria-expanded is true

  • CSS selector &[aria-expanded=true]

Optional _first

_first?: SystemStyleObject

Styles for CSS Selector &:first-of-type

Optional _focus

_focus?: SystemStyleObject

Styles for CSS selector &:focus

Optional _focusVisible

_focusVisible?: SystemStyleObject

Styles to apply when this element has received focus via tabbing

  • CSS Selector &:focus-visible

Optional _focusWithin

_focusWithin?: SystemStyleObject

Styles to apply when a child of this element has received focus

  • CSS Selector &:focus-within

Optional _fullScreen

_fullScreen?: SystemStyleObject

Styles for CSS Selector &:fullscreen.

Optional _grabbed

_grabbed?: SystemStyleObject

Styles to apply when the ARIA attribute aria-grabbed is true

  • CSS selector &[aria-grabbed=true]

Optional _groupActive

_groupActive?: SystemStyleObject

Styles to apply when a parent element with .group, data-group or role=group is active

Optional _groupChecked

_groupChecked?: SystemStyleObject

Styles to apply when a parent element with .group, data-group or role=group is checked

Optional _groupDisabled

_groupDisabled?: SystemStyleObject

Styles to apply when a parent element with .group, data-group or role=group is disabled

Optional _groupFocus

_groupFocus?: SystemStyleObject

Styles to apply when a parent element with .group, data-group or role=group is focused

Optional _groupFocusVisible

_groupFocusVisible?: SystemStyleObject

Styles to apply when a parent element with .group, data-group or role=group has visible focus

Optional _groupFocusWithin

_groupFocusWithin?: SystemStyleObject

Styles to apply when a parent element with .group, data-group or role=group has focus within

Optional _groupHover

_groupHover?: SystemStyleObject

Styles to apply when a parent element with .group, data-group or role=group is hovered

Optional _groupInvalid

_groupInvalid?: SystemStyleObject

Styles to apply when a parent element with .group, data-group or role=group is invalid

Optional _hidden

_hidden?: SystemStyleObject

Styles for CSS Selector [hidden=true]

Optional _highlighted

_highlighted?: SystemStyleObject

Styles for the highlighted state.

Optional _hover

_hover?: SystemStyleObject

Styles for CSS selector &:hover

Optional _indeterminate

_indeterminate?: SystemStyleObject

Styles to apply when the ARIA attribute aria-checked is mixed

  • CSS selector &[aria-checked=mixed]

Optional _invalid

_invalid?: SystemStyleObject

Styles to apply when the ARIA attribute aria-invalid is true

  • CSS selector &[aria-invalid=true]

Optional _last

_last?: SystemStyleObject

Styles for CSS Selector &:last-of-type

Optional _light

_light?: SystemStyleObject

Styles for when data-theme is applied to any parent of this component or element.

Optional _loading

_loading?: SystemStyleObject

Styles for CSS Selector &[aria-busy=true] or &[data-loading=true]. Useful for styling loading states

Optional _ltr

_ltr?: SystemStyleObject

Styles for CSS Selector [dir=ltr] & It is applied when a parent element or this element has dir="ltr"

Optional _mediaDark

_mediaDark?: SystemStyleObject

Styles for CSS Selector @media (prefers-color-scheme: dark) It is used when the user has requested the system use a light or dark color theme.

Optional _mediaReduceMotion

_mediaReduceMotion?: SystemStyleObject

Styles for CSS Selector @media (prefers-reduced-motion: reduce) It is used when the user has requested the system to reduce the amount of animations.

Optional _notFirst

_notFirst?: SystemStyleObject

Styles for CSS Selector &:not(:first-of-type)

Optional _notLast

_notLast?: SystemStyleObject

Styles for CSS Selector &:not(:last-of-type)

Optional _odd

_odd?: SystemStyleObject

Styles for CSS Selector &:nth-child(odd)

Optional _peerActive

_peerActive?: SystemStyleObject

Styles to apply when a sibling element with .peer or data-peer is active

Optional _peerChecked

_peerChecked?: SystemStyleObject

Styles to apply when a sibling element with .peer or data-peer is checked

Optional _peerDisabled

_peerDisabled?: SystemStyleObject

Styles to apply when a sibling element with .peer or data-peer is disabled

Optional _peerFocus

_peerFocus?: SystemStyleObject

Styles to apply when a sibling element with .peer or data-peer is focused

Optional _peerFocusVisible

_peerFocusVisible?: SystemStyleObject

Styles to apply when a sibling element with .peeror data-peer has visible focus

Optional _peerFocusWithin

_peerFocusWithin?: SystemStyleObject

Styles to apply when a sibling element with .peer or data-peer has focus within

Optional _peerHover

_peerHover?: SystemStyleObject

Styles to apply when a sibling element with .peer or data-peer is hovered

Optional _peerInvalid

_peerInvalid?: SystemStyleObject

Styles to apply when a sibling element with .peer or data-peer is invalid

Optional _peerPlaceholderShown

_peerPlaceholderShown?: SystemStyleObject

Styles to apply when a sibling element with .peer or data-peer has placeholder shown

Optional _placeholder

_placeholder?: SystemStyleObject

Styles for CSS Selector &::placeholder.

Optional _placeholderShown

_placeholderShown?: SystemStyleObject

Styles for CSS Selector &:placeholder-shown.

Optional _pressed

_pressed?: SystemStyleObject

Styles for CSS Selector &[aria-pressed=true] Typically used to style the current "pressed" state of toggle buttons

Optional _readOnly

_readOnly?: SystemStyleObject

Styles for CSS Selector &:readonly

Optional _rtl

_rtl?: SystemStyleObject

Styles for CSS Selector [dir=rtl] & It is applied when a parent element or this element has dir="rtl"

Optional _selected

_selected?: SystemStyleObject

Styles to apply when the ARIA attribute aria-selected is true

  • CSS selector &[aria-selected=true]

Optional _selection

_selection?: SystemStyleObject

Styles for CSS Selector &::selection

Optional _valid

_valid?: SystemStyleObject

Styles for the valid state

  • CSS selector &[data-valid], &[data-state=valid]

Optional _visited

_visited?: SystemStyleObject

Styles for CSS Selector &:visited

Optional about

about?: string

Optional accessKey

accessKey?: string

Optional actionGroupProps

actionGroupProps?: SelectActionGroupProps

Optional alignContent

alignContent?: ResponsiveValue<AlignContent>

The CSS align-content property.

It defines the distribution of space between and around content items along a flexbox cross-axis or a grid's block axis.

See

Mozilla Docs

Optional alignItems

alignItems?: ResponsiveValue<AlignItems>

The CSS align-items property.

It defines the align-self value on all direct children as a group.

  • In Flexbox, it controls the alignment of items on the Cross Axis.
  • In Grid Layout, it controls the alignment of items on the Block Axis within their grid area.

See

Mozilla Docs

Optional alignSelf

alignSelf?: ResponsiveValue<AlignSelf>

The CSS align-self property.

It works like align-items, but applies only to a single flexbox item, instead of all of them.

See

Mozilla Docs

Optional animation

animation?: ResponsiveValue<Animation<string & {}>>

The CSS animation property

Optional appearance

appearance?: ResponsiveValue<Appearance>

The CSS appearance property

Optional apply

apply?: ResponsiveValue<string>

Apply theme-aware style objects in theme

Example

<Box apply="styles.h3">This is a div</Box>

This will apply styles defined in theme.styles.h3

Optional aria-activedescendant

aria-activedescendant?: string

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

Optional aria-atomic

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.

Optional aria-autocomplete

aria-autocomplete?: "list" | "both" | "none" | "inline"

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.

Optional aria-busy

aria-busy?: Booleanish

Indicates an element is being modified and that assistive technologies MAY want to wait until the modifications are complete before exposing them to the user.

Optional aria-checked

aria-checked?: boolean | "mixed" | "false" | "true"

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

See

  • aria-pressed
  • aria-selected.

Optional aria-colcount

aria-colcount?: number

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

See

aria-colindex.

Optional 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
  • aria-colspan.

Optional aria-colspan

aria-colspan?: number

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

See

  • aria-colindex
  • aria-rowspan.

Optional aria-controls

aria-controls?: string

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

See

aria-owns.

Optional aria-current

aria-current?: boolean | "page" | "false" | "true" | "location" | "time" | "step" | "date"

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

Optional aria-describedby

aria-describedby?: string

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

See

aria-labelledby

Optional aria-details

aria-details?: string

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

See

aria-describedby.

Optional aria-disabled

aria-disabled?: Booleanish

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

See

  • aria-hidden
  • aria-readonly.

Optional aria-dropeffect

aria-dropeffect?: "link" | "none" | "copy" | "move" | "execute" | "popup"

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

Deprecated

in ARIA 1.1

Optional aria-errormessage

aria-errormessage?: string

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

See

  • aria-invalid
  • aria-describedby.

Optional aria-expanded

aria-expanded?: Booleanish

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

Optional aria-flowto

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.

Optional aria-grabbed

aria-grabbed?: Booleanish

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

Deprecated

in ARIA 1.1

Optional aria-haspopup

aria-haspopup?: boolean | "grid" | "listbox" | "menu" | "false" | "true" | "dialog" | "tree"

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

Optional aria-hidden

aria-hidden?: Booleanish

Indicates whether the element is exposed to an accessibility API.

See

aria-disabled.

Optional aria-invalid

aria-invalid?: boolean | "false" | "true" | "grammar" | "spelling"

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

See

aria-errormessage.

Optional aria-keyshortcuts

aria-keyshortcuts?: string

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

Optional aria-label

aria-label?: string

Defines a string value that labels the current element.

See

aria-labelledby.

Optional aria-labelledby

aria-labelledby?: string

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

See

aria-describedby.

Optional aria-level

aria-level?: number

Defines the hierarchical level of an element within a structure.

Optional aria-live

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.

Optional aria-modal

aria-modal?: Booleanish

Indicates whether an element is modal when displayed.

Optional aria-multiline

aria-multiline?: Booleanish

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

Optional aria-multiselectable

aria-multiselectable?: Booleanish

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

Optional aria-orientation

aria-orientation?: "horizontal" | "vertical"

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

Optional aria-owns

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.

Optional aria-placeholder

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.

Optional aria-posinset

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.

Optional aria-pressed

aria-pressed?: boolean | "mixed" | "false" | "true"

Indicates the current "pressed" state of toggle buttons.

See

  • aria-checked
  • aria-selected.

Optional aria-readonly

aria-readonly?: Booleanish

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

See

aria-disabled.

Optional aria-relevant

aria-relevant?: "all" | "text" | "additions" | "additions removals" | "additions text" | "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.

Optional aria-required

aria-required?: Booleanish

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

Optional aria-roledescription

aria-roledescription?: string

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

Optional aria-rowcount

aria-rowcount?: number

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

See

aria-rowindex.

Optional 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
  • aria-rowspan.

Optional aria-rowspan

aria-rowspan?: number

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

See

  • aria-rowindex
  • aria-colspan.

Optional aria-selected

aria-selected?: Booleanish

Indicates the current "selected" state of various widgets.

See

  • aria-checked
  • aria-pressed.

Optional aria-setsize

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.

Optional aria-sort

aria-sort?: "none" | "ascending" | "descending" | "other"

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

Optional aria-valuemax

aria-valuemax?: number

Defines the maximum allowed value for a range widget.

Optional aria-valuemin

aria-valuemin?: number

Defines the minimum allowed value for a range widget.

Optional aria-valuenow

aria-valuenow?: number

Defines the current value for a range widget.

See

aria-valuetext.

Optional aria-valuetext

aria-valuetext?: string

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

Optional arrowPadding

arrowPadding?: number

The padding required to prevent the arrow from reaching the very edge of the popper.

Default

8

Optional as

as?: As<any>

Optional autoCapitalize

autoCapitalize?: string

Optional autoComplete

autoComplete?: string

Optional autoCorrect

autoCorrect?: string

Optional autoFocus

autoFocus?: boolean

Optional autoSave

autoSave?: string

Optional backdropBlur

backdropBlur?: ResponsiveValue<Union<{} | "sm" | "md" | "lg" | string & {} | "base" | "xl" | "2xl" | "3xl" | "none">>

Sets the backdrop-blur filter value of an element. Value is assigned to --chakra-backdrop-blur css variable

Optional backdropBrightness

backdropBrightness?: ResponsiveValue<Length>

Sets the backdrop-brightness filter value of an element. Value is assigned to --chakra-backdrop-brightness css variable

Optional backdropContrast

backdropContrast?: ResponsiveValue<Length>

Sets the backdrop-contrast filter value of an element. Value is assigned to --chakra-backdrop-contrast css variable

Optional backdropFilter

backdropFilter?: ResponsiveValue<"auto" | BackdropFilter>

The CSS backdrop-filter property. When set to auto, you allow Chakra UI to define the color based on the backdrop filter style props (backdropBlur, backdropSaturate, etc.)

Optional backdropHueRotate

backdropHueRotate?: ResponsiveValue<Length>

Sets the backdrop-hue-rotate filter value of an element. Value is assigned to --chakra-backdrop-hue-rotate css variable

Optional backdropInvert

backdropInvert?: ResponsiveValue<Length>

Sets the backdrop-invert filter value of an element. Value is assigned to --chakra-backdrop-invert css variable

Optional backdropSaturate

backdropSaturate?: ResponsiveValue<Length>

Sets the backdrop-saturate filter value of an element. Value is assigned to --chakra-backdrop-saturate css variable

Optional background

background?: ResponsiveValue<Union<Color | "current" | "whiteAlpha.50" | "whiteAlpha.100" | "whiteAlpha.200" | "whiteAlpha.300" | "whiteAlpha.400" | "whiteAlpha.500" | "whiteAlpha.600" | "whiteAlpha.700" | "whiteAlpha.800" | "whiteAlpha.900" | "blackAlpha.50" | "blackAlpha.100" | "blackAlpha.200" | "blackAlpha.300" | "blackAlpha.400" | "blackAlpha.500" | "blackAlpha.600" | "blackAlpha.700" | "blackAlpha.800" | "blackAlpha.900" | "gray.50" | "gray.100" | "gray.200" | "gray.300" | "gray.400" | "gray.500" | "gray.600" | "gray.700" | "gray.800" | "gray.900" | "red.50" | "red.100" | "red.200" | "red.300" | "red.400" | "red.500" | "red.600" | "red.700" | "red.800" | "red.900" | "orange.50" | "orange.100" | "orange.200" | "orange.300" | "orange.400" | "orange.500" | "orange.600" | "orange.700" | "orange.800" | "orange.900" | "yellow.50" | "yellow.100" | "yellow.200" | "yellow.300" | "yellow.400" | "yellow.500" | "yellow.600" | "yellow.700" | "yellow.800" | "yellow.900" | "green.50" | "green.100" | "green.200" | "green.300" | "green.400" | "green.500" | "green.600" | "green.700" | "green.800" | "green.900" | "teal.50" | "teal.100" | "teal.200" | "teal.300" | "teal.400" | "teal.500" | "teal.600" | "teal.700" | "teal.800" | "teal.900" | "blue.50" | "blue.100" | "blue.200" | "blue.300" | "blue.400" | "blue.500" | "blue.600" | "blue.700" | "blue.800" | "blue.900" | "cyan.50" | "cyan.100" | "cyan.200" | "cyan.300" | "cyan.400" | "cyan.500" | "cyan.600" | "cyan.700" | "cyan.800" | "cyan.900" | "purple.50" | "purple.100" | "purple.200" | "purple.300" | "purple.400" | "purple.500" | "purple.600" | "purple.700" | "purple.800" | "purple.900" | "pink.50" | "pink.100" | "pink.200" | "pink.300" | "pink.400" | "pink.500" | "pink.600" | "pink.700" | "pink.800" | "pink.900" | "linkedin.50" | "linkedin.100" | "linkedin.200" | "linkedin.300" | "linkedin.400" | "linkedin.500" | "linkedin.600" | "linkedin.700" | "linkedin.800" | "linkedin.900" | "facebook.50" | "facebook.100" | "facebook.200" | "facebook.300" | "facebook.400" | "facebook.500" | "facebook.600" | "facebook.700" | "facebook.800" | "facebook.900" | "messenger.50" | "messenger.100" | "messenger.200" | "messenger.300" | "messenger.400" | "messenger.500" | "messenger.600" | "messenger.700" | "messenger.800" | "messenger.900" | "whatsapp.50" | "whatsapp.100" | "whatsapp.200" | "whatsapp.300" | "whatsapp.400" | "whatsapp.500" | "whatsapp.600" | "whatsapp.700" | "whatsapp.800" | "whatsapp.900" | "twitter.50" | "twitter.100" | "twitter.200" | "twitter.300" | "twitter.400" | "twitter.500" | "twitter.600" | "twitter.700" | "twitter.800" | "twitter.900" | "telegram.50" | "telegram.100" | "telegram.200" | "telegram.300" | "telegram.400" | "telegram.500" | "telegram.600" | "telegram.700" | "telegram.800" | "telegram.900" | "chakra-body-text" | "chakra-body-bg" | "chakra-border-color" | "chakra-placeholder-color">>

The CSS background property

Optional backgroundAttachment

backgroundAttachment?: ResponsiveValue<BackgroundAttachment>

The CSS background-attachment property

Optional backgroundBlendMode

backgroundBlendMode?: ResponsiveValue<BackgroundBlendMode>

The CSS background-blend-mode property

Optional backgroundClip

backgroundClip?: ResponsiveValue<BackgroundClip | "text">

The CSS background-clip property

Optional backgroundColor

backgroundColor?: ResponsiveValue<Union<Color | "current" | "whiteAlpha.50" | "whiteAlpha.100" | "whiteAlpha.200" | "whiteAlpha.300" | "whiteAlpha.400" | "whiteAlpha.500" | "whiteAlpha.600" | "whiteAlpha.700" | "whiteAlpha.800" | "whiteAlpha.900" | "blackAlpha.50" | "blackAlpha.100" | "blackAlpha.200" | "blackAlpha.300" | "blackAlpha.400" | "blackAlpha.500" | "blackAlpha.600" | "blackAlpha.700" | "blackAlpha.800" | "blackAlpha.900" | "gray.50" | "gray.100" | "gray.200" | "gray.300" | "gray.400" | "gray.500" | "gray.600" | "gray.700" | "gray.800" | "gray.900" | "red.50" | "red.100" | "red.200" | "red.300" | "red.400" | "red.500" | "red.600" | "red.700" | "red.800" | "red.900" | "orange.50" | "orange.100" | "orange.200" | "orange.300" | "orange.400" | "orange.500" | "orange.600" | "orange.700" | "orange.800" | "orange.900" | "yellow.50" | "yellow.100" | "yellow.200" | "yellow.300" | "yellow.400" | "yellow.500" | "yellow.600" | "yellow.700" | "yellow.800" | "yellow.900" | "green.50" | "green.100" | "green.200" | "green.300" | "green.400" | "green.500" | "green.600" | "green.700" | "green.800" | "green.900" | "teal.50" | "teal.100" | "teal.200" | "teal.300" | "teal.400" | "teal.500" | "teal.600" | "teal.700" | "teal.800" | "teal.900" | "blue.50" | "blue.100" | "blue.200" | "blue.300" | "blue.400" | "blue.500" | "blue.600" | "blue.700" | "blue.800" | "blue.900" | "cyan.50" | "cyan.100" | "cyan.200" | "cyan.300" | "cyan.400" | "cyan.500" | "cyan.600" | "cyan.700" | "cyan.800" | "cyan.900" | "purple.50" | "purple.100" | "purple.200" | "purple.300" | "purple.400" | "purple.500" | "purple.600" | "purple.700" | "purple.800" | "purple.900" | "pink.50" | "pink.100" | "pink.200" | "pink.300" | "pink.400" | "pink.500" | "pink.600" | "pink.700" | "pink.800" | "pink.900" | "linkedin.50" | "linkedin.100" | "linkedin.200" | "linkedin.300" | "linkedin.400" | "linkedin.500" | "linkedin.600" | "linkedin.700" | "linkedin.800" | "linkedin.900" | "facebook.50" | "facebook.100" | "facebook.200" | "facebook.300" | "facebook.400" | "facebook.500" | "facebook.600" | "facebook.700" | "facebook.800" | "facebook.900" | "messenger.50" | "messenger.100" | "messenger.200" | "messenger.300" | "messenger.400" | "messenger.500" | "messenger.600" | "messenger.700" | "messenger.800" | "messenger.900" | "whatsapp.50" | "whatsapp.100" | "whatsapp.200" | "whatsapp.300" | "whatsapp.400" | "whatsapp.500" | "whatsapp.600" | "whatsapp.700" | "whatsapp.800" | "whatsapp.900" | "twitter.50" | "twitter.100" | "twitter.200" | "twitter.300" | "twitter.400" | "twitter.500" | "twitter.600" | "twitter.700" | "twitter.800" | "twitter.900" | "telegram.50" | "telegram.100" | "telegram.200" | "telegram.300" | "telegram.400" | "telegram.500" | "telegram.600" | "telegram.700" | "telegram.800" | "telegram.900" | "chakra-body-text" | "chakra-body-bg" | "chakra-border-color" | "chakra-placeholder-color">>

The CSS background-color property

Optional backgroundImage

backgroundImage?: ResponsiveValue<BackgroundImage>

The CSS background-image property

Optional backgroundPosition

backgroundPosition?: ResponsiveValue<number | "center" | "top" | "left" | "bottom" | "right" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset">

The CSS background-position property

Optional backgroundRepeat

backgroundRepeat?: ResponsiveValue<BackgroundRepeat>

The CSS background-repeat property

Optional backgroundSize

backgroundSize?: ResponsiveValue<number | "auto" | string & {} | "contain" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "cover">

The CSS background-size property

Optional bg

bg?: ResponsiveValue<Union<Color | "current" | "whiteAlpha.50" | "whiteAlpha.100" | "whiteAlpha.200" | "whiteAlpha.300" | "whiteAlpha.400" | "whiteAlpha.500" | "whiteAlpha.600" | "whiteAlpha.700" | "whiteAlpha.800" | "whiteAlpha.900" | "blackAlpha.50" | "blackAlpha.100" | "blackAlpha.200" | "blackAlpha.300" | "blackAlpha.400" | "blackAlpha.500" | "blackAlpha.600" | "blackAlpha.700" | "blackAlpha.800" | "blackAlpha.900" | "gray.50" | "gray.100" | "gray.200" | "gray.300" | "gray.400" | "gray.500" | "gray.600" | "gray.700" | "gray.800" | "gray.900" | "red.50" | "red.100" | "red.200" | "red.300" | "red.400" | "red.500" | "red.600" | "red.700" | "red.800" | "red.900" | "orange.50" | "orange.100" | "orange.200" | "orange.300" | "orange.400" | "orange.500" | "orange.600" | "orange.700" | "orange.800" | "orange.900" | "yellow.50" | "yellow.100" | "yellow.200" | "yellow.300" | "yellow.400" | "yellow.500" | "yellow.600" | "yellow.700" | "yellow.800" | "yellow.900" | "green.50" | "green.100" | "green.200" | "green.300" | "green.400" | "green.500" | "green.600" | "green.700" | "green.800" | "green.900" | "teal.50" | "teal.100" | "teal.200" | "teal.300" | "teal.400" | "teal.500" | "teal.600" | "teal.700" | "teal.800" | "teal.900" | "blue.50" | "blue.100" | "blue.200" | "blue.300" | "blue.400" | "blue.500" | "blue.600" | "blue.700" | "blue.800" | "blue.900" | "cyan.50" | "cyan.100" | "cyan.200" | "cyan.300" | "cyan.400" | "cyan.500" | "cyan.600" | "cyan.700" | "cyan.800" | "cyan.900" | "purple.50" | "purple.100" | "purple.200" | "purple.300" | "purple.400" | "purple.500" | "purple.600" | "purple.700" | "purple.800" | "purple.900" | "pink.50" | "pink.100" | "pink.200" | "pink.300" | "pink.400" | "pink.500" | "pink.600" | "pink.700" | "pink.800" | "pink.900" | "linkedin.50" | "linkedin.100" | "linkedin.200" | "linkedin.300" | "linkedin.400" | "linkedin.500" | "linkedin.600" | "linkedin.700" | "linkedin.800" | "linkedin.900" | "facebook.50" | "facebook.100" | "facebook.200" | "facebook.300" | "facebook.400" | "facebook.500" | "facebook.600" | "facebook.700" | "facebook.800" | "facebook.900" | "messenger.50" | "messenger.100" | "messenger.200" | "messenger.300" | "messenger.400" | "messenger.500" | "messenger.600" | "messenger.700" | "messenger.800" | "messenger.900" | "whatsapp.50" | "whatsapp.100" | "whatsapp.200" | "whatsapp.300" | "whatsapp.400" | "whatsapp.500" | "whatsapp.600" | "whatsapp.700" | "whatsapp.800" | "whatsapp.900" | "twitter.50" | "twitter.100" | "twitter.200" | "twitter.300" | "twitter.400" | "twitter.500" | "twitter.600" | "twitter.700" | "twitter.800" | "twitter.900" | "telegram.50" | "telegram.100" | "telegram.200" | "telegram.300" | "telegram.400" | "telegram.500" | "telegram.600" | "telegram.700" | "telegram.800" | "telegram.900" | "chakra-body-text" | "chakra-body-bg" | "chakra-border-color" | "chakra-placeholder-color">>

The CSS background property

Optional bgAttachment

bgAttachment?: ResponsiveValue<BackgroundAttachment>

The CSS background-attachment property

Optional bgBlendMode

bgBlendMode?: ResponsiveValue<BackgroundBlendMode>

The CSS background-blend-mode property

Optional bgClip

bgClip?: ResponsiveValue<BackgroundClip | "text">

The CSS background-clip property

Optional bgColor

bgColor?: ResponsiveValue<Union<Color | "current" | "whiteAlpha.50" | "whiteAlpha.100" | "whiteAlpha.200" | "whiteAlpha.300" | "whiteAlpha.400" | "whiteAlpha.500" | "whiteAlpha.600" | "whiteAlpha.700" | "whiteAlpha.800" | "whiteAlpha.900" | "blackAlpha.50" | "blackAlpha.100" | "blackAlpha.200" | "blackAlpha.300" | "blackAlpha.400" | "blackAlpha.500" | "blackAlpha.600" | "blackAlpha.700" | "blackAlpha.800" | "blackAlpha.900" | "gray.50" | "gray.100" | "gray.200" | "gray.300" | "gray.400" | "gray.500" | "gray.600" | "gray.700" | "gray.800" | "gray.900" | "red.50" | "red.100" | "red.200" | "red.300" | "red.400" | "red.500" | "red.600" | "red.700" | "red.800" | "red.900" | "orange.50" | "orange.100" | "orange.200" | "orange.300" | "orange.400" | "orange.500" | "orange.600" | "orange.700" | "orange.800" | "orange.900" | "yellow.50" | "yellow.100" | "yellow.200" | "yellow.300" | "yellow.400" | "yellow.500" | "yellow.600" | "yellow.700" | "yellow.800" | "yellow.900" | "green.50" | "green.100" | "green.200" | "green.300" | "green.400" | "green.500" | "green.600" | "green.700" | "green.800" | "green.900" | "teal.50" | "teal.100" | "teal.200" | "teal.300" | "teal.400" | "teal.500" | "teal.600" | "teal.700" | "teal.800" | "teal.900" | "blue.50" | "blue.100" | "blue.200" | "blue.300" | "blue.400" | "blue.500" | "blue.600" | "blue.700" | "blue.800" | "blue.900" | "cyan.50" | "cyan.100" | "cyan.200" | "cyan.300" | "cyan.400" | "cyan.500" | "cyan.600" | "cyan.700" | "cyan.800" | "cyan.900" | "purple.50" | "purple.100" | "purple.200" | "purple.300" | "purple.400" | "purple.500" | "purple.600" | "purple.700" | "purple.800" | "purple.900" | "pink.50" | "pink.100" | "pink.200" | "pink.300" | "pink.400" | "pink.500" | "pink.600" | "pink.700" | "pink.800" | "pink.900" | "linkedin.50" | "linkedin.100" | "linkedin.200" | "linkedin.300" | "linkedin.400" | "linkedin.500" | "linkedin.600" | "linkedin.700" | "linkedin.800" | "linkedin.900" | "facebook.50" | "facebook.100" | "facebook.200" | "facebook.300" | "facebook.400" | "facebook.500" | "facebook.600" | "facebook.700" | "facebook.800" | "facebook.900" | "messenger.50" | "messenger.100" | "messenger.200" | "messenger.300" | "messenger.400" | "messenger.500" | "messenger.600" | "messenger.700" | "messenger.800" | "messenger.900" | "whatsapp.50" | "whatsapp.100" | "whatsapp.200" | "whatsapp.300" | "whatsapp.400" | "whatsapp.500" | "whatsapp.600" | "whatsapp.700" | "whatsapp.800" | "whatsapp.900" | "twitter.50" | "twitter.100" | "twitter.200" | "twitter.300" | "twitter.400" | "twitter.500" | "twitter.600" | "twitter.700" | "twitter.800" | "twitter.900" | "telegram.50" | "telegram.100" | "telegram.200" | "telegram.300" | "telegram.400" | "telegram.500" | "telegram.600" | "telegram.700" | "telegram.800" | "telegram.900" | "chakra-body-text" | "chakra-body-bg" | "chakra-border-color" | "chakra-placeholder-color">>

The CSS background-color property

Optional bgGradient

bgGradient?: ResponsiveValue<BackgroundImage>

The background-gradient shorthand

Optional bgImage

bgImage?: ResponsiveValue<BackgroundImage>

The CSS background-image property

Optional bgImg

bgImg?: ResponsiveValue<BackgroundImage>

The CSS background-image property

Optional bgPos

bgPos?: ResponsiveValue<number | "center" | "top" | "left" | "bottom" | "right" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset">

The CSS background-position property

Optional bgPosition

bgPosition?: ResponsiveValue<number | "center" | "top" | "left" | "bottom" | "right" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset">

The CSS background-position property

Optional bgRepeat

bgRepeat?: ResponsiveValue<BackgroundRepeat>

The CSS background-repeat property

Optional bgSize

bgSize?: ResponsiveValue<number | "auto" | string & {} | "contain" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "cover">

The CSS background-size property

Optional blendMode

blendMode?: ResponsiveValue<MixBlendMode>

The blend-mode property

Optional blockSize

blockSize?: ResponsiveValue<Union<number | "sm" | "md" | "lg" | "auto" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | string & {} | "px" | "xl" | "2xl" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "3xs" | "2xs" | "xs" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "-moz-fit-content" | "-moz-max-content" | "-moz-min-content" | "-webkit-fill-available" | "fit-content" | "max-content" | "min-content" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "max" | "min" | "full" | "prose" | "container.sm" | "container.md" | "container.lg" | "container.xl">>

Optional blur

blur?: ResponsiveValue<Union<{} | "sm" | "md" | "lg" | string & {} | "base" | "xl" | "2xl" | "3xl" | "none">>

Sets the blur filter value of an element. Value is assigned to --chakra-filter css variable

Optional border

border?: ResponsiveValue<Union<number | string & {} | "inset" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "medium" | "aliceblue" | "antiquewhite" | "aqua" | "aquamarine" | "azure" | "beige" | "bisque" | "black" | "blanchedalmond" | "blue" | "blueviolet" | "brown" | "burlywood" | "cadetblue" | "chartreuse" | "chocolate" | "coral" | "cornflowerblue" | "cornsilk" | "crimson" | "cyan" | "darkblue" | "darkcyan" | "darkgoldenrod" | "darkgray" | "darkgreen" | "darkgrey" | "darkkhaki" | "darkmagenta" | "darkolivegreen" | "darkorange" | "darkorchid" | "darkred" | "darksalmon" | "darkseagreen" | "darkslateblue" | "darkslategray" | "darkslategrey" | "darkturquoise" | "darkviolet" | "deeppink" | "deepskyblue" | "dimgray" | "dimgrey" | "dodgerblue" | "firebrick" | "floralwhite" | "forestgreen" | "fuchsia" | "gainsboro" | "ghostwhite" | "gold" | "goldenrod" | "gray" | "green" | "greenyellow" | "grey" | "honeydew" | "hotpink" | "indianred" | "indigo" | "ivory" | "khaki" | "lavender" | "lavenderblush" | "lawngreen" | "lemonchiffon" | "lightblue" | "lightcoral" | "lightcyan" | "lightgoldenrodyellow" | "lightgray" | "lightgreen" | "lightgrey" | "lightpink" | "lightsalmon" | "lightseagreen" | "lightskyblue" | "lightslategray" | "lightslategrey" | "lightsteelblue" | "lightyellow" | "lime" | "limegreen" | "linen" | "magenta" | "maroon" | "mediumaquamarine" | "mediumblue" | "mediumorchid" | "mediumpurple" | "mediumseagreen" | "mediumslateblue" | "mediumspringgreen" | "mediumturquoise" | "mediumvioletred" | "midnightblue" | "mintcream" | "mistyrose" | "moccasin" | "navajowhite" | "navy" | "oldlace" | "olive" | "olivedrab" | "orange" | "orangered" | "orchid" | "palegoldenrod" | "palegreen" | "paleturquoise" | "palevioletred" | "papayawhip" | "peachpuff" | "peru" | "pink" | "plum" | "powderblue" | "purple" | "rebeccapurple" | "red" | "rosybrown" | "royalblue" | "saddlebrown" | "salmon" | "sandybrown" | "seagreen" | "seashell" | "sienna" | "silver" | "skyblue" | "slateblue" | "slategray" | "slategrey" | "snow" | "springgreen" | "steelblue" | "tan" | "teal" | "thistle" | "tomato" | "transparent" | "turquoise" | "violet" | "wheat" | "white" | "whitesmoke" | "yellow" | "yellowgreen" | "ActiveBorder" | "ActiveCaption" | "AppWorkspace" | "Background" | "ButtonFace" | "ButtonHighlight" | "ButtonShadow" | "ButtonText" | "CaptionText" | "GrayText" | "Highlight" | "HighlightText" | "InactiveBorder" | "InactiveCaption" | "InactiveCaptionText" | "InfoBackground" | "InfoText" | "Menu" | "MenuText" | "Scrollbar" | "ThreeDDarkShadow" | "ThreeDFace" | "ThreeDHighlight" | "ThreeDLightShadow" | "ThreeDShadow" | "Window" | "WindowFrame" | "WindowText" | "currentcolor" | "none" | "hidden" | "dashed" | "dotted" | "double" | "groove" | "outset" | "ridge" | "solid" | "thick" | "thin" | "1px" | "2px" | "4px" | "8px">>

The CSS border property

Optional borderBlock

borderBlock?: ResponsiveValue<number | string & {} | "inset" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "medium" | "aliceblue" | "antiquewhite" | "aqua" | "aquamarine" | "azure" | "beige" | "bisque" | "black" | "blanchedalmond" | "blue" | "blueviolet" | "brown" | "burlywood" | "cadetblue" | "chartreuse" | "chocolate" | "coral" | "cornflowerblue" | "cornsilk" | "crimson" | "cyan" | "darkblue" | "darkcyan" | "darkgoldenrod" | "darkgray" | "darkgreen" | "darkgrey" | "darkkhaki" | "darkmagenta" | "darkolivegreen" | "darkorange" | "darkorchid" | "darkred" | "darksalmon" | "darkseagreen" | "darkslateblue" | "darkslategray" | "darkslategrey" | "darkturquoise" | "darkviolet" | "deeppink" | "deepskyblue" | "dimgray" | "dimgrey" | "dodgerblue" | "firebrick" | "floralwhite" | "forestgreen" | "fuchsia" | "gainsboro" | "ghostwhite" | "gold" | "goldenrod" | "gray" | "green" | "greenyellow" | "grey" | "honeydew" | "hotpink" | "indianred" | "indigo" | "ivory" | "khaki" | "lavender" | "lavenderblush" | "lawngreen" | "lemonchiffon" | "lightblue" | "lightcoral" | "lightcyan" | "lightgoldenrodyellow" | "lightgray" | "lightgreen" | "lightgrey" | "lightpink" | "lightsalmon" | "lightseagreen" | "lightskyblue" | "lightslategray" | "lightslategrey" | "lightsteelblue" | "lightyellow" | "lime" | "limegreen" | "linen" | "magenta" | "maroon" | "mediumaquamarine" | "mediumblue" | "mediumorchid" | "mediumpurple" | "mediumseagreen" | "mediumslateblue" | "mediumspringgreen" | "mediumturquoise" | "mediumvioletred" | "midnightblue" | "mintcream" | "mistyrose" | "moccasin" | "navajowhite" | "navy" | "oldlace" | "olive" | "olivedrab" | "orange" | "orangered" | "orchid" | "palegoldenrod" | "palegreen" | "paleturquoise" | "palevioletred" | "papayawhip" | "peachpuff" | "peru" | "pink" | "plum" | "powderblue" | "purple" | "rebeccapurple" | "red" | "rosybrown" | "royalblue" | "saddlebrown" | "salmon" | "sandybrown" | "seagreen" | "seashell" | "sienna" | "silver" | "skyblue" | "slateblue" | "slategray" | "slategrey" | "snow" | "springgreen" | "steelblue" | "tan" | "teal" | "thistle" | "tomato" | "transparent" | "turquoise" | "violet" | "wheat" | "white" | "whitesmoke" | "yellow" | "yellowgreen" | "ActiveBorder" | "ActiveCaption" | "AppWorkspace" | "Background" | "ButtonFace" | "ButtonHighlight" | "ButtonShadow" | "ButtonText" | "CaptionText" | "GrayText" | "Highlight" | "HighlightText" | "InactiveBorder" | "InactiveCaption" | "InactiveCaptionText" | "InfoBackground" | "InfoText" | "Menu" | "MenuText" | "Scrollbar" | "ThreeDDarkShadow" | "ThreeDFace" | "ThreeDHighlight" | "ThreeDLightShadow" | "ThreeDShadow" | "Window" | "WindowFrame" | "WindowText" | "currentcolor" | "none" | "hidden" | "dashed" | "dotted" | "double" | "groove" | "outset" | "ridge" | "solid" | "thick" | "thin">

Optional borderBlockEnd

borderBlockEnd?: ResponsiveValue<number | string & {} | "inset" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "medium" | "aliceblue" | "antiquewhite" | "aqua" | "aquamarine" | "azure" | "beige" | "bisque" | "black" | "blanchedalmond" | "blue" | "blueviolet" | "brown" | "burlywood" | "cadetblue" | "chartreuse" | "chocolate" | "coral" | "cornflowerblue" | "cornsilk" | "crimson" | "cyan" | "darkblue" | "darkcyan" | "darkgoldenrod" | "darkgray" | "darkgreen" | "darkgrey" | "darkkhaki" | "darkmagenta" | "darkolivegreen" | "darkorange" | "darkorchid" | "darkred" | "darksalmon" | "darkseagreen" | "darkslateblue" | "darkslategray" | "darkslategrey" | "darkturquoise" | "darkviolet" | "deeppink" | "deepskyblue" | "dimgray" | "dimgrey" | "dodgerblue" | "firebrick" | "floralwhite" | "forestgreen" | "fuchsia" | "gainsboro" | "ghostwhite" | "gold" | "goldenrod" | "gray" | "green" | "greenyellow" | "grey" | "honeydew" | "hotpink" | "indianred" | "indigo" | "ivory" | "khaki" | "lavender" | "lavenderblush" | "lawngreen" | "lemonchiffon" | "lightblue" | "lightcoral" | "lightcyan" | "lightgoldenrodyellow" | "lightgray" | "lightgreen" | "lightgrey" | "lightpink" | "lightsalmon" | "lightseagreen" | "lightskyblue" | "lightslategray" | "lightslategrey" | "lightsteelblue" | "lightyellow" | "lime" | "limegreen" | "linen" | "magenta" | "maroon" | "mediumaquamarine" | "mediumblue" | "mediumorchid" | "mediumpurple" | "mediumseagreen" | "mediumslateblue" | "mediumspringgreen" | "mediumturquoise" | "mediumvioletred" | "midnightblue" | "mintcream" | "mistyrose" | "moccasin" | "navajowhite" | "navy" | "oldlace" | "olive" | "olivedrab" | "orange" | "orangered" | "orchid" | "palegoldenrod" | "palegreen" | "paleturquoise" | "palevioletred" | "papayawhip" | "peachpuff" | "peru" | "pink" | "plum" | "powderblue" | "purple" | "rebeccapurple" | "red" | "rosybrown" | "royalblue" | "saddlebrown" | "salmon" | "sandybrown" | "seagreen" | "seashell" | "sienna" | "silver" | "skyblue" | "slateblue" | "slategray" | "slategrey" | "snow" | "springgreen" | "steelblue" | "tan" | "teal" | "thistle" | "tomato" | "transparent" | "turquoise" | "violet" | "wheat" | "white" | "whitesmoke" | "yellow" | "yellowgreen" | "ActiveBorder" | "ActiveCaption" | "AppWorkspace" | "Background" | "ButtonFace" | "ButtonHighlight" | "ButtonShadow" | "ButtonText" | "CaptionText" | "GrayText" | "Highlight" | "HighlightText" | "InactiveBorder" | "InactiveCaption" | "InactiveCaptionText" | "InfoBackground" | "InfoText" | "Menu" | "MenuText" | "Scrollbar" | "ThreeDDarkShadow" | "ThreeDFace" | "ThreeDHighlight" | "ThreeDLightShadow" | "ThreeDShadow" | "Window" | "WindowFrame" | "WindowText" | "currentcolor" | "none" | "hidden" | "dashed" | "dotted" | "double" | "groove" | "outset" | "ridge" | "solid" | "thick" | "thin">

Optional borderBlockEndColor

borderBlockEndColor?: ResponsiveValue<Union<"current" | "whiteAlpha.50" | "whiteAlpha.100" | "whiteAlpha.200" | "whiteAlpha.300" | "whiteAlpha.400" | "whiteAlpha.500" | "whiteAlpha.600" | "whiteAlpha.700" | "whiteAlpha.800" | "whiteAlpha.900" | "blackAlpha.50" | "blackAlpha.100" | "blackAlpha.200" | "blackAlpha.300" | "blackAlpha.400" | "blackAlpha.500" | "blackAlpha.600" | "blackAlpha.700" | "blackAlpha.800" | "blackAlpha.900" | "gray.50" | "gray.100" | "gray.200" | "gray.300" | "gray.400" | "gray.500" | "gray.600" | "gray.700" | "gray.800" | "gray.900" | "red.50" | "red.100" | "red.200" | "red.300" | "red.400" | "red.500" | "red.600" | "red.700" | "red.800" | "red.900" | "orange.50" | "orange.100" | "orange.200" | "orange.300" | "orange.400" | "orange.500" | "orange.600" | "orange.700" | "orange.800" | "orange.900" | "yellow.50" | "yellow.100" | "yellow.200" | "yellow.300" | "yellow.400" | "yellow.500" | "yellow.600" | "yellow.700" | "yellow.800" | "yellow.900" | "green.50" | "green.100" | "green.200" | "green.300" | "green.400" | "green.500" | "green.600" | "green.700" | "green.800" | "green.900" | "teal.50" | "teal.100" | "teal.200" | "teal.300" | "teal.400" | "teal.500" | "teal.600" | "teal.700" | "teal.800" | "teal.900" | "blue.50" | "blue.100" | "blue.200" | "blue.300" | "blue.400" | "blue.500" | "blue.600" | "blue.700" | "blue.800" | "blue.900" | "cyan.50" | "cyan.100" | "cyan.200" | "cyan.300" | "cyan.400" | "cyan.500" | "cyan.600" | "cyan.700" | "cyan.800" | "cyan.900" | "purple.50" | "purple.100" | "purple.200" | "purple.300" | "purple.400" | "purple.500" | "purple.600" | "purple.700" | "purple.800" | "purple.900" | "pink.50" | "pink.100" | "pink.200" | "pink.300" | "pink.400" | "pink.500" | "pink.600" | "pink.700" | "pink.800" | "pink.900" | "linkedin.50" | "linkedin.100" | "linkedin.200" | "linkedin.300" | "linkedin.400" | "linkedin.500" | "linkedin.600" | "linkedin.700" | "linkedin.800" | "linkedin.900" | "facebook.50" | "facebook.100" | "facebook.200" | "facebook.300" | "facebook.400" | "facebook.500" | "facebook.600" | "facebook.700" | "facebook.800" | "facebook.900" | "messenger.50" | "messenger.100" | "messenger.200" | "messenger.300" | "messenger.400" | "messenger.500" | "messenger.600" | "messenger.700" | "messenger.800" | "messenger.900" | "whatsapp.50" | "whatsapp.100" | "whatsapp.200" | "whatsapp.300" | "whatsapp.400" | "whatsapp.500" | "whatsapp.600" | "whatsapp.700" | "whatsapp.800" | "whatsapp.900" | "twitter.50" | "twitter.100" | "twitter.200" | "twitter.300" | "twitter.400" | "twitter.500" | "twitter.600" | "twitter.700" | "twitter.800" | "twitter.900" | "telegram.50" | "telegram.100" | "telegram.200" | "telegram.300" | "telegram.400" | "telegram.500" | "telegram.600" | "telegram.700" | "telegram.800" | "telegram.900" | "chakra-body-text" | "chakra-body-bg" | "chakra-border-color" | "chakra-placeholder-color" | BorderBlockEndColor>>

Optional borderBlockEndStyle

borderBlockEndStyle?: ResponsiveValue<BorderBlockEndStyle>

Optional borderBlockEndWidth

borderBlockEndWidth?: ResponsiveValue<number | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "medium" | "thick" | "thin">

Optional borderBlockStart

borderBlockStart?: ResponsiveValue<number | string & {} | "inset" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "medium" | "aliceblue" | "antiquewhite" | "aqua" | "aquamarine" | "azure" | "beige" | "bisque" | "black" | "blanchedalmond" | "blue" | "blueviolet" | "brown" | "burlywood" | "cadetblue" | "chartreuse" | "chocolate" | "coral" | "cornflowerblue" | "cornsilk" | "crimson" | "cyan" | "darkblue" | "darkcyan" | "darkgoldenrod" | "darkgray" | "darkgreen" | "darkgrey" | "darkkhaki" | "darkmagenta" | "darkolivegreen" | "darkorange" | "darkorchid" | "darkred" | "darksalmon" | "darkseagreen" | "darkslateblue" | "darkslategray" | "darkslategrey" | "darkturquoise" | "darkviolet" | "deeppink" | "deepskyblue" | "dimgray" | "dimgrey" | "dodgerblue" | "firebrick" | "floralwhite" | "forestgreen" | "fuchsia" | "gainsboro" | "ghostwhite" | "gold" | "goldenrod" | "gray" | "green" | "greenyellow" | "grey" | "honeydew" | "hotpink" | "indianred" | "indigo" | "ivory" | "khaki" | "lavender" | "lavenderblush" | "lawngreen" | "lemonchiffon" | "lightblue" | "lightcoral" | "lightcyan" | "lightgoldenrodyellow" | "lightgray" | "lightgreen" | "lightgrey" | "lightpink" | "lightsalmon" | "lightseagreen" | "lightskyblue" | "lightslategray" | "lightslategrey" | "lightsteelblue" | "lightyellow" | "lime" | "limegreen" | "linen" | "magenta" | "maroon" | "mediumaquamarine" | "mediumblue" | "mediumorchid" | "mediumpurple" | "mediumseagreen" | "mediumslateblue" | "mediumspringgreen" | "mediumturquoise" | "mediumvioletred" | "midnightblue" | "mintcream" | "mistyrose" | "moccasin" | "navajowhite" | "navy" | "oldlace" | "olive" | "olivedrab" | "orange" | "orangered" | "orchid" | "palegoldenrod" | "palegreen" | "paleturquoise" | "palevioletred" | "papayawhip" | "peachpuff" | "peru" | "pink" | "plum" | "powderblue" | "purple" | "rebeccapurple" | "red" | "rosybrown" | "royalblue" | "saddlebrown" | "salmon" | "sandybrown" | "seagreen" | "seashell" | "sienna" | "silver" | "skyblue" | "slateblue" | "slategray" | "slategrey" | "snow" | "springgreen" | "steelblue" | "tan" | "teal" | "thistle" | "tomato" | "transparent" | "turquoise" | "violet" | "wheat" | "white" | "whitesmoke" | "yellow" | "yellowgreen" | "ActiveBorder" | "ActiveCaption" | "AppWorkspace" | "Background" | "ButtonFace" | "ButtonHighlight" | "ButtonShadow" | "ButtonText" | "CaptionText" | "GrayText" | "Highlight" | "HighlightText" | "InactiveBorder" | "InactiveCaption" | "InactiveCaptionText" | "InfoBackground" | "InfoText" | "Menu" | "MenuText" | "Scrollbar" | "ThreeDDarkShadow" | "ThreeDFace" | "ThreeDHighlight" | "ThreeDLightShadow" | "ThreeDShadow" | "Window" | "WindowFrame" | "WindowText" | "currentcolor" | "none" | "hidden" | "dashed" | "dotted" | "double" | "groove" | "outset" | "ridge" | "solid" | "thick" | "thin">

Optional borderBlockStartColor

borderBlockStartColor?: ResponsiveValue<Union<"current" | "whiteAlpha.50" | "whiteAlpha.100" | "whiteAlpha.200" | "whiteAlpha.300" | "whiteAlpha.400" | "whiteAlpha.500" | "whiteAlpha.600" | "whiteAlpha.700" | "whiteAlpha.800" | "whiteAlpha.900" | "blackAlpha.50" | "blackAlpha.100" | "blackAlpha.200" | "blackAlpha.300" | "blackAlpha.400" | "blackAlpha.500" | "blackAlpha.600" | "blackAlpha.700" | "blackAlpha.800" | "blackAlpha.900" | "gray.50" | "gray.100" | "gray.200" | "gray.300" | "gray.400" | "gray.500" | "gray.600" | "gray.700" | "gray.800" | "gray.900" | "red.50" | "red.100" | "red.200" | "red.300" | "red.400" | "red.500" | "red.600" | "red.700" | "red.800" | "red.900" | "orange.50" | "orange.100" | "orange.200" | "orange.300" | "orange.400" | "orange.500" | "orange.600" | "orange.700" | "orange.800" | "orange.900" | "yellow.50" | "yellow.100" | "yellow.200" | "yellow.300" | "yellow.400" | "yellow.500" | "yellow.600" | "yellow.700" | "yellow.800" | "yellow.900" | "green.50" | "green.100" | "green.200" | "green.300" | "green.400" | "green.500" | "green.600" | "green.700" | "green.800" | "green.900" | "teal.50" | "teal.100" | "teal.200" | "teal.300" | "teal.400" | "teal.500" | "teal.600" | "teal.700" | "teal.800" | "teal.900" | "blue.50" | "blue.100" | "blue.200" | "blue.300" | "blue.400" | "blue.500" | "blue.600" | "blue.700" | "blue.800" | "blue.900" | "cyan.50" | "cyan.100" | "cyan.200" | "cyan.300" | "cyan.400" | "cyan.500" | "cyan.600" | "cyan.700" | "cyan.800" | "cyan.900" | "purple.50" | "purple.100" | "purple.200" | "purple.300" | "purple.400" | "purple.500" | "purple.600" | "purple.700" | "purple.800" | "purple.900" | "pink.50" | "pink.100" | "pink.200" | "pink.300" | "pink.400" | "pink.500" | "pink.600" | "pink.700" | "pink.800" | "pink.900" | "linkedin.50" | "linkedin.100" | "linkedin.200" | "linkedin.300" | "linkedin.400" | "linkedin.500" | "linkedin.600" | "linkedin.700" | "linkedin.800" | "linkedin.900" | "facebook.50" | "facebook.100" | "facebook.200" | "facebook.300" | "facebook.400" | "facebook.500" | "facebook.600" | "facebook.700" | "facebook.800" | "facebook.900" | "messenger.50" | "messenger.100" | "messenger.200" | "messenger.300" | "messenger.400" | "messenger.500" | "messenger.600" | "messenger.700" | "messenger.800" | "messenger.900" | "whatsapp.50" | "whatsapp.100" | "whatsapp.200" | "whatsapp.300" | "whatsapp.400" | "whatsapp.500" | "whatsapp.600" | "whatsapp.700" | "whatsapp.800" | "whatsapp.900" | "twitter.50" | "twitter.100" | "twitter.200" | "twitter.300" | "twitter.400" | "twitter.500" | "twitter.600" | "twitter.700" | "twitter.800" | "twitter.900" | "telegram.50" | "telegram.100" | "telegram.200" | "telegram.300" | "telegram.400" | "telegram.500" | "telegram.600" | "telegram.700" | "telegram.800" | "telegram.900" | "chakra-body-text" | "chakra-body-bg" | "chakra-border-color" | "chakra-placeholder-color" | BorderBlockStartColor>>

Optional borderBlockStartStyle

borderBlockStartStyle?: ResponsiveValue<BorderBlockStartStyle>

Optional borderBlockStartWidth

borderBlockStartWidth?: ResponsiveValue<number | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "medium" | "thick" | "thin">

Optional borderBottom

borderBottom?: ResponsiveValue<Union<number | string & {} | "inset" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "medium" | "aliceblue" | "antiquewhite" | "aqua" | "aquamarine" | "azure" | "beige" | "bisque" | "black" | "blanchedalmond" | "blue" | "blueviolet" | "brown" | "burlywood" | "cadetblue" | "chartreuse" | "chocolate" | "coral" | "cornflowerblue" | "cornsilk" | "crimson" | "cyan" | "darkblue" | "darkcyan" | "darkgoldenrod" | "darkgray" | "darkgreen" | "darkgrey" | "darkkhaki" | "darkmagenta" | "darkolivegreen" | "darkorange" | "darkorchid" | "darkred" | "darksalmon" | "darkseagreen" | "darkslateblue" | "darkslategray" | "darkslategrey" | "darkturquoise" | "darkviolet" | "deeppink" | "deepskyblue" | "dimgray" | "dimgrey" | "dodgerblue" | "firebrick" | "floralwhite" | "forestgreen" | "fuchsia" | "gainsboro" | "ghostwhite" | "gold" | "goldenrod" | "gray" | "green" | "greenyellow" | "grey" | "honeydew" | "hotpink" | "indianred" | "indigo" | "ivory" | "khaki" | "lavender" | "lavenderblush" | "lawngreen" | "lemonchiffon" | "lightblue" | "lightcoral" | "lightcyan" | "lightgoldenrodyellow" | "lightgray" | "lightgreen" | "lightgrey" | "lightpink" | "lightsalmon" | "lightseagreen" | "lightskyblue" | "lightslategray" | "lightslategrey" | "lightsteelblue" | "lightyellow" | "lime" | "limegreen" | "linen" | "magenta" | "maroon" | "mediumaquamarine" | "mediumblue" | "mediumorchid" | "mediumpurple" | "mediumseagreen" | "mediumslateblue" | "mediumspringgreen" | "mediumturquoise" | "mediumvioletred" | "midnightblue" | "mintcream" | "mistyrose" | "moccasin" | "navajowhite" | "navy" | "oldlace" | "olive" | "olivedrab" | "orange" | "orangered" | "orchid" | "palegoldenrod" | "palegreen" | "paleturquoise" | "palevioletred" | "papayawhip" | "peachpuff" | "peru" | "pink" | "plum" | "powderblue" | "purple" | "rebeccapurple" | "red" | "rosybrown" | "royalblue" | "saddlebrown" | "salmon" | "sandybrown" | "seagreen" | "seashell" | "sienna" | "silver" | "skyblue" | "slateblue" | "slategray" | "slategrey" | "snow" | "springgreen" | "steelblue" | "tan" | "teal" | "thistle" | "tomato" | "transparent" | "turquoise" | "violet" | "wheat" | "white" | "whitesmoke" | "yellow" | "yellowgreen" | "ActiveBorder" | "ActiveCaption" | "AppWorkspace" | "Background" | "ButtonFace" | "ButtonHighlight" | "ButtonShadow" | "ButtonText" | "CaptionText" | "GrayText" | "Highlight" | "HighlightText" | "InactiveBorder" | "InactiveCaption" | "InactiveCaptionText" | "InfoBackground" | "InfoText" | "Menu" | "MenuText" | "Scrollbar" | "ThreeDDarkShadow" | "ThreeDFace" | "ThreeDHighlight" | "ThreeDLightShadow" | "ThreeDShadow" | "Window" | "WindowFrame" | "WindowText" | "currentcolor" | "none" | "hidden" | "dashed" | "dotted" | "double" | "groove" | "outset" | "ridge" | "solid" | "thick" | "thin" | "1px" | "2px" | "4px" | "8px">>

The CSS border-bottom property

Optional borderBottomColor

borderBottomColor?: ResponsiveValue<Union<"current" | "whiteAlpha.50" | "whiteAlpha.100" | "whiteAlpha.200" | "whiteAlpha.300" | "whiteAlpha.400" | "whiteAlpha.500" | "whiteAlpha.600" | "whiteAlpha.700" | "whiteAlpha.800" | "whiteAlpha.900" | "blackAlpha.50" | "blackAlpha.100" | "blackAlpha.200" | "blackAlpha.300" | "blackAlpha.400" | "blackAlpha.500" | "blackAlpha.600" | "blackAlpha.700" | "blackAlpha.800" | "blackAlpha.900" | "gray.50" | "gray.100" | "gray.200" | "gray.300" | "gray.400" | "gray.500" | "gray.600" | "gray.700" | "gray.800" | "gray.900" | "red.50" | "red.100" | "red.200" | "red.300" | "red.400" | "red.500" | "red.600" | "red.700" | "red.800" | "red.900" | "orange.50" | "orange.100" | "orange.200" | "orange.300" | "orange.400" | "orange.500" | "orange.600" | "orange.700" | "orange.800" | "orange.900" | "yellow.50" | "yellow.100" | "yellow.200" | "yellow.300" | "yellow.400" | "yellow.500" | "yellow.600" | "yellow.700" | "yellow.800" | "yellow.900" | "green.50" | "green.100" | "green.200" | "green.300" | "green.400" | "green.500" | "green.600" | "green.700" | "green.800" | "green.900" | "teal.50" | "teal.100" | "teal.200" | "teal.300" | "teal.400" | "teal.500" | "teal.600" | "teal.700" | "teal.800" | "teal.900" | "blue.50" | "blue.100" | "blue.200" | "blue.300" | "blue.400" | "blue.500" | "blue.600" | "blue.700" | "blue.800" | "blue.900" | "cyan.50" | "cyan.100" | "cyan.200" | "cyan.300" | "cyan.400" | "cyan.500" | "cyan.600" | "cyan.700" | "cyan.800" | "cyan.900" | "purple.50" | "purple.100" | "purple.200" | "purple.300" | "purple.400" | "purple.500" | "purple.600" | "purple.700" | "purple.800" | "purple.900" | "pink.50" | "pink.100" | "pink.200" | "pink.300" | "pink.400" | "pink.500" | "pink.600" | "pink.700" | "pink.800" | "pink.900" | "linkedin.50" | "linkedin.100" | "linkedin.200" | "linkedin.300" | "linkedin.400" | "linkedin.500" | "linkedin.600" | "linkedin.700" | "linkedin.800" | "linkedin.900" | "facebook.50" | "facebook.100" | "facebook.200" | "facebook.300" | "facebook.400" | "facebook.500" | "facebook.600" | "facebook.700" | "facebook.800" | "facebook.900" | "messenger.50" | "messenger.100" | "messenger.200" | "messenger.300" | "messenger.400" | "messenger.500" | "messenger.600" | "messenger.700" | "messenger.800" | "messenger.900" | "whatsapp.50" | "whatsapp.100" | "whatsapp.200" | "whatsapp.300" | "whatsapp.400" | "whatsapp.500" | "whatsapp.600" | "whatsapp.700" | "whatsapp.800" | "whatsapp.900" | "twitter.50" | "twitter.100" | "twitter.200" | "twitter.300" | "twitter.400" | "twitter.500" | "twitter.600" | "twitter.700" | "twitter.800" | "twitter.900" | "telegram.50" | "telegram.100" | "telegram.200" | "telegram.300" | "telegram.400" | "telegram.500" | "telegram.600" | "telegram.700" | "telegram.800" | "telegram.900" | "chakra-body-text" | "chakra-body-bg" | "chakra-border-color" | "chakra-placeholder-color" | BorderBottomColor>>

The CSS border-bottom-color property

Optional borderBottomEndRadius

borderBottomEndRadius?: ResponsiveValue<Union<number | "sm" | "md" | "lg" | string & {} | "base" | "xl" | "2xl" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "3xl" | "none" | "full">>

Optional borderBottomLeftRadius

borderBottomLeftRadius?: ResponsiveValue<Union<number | "sm" | "md" | "lg" | string & {} | "base" | "xl" | "2xl" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "3xl" | "none" | "full">>

The CSS border-bottom-left-radius property

Optional borderBottomRadius

borderBottomRadius?: ResponsiveValue<Union<number | "sm" | "md" | "lg" | string & {} | "base" | "xl" | "2xl" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "3xl" | "none" | "full">>

The CSS border-bottom-radius property

Optional borderBottomRightRadius

borderBottomRightRadius?: ResponsiveValue<Union<number | "sm" | "md" | "lg" | string & {} | "base" | "xl" | "2xl" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "3xl" | "none" | "full">>

The CSS border-bottom-right-radius property

Optional borderBottomStartRadius

borderBottomStartRadius?: ResponsiveValue<Union<number | "sm" | "md" | "lg" | string & {} | "base" | "xl" | "2xl" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "3xl" | "none" | "full">>

Optional borderBottomStyle

borderBottomStyle?: ResponsiveValue<BorderBottomStyle>

The CSS border-bottom-style property

Optional borderBottomWidth

borderBottomWidth?: ResponsiveValue<number | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "medium" | "thick" | "thin">

The CSS border-bottom-width property

Optional borderColor

borderColor?: ResponsiveValue<Union<"current" | "whiteAlpha.50" | "whiteAlpha.100" | "whiteAlpha.200" | "whiteAlpha.300" | "whiteAlpha.400" | "whiteAlpha.500" | "whiteAlpha.600" | "whiteAlpha.700" | "whiteAlpha.800" | "whiteAlpha.900" | "blackAlpha.50" | "blackAlpha.100" | "blackAlpha.200" | "blackAlpha.300" | "blackAlpha.400" | "blackAlpha.500" | "blackAlpha.600" | "blackAlpha.700" | "blackAlpha.800" | "blackAlpha.900" | "gray.50" | "gray.100" | "gray.200" | "gray.300" | "gray.400" | "gray.500" | "gray.600" | "gray.700" | "gray.800" | "gray.900" | "red.50" | "red.100" | "red.200" | "red.300" | "red.400" | "red.500" | "red.600" | "red.700" | "red.800" | "red.900" | "orange.50" | "orange.100" | "orange.200" | "orange.300" | "orange.400" | "orange.500" | "orange.600" | "orange.700" | "orange.800" | "orange.900" | "yellow.50" | "yellow.100" | "yellow.200" | "yellow.300" | "yellow.400" | "yellow.500" | "yellow.600" | "yellow.700" | "yellow.800" | "yellow.900" | "green.50" | "green.100" | "green.200" | "green.300" | "green.400" | "green.500" | "green.600" | "green.700" | "green.800" | "green.900" | "teal.50" | "teal.100" | "teal.200" | "teal.300" | "teal.400" | "teal.500" | "teal.600" | "teal.700" | "teal.800" | "teal.900" | "blue.50" | "blue.100" | "blue.200" | "blue.300" | "blue.400" | "blue.500" | "blue.600" | "blue.700" | "blue.800" | "blue.900" | "cyan.50" | "cyan.100" | "cyan.200" | "cyan.300" | "cyan.400" | "cyan.500" | "cyan.600" | "cyan.700" | "cyan.800" | "cyan.900" | "purple.50" | "purple.100" | "purple.200" | "purple.300" | "purple.400" | "purple.500" | "purple.600" | "purple.700" | "purple.800" | "purple.900" | "pink.50" | "pink.100" | "pink.200" | "pink.300" | "pink.400" | "pink.500" | "pink.600" | "pink.700" | "pink.800" | "pink.900" | "linkedin.50" | "linkedin.100" | "linkedin.200" | "linkedin.300" | "linkedin.400" | "linkedin.500" | "linkedin.600" | "linkedin.700" | "linkedin.800" | "linkedin.900" | "facebook.50" | "facebook.100" | "facebook.200" | "facebook.300" | "facebook.400" | "facebook.500" | "facebook.600" | "facebook.700" | "facebook.800" | "facebook.900" | "messenger.50" | "messenger.100" | "messenger.200" | "messenger.300" | "messenger.400" | "messenger.500" | "messenger.600" | "messenger.700" | "messenger.800" | "messenger.900" | "whatsapp.50" | "whatsapp.100" | "whatsapp.200" | "whatsapp.300" | "whatsapp.400" | "whatsapp.500" | "whatsapp.600" | "whatsapp.700" | "whatsapp.800" | "whatsapp.900" | "twitter.50" | "twitter.100" | "twitter.200" | "twitter.300" | "twitter.400" | "twitter.500" | "twitter.600" | "twitter.700" | "twitter.800" | "twitter.900" | "telegram.50" | "telegram.100" | "telegram.200" | "telegram.300" | "telegram.400" | "telegram.500" | "telegram.600" | "telegram.700" | "telegram.800" | "telegram.900" | "chakra-body-text" | "chakra-body-bg" | "chakra-border-color" | "chakra-placeholder-color" | BorderTopColor>>

The CSS border-color property

Optional borderEnd

borderEnd?: ResponsiveValue<number | string & {} | "inset" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "medium" | "aliceblue" | "antiquewhite" | "aqua" | "aquamarine" | "azure" | "beige" | "bisque" | "black" | "blanchedalmond" | "blue" | "blueviolet" | "brown" | "burlywood" | "cadetblue" | "chartreuse" | "chocolate" | "coral" | "cornflowerblue" | "cornsilk" | "crimson" | "cyan" | "darkblue" | "darkcyan" | "darkgoldenrod" | "darkgray" | "darkgreen" | "darkgrey" | "darkkhaki" | "darkmagenta" | "darkolivegreen" | "darkorange" | "darkorchid" | "darkred" | "darksalmon" | "darkseagreen" | "darkslateblue" | "darkslategray" | "darkslategrey" | "darkturquoise" | "darkviolet" | "deeppink" | "deepskyblue" | "dimgray" | "dimgrey" | "dodgerblue" | "firebrick" | "floralwhite" | "forestgreen" | "fuchsia" | "gainsboro" | "ghostwhite" | "gold" | "goldenrod" | "gray" | "green" | "greenyellow" | "grey" | "honeydew" | "hotpink" | "indianred" | "indigo" | "ivory" | "khaki" | "lavender" | "lavenderblush" | "lawngreen" | "lemonchiffon" | "lightblue" | "lightcoral" | "lightcyan" | "lightgoldenrodyellow" | "lightgray" | "lightgreen" | "lightgrey" | "lightpink" | "lightsalmon" | "lightseagreen" | "lightskyblue" | "lightslategray" | "lightslategrey" | "lightsteelblue" | "lightyellow" | "lime" | "limegreen" | "linen" | "magenta" | "maroon" | "mediumaquamarine" | "mediumblue" | "mediumorchid" | "mediumpurple" | "mediumseagreen" | "mediumslateblue" | "mediumspringgreen" | "mediumturquoise" | "mediumvioletred" | "midnightblue" | "mintcream" | "mistyrose" | "moccasin" | "navajowhite" | "navy" | "oldlace" | "olive" | "olivedrab" | "orange" | "orangered" | "orchid" | "palegoldenrod" | "palegreen" | "paleturquoise" | "palevioletred" | "papayawhip" | "peachpuff" | "peru" | "pink" | "plum" | "powderblue" | "purple" | "rebeccapurple" | "red" | "rosybrown" | "royalblue" | "saddlebrown" | "salmon" | "sandybrown" | "seagreen" | "seashell" | "sienna" | "silver" | "skyblue" | "slateblue" | "slategray" | "slategrey" | "snow" | "springgreen" | "steelblue" | "tan" | "teal" | "thistle" | "tomato" | "transparent" | "turquoise" | "violet" | "wheat" | "white" | "whitesmoke" | "yellow" | "yellowgreen" | "ActiveBorder" | "ActiveCaption" | "AppWorkspace" | "Background" | "ButtonFace" | "ButtonHighlight" | "ButtonShadow" | "ButtonText" | "CaptionText" | "GrayText" | "Highlight" | "HighlightText" | "InactiveBorder" | "InactiveCaption" | "InactiveCaptionText" | "InfoBackground" | "InfoText" | "Menu" | "MenuText" | "Scrollbar" | "ThreeDDarkShadow" | "ThreeDFace" | "ThreeDHighlight" | "ThreeDLightShadow" | "ThreeDShadow" | "Window" | "WindowFrame" | "WindowText" | "currentcolor" | "none" | "hidden" | "dashed" | "dotted" | "double" | "groove" | "outset" | "ridge" | "solid" | "thick" | "thin">

Optional borderEndColor

borderEndColor?: ResponsiveValue<BorderInlineEndColor>

Optional borderEndEndRadius

borderEndEndRadius?: ResponsiveValue<Union<number | "sm" | "md" | "lg" | string & {} | "base" | "xl" | "2xl" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "3xl" | "none" | "full">>

Optional borderEndRadius

borderEndRadius?: ResponsiveValue<Union<number | "sm" | "md" | "lg" | string & {} | "base" | "xl" | "2xl" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "3xl" | "none" | "full">>

When direction is ltr, borderEndRadius is equivalent to borderRightRadius. When direction is rtl, borderEndRadius is equivalent to borderLeftRadius.

Optional borderEndStartRadius

borderEndStartRadius?: ResponsiveValue<Union<number | "sm" | "md" | "lg" | string & {} | "base" | "xl" | "2xl" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "3xl" | "none" | "full">>

Optional borderEndStyle

borderEndStyle?: ResponsiveValue<BorderInlineEndStyle>

Optional borderEndWidth

borderEndWidth?: ResponsiveValue<number | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "medium" | "thick" | "thin">

Optional borderInline

borderInline?: ResponsiveValue<number | string & {} | "inset" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "medium" | "aliceblue" | "antiquewhite" | "aqua" | "aquamarine" | "azure" | "beige" | "bisque" | "black" | "blanchedalmond" | "blue" | "blueviolet" | "brown" | "burlywood" | "cadetblue" | "chartreuse" | "chocolate" | "coral" | "cornflowerblue" | "cornsilk" | "crimson" | "cyan" | "darkblue" | "darkcyan" | "darkgoldenrod" | "darkgray" | "darkgreen" | "darkgrey" | "darkkhaki" | "darkmagenta" | "darkolivegreen" | "darkorange" | "darkorchid" | "darkred" | "darksalmon" | "darkseagreen" | "darkslateblue" | "darkslategray" | "darkslategrey" | "darkturquoise" | "darkviolet" | "deeppink" | "deepskyblue" | "dimgray" | "dimgrey" | "dodgerblue" | "firebrick" | "floralwhite" | "forestgreen" | "fuchsia" | "gainsboro" | "ghostwhite" | "gold" | "goldenrod" | "gray" | "green" | "greenyellow" | "grey" | "honeydew" | "hotpink" | "indianred" | "indigo" | "ivory" | "khaki" | "lavender" | "lavenderblush" | "lawngreen" | "lemonchiffon" | "lightblue" | "lightcoral" | "lightcyan" | "lightgoldenrodyellow" | "lightgray" | "lightgreen" | "lightgrey" | "lightpink" | "lightsalmon" | "lightseagreen" | "lightskyblue" | "lightslategray" | "lightslategrey" | "lightsteelblue" | "lightyellow" | "lime" | "limegreen" | "linen" | "magenta" | "maroon" | "mediumaquamarine" | "mediumblue" | "mediumorchid" | "mediumpurple" | "mediumseagreen" | "mediumslateblue" | "mediumspringgreen" | "mediumturquoise" | "mediumvioletred" | "midnightblue" | "mintcream" | "mistyrose" | "moccasin" | "navajowhite" | "navy" | "oldlace" | "olive" | "olivedrab" | "orange" | "orangered" | "orchid" | "palegoldenrod" | "palegreen" | "paleturquoise" | "palevioletred" | "papayawhip" | "peachpuff" | "peru" | "pink" | "plum" | "powderblue" | "purple" | "rebeccapurple" | "red" | "rosybrown" | "royalblue" | "saddlebrown" | "salmon" | "sandybrown" | "seagreen" | "seashell" | "sienna" | "silver" | "skyblue" | "slateblue" | "slategray" | "slategrey" | "snow" | "springgreen" | "steelblue" | "tan" | "teal" | "thistle" | "tomato" | "transparent" | "turquoise" | "violet" | "wheat" | "white" | "whitesmoke" | "yellow" | "yellowgreen" | "ActiveBorder" | "ActiveCaption" | "AppWorkspace" | "Background" | "ButtonFace" | "ButtonHighlight" | "ButtonShadow" | "ButtonText" | "CaptionText" | "GrayText" | "Highlight" | "HighlightText" | "InactiveBorder" | "InactiveCaption" | "InactiveCaptionText" | "InfoBackground" | "InfoText" | "Menu" | "MenuText" | "Scrollbar" | "ThreeDDarkShadow" | "ThreeDFace" | "ThreeDHighlight" | "ThreeDLightShadow" | "ThreeDShadow" | "Window" | "WindowFrame" | "WindowText" | "currentcolor" | "none" | "hidden" | "dashed" | "dotted" | "double" | "groove" | "outset" | "ridge" | "solid" | "thick" | "thin">

Optional borderInlineEnd

borderInlineEnd?: ResponsiveValue<number | string & {} | "inset" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "medium" | "aliceblue" | "antiquewhite" | "aqua" | "aquamarine" | "azure" | "beige" | "bisque" | "black" | "blanchedalmond" | "blue" | "blueviolet" | "brown" | "burlywood" | "cadetblue" | "chartreuse" | "chocolate" | "coral" | "cornflowerblue" | "cornsilk" | "crimson" | "cyan" | "darkblue" | "darkcyan" | "darkgoldenrod" | "darkgray" | "darkgreen" | "darkgrey" | "darkkhaki" | "darkmagenta" | "darkolivegreen" | "darkorange" | "darkorchid" | "darkred" | "darksalmon" | "darkseagreen" | "darkslateblue" | "darkslategray" | "darkslategrey" | "darkturquoise" | "darkviolet" | "deeppink" | "deepskyblue" | "dimgray" | "dimgrey" | "dodgerblue" | "firebrick" | "floralwhite" | "forestgreen" | "fuchsia" | "gainsboro" | "ghostwhite" | "gold" | "goldenrod" | "gray" | "green" | "greenyellow" | "grey" | "honeydew" | "hotpink" | "indianred" | "indigo" | "ivory" | "khaki" | "lavender" | "lavenderblush" | "lawngreen" | "lemonchiffon" | "lightblue" | "lightcoral" | "lightcyan" | "lightgoldenrodyellow" | "lightgray" | "lightgreen" | "lightgrey" | "lightpink" | "lightsalmon" | "lightseagreen" | "lightskyblue" | "lightslategray" | "lightslategrey" | "lightsteelblue" | "lightyellow" | "lime" | "limegreen" | "linen" | "magenta" | "maroon" | "mediumaquamarine" | "mediumblue" | "mediumorchid" | "mediumpurple" | "mediumseagreen" | "mediumslateblue" | "mediumspringgreen" | "mediumturquoise" | "mediumvioletred" | "midnightblue" | "mintcream" | "mistyrose" | "moccasin" | "navajowhite" | "navy" | "oldlace" | "olive" | "olivedrab" | "orange" | "orangered" | "orchid" | "palegoldenrod" | "palegreen" | "paleturquoise" | "palevioletred" | "papayawhip" | "peachpuff" | "peru" | "pink" | "plum" | "powderblue" | "purple" | "rebeccapurple" | "red" | "rosybrown" | "royalblue" | "saddlebrown" | "salmon" | "sandybrown" | "seagreen" | "seashell" | "sienna" | "silver" | "skyblue" | "slateblue" | "slategray" | "slategrey" | "snow" | "springgreen" | "steelblue" | "tan" | "teal" | "thistle" | "tomato" | "transparent" | "turquoise" | "violet" | "wheat" | "white" | "whitesmoke" | "yellow" | "yellowgreen" | "ActiveBorder" | "ActiveCaption" | "AppWorkspace" | "Background" | "ButtonFace" | "ButtonHighlight" | "ButtonShadow" | "ButtonText" | "CaptionText" | "GrayText" | "Highlight" | "HighlightText" | "InactiveBorder" | "InactiveCaption" | "InactiveCaptionText" | "InfoBackground" | "InfoText" | "Menu" | "MenuText" | "Scrollbar" | "ThreeDDarkShadow" | "ThreeDFace" | "ThreeDHighlight" | "ThreeDLightShadow" | "ThreeDShadow" | "Window" | "WindowFrame" | "WindowText" | "currentcolor" | "none" | "hidden" | "dashed" | "dotted" | "double" | "groove" | "outset" | "ridge" | "solid" | "thick" | "thin">

Optional borderInlineEndColor

borderInlineEndColor?: ResponsiveValue<Union<"current" | "whiteAlpha.50" | "whiteAlpha.100" | "whiteAlpha.200" | "whiteAlpha.300" | "whiteAlpha.400" | "whiteAlpha.500" | "whiteAlpha.600" | "whiteAlpha.700" | "whiteAlpha.800" | "whiteAlpha.900" | "blackAlpha.50" | "blackAlpha.100" | "blackAlpha.200" | "blackAlpha.300" | "blackAlpha.400" | "blackAlpha.500" | "blackAlpha.600" | "blackAlpha.700" | "blackAlpha.800" | "blackAlpha.900" | "gray.50" | "gray.100" | "gray.200" | "gray.300" | "gray.400" | "gray.500" | "gray.600" | "gray.700" | "gray.800" | "gray.900" | "red.50" | "red.100" | "red.200" | "red.300" | "red.400" | "red.500" | "red.600" | "red.700" | "red.800" | "red.900" | "orange.50" | "orange.100" | "orange.200" | "orange.300" | "orange.400" | "orange.500" | "orange.600" | "orange.700" | "orange.800" | "orange.900" | "yellow.50" | "yellow.100" | "yellow.200" | "yellow.300" | "yellow.400" | "yellow.500" | "yellow.600" | "yellow.700" | "yellow.800" | "yellow.900" | "green.50" | "green.100" | "green.200" | "green.300" | "green.400" | "green.500" | "green.600" | "green.700" | "green.800" | "green.900" | "teal.50" | "teal.100" | "teal.200" | "teal.300" | "teal.400" | "teal.500" | "teal.600" | "teal.700" | "teal.800" | "teal.900" | "blue.50" | "blue.100" | "blue.200" | "blue.300" | "blue.400" | "blue.500" | "blue.600" | "blue.700" | "blue.800" | "blue.900" | "cyan.50" | "cyan.100" | "cyan.200" | "cyan.300" | "cyan.400" | "cyan.500" | "cyan.600" | "cyan.700" | "cyan.800" | "cyan.900" | "purple.50" | "purple.100" | "purple.200" | "purple.300" | "purple.400" | "purple.500" | "purple.600" | "purple.700" | "purple.800" | "purple.900" | "pink.50" | "pink.100" | "pink.200" | "pink.300" | "pink.400" | "pink.500" | "pink.600" | "pink.700" | "pink.800" | "pink.900" | "linkedin.50" | "linkedin.100" | "linkedin.200" | "linkedin.300" | "linkedin.400" | "linkedin.500" | "linkedin.600" | "linkedin.700" | "linkedin.800" | "linkedin.900" | "facebook.50" | "facebook.100" | "facebook.200" | "facebook.300" | "facebook.400" | "facebook.500" | "facebook.600" | "facebook.700" | "facebook.800" | "facebook.900" | "messenger.50" | "messenger.100" | "messenger.200" | "messenger.300" | "messenger.400" | "messenger.500" | "messenger.600" | "messenger.700" | "messenger.800" | "messenger.900" | "whatsapp.50" | "whatsapp.100" | "whatsapp.200" | "whatsapp.300" | "whatsapp.400" | "whatsapp.500" | "whatsapp.600" | "whatsapp.700" | "whatsapp.800" | "whatsapp.900" | "twitter.50" | "twitter.100" | "twitter.200" | "twitter.300" | "twitter.400" | "twitter.500" | "twitter.600" | "twitter.700" | "twitter.800" | "twitter.900" | "telegram.50" | "telegram.100" | "telegram.200" | "telegram.300" | "telegram.400" | "telegram.500" | "telegram.600" | "telegram.700" | "telegram.800" | "telegram.900" | "chakra-body-text" | "chakra-body-bg" | "chakra-border-color" | "chakra-placeholder-color" | BorderInlineEndColor>>

Optional borderInlineEndRadius

borderInlineEndRadius?: ResponsiveValue<Union<number | "sm" | "md" | "lg" | string & {} | "base" | "xl" | "2xl" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "3xl" | "none" | "full">>

When direction is ltr, borderInlineEndRadius is equivalent to borderRightRadius. When direction is rtl, borderInlineEndRadius is equivalent to borderLeftRadius.

Optional borderInlineEndStyle

borderInlineEndStyle?: ResponsiveValue<BorderInlineEndStyle>

Optional borderInlineEndWidth

borderInlineEndWidth?: ResponsiveValue<number | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "medium" | "thick" | "thin">

Optional borderInlineStart

borderInlineStart?: ResponsiveValue<number | string & {} | "inset" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "medium" | "aliceblue" | "antiquewhite" | "aqua" | "aquamarine" | "azure" | "beige" | "bisque" | "black" | "blanchedalmond" | "blue" | "blueviolet" | "brown" | "burlywood" | "cadetblue" | "chartreuse" | "chocolate" | "coral" | "cornflowerblue" | "cornsilk" | "crimson" | "cyan" | "darkblue" | "darkcyan" | "darkgoldenrod" | "darkgray" | "darkgreen" | "darkgrey" | "darkkhaki" | "darkmagenta" | "darkolivegreen" | "darkorange" | "darkorchid" | "darkred" | "darksalmon" | "darkseagreen" | "darkslateblue" | "darkslategray" | "darkslategrey" | "darkturquoise" | "darkviolet" | "deeppink" | "deepskyblue" | "dimgray" | "dimgrey" | "dodgerblue" | "firebrick" | "floralwhite" | "forestgreen" | "fuchsia" | "gainsboro" | "ghostwhite" | "gold" | "goldenrod" | "gray" | "green" | "greenyellow" | "grey" | "honeydew" | "hotpink" | "indianred" | "indigo" | "ivory" | "khaki" | "lavender" | "lavenderblush" | "lawngreen" | "lemonchiffon" | "lightblue" | "lightcoral" | "lightcyan" | "lightgoldenrodyellow" | "lightgray" | "lightgreen" | "lightgrey" | "lightpink" | "lightsalmon" | "lightseagreen" | "lightskyblue" | "lightslategray" | "lightslategrey" | "lightsteelblue" | "lightyellow" | "lime" | "limegreen" | "linen" | "magenta" | "maroon" | "mediumaquamarine" | "mediumblue" | "mediumorchid" | "mediumpurple" | "mediumseagreen" | "mediumslateblue" | "mediumspringgreen" | "mediumturquoise" | "mediumvioletred" | "midnightblue" | "mintcream" | "mistyrose" | "moccasin" | "navajowhite" | "navy" | "oldlace" | "olive" | "olivedrab" | "orange" | "orangered" | "orchid" | "palegoldenrod" | "palegreen" | "paleturquoise" | "palevioletred" | "papayawhip" | "peachpuff" | "peru" | "pink" | "plum" | "powderblue" | "purple" | "rebeccapurple" | "red" | "rosybrown" | "royalblue" | "saddlebrown" | "salmon" | "sandybrown" | "seagreen" | "seashell" | "sienna" | "silver" | "skyblue" | "slateblue" | "slategray" | "slategrey" | "snow" | "springgreen" | "steelblue" | "tan" | "teal" | "thistle" | "tomato" | "transparent" | "turquoise" | "violet" | "wheat" | "white" | "whitesmoke" | "yellow" | "yellowgreen" | "ActiveBorder" | "ActiveCaption" | "AppWorkspace" | "Background" | "ButtonFace" | "ButtonHighlight" | "ButtonShadow" | "ButtonText" | "CaptionText" | "GrayText" | "Highlight" | "HighlightText" | "InactiveBorder" | "InactiveCaption" | "InactiveCaptionText" | "InfoBackground" | "InfoText" | "Menu" | "MenuText" | "Scrollbar" | "ThreeDDarkShadow" | "ThreeDFace" | "ThreeDHighlight" | "ThreeDLightShadow" | "ThreeDShadow" | "Window" | "WindowFrame" | "WindowText" | "currentcolor" | "none" | "hidden" | "dashed" | "dotted" | "double" | "groove" | "outset" | "ridge" | "solid" | "thick" | "thin">

Optional borderInlineStartColor

borderInlineStartColor?: ResponsiveValue<Union<"current" | "whiteAlpha.50" | "whiteAlpha.100" | "whiteAlpha.200" | "whiteAlpha.300" | "whiteAlpha.400" | "whiteAlpha.500" | "whiteAlpha.600" | "whiteAlpha.700" | "whiteAlpha.800" | "whiteAlpha.900" | "blackAlpha.50" | "blackAlpha.100" | "blackAlpha.200" | "blackAlpha.300" | "blackAlpha.400" | "blackAlpha.500" | "blackAlpha.600" | "blackAlpha.700" | "blackAlpha.800" | "blackAlpha.900" | "gray.50" | "gray.100" | "gray.200" | "gray.300" | "gray.400" | "gray.500" | "gray.600" | "gray.700" | "gray.800" | "gray.900" | "red.50" | "red.100" | "red.200" | "red.300" | "red.400" | "red.500" | "red.600" | "red.700" | "red.800" | "red.900" | "orange.50" | "orange.100" | "orange.200" | "orange.300" | "orange.400" | "orange.500" | "orange.600" | "orange.700" | "orange.800" | "orange.900" | "yellow.50" | "yellow.100" | "yellow.200" | "yellow.300" | "yellow.400" | "yellow.500" | "yellow.600" | "yellow.700" | "yellow.800" | "yellow.900" | "green.50" | "green.100" | "green.200" | "green.300" | "green.400" | "green.500" | "green.600" | "green.700" | "green.800" | "green.900" | "teal.50" | "teal.100" | "teal.200" | "teal.300" | "teal.400" | "teal.500" | "teal.600" | "teal.700" | "teal.800" | "teal.900" | "blue.50" | "blue.100" | "blue.200" | "blue.300" | "blue.400" | "blue.500" | "blue.600" | "blue.700" | "blue.800" | "blue.900" | "cyan.50" | "cyan.100" | "cyan.200" | "cyan.300" | "cyan.400" | "cyan.500" | "cyan.600" | "cyan.700" | "cyan.800" | "cyan.900" | "purple.50" | "purple.100" | "purple.200" | "purple.300" | "purple.400" | "purple.500" | "purple.600" | "purple.700" | "purple.800" | "purple.900" | "pink.50" | "pink.100" | "pink.200" | "pink.300" | "pink.400" | "pink.500" | "pink.600" | "pink.700" | "pink.800" | "pink.900" | "linkedin.50" | "linkedin.100" | "linkedin.200" | "linkedin.300" | "linkedin.400" | "linkedin.500" | "linkedin.600" | "linkedin.700" | "linkedin.800" | "linkedin.900" | "facebook.50" | "facebook.100" | "facebook.200" | "facebook.300" | "facebook.400" | "facebook.500" | "facebook.600" | "facebook.700" | "facebook.800" | "facebook.900" | "messenger.50" | "messenger.100" | "messenger.200" | "messenger.300" | "messenger.400" | "messenger.500" | "messenger.600" | "messenger.700" | "messenger.800" | "messenger.900" | "whatsapp.50" | "whatsapp.100" | "whatsapp.200" | "whatsapp.300" | "whatsapp.400" | "whatsapp.500" | "whatsapp.600" | "whatsapp.700" | "whatsapp.800" | "whatsapp.900" | "twitter.50" | "twitter.100" | "twitter.200" | "twitter.300" | "twitter.400" | "twitter.500" | "twitter.600" | "twitter.700" | "twitter.800" | "twitter.900" | "telegram.50" | "telegram.100" | "telegram.200" | "telegram.300" | "telegram.400" | "telegram.500" | "telegram.600" | "telegram.700" | "telegram.800" | "telegram.900" | "chakra-body-text" | "chakra-body-bg" | "chakra-border-color" | "chakra-placeholder-color" | BorderInlineStartColor>>

Optional borderInlineStartRadius

borderInlineStartRadius?: ResponsiveValue<Union<number | "sm" | "md" | "lg" | string & {} | "base" | "xl" | "2xl" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "3xl" | "none" | "full">>

When direction is ltr, borderInlineStartRadius is equivalent to borderLeftRadius. When direction is rtl, borderInlineStartRadius is equivalent to borderRightRadius.

Optional borderInlineStartStyle

borderInlineStartStyle?: ResponsiveValue<BorderInlineStartStyle>

Optional borderInlineStartWidth

borderInlineStartWidth?: ResponsiveValue<number | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "medium" | "thick" | "thin">

Optional borderLeft

borderLeft?: ResponsiveValue<Union<number | string & {} | "inset" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "medium" | "aliceblue" | "antiquewhite" | "aqua" | "aquamarine" | "azure" | "beige" | "bisque" | "black" | "blanchedalmond" | "blue" | "blueviolet" | "brown" | "burlywood" | "cadetblue" | "chartreuse" | "chocolate" | "coral" | "cornflowerblue" | "cornsilk" | "crimson" | "cyan" | "darkblue" | "darkcyan" | "darkgoldenrod" | "darkgray" | "darkgreen" | "darkgrey" | "darkkhaki" | "darkmagenta" | "darkolivegreen" | "darkorange" | "darkorchid" | "darkred" | "darksalmon" | "darkseagreen" | "darkslateblue" | "darkslategray" | "darkslategrey" | "darkturquoise" | "darkviolet" | "deeppink" | "deepskyblue" | "dimgray" | "dimgrey" | "dodgerblue" | "firebrick" | "floralwhite" | "forestgreen" | "fuchsia" | "gainsboro" | "ghostwhite" | "gold" | "goldenrod" | "gray" | "green" | "greenyellow" | "grey" | "honeydew" | "hotpink" | "indianred" | "indigo" | "ivory" | "khaki" | "lavender" | "lavenderblush" | "lawngreen" | "lemonchiffon" | "lightblue" | "lightcoral" | "lightcyan" | "lightgoldenrodyellow" | "lightgray" | "lightgreen" | "lightgrey" | "lightpink" | "lightsalmon" | "lightseagreen" | "lightskyblue" | "lightslategray" | "lightslategrey" | "lightsteelblue" | "lightyellow" | "lime" | "limegreen" | "linen" | "magenta" | "maroon" | "mediumaquamarine" | "mediumblue" | "mediumorchid" | "mediumpurple" | "mediumseagreen" | "mediumslateblue" | "mediumspringgreen" | "mediumturquoise" | "mediumvioletred" | "midnightblue" | "mintcream" | "mistyrose" | "moccasin" | "navajowhite" | "navy" | "oldlace" | "olive" | "olivedrab" | "orange" | "orangered" | "orchid" | "palegoldenrod" | "palegreen" | "paleturquoise" | "palevioletred" | "papayawhip" | "peachpuff" | "peru" | "pink" | "plum" | "powderblue" | "purple" | "rebeccapurple" | "red" | "rosybrown" | "royalblue" | "saddlebrown" | "salmon" | "sandybrown" | "seagreen" | "seashell" | "sienna" | "silver" | "skyblue" | "slateblue" | "slategray" | "slategrey" | "snow" | "springgreen" | "steelblue" | "tan" | "teal" | "thistle" | "tomato" | "transparent" | "turquoise" | "violet" | "wheat" | "white" | "whitesmoke" | "yellow" | "yellowgreen" | "ActiveBorder" | "ActiveCaption" | "AppWorkspace" | "Background" | "ButtonFace" | "ButtonHighlight" | "ButtonShadow" | "ButtonText" | "CaptionText" | "GrayText" | "Highlight" | "HighlightText" | "InactiveBorder" | "InactiveCaption" | "InactiveCaptionText" | "InfoBackground" | "InfoText" | "Menu" | "MenuText" | "Scrollbar" | "ThreeDDarkShadow" | "ThreeDFace" | "ThreeDHighlight" | "ThreeDLightShadow" | "ThreeDShadow" | "Window" | "WindowFrame" | "WindowText" | "currentcolor" | "none" | "hidden" | "dashed" | "dotted" | "double" | "groove" | "outset" | "ridge" | "solid" | "thick" | "thin" | "1px" | "2px" | "4px" | "8px">>

The CSS border-left property

Optional borderLeftColor

borderLeftColor?: ResponsiveValue<Union<"current" | "whiteAlpha.50" | "whiteAlpha.100" | "whiteAlpha.200" | "whiteAlpha.300" | "whiteAlpha.400" | "whiteAlpha.500" | "whiteAlpha.600" | "whiteAlpha.700" | "whiteAlpha.800" | "whiteAlpha.900" | "blackAlpha.50" | "blackAlpha.100" | "blackAlpha.200" | "blackAlpha.300" | "blackAlpha.400" | "blackAlpha.500" | "blackAlpha.600" | "blackAlpha.700" | "blackAlpha.800" | "blackAlpha.900" | "gray.50" | "gray.100" | "gray.200" | "gray.300" | "gray.400" | "gray.500" | "gray.600" | "gray.700" | "gray.800" | "gray.900" | "red.50" | "red.100" | "red.200" | "red.300" | "red.400" | "red.500" | "red.600" | "red.700" | "red.800" | "red.900" | "orange.50" | "orange.100" | "orange.200" | "orange.300" | "orange.400" | "orange.500" | "orange.600" | "orange.700" | "orange.800" | "orange.900" | "yellow.50" | "yellow.100" | "yellow.200" | "yellow.300" | "yellow.400" | "yellow.500" | "yellow.600" | "yellow.700" | "yellow.800" | "yellow.900" | "green.50" | "green.100" | "green.200" | "green.300" | "green.400" | "green.500" | "green.600" | "green.700" | "green.800" | "green.900" | "teal.50" | "teal.100" | "teal.200" | "teal.300" | "teal.400" | "teal.500" | "teal.600" | "teal.700" | "teal.800" | "teal.900" | "blue.50" | "blue.100" | "blue.200" | "blue.300" | "blue.400" | "blue.500" | "blue.600" | "blue.700" | "blue.800" | "blue.900" | "cyan.50" | "cyan.100" | "cyan.200" | "cyan.300" | "cyan.400" | "cyan.500" | "cyan.600" | "cyan.700" | "cyan.800" | "cyan.900" | "purple.50" | "purple.100" | "purple.200" | "purple.300" | "purple.400" | "purple.500" | "purple.600" | "purple.700" | "purple.800" | "purple.900" | "pink.50" | "pink.100" | "pink.200" | "pink.300" | "pink.400" | "pink.500" | "pink.600" | "pink.700" | "pink.800" | "pink.900" | "linkedin.50" | "linkedin.100" | "linkedin.200" | "linkedin.300" | "linkedin.400" | "linkedin.500" | "linkedin.600" | "linkedin.700" | "linkedin.800" | "linkedin.900" | "facebook.50" | "facebook.100" | "facebook.200" | "facebook.300" | "facebook.400" | "facebook.500" | "facebook.600" | "facebook.700" | "facebook.800" | "facebook.900" | "messenger.50" | "messenger.100" | "messenger.200" | "messenger.300" | "messenger.400" | "messenger.500" | "messenger.600" | "messenger.700" | "messenger.800" | "messenger.900" | "whatsapp.50" | "whatsapp.100" | "whatsapp.200" | "whatsapp.300" | "whatsapp.400" | "whatsapp.500" | "whatsapp.600" | "whatsapp.700" | "whatsapp.800" | "whatsapp.900" | "twitter.50" | "twitter.100" | "twitter.200" | "twitter.300" | "twitter.400" | "twitter.500" | "twitter.600" | "twitter.700" | "twitter.800" | "twitter.900" | "telegram.50" | "telegram.100" | "telegram.200" | "telegram.300" | "telegram.400" | "telegram.500" | "telegram.600" | "telegram.700" | "telegram.800" | "telegram.900" | "chakra-body-text" | "chakra-body-bg" | "chakra-border-color" | "chakra-placeholder-color" | BorderLeftColor>>

The CSS border-left-color property

Optional borderLeftRadius

borderLeftRadius?: ResponsiveValue<Union<number | "sm" | "md" | "lg" | string & {} | "base" | "xl" | "2xl" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "3xl" | "none" | "full">>

The CSS border-left-radius property

Optional borderLeftStyle

borderLeftStyle?: ResponsiveValue<BorderLeftStyle>

The CSS border-left-style property

Optional borderLeftWidth

borderLeftWidth?: ResponsiveValue<number | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "medium" | "thick" | "thin">

The CSS border-left-width property

Optional borderRadius

borderRadius?: ResponsiveValue<Union<number | "sm" | "md" | "lg" | string & {} | "base" | "xl" | "2xl" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "3xl" | "none" | "full">>

The CSS border-radius property

Optional borderRight

borderRight?: ResponsiveValue<Union<number | string & {} | "inset" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "medium" | "aliceblue" | "antiquewhite" | "aqua" | "aquamarine" | "azure" | "beige" | "bisque" | "black" | "blanchedalmond" | "blue" | "blueviolet" | "brown" | "burlywood" | "cadetblue" | "chartreuse" | "chocolate" | "coral" | "cornflowerblue" | "cornsilk" | "crimson" | "cyan" | "darkblue" | "darkcyan" | "darkgoldenrod" | "darkgray" | "darkgreen" | "darkgrey" | "darkkhaki" | "darkmagenta" | "darkolivegreen" | "darkorange" | "darkorchid" | "darkred" | "darksalmon" | "darkseagreen" | "darkslateblue" | "darkslategray" | "darkslategrey" | "darkturquoise" | "darkviolet" | "deeppink" | "deepskyblue" | "dimgray" | "dimgrey" | "dodgerblue" | "firebrick" | "floralwhite" | "forestgreen" | "fuchsia" | "gainsboro" | "ghostwhite" | "gold" | "goldenrod" | "gray" | "green" | "greenyellow" | "grey" | "honeydew" | "hotpink" | "indianred" | "indigo" | "ivory" | "khaki" | "lavender" | "lavenderblush" | "lawngreen" | "lemonchiffon" | "lightblue" | "lightcoral" | "lightcyan" | "lightgoldenrodyellow" | "lightgray" | "lightgreen" | "lightgrey" | "lightpink" | "lightsalmon" | "lightseagreen" | "lightskyblue" | "lightslategray" | "lightslategrey" | "lightsteelblue" | "lightyellow" | "lime" | "limegreen" | "linen" | "magenta" | "maroon" | "mediumaquamarine" | "mediumblue" | "mediumorchid" | "mediumpurple" | "mediumseagreen" | "mediumslateblue" | "mediumspringgreen" | "mediumturquoise" | "mediumvioletred" | "midnightblue" | "mintcream" | "mistyrose" | "moccasin" | "navajowhite" | "navy" | "oldlace" | "olive" | "olivedrab" | "orange" | "orangered" | "orchid" | "palegoldenrod" | "palegreen" | "paleturquoise" | "palevioletred" | "papayawhip" | "peachpuff" | "peru" | "pink" | "plum" | "powderblue" | "purple" | "rebeccapurple" | "red" | "rosybrown" | "royalblue" | "saddlebrown" | "salmon" | "sandybrown" | "seagreen" | "seashell" | "sienna" | "silver" | "skyblue" | "slateblue" | "slategray" | "slategrey" | "snow" | "springgreen" | "steelblue" | "tan" | "teal" | "thistle" | "tomato" | "transparent" | "turquoise" | "violet" | "wheat" | "white" | "whitesmoke" | "yellow" | "yellowgreen" | "ActiveBorder" | "ActiveCaption" | "AppWorkspace" | "Background" | "ButtonFace" | "ButtonHighlight" | "ButtonShadow" | "ButtonText" | "CaptionText" | "GrayText" | "Highlight" | "HighlightText" | "InactiveBorder" | "InactiveCaption" | "InactiveCaptionText" | "InfoBackground" | "InfoText" | "Menu" | "MenuText" | "Scrollbar" | "ThreeDDarkShadow" | "ThreeDFace" | "ThreeDHighlight" | "ThreeDLightShadow" | "ThreeDShadow" | "Window" | "WindowFrame" | "WindowText" | "currentcolor" | "none" | "hidden" | "dashed" | "dotted" | "double" | "groove" | "outset" | "ridge" | "solid" | "thick" | "thin" | "1px" | "2px" | "4px" | "8px">>

The CSS border-right property

Optional borderRightColor

borderRightColor?: ResponsiveValue<Union<"current" | "whiteAlpha.50" | "whiteAlpha.100" | "whiteAlpha.200" | "whiteAlpha.300" | "whiteAlpha.400" | "whiteAlpha.500" | "whiteAlpha.600" | "whiteAlpha.700" | "whiteAlpha.800" | "whiteAlpha.900" | "blackAlpha.50" | "blackAlpha.100" | "blackAlpha.200" | "blackAlpha.300" | "blackAlpha.400" | "blackAlpha.500" | "blackAlpha.600" | "blackAlpha.700" | "blackAlpha.800" | "blackAlpha.900" | "gray.50" | "gray.100" | "gray.200" | "gray.300" | "gray.400" | "gray.500" | "gray.600" | "gray.700" | "gray.800" | "gray.900" | "red.50" | "red.100" | "red.200" | "red.300" | "red.400" | "red.500" | "red.600" | "red.700" | "red.800" | "red.900" | "orange.50" | "orange.100" | "orange.200" | "orange.300" | "orange.400" | "orange.500" | "orange.600" | "orange.700" | "orange.800" | "orange.900" | "yellow.50" | "yellow.100" | "yellow.200" | "yellow.300" | "yellow.400" | "yellow.500" | "yellow.600" | "yellow.700" | "yellow.800" | "yellow.900" | "green.50" | "green.100" | "green.200" | "green.300" | "green.400" | "green.500" | "green.600" | "green.700" | "green.800" | "green.900" | "teal.50" | "teal.100" | "teal.200" | "teal.300" | "teal.400" | "teal.500" | "teal.600" | "teal.700" | "teal.800" | "teal.900" | "blue.50" | "blue.100" | "blue.200" | "blue.300" | "blue.400" | "blue.500" | "blue.600" | "blue.700" | "blue.800" | "blue.900" | "cyan.50" | "cyan.100" | "cyan.200" | "cyan.300" | "cyan.400" | "cyan.500" | "cyan.600" | "cyan.700" | "cyan.800" | "cyan.900" | "purple.50" | "purple.100" | "purple.200" | "purple.300" | "purple.400" | "purple.500" | "purple.600" | "purple.700" | "purple.800" | "purple.900" | "pink.50" | "pink.100" | "pink.200" | "pink.300" | "pink.400" | "pink.500" | "pink.600" | "pink.700" | "pink.800" | "pink.900" | "linkedin.50" | "linkedin.100" | "linkedin.200" | "linkedin.300" | "linkedin.400" | "linkedin.500" | "linkedin.600" | "linkedin.700" | "linkedin.800" | "linkedin.900" | "facebook.50" | "facebook.100" | "facebook.200" | "facebook.300" | "facebook.400" | "facebook.500" | "facebook.600" | "facebook.700" | "facebook.800" | "facebook.900" | "messenger.50" | "messenger.100" | "messenger.200" | "messenger.300" | "messenger.400" | "messenger.500" | "messenger.600" | "messenger.700" | "messenger.800" | "messenger.900" | "whatsapp.50" | "whatsapp.100" | "whatsapp.200" | "whatsapp.300" | "whatsapp.400" | "whatsapp.500" | "whatsapp.600" | "whatsapp.700" | "whatsapp.800" | "whatsapp.900" | "twitter.50" | "twitter.100" | "twitter.200" | "twitter.300" | "twitter.400" | "twitter.500" | "twitter.600" | "twitter.700" | "twitter.800" | "twitter.900" | "telegram.50" | "telegram.100" | "telegram.200" | "telegram.300" | "telegram.400" | "telegram.500" | "telegram.600" | "telegram.700" | "telegram.800" | "telegram.900" | "chakra-body-text" | "chakra-body-bg" | "chakra-border-color" | "chakra-placeholder-color" | BorderRightColor>>

The CSS border-right-color property

Optional borderRightRadius

borderRightRadius?: ResponsiveValue<Union<number | "sm" | "md" | "lg" | string & {} | "base" | "xl" | "2xl" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "3xl" | "none" | "full">>

The CSS border-right-radius property

Optional borderRightStyle

borderRightStyle?: ResponsiveValue<BorderRightStyle>

The CSS border-right-styles property

Optional borderRightWidth

borderRightWidth?: ResponsiveValue<number | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "medium" | "thick" | "thin">

The CSS border-right-width property

Optional borderStart

borderStart?: ResponsiveValue<number | string & {} | "inset" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "medium" | "aliceblue" | "antiquewhite" | "aqua" | "aquamarine" | "azure" | "beige" | "bisque" | "black" | "blanchedalmond" | "blue" | "blueviolet" | "brown" | "burlywood" | "cadetblue" | "chartreuse" | "chocolate" | "coral" | "cornflowerblue" | "cornsilk" | "crimson" | "cyan" | "darkblue" | "darkcyan" | "darkgoldenrod" | "darkgray" | "darkgreen" | "darkgrey" | "darkkhaki" | "darkmagenta" | "darkolivegreen" | "darkorange" | "darkorchid" | "darkred" | "darksalmon" | "darkseagreen" | "darkslateblue" | "darkslategray" | "darkslategrey" | "darkturquoise" | "darkviolet" | "deeppink" | "deepskyblue" | "dimgray" | "dimgrey" | "dodgerblue" | "firebrick" | "floralwhite" | "forestgreen" | "fuchsia" | "gainsboro" | "ghostwhite" | "gold" | "goldenrod" | "gray" | "green" | "greenyellow" | "grey" | "honeydew" | "hotpink" | "indianred" | "indigo" | "ivory" | "khaki" | "lavender" | "lavenderblush" | "lawngreen" | "lemonchiffon" | "lightblue" | "lightcoral" | "lightcyan" | "lightgoldenrodyellow" | "lightgray" | "lightgreen" | "lightgrey" | "lightpink" | "lightsalmon" | "lightseagreen" | "lightskyblue" | "lightslategray" | "lightslategrey" | "lightsteelblue" | "lightyellow" | "lime" | "limegreen" | "linen" | "magenta" | "maroon" | "mediumaquamarine" | "mediumblue" | "mediumorchid" | "mediumpurple" | "mediumseagreen" | "mediumslateblue" | "mediumspringgreen" | "mediumturquoise" | "mediumvioletred" | "midnightblue" | "mintcream" | "mistyrose" | "moccasin" | "navajowhite" | "navy" | "oldlace" | "olive" | "olivedrab" | "orange" | "orangered" | "orchid" | "palegoldenrod" | "palegreen" | "paleturquoise" | "palevioletred" | "papayawhip" | "peachpuff" | "peru" | "pink" | "plum" | "powderblue" | "purple" | "rebeccapurple" | "red" | "rosybrown" | "royalblue" | "saddlebrown" | "salmon" | "sandybrown" | "seagreen" | "seashell" | "sienna" | "silver" | "skyblue" | "slateblue" | "slategray" | "slategrey" | "snow" | "springgreen" | "steelblue" | "tan" | "teal" | "thistle" | "tomato" | "transparent" | "turquoise" | "violet" | "wheat" | "white" | "whitesmoke" | "yellow" | "yellowgreen" | "ActiveBorder" | "ActiveCaption" | "AppWorkspace" | "Background" | "ButtonFace" | "ButtonHighlight" | "ButtonShadow" | "ButtonText" | "CaptionText" | "GrayText" | "Highlight" | "HighlightText" | "InactiveBorder" | "InactiveCaption" | "InactiveCaptionText" | "InfoBackground" | "InfoText" | "Menu" | "MenuText" | "Scrollbar" | "ThreeDDarkShadow" | "ThreeDFace" | "ThreeDHighlight" | "ThreeDLightShadow" | "ThreeDShadow" | "Window" | "WindowFrame" | "WindowText" | "currentcolor" | "none" | "hidden" | "dashed" | "dotted" | "double" | "groove" | "outset" | "ridge" | "solid" | "thick" | "thin">

Optional borderStartColor

borderStartColor?: ResponsiveValue<BorderInlineStartColor>

Optional borderStartEndRadius

borderStartEndRadius?: ResponsiveValue<Union<number | "sm" | "md" | "lg" | string & {} | "base" | "xl" | "2xl" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "3xl" | "none" | "full">>

Optional borderStartRadius

borderStartRadius?: ResponsiveValue<Union<number | "sm" | "md" | "lg" | string & {} | "base" | "xl" | "2xl" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "3xl" | "none" | "full">>

When direction is ltr, borderStartRadius is equivalent to borderLeftRadius. When direction is rtl, borderStartRadius is equivalent to borderRightRadius.

Optional borderStartStartRadius

borderStartStartRadius?: ResponsiveValue<Union<number | "sm" | "md" | "lg" | string & {} | "base" | "xl" | "2xl" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "3xl" | "none" | "full">>

Optional borderStartStyle

borderStartStyle?: ResponsiveValue<BorderInlineStartStyle>

Optional borderStartWidth

borderStartWidth?: ResponsiveValue<number | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "medium" | "thick" | "thin">

Optional borderStyle

borderStyle?: ResponsiveValue<BorderStyle>

The CSS border-style property

Optional borderTop

borderTop?: ResponsiveValue<Union<number | string & {} | "inset" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "medium" | "aliceblue" | "antiquewhite" | "aqua" | "aquamarine" | "azure" | "beige" | "bisque" | "black" | "blanchedalmond" | "blue" | "blueviolet" | "brown" | "burlywood" | "cadetblue" | "chartreuse" | "chocolate" | "coral" | "cornflowerblue" | "cornsilk" | "crimson" | "cyan" | "darkblue" | "darkcyan" | "darkgoldenrod" | "darkgray" | "darkgreen" | "darkgrey" | "darkkhaki" | "darkmagenta" | "darkolivegreen" | "darkorange" | "darkorchid" | "darkred" | "darksalmon" | "darkseagreen" | "darkslateblue" | "darkslategray" | "darkslategrey" | "darkturquoise" | "darkviolet" | "deeppink" | "deepskyblue" | "dimgray" | "dimgrey" | "dodgerblue" | "firebrick" | "floralwhite" | "forestgreen" | "fuchsia" | "gainsboro" | "ghostwhite" | "gold" | "goldenrod" | "gray" | "green" | "greenyellow" | "grey" | "honeydew" | "hotpink" | "indianred" | "indigo" | "ivory" | "khaki" | "lavender" | "lavenderblush" | "lawngreen" | "lemonchiffon" | "lightblue" | "lightcoral" | "lightcyan" | "lightgoldenrodyellow" | "lightgray" | "lightgreen" | "lightgrey" | "lightpink" | "lightsalmon" | "lightseagreen" | "lightskyblue" | "lightslategray" | "lightslategrey" | "lightsteelblue" | "lightyellow" | "lime" | "limegreen" | "linen" | "magenta" | "maroon" | "mediumaquamarine" | "mediumblue" | "mediumorchid" | "mediumpurple" | "mediumseagreen" | "mediumslateblue" | "mediumspringgreen" | "mediumturquoise" | "mediumvioletred" | "midnightblue" | "mintcream" | "mistyrose" | "moccasin" | "navajowhite" | "navy" | "oldlace" | "olive" | "olivedrab" | "orange" | "orangered" | "orchid" | "palegoldenrod" | "palegreen" | "paleturquoise" | "palevioletred" | "papayawhip" | "peachpuff" | "peru" | "pink" | "plum" | "powderblue" | "purple" | "rebeccapurple" | "red" | "rosybrown" | "royalblue" | "saddlebrown" | "salmon" | "sandybrown" | "seagreen" | "seashell" | "sienna" | "silver" | "skyblue" | "slateblue" | "slategray" | "slategrey" | "snow" | "springgreen" | "steelblue" | "tan" | "teal" | "thistle" | "tomato" | "transparent" | "turquoise" | "violet" | "wheat" | "white" | "whitesmoke" | "yellow" | "yellowgreen" | "ActiveBorder" | "ActiveCaption" | "AppWorkspace" | "Background" | "ButtonFace" | "ButtonHighlight" | "ButtonShadow" | "ButtonText" | "CaptionText" | "GrayText" | "Highlight" | "HighlightText" | "InactiveBorder" | "InactiveCaption" | "InactiveCaptionText" | "InfoBackground" | "InfoText" | "Menu" | "MenuText" | "Scrollbar" | "ThreeDDarkShadow" | "ThreeDFace" | "ThreeDHighlight" | "ThreeDLightShadow" | "ThreeDShadow" | "Window" | "WindowFrame" | "WindowText" | "currentcolor" | "none" | "hidden" | "dashed" | "dotted" | "double" | "groove" | "outset" | "ridge" | "solid" | "thick" | "thin" | "1px" | "2px" | "4px" | "8px">>

The CSS border-top property

Optional borderTopColor

borderTopColor?: ResponsiveValue<Union<"current" | "whiteAlpha.50" | "whiteAlpha.100" | "whiteAlpha.200" | "whiteAlpha.300" | "whiteAlpha.400" | "whiteAlpha.500" | "whiteAlpha.600" | "whiteAlpha.700" | "whiteAlpha.800" | "whiteAlpha.900" | "blackAlpha.50" | "blackAlpha.100" | "blackAlpha.200" | "blackAlpha.300" | "blackAlpha.400" | "blackAlpha.500" | "blackAlpha.600" | "blackAlpha.700" | "blackAlpha.800" | "blackAlpha.900" | "gray.50" | "gray.100" | "gray.200" | "gray.300" | "gray.400" | "gray.500" | "gray.600" | "gray.700" | "gray.800" | "gray.900" | "red.50" | "red.100" | "red.200" | "red.300" | "red.400" | "red.500" | "red.600" | "red.700" | "red.800" | "red.900" | "orange.50" | "orange.100" | "orange.200" | "orange.300" | "orange.400" | "orange.500" | "orange.600" | "orange.700" | "orange.800" | "orange.900" | "yellow.50" | "yellow.100" | "yellow.200" | "yellow.300" | "yellow.400" | "yellow.500" | "yellow.600" | "yellow.700" | "yellow.800" | "yellow.900" | "green.50" | "green.100" | "green.200" | "green.300" | "green.400" | "green.500" | "green.600" | "green.700" | "green.800" | "green.900" | "teal.50" | "teal.100" | "teal.200" | "teal.300" | "teal.400" | "teal.500" | "teal.600" | "teal.700" | "teal.800" | "teal.900" | "blue.50" | "blue.100" | "blue.200" | "blue.300" | "blue.400" | "blue.500" | "blue.600" | "blue.700" | "blue.800" | "blue.900" | "cyan.50" | "cyan.100" | "cyan.200" | "cyan.300" | "cyan.400" | "cyan.500" | "cyan.600" | "cyan.700" | "cyan.800" | "cyan.900" | "purple.50" | "purple.100" | "purple.200" | "purple.300" | "purple.400" | "purple.500" | "purple.600" | "purple.700" | "purple.800" | "purple.900" | "pink.50" | "pink.100" | "pink.200" | "pink.300" | "pink.400" | "pink.500" | "pink.600" | "pink.700" | "pink.800" | "pink.900" | "linkedin.50" | "linkedin.100" | "linkedin.200" | "linkedin.300" | "linkedin.400" | "linkedin.500" | "linkedin.600" | "linkedin.700" | "linkedin.800" | "linkedin.900" | "facebook.50" | "facebook.100" | "facebook.200" | "facebook.300" | "facebook.400" | "facebook.500" | "facebook.600" | "facebook.700" | "facebook.800" | "facebook.900" | "messenger.50" | "messenger.100" | "messenger.200" | "messenger.300" | "messenger.400" | "messenger.500" | "messenger.600" | "messenger.700" | "messenger.800" | "messenger.900" | "whatsapp.50" | "whatsapp.100" | "whatsapp.200" | "whatsapp.300" | "whatsapp.400" | "whatsapp.500" | "whatsapp.600" | "whatsapp.700" | "whatsapp.800" | "whatsapp.900" | "twitter.50" | "twitter.100" | "twitter.200" | "twitter.300" | "twitter.400" | "twitter.500" | "twitter.600" | "twitter.700" | "twitter.800" | "twitter.900" | "telegram.50" | "telegram.100" | "telegram.200" | "telegram.300" | "telegram.400" | "telegram.500" | "telegram.600" | "telegram.700" | "telegram.800" | "telegram.900" | "chakra-body-text" | "chakra-body-bg" | "chakra-border-color" | "chakra-placeholder-color" | BorderTopColor>>

The CSS border-top-color property

Optional borderTopEndRadius

borderTopEndRadius?: ResponsiveValue<Union<number | "sm" | "md" | "lg" | string & {} | "base" | "xl" | "2xl" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "3xl" | "none" | "full">>

Optional borderTopLeftRadius

borderTopLeftRadius?: ResponsiveValue<Union<number | "sm" | "md" | "lg" | string & {} | "base" | "xl" | "2xl" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "3xl" | "none" | "full">>

The CSS border-top-left-radius property

Optional borderTopRadius

borderTopRadius?: ResponsiveValue<Union<number | "sm" | "md" | "lg" | string & {} | "base" | "xl" | "2xl" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "3xl" | "none" | "full">>

The CSS border-top-radius property

Optional borderTopRightRadius

borderTopRightRadius?: ResponsiveValue<Union<number | "sm" | "md" | "lg" | string & {} | "base" | "xl" | "2xl" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "3xl" | "none" | "full">>

The CSS border-top-right-radius property

Optional borderTopStartRadius

borderTopStartRadius?: ResponsiveValue<Union<number | "sm" | "md" | "lg" | string & {} | "base" | "xl" | "2xl" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "3xl" | "none" | "full">>

Optional borderTopStyle

borderTopStyle?: ResponsiveValue<BorderTopStyle>

The CSS border-top-style property

Optional borderTopWidth

borderTopWidth?: ResponsiveValue<number | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "medium" | "thick" | "thin">

The CSS border-top-width property

Optional borderWidth

borderWidth?: ResponsiveValue<number | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "medium" | "thick" | "thin">

The CSS border-width property

Optional borderX

borderX?: ResponsiveValue<Union<number | string & {} | "inset" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "medium" | "aliceblue" | "antiquewhite" | "aqua" | "aquamarine" | "azure" | "beige" | "bisque" | "black" | "blanchedalmond" | "blue" | "blueviolet" | "brown" | "burlywood" | "cadetblue" | "chartreuse" | "chocolate" | "coral" | "cornflowerblue" | "cornsilk" | "crimson" | "cyan" | "darkblue" | "darkcyan" | "darkgoldenrod" | "darkgray" | "darkgreen" | "darkgrey" | "darkkhaki" | "darkmagenta" | "darkolivegreen" | "darkorange" | "darkorchid" | "darkred" | "darksalmon" | "darkseagreen" | "darkslateblue" | "darkslategray" | "darkslategrey" | "darkturquoise" | "darkviolet" | "deeppink" | "deepskyblue" | "dimgray" | "dimgrey" | "dodgerblue" | "firebrick" | "floralwhite" | "forestgreen" | "fuchsia" | "gainsboro" | "ghostwhite" | "gold" | "goldenrod" | "gray" | "green" | "greenyellow" | "grey" | "honeydew" | "hotpink" | "indianred" | "indigo" | "ivory" | "khaki" | "lavender" | "lavenderblush" | "lawngreen" | "lemonchiffon" | "lightblue" | "lightcoral" | "lightcyan" | "lightgoldenrodyellow" | "lightgray" | "lightgreen" | "lightgrey" | "lightpink" | "lightsalmon" | "lightseagreen" | "lightskyblue" | "lightslategray" | "lightslategrey" | "lightsteelblue" | "lightyellow" | "lime" | "limegreen" | "linen" | "magenta" | "maroon" | "mediumaquamarine" | "mediumblue" | "mediumorchid" | "mediumpurple" | "mediumseagreen" | "mediumslateblue" | "mediumspringgreen" | "mediumturquoise" | "mediumvioletred" | "midnightblue" | "mintcream" | "mistyrose" | "moccasin" | "navajowhite" | "navy" | "oldlace" | "olive" | "olivedrab" | "orange" | "orangered" | "orchid" | "palegoldenrod" | "palegreen" | "paleturquoise" | "palevioletred" | "papayawhip" | "peachpuff" | "peru" | "pink" | "plum" | "powderblue" | "purple" | "rebeccapurple" | "red" | "rosybrown" | "royalblue" | "saddlebrown" | "salmon" | "sandybrown" | "seagreen" | "seashell" | "sienna" | "silver" | "skyblue" | "slateblue" | "slategray" | "slategrey" | "snow" | "springgreen" | "steelblue" | "tan" | "teal" | "thistle" | "tomato" | "transparent" | "turquoise" | "violet" | "wheat" | "white" | "whitesmoke" | "yellow" | "yellowgreen" | "ActiveBorder" | "ActiveCaption" | "AppWorkspace" | "Background" | "ButtonFace" | "ButtonHighlight" | "ButtonShadow" | "ButtonText" | "CaptionText" | "GrayText" | "Highlight" | "HighlightText" | "InactiveBorder" | "InactiveCaption" | "InactiveCaptionText" | "InfoBackground" | "InfoText" | "Menu" | "MenuText" | "Scrollbar" | "ThreeDDarkShadow" | "ThreeDFace" | "ThreeDHighlight" | "ThreeDLightShadow" | "ThreeDShadow" | "Window" | "WindowFrame" | "WindowText" | "currentcolor" | "none" | "hidden" | "dashed" | "dotted" | "double" | "groove" | "outset" | "ridge" | "solid" | "thick" | "thin" | "1px" | "2px" | "4px" | "8px">>

The CSS border-right and border-left property

Optional borderY

borderY?: ResponsiveValue<Union<number | string & {} | "inset" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "medium" | "aliceblue" | "antiquewhite" | "aqua" | "aquamarine" | "azure" | "beige" | "bisque" | "black" | "blanchedalmond" | "blue" | "blueviolet" | "brown" | "burlywood" | "cadetblue" | "chartreuse" | "chocolate" | "coral" | "cornflowerblue" | "cornsilk" | "crimson" | "cyan" | "darkblue" | "darkcyan" | "darkgoldenrod" | "darkgray" | "darkgreen" | "darkgrey" | "darkkhaki" | "darkmagenta" | "darkolivegreen" | "darkorange" | "darkorchid" | "darkred" | "darksalmon" | "darkseagreen" | "darkslateblue" | "darkslategray" | "darkslategrey" | "darkturquoise" | "darkviolet" | "deeppink" | "deepskyblue" | "dimgray" | "dimgrey" | "dodgerblue" | "firebrick" | "floralwhite" | "forestgreen" | "fuchsia" | "gainsboro" | "ghostwhite" | "gold" | "goldenrod" | "gray" | "green" | "greenyellow" | "grey" | "honeydew" | "hotpink" | "indianred" | "indigo" | "ivory" | "khaki" | "lavender" | "lavenderblush" | "lawngreen" | "lemonchiffon" | "lightblue" | "lightcoral" | "lightcyan" | "lightgoldenrodyellow" | "lightgray" | "lightgreen" | "lightgrey" | "lightpink" | "lightsalmon" | "lightseagreen" | "lightskyblue" | "lightslategray" | "lightslategrey" | "lightsteelblue" | "lightyellow" | "lime" | "limegreen" | "linen" | "magenta" | "maroon" | "mediumaquamarine" | "mediumblue" | "mediumorchid" | "mediumpurple" | "mediumseagreen" | "mediumslateblue" | "mediumspringgreen" | "mediumturquoise" | "mediumvioletred" | "midnightblue" | "mintcream" | "mistyrose" | "moccasin" | "navajowhite" | "navy" | "oldlace" | "olive" | "olivedrab" | "orange" | "orangered" | "orchid" | "palegoldenrod" | "palegreen" | "paleturquoise" | "palevioletred" | "papayawhip" | "peachpuff" | "peru" | "pink" | "plum" | "powderblue" | "purple" | "rebeccapurple" | "red" | "rosybrown" | "royalblue" | "saddlebrown" | "salmon" | "sandybrown" | "seagreen" | "seashell" | "sienna" | "silver" | "skyblue" | "slateblue" | "slategray" | "slategrey" | "snow" | "springgreen" | "steelblue" | "tan" | "teal" | "thistle" | "tomato" | "transparent" | "turquoise" | "violet" | "wheat" | "white" | "whitesmoke" | "yellow" | "yellowgreen" | "ActiveBorder" | "ActiveCaption" | "AppWorkspace" | "Background" | "ButtonFace" | "ButtonHighlight" | "ButtonShadow" | "ButtonText" | "CaptionText" | "GrayText" | "Highlight" | "HighlightText" | "InactiveBorder" | "InactiveCaption" | "InactiveCaptionText" | "InfoBackground" | "InfoText" | "Menu" | "MenuText" | "Scrollbar" | "ThreeDDarkShadow" | "ThreeDFace" | "ThreeDHighlight" | "ThreeDLightShadow" | "ThreeDShadow" | "Window" | "WindowFrame" | "WindowText" | "currentcolor" | "none" | "hidden" | "dashed" | "dotted" | "double" | "groove" | "outset" | "ridge" | "solid" | "thick" | "thin" | "1px" | "2px" | "4px" | "8px">>

The CSS border-top and border-bottom property

Optional bottom

bottom?: ResponsiveValue<Union<number | "sm" | "md" | "lg" | "auto" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | string & {} | "px" | "xl" | "2xl" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "3xs" | "2xs" | "xs" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "max" | "min" | "full" | "prose" | "container.sm" | "container.md" | "container.lg" | "container.xl">>

The CSS bottom property

Optional boundary

boundary?: HTMLElement | "clippingParents" | "scrollParent"

The boundary area for the popper. Used within the preventOverflow modifier

Default

"clippingParents"

Optional boxDecorationBreak

boxDecorationBreak?: ResponsiveValue<BoxDecorationBreak>

The CSS box-decoration property

Optional boxShadow

boxShadow?: ResponsiveValue<Union<number | "sm" | "md" | "lg" | "outline" | "base" | "xl" | "2xl" | "xs" | BoxShadow | "inner" | "dark-lg">>

The box-shadow property

Optional boxSize

boxSize?: ResponsiveValue<Union<number | "sm" | "md" | "lg" | "auto" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | string & {} | "px" | "xl" | "2xl" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "3xs" | "2xs" | "xs" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "-moz-fit-content" | "-moz-max-content" | "-moz-min-content" | "fit-content" | "max-content" | "min-content" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "max" | "min" | "full" | "prose" | "container.sm" | "container.md" | "container.lg" | "container.xl" | "-webkit-fit-content" | "-webkit-max-content" | "intrinsic" | "min-intrinsic">>

The CSS width and height property

Optional boxSizing

boxSizing?: BoxSizing

The CSS box-sizing property

Optional brightness

brightness?: ResponsiveValue<Length>

Sets the brightness filter value of an element. Value is assigned to --chakra-brightness css variable

Optional children

children?: ReactNode

Optional className

className?: string

Optional clipPath

clipPath?: ResponsiveValue<ClipPath>

The CSS clip-path property.

It creates a clipping region that sets what part of an element should be shown.

Optional color

color?: ResponsiveValue<Union<Color | "current" | "whiteAlpha.50" | "whiteAlpha.100" | "whiteAlpha.200" | "whiteAlpha.300" | "whiteAlpha.400" | "whiteAlpha.500" | "whiteAlpha.600" | "whiteAlpha.700" | "whiteAlpha.800" | "whiteAlpha.900" | "blackAlpha.50" | "blackAlpha.100" | "blackAlpha.200" | "blackAlpha.300" | "blackAlpha.400" | "blackAlpha.500" | "blackAlpha.600" | "blackAlpha.700" | "blackAlpha.800" | "blackAlpha.900" | "gray.50" | "gray.100" | "gray.200" | "gray.300" | "gray.400" | "gray.500" | "gray.600" | "gray.700" | "gray.800" | "gray.900" | "red.50" | "red.100" | "red.200" | "red.300" | "red.400" | "red.500" | "red.600" | "red.700" | "red.800" | "red.900" | "orange.50" | "orange.100" | "orange.200" | "orange.300" | "orange.400" | "orange.500" | "orange.600" | "orange.700" | "orange.800" | "orange.900" | "yellow.50" | "yellow.100" | "yellow.200" | "yellow.300" | "yellow.400" | "yellow.500" | "yellow.600" | "yellow.700" | "yellow.800" | "yellow.900" | "green.50" | "green.100" | "green.200" | "green.300" | "green.400" | "green.500" | "green.600" | "green.700" | "green.800" | "green.900" | "teal.50" | "teal.100" | "teal.200" | "teal.300" | "teal.400" | "teal.500" | "teal.600" | "teal.700" | "teal.800" | "teal.900" | "blue.50" | "blue.100" | "blue.200" | "blue.300" | "blue.400" | "blue.500" | "blue.600" | "blue.700" | "blue.800" | "blue.900" | "cyan.50" | "cyan.100" | "cyan.200" | "cyan.300" | "cyan.400" | "cyan.500" | "cyan.600" | "cyan.700" | "cyan.800" | "cyan.900" | "purple.50" | "purple.100" | "purple.200" | "purple.300" | "purple.400" | "purple.500" | "purple.600" | "purple.700" | "purple.800" | "purple.900" | "pink.50" | "pink.100" | "pink.200" | "pink.300" | "pink.400" | "pink.500" | "pink.600" | "pink.700" | "pink.800" | "pink.900" | "linkedin.50" | "linkedin.100" | "linkedin.200" | "linkedin.300" | "linkedin.400" | "linkedin.500" | "linkedin.600" | "linkedin.700" | "linkedin.800" | "linkedin.900" | "facebook.50" | "facebook.100" | "facebook.200" | "facebook.300" | "facebook.400" | "facebook.500" | "facebook.600" | "facebook.700" | "facebook.800" | "facebook.900" | "messenger.50" | "messenger.100" | "messenger.200" | "messenger.300" | "messenger.400" | "messenger.500" | "messenger.600" | "messenger.700" | "messenger.800" | "messenger.900" | "whatsapp.50" | "whatsapp.100" | "whatsapp.200" | "whatsapp.300" | "whatsapp.400" | "whatsapp.500" | "whatsapp.600" | "whatsapp.700" | "whatsapp.800" | "whatsapp.900" | "twitter.50" | "twitter.100" | "twitter.200" | "twitter.300" | "twitter.400" | "twitter.500" | "twitter.600" | "twitter.700" | "twitter.800" | "twitter.900" | "telegram.50" | "telegram.100" | "telegram.200" | "telegram.300" | "telegram.400" | "telegram.500" | "telegram.600" | "telegram.700" | "telegram.800" | "telegram.900" | "chakra-body-text" | "chakra-body-bg" | "chakra-border-color" | "chakra-placeholder-color">>

The CSS color property

Optional columnGap

columnGap?: ResponsiveValue<Union<ColumnGap<Length>>>

The CSS column-gap property.

It sets the size of the gap (gutter) between an element's columns.

See

Mozilla Docs

Optional contentEditable

contentEditable?: "inherit" | Booleanish

Optional contextMenu

contextMenu?: string

Optional contrast

contrast?: ResponsiveValue<Length>

Sets the contrast filter value of an element. Value is assigned to --chakra-contrast css variable

Optional controlProps

controlProps?: SelectControlProps

Optional create

create?: boolean

Optional css

css?: Interpolation<{}>

The emotion's css style object

Optional cursor

cursor?: ResponsiveValue<Cursor>

The CSS cursor property

Optional dangerouslySetInnerHTML

dangerouslySetInnerHTML?: { __html: string }

Type declaration

  • __html: string

Optional datatype

datatype?: string

Optional defaultChecked

defaultChecked?: boolean

Optional defaultValue

defaultValue?: string | number | readonly string[]

Optional dir

dir?: string

Optional direction

direction?: "ltr" | "rtl"

Theme direction ltr or rtl. Popper's placement will be set accordingly

Default

"ltr"

Optional disabled

disabled?: boolean

Optional display

display?: ResponsiveValue<Display>

The CSS display property

Optional draggable

draggable?: Booleanish

Optional dropShadow

dropShadow?: ResponsiveValue<Union<"sm" | "md" | "lg" | "outline" | "base" | "xl" | "2xl" | "xs" | BoxShadow | "inner" | "dark-lg">>

Sets the drop-shadow filter value of an element. Value is assigned to --chakra-drop-shadow css variable

Optional duplicates

duplicates?: boolean

Optional enabled

enabled?: boolean

Whether the popper.js should be enabled

Optional eventListeners

eventListeners?: boolean | { resize?: boolean; scroll?: boolean }

If provided, determines whether the popper will reposition itself on scroll and resize of the window.

Default

true

Optional experimental_spaceX

experimental_spaceX?: ResponsiveValue<Union<number | "auto" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | string & {} | "px" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "-1" | "-2" | "-3" | "-4" | "-5" | "-6" | "-7" | "-8" | "-9" | "-10" | "-12" | "-14" | "-16" | "-20" | "-24" | "-28" | "-32" | "-36" | "-40" | "-44" | "-48" | "-52" | "-56" | "-60" | "-64" | "-72" | "-80" | "-96" | "-px" | "-0.5" | "-1.5" | "-2.5" | "-3.5">>

Controls the horizontal space between elements

Optional experimental_spaceY

experimental_spaceY?: ResponsiveValue<Union<number | "auto" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | string & {} | "px" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "-1" | "-2" | "-3" | "-4" | "-5" | "-6" | "-7" | "-8" | "-9" | "-10" | "-12" | "-14" | "-16" | "-20" | "-24" | "-28" | "-32" | "-36" | "-40" | "-44" | "-48" | "-52" | "-56" | "-60" | "-64" | "-72" | "-80" | "-96" | "-px" | "-0.5" | "-1.5" | "-2.5" | "-3.5">>

Controls the vertical space between elements

Optional fill

fill?: ResponsiveValue<Union<Color | "current" | "whiteAlpha.50" | "whiteAlpha.100" | "whiteAlpha.200" | "whiteAlpha.300" | "whiteAlpha.400" | "whiteAlpha.500" | "whiteAlpha.600" | "whiteAlpha.700" | "whiteAlpha.800" | "whiteAlpha.900" | "blackAlpha.50" | "blackAlpha.100" | "blackAlpha.200" | "blackAlpha.300" | "blackAlpha.400" | "blackAlpha.500" | "blackAlpha.600" | "blackAlpha.700" | "blackAlpha.800" | "blackAlpha.900" | "gray.50" | "gray.100" | "gray.200" | "gray.300" | "gray.400" | "gray.500" | "gray.600" | "gray.700" | "gray.800" | "gray.900" | "red.50" | "red.100" | "red.200" | "red.300" | "red.400" | "red.500" | "red.600" | "red.700" | "red.800" | "red.900" | "orange.50" | "orange.100" | "orange.200" | "orange.300" | "orange.400" | "orange.500" | "orange.600" | "orange.700" | "orange.800" | "orange.900" | "yellow.50" | "yellow.100" | "yellow.200" | "yellow.300" | "yellow.400" | "yellow.500" | "yellow.600" | "yellow.700" | "yellow.800" | "yellow.900" | "green.50" | "green.100" | "green.200" | "green.300" | "green.400" | "green.500" | "green.600" | "green.700" | "green.800" | "green.900" | "teal.50" | "teal.100" | "teal.200" | "teal.300" | "teal.400" | "teal.500" | "teal.600" | "teal.700" | "teal.800" | "teal.900" | "blue.50" | "blue.100" | "blue.200" | "blue.300" | "blue.400" | "blue.500" | "blue.600" | "blue.700" | "blue.800" | "blue.900" | "cyan.50" | "cyan.100" | "cyan.200" | "cyan.300" | "cyan.400" | "cyan.500" | "cyan.600" | "cyan.700" | "cyan.800" | "cyan.900" | "purple.50" | "purple.100" | "purple.200" | "purple.300" | "purple.400" | "purple.500" | "purple.600" | "purple.700" | "purple.800" | "purple.900" | "pink.50" | "pink.100" | "pink.200" | "pink.300" | "pink.400" | "pink.500" | "pink.600" | "pink.700" | "pink.800" | "pink.900" | "linkedin.50" | "linkedin.100" | "linkedin.200" | "linkedin.300" | "linkedin.400" | "linkedin.500" | "linkedin.600" | "linkedin.700" | "linkedin.800" | "linkedin.900" | "facebook.50" | "facebook.100" | "facebook.200" | "facebook.300" | "facebook.400" | "facebook.500" | "facebook.600" | "facebook.700" | "facebook.800" | "facebook.900" | "messenger.50" | "messenger.100" | "messenger.200" | "messenger.300" | "messenger.400" | "messenger.500" | "messenger.600" | "messenger.700" | "messenger.800" | "messenger.900" | "whatsapp.50" | "whatsapp.100" | "whatsapp.200" | "whatsapp.300" | "whatsapp.400" | "whatsapp.500" | "whatsapp.600" | "whatsapp.700" | "whatsapp.800" | "whatsapp.900" | "twitter.50" | "twitter.100" | "twitter.200" | "twitter.300" | "twitter.400" | "twitter.500" | "twitter.600" | "twitter.700" | "twitter.800" | "twitter.900" | "telegram.50" | "telegram.100" | "telegram.200" | "telegram.300" | "telegram.400" | "telegram.500" | "telegram.600" | "telegram.700" | "telegram.800" | "telegram.900" | "chakra-body-text" | "chakra-body-bg" | "chakra-border-color" | "chakra-placeholder-color">>

The CSS fill property for icon svgs and paths

Optional filter

filter?: ResponsiveValue<"auto" | Filter>

The CSS filter property. When set to auto, you allow Chakra UI to define the color based on the filter style props (blur, saturate, etc.)

Optional filterFn

filterFn?: SelectFilter

Optional flex

flex?: ResponsiveValue<Flex<Length>>

The CSS flex property.

It defines how a flex item will grow or shrink to fit the space available in its flex container.

See

Mozilla Docs

Optional flexBasis

flexBasis?: ResponsiveValue<FlexBasis<Length>>

The CSS flex-basis property.

It defines the initial main size of a flex item.

See

Mozilla Docs

Optional flexDir

flexDir?: ResponsiveValue<FlexDirection>

The CSS flex-direction property.

It defines how flex items are placed in the flex container defining the main axis and the direction (normal or reversed).

See

Mozilla Docs

Optional flexDirection

flexDirection?: ResponsiveValue<FlexDirection>

The CSS flex-direction property.

It defines how flex items are placed in the flex container defining the main axis and the direction (normal or reversed).

See

Mozilla Docs

Optional flexFlow

flexFlow?: ResponsiveValue<FlexFlow>

The CSS flex-flow property.

It is a shorthand property for flex-direction and flex-wrap. It specifies the direction of a flex container, as well as its wrapping behavior.

See

Mozilla Docs

Optional flexGrow

flexGrow?: ResponsiveValue<FlexGrow>

The CSS flex-grow property.

It defines how much a flexbox item should grow if there's space available.

See

Mozilla Docs

Optional flexShrink

flexShrink?: ResponsiveValue<FlexShrink>

The CSS flex-shrink property.

It defines how much a flexbox item should shrink if there's not enough space available.

See

Mozilla Docs

Optional flexWrap

flexWrap?: ResponsiveValue<FlexWrap>

The CSS flex-wrap property.

It defines whether flex items are forced onto one line or can wrap onto multiple lines. If wrapping is allowed, it sets the direction that lines are stacked.

See

Mozilla Docs

Optional flip

flip?: boolean

If true, the popper will change its placement and flip when it's about to overflow its boundary area.

Default

true

Optional float

float?: ResponsiveValue<Float>

The CSS float property

Optional fontFamily

fontFamily?: ResponsiveValue<Union<FontFamily | "heading" | "body" | "mono">>

The CSS font-family property

Optional fontSize

fontSize?: ResponsiveValue<Union<number | "sm" | "md" | "lg" | "small" | string & {} | "xl" | "2xl" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "large" | "medium" | "x-large" | "x-small" | "xx-large" | "xx-small" | "xxx-large" | "larger" | "smaller" | "3xs" | "2xs" | "xs" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "9xl">>

The CSS font-size property

Optional fontStyle

fontStyle?: ResponsiveValue<FontStyle>

The CSS font-style property

Optional fontWeight

fontWeight?: ResponsiveValue<Union<number | "bold" | string & {} | "medium" | "black" | "normal" | "thin" | "light" | "hairline" | "semibold" | "extrabold">>

The CSS font-weight property

Optional form

form?: string

Optional gap

gap?: ResponsiveValue<Union<Gap<Length>>>

The CSS gap property.

It defines the gap between items in both flex and grid contexts.

See

Mozilla Docs

Optional getDebounce

getDebounce?: GetDebounce

Optional getOption

getOption?: GetOption

Optional gridArea

gridArea?: ResponsiveValue<GridArea>

The CSS grid-areas property.

It specifies a grid item’s size and location within a grid by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the edges of its grid area.

See

Mozilla Docs

Optional gridAutoColumns

gridAutoColumns?: ResponsiveValue<GridAutoColumns<0 | string & {}>>

The CSS grid-auto-columns property.

It specifies the size of an implicitly-created grid column track or pattern of tracks.

See

Mozilla Docs

Optional gridAutoFlow

gridAutoFlow?: ResponsiveValue<GridAutoFlow>

The CSS grid-auto-flow property

It controls how the auto-placement algorithm works, specifying exactly how auto-placed items get flowed into the grid.

See

Mozilla Docs

Optional gridAutoRows

gridAutoRows?: ResponsiveValue<GridAutoRows<0 | string & {}>>

The CSS grid-auto-rows property.

It specifies the size of an implicitly-created grid row track or pattern of tracks.

See

Mozilla Docs

Optional gridColumn

gridColumn?: ResponsiveValue<GridColumn>

The CSS grid-column property.

It specifies a grid item's size and location within a grid column by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start and inline-end edge of its grid area.

See

Mozilla Docs

Optional gridColumnEnd

gridColumnEnd?: ResponsiveValue<GridColumnEnd>

The CSS grid-column property

It specifies a grid item’s end position within the grid column by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the block-end edge of its grid area.

See

Mozilla Docs

Optional gridColumnGap

gridColumnGap?: ResponsiveValue<Union<number | "1" | "2" | "3" | "4" | "5" | "6" | "7" | string & {} | "px" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "-1" | "-2" | "-3" | "-4" | "-5" | "-6" | "-7" | "-8" | "-9" | "-10" | "-12" | "-14" | "-16" | "-20" | "-24" | "-28" | "-32" | "-36" | "-40" | "-44" | "-48" | "-52" | "-56" | "-60" | "-64" | "-72" | "-80" | "-96" | "-px" | "-0.5" | "-1.5" | "-2.5" | "-3.5">>

The CSS grid-column-gap property.

It defines the size of the gap (gutter) between an element's columns.

See

Mozilla Docs

Optional gridColumnStart

gridColumnStart?: ResponsiveValue<GridColumnStart>

The CSS grid-column property.

It specifies a grid item’s start position within the grid column by contributing a line, a span, or nothing (automatic) to its grid placement

See

Mozilla Docs

Optional gridGap

gridGap?: ResponsiveValue<Union<number | "1" | "2" | "3" | "4" | "5" | "6" | "7" | string & {} | "px" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "-1" | "-2" | "-3" | "-4" | "-5" | "-6" | "-7" | "-8" | "-9" | "-10" | "-12" | "-14" | "-16" | "-20" | "-24" | "-28" | "-32" | "-36" | "-40" | "-44" | "-48" | "-52" | "-56" | "-60" | "-64" | "-72" | "-80" | "-96" | "-px" | "-0.5" | "-1.5" | "-2.5" | "-3.5">>

The CSS grid-gap property.

It defines the gaps (gutters) between rows and columns

See

Mozilla Docs

Optional gridRow

gridRow?: ResponsiveValue<GridRow>

The CSS grid-row property

It specifies a grid item’s size and location within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start and inline-end edge of its grid area.

See

Mozilla Docs

Optional gridRowEnd

gridRowEnd?: ResponsiveValue<GridRowEnd>

The CSS grid-row-end property

It specifies a grid item’s end position within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-end edge of its grid area.

See

Mozilla Docs

Optional gridRowGap

gridRowGap?: ResponsiveValue<Union<number | "1" | "2" | "3" | "4" | "5" | "6" | "7" | string & {} | "px" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "-1" | "-2" | "-3" | "-4" | "-5" | "-6" | "-7" | "-8" | "-9" | "-10" | "-12" | "-14" | "-16" | "-20" | "-24" | "-28" | "-32" | "-36" | "-40" | "-44" | "-48" | "-52" | "-56" | "-60" | "-64" | "-72" | "-80" | "-96" | "-px" | "-0.5" | "-1.5" | "-2.5" | "-3.5">>

The CSS grid-row-gap property.

It defines the size of the gap (gutter) between an element's grid rows.

See

Mozilla Docs

Optional gridRowStart

gridRowStart?: ResponsiveValue<GridRowStart>

The CSS grid-row-start property

It specifies a grid item’s start position within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start edge of its grid area.

See

Mozilla Docs

Optional gridTemplate

gridTemplate?: ResponsiveValue<GridTemplate>

The CSS grid-template property.

It is a shorthand property for defining grid columns, rows, and areas.

See

Mozilla Docs

Optional gridTemplateAreas

gridTemplateAreas?: ResponsiveValue<GridTemplateAreas>

The CSS grid-template-areas property.

See

Mozilla Docs

Optional gridTemplateColumns

gridTemplateColumns?: ResponsiveValue<GridTemplateColumns<0 | string & {}>>

The CSS grid-template-columns property

It defines the line names and track sizing functions of the grid columns.

See

Mozilla Docs

Optional gridTemplateRows

gridTemplateRows?: ResponsiveValue<GridTemplateRows<0 | string & {}>>

The CSS grid-template-rows property.

It defines the line names and track sizing functions of the grid rows.

See

Mozilla Docs

Optional gutter

gutter?: number

The distance or margin between the reference and popper. It is used internally to create an offset modifier.

NB: If you define offset prop, it'll override the gutter.

Default

8

Optional h

h?: ResponsiveValue<Union<number | "sm" | "md" | "lg" | "auto" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | string & {} | "px" | "xl" | "2xl" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "3xs" | "2xs" | "xs" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "-moz-max-content" | "-moz-min-content" | "fit-content" | "max-content" | "min-content" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "max" | "min" | "full" | "prose" | "container.sm" | "container.md" | "container.lg" | "container.xl" | "-webkit-fit-content">>

The CSS height property

Optional height

height?: ResponsiveValue<Union<number | "sm" | "md" | "lg" | "auto" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | string & {} | "px" | "xl" | "2xl" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "3xs" | "2xs" | "xs" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "-moz-max-content" | "-moz-min-content" | "fit-content" | "max-content" | "min-content" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "max" | "min" | "full" | "prose" | "container.sm" | "container.md" | "container.lg" | "container.xl" | "-webkit-fit-content">>

The CSS height property

Optional hidden

hidden?: boolean

Optional hueRotate

hueRotate?: ResponsiveValue<Length>

Sets the hue-rotate filter value of an element. Value is assigned to --chakra-hue-rotate css variable

Optional id

id?: string

Optional inlineSize

inlineSize?: ResponsiveValue<Union<number | "sm" | "md" | "lg" | "auto" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | string & {} | "px" | "xl" | "2xl" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "3xs" | "2xs" | "xs" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "-moz-fit-content" | "-moz-max-content" | "-moz-min-content" | "-webkit-fill-available" | "fit-content" | "max-content" | "min-content" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "max" | "min" | "full" | "prose" | "container.sm" | "container.md" | "container.lg" | "container.xl">>

Optional inlist

inlist?: any

Optional inputMode

inputMode?: "search" | "none" | "text" | "tel" | "url" | "email" | "numeric" | "decimal"

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

See

https://html.spec.whatwg.org/multipage/interaction.html#input-modalities:-the-inputmode-attribute

Optional inset

inset?: ResponsiveValue<Union<number | "sm" | "md" | "lg" | "auto" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | string & {} | "px" | "xl" | "2xl" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "3xs" | "2xs" | "xs" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "max" | "min" | "full" | "prose" | "container.sm" | "container.md" | "container.lg" | "container.xl">>

The CSS left, right, top, bottom property

Optional insetBlock

insetBlock?: ResponsiveValue<InsetBlock<0 | string & {}>>

Optional insetBlockEnd

insetBlockEnd?: ResponsiveValue<Union<number | "sm" | "md" | "lg" | "auto" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | string & {} | "px" | "xl" | "2xl" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "3xs" | "2xs" | "xs" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "max" | "min" | "full" | "prose" | "container.sm" | "container.md" | "container.lg" | "container.xl">>

Optional insetBlockStart

insetBlockStart?: ResponsiveValue<Union<number | "sm" | "md" | "lg" | "auto" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | string & {} | "px" | "xl" | "2xl" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "3xs" | "2xs" | "xs" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "max" | "min" | "full" | "prose" | "container.sm" | "container.md" | "container.lg" | "container.xl">>

Optional insetEnd

insetEnd?: ResponsiveValue<Union<number | "sm" | "md" | "lg" | "auto" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | string & {} | "px" | "xl" | "2xl" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "3xs" | "2xs" | "xs" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "max" | "min" | "full" | "prose" | "container.sm" | "container.md" | "container.lg" | "container.xl">>

When the direction is ltr, insetEnd is equivalent to right. When the direction is rtl, insetEnd is equivalent to left.

Optional insetInline

insetInline?: ResponsiveValue<InsetInline<0 | string & {}>>

Optional insetInlineEnd

insetInlineEnd?: ResponsiveValue<Union<number | "sm" | "md" | "lg" | "auto" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | string & {} | "px" | "xl" | "2xl" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "3xs" | "2xs" | "xs" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "max" | "min" | "full" | "prose" | "container.sm" | "container.md" | "container.lg" | "container.xl">>

When the direction is ltr, insetInlineEnd is equivalent to right. When the direction is rtl, insetInlineEnd is equivalent to left.

Optional insetInlineStart

insetInlineStart?: ResponsiveValue<Union<number | "sm" | "md" | "lg" | "auto" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | string & {} | "px" | "xl" | "2xl" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "3xs" | "2xs" | "xs" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "max" | "min" | "full" | "prose" | "container.sm" | "container.md" | "container.lg" | "container.xl">>

Optional insetStart

insetStart?: ResponsiveValue<Union<number | "sm" | "md" | "lg" | "auto" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | string & {} | "px" | "xl" | "2xl" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "3xs" | "2xs" | "xs" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "max" | "min" | "full" | "prose" | "container.sm" | "container.md" | "container.lg" | "container.xl">>

When the direction is start, end is equivalent to left. When the direction is start, end is equivalent to right.

Optional insetX

insetX?: ResponsiveValue<Union<number | "sm" | "md" | "lg" | "auto" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | string & {} | "px" | "xl" | "2xl" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "3xs" | "2xs" | "xs" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "max" | "min" | "full" | "prose" | "container.sm" | "container.md" | "container.lg" | "container.xl">>

The CSS left, and right property

Optional insetY

insetY?: ResponsiveValue<Union<number | "sm" | "md" | "lg" | "auto" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | string & {} | "px" | "xl" | "2xl" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "3xs" | "2xs" | "xs" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "max" | "min" | "full" | "prose" | "container.sm" | "container.md" | "container.lg" | "container.xl">>

The CSS top, and bottom property

Optional invert

invert?: ResponsiveValue<Length>

Sets the invert filter value of an element. Value is assigned to --chakra-invert css variable

Optional is

is?: string

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

See

https://html.spec.whatwg.org/multipage/custom-elements.html#attr-is

Optional isolation

isolation?: ResponsiveValue<Isolation>

The CSS isolation property

Optional itemID

itemID?: string

Optional itemProp

itemProp?: string

Optional itemRef

itemRef?: string

Optional itemScope

itemScope?: boolean

Optional itemType

itemType?: string

Optional justifyContent

justifyContent?: ResponsiveValue<JustifyContent>

The CSS justify-content property.

It defines how the browser distributes space between and around content items along the main-axis of a flex container, and the inline axis of a grid container.

See

Mozilla Docs

Optional justifyItems

justifyItems?: ResponsiveValue<JustifyItems>

The CSS justify-items property.

It defines the default justify-self for all items of the box, giving them all a default way of justifying each box along the appropriate axis.

See

Mozilla Docs

Optional justifySelf

justifySelf?: ResponsiveValue<JustifySelf>

The CSS justify-self property.

It defines the way a box is justified inside its alignment container along the appropriate axis.

See

Mozilla Docs

Optional key

key?: null | Key

Optional label

label?: string

Optional labelProps

labelProps?: SelectLabelProps

Optional lang

lang?: string

Optional layerStyle

layerStyle?: ResponsiveValue<string & {}>

The layer style object to apply. Note: Styles must be located in theme.layerStyles

Optional left

left?: ResponsiveValue<Union<number | "sm" | "md" | "lg" | "auto" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | string & {} | "px" | "xl" | "2xl" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "3xs" | "2xs" | "xs" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "max" | "min" | "full" | "prose" | "container.sm" | "container.md" | "container.lg" | "container.xl">>

The CSS left property

Optional letterSpacing

letterSpacing?: ResponsiveValue<Union<number | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "normal" | "tighter" | "tight" | "wide" | "wider" | "widest">>

The CSS letter-spacing property

Optional lineHeight

lineHeight?: ResponsiveValue<Union<number | "3" | "4" | "5" | "6" | "7" | string & {} | "base" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "normal" | "none" | number & {} | "8" | "9" | "10" | "shorter" | "short" | "tall" | "taller">>

The CSS line-height property

Optional listProps

listProps?: SelectListProps

Optional listStyleImage

listStyleImage?: ResponsiveValue<ListStyleImage>

The CSS list-style-image property

Optional listStyleImg

listStyleImg?: ResponsiveValue<ListStyleImage>

The CSS list-style-image property

Optional listStylePos

listStylePos?: ResponsiveValue<ListStylePosition>

The CSS list-style-position property

Optional listStylePosition

listStylePosition?: ResponsiveValue<ListStylePosition>

The CSS list-style-position property

Optional listStyleType

listStyleType?: ResponsiveValue<ListStyleType>

Optional m

m?: ResponsiveValue<Union<number | "auto" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | string & {} | "px" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "-1" | "-2" | "-3" | "-4" | "-5" | "-6" | "-7" | "-8" | "-9" | "-10" | "-12" | "-14" | "-16" | "-20" | "-24" | "-28" | "-32" | "-36" | "-40" | "-44" | "-48" | "-52" | "-56" | "-60" | "-64" | "-72" | "-80" | "-96" | "-px" | "-0.5" | "-1.5" | "-2.5" | "-3.5">>

Margin on top, left, bottom and right

Optional margin

margin?: ResponsiveValue<Union<number | "auto" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | string & {} | "px" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "-1" | "-2" | "-3" | "-4" | "-5" | "-6" | "-7" | "-8" | "-9" | "-10" | "-12" | "-14" | "-16" | "-20" | "-24" | "-28" | "-32" | "-36" | "-40" | "-44" | "-48" | "-52" | "-56" | "-60" | "-64" | "-72" | "-80" | "-96" | "-px" | "-0.5" | "-1.5" | "-2.5" | "-3.5">>

Margin on top, left, bottom and right

Optional marginBlock

marginBlock?: ResponsiveValue<Union<number | "auto" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | string & {} | "px" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "-1" | "-2" | "-3" | "-4" | "-5" | "-6" | "-7" | "-8" | "-9" | "-10" | "-12" | "-14" | "-16" | "-20" | "-24" | "-28" | "-32" | "-36" | "-40" | "-44" | "-48" | "-52" | "-56" | "-60" | "-64" | "-72" | "-80" | "-96" | "-px" | "-0.5" | "-1.5" | "-2.5" | "-3.5">>

Optional marginBlockEnd

marginBlockEnd?: ResponsiveValue<Union<number | "auto" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | string & {} | "px" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "-1" | "-2" | "-3" | "-4" | "-5" | "-6" | "-7" | "-8" | "-9" | "-10" | "-12" | "-14" | "-16" | "-20" | "-24" | "-28" | "-32" | "-36" | "-40" | "-44" | "-48" | "-52" | "-56" | "-60" | "-64" | "-72" | "-80" | "-96" | "-px" | "-0.5" | "-1.5" | "-2.5" | "-3.5">>

Optional marginBlockStart

marginBlockStart?: ResponsiveValue<Union<number | "auto" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | string & {} | "px" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "-1" | "-2" | "-3" | "-4" | "-5" | "-6" | "-7" | "-8" | "-9" | "-10" | "-12" | "-14" | "-16" | "-20" | "-24" | "-28" | "-32" | "-36" | "-40" | "-44" | "-48" | "-52" | "-56" | "-60" | "-64" | "-72" | "-80" | "-96" | "-px" | "-0.5" | "-1.5" | "-2.5" | "-3.5">>

Optional marginBottom

marginBottom?: ResponsiveValue<Union<number | "auto" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | string & {} | "px" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "-1" | "-2" | "-3" | "-4" | "-5" | "-6" | "-7" | "-8" | "-9" | "-10" | "-12" | "-14" | "-16" | "-20" | "-24" | "-28" | "-32" | "-36" | "-40" | "-44" | "-48" | "-52" | "-56" | "-60" | "-64" | "-72" | "-80" | "-96" | "-px" | "-0.5" | "-1.5" | "-2.5" | "-3.5">>

Margin on bottom

Optional marginEnd

marginEnd?: ResponsiveValue<Union<number | "auto" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | string & {} | "px" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "-1" | "-2" | "-3" | "-4" | "-5" | "-6" | "-7" | "-8" | "-9" | "-10" | "-12" | "-14" | "-16" | "-20" | "-24" | "-28" | "-32" | "-36" | "-40" | "-44" | "-48" | "-52" | "-56" | "-60" | "-64" | "-72" | "-80" | "-96" | "-px" | "-0.5" | "-1.5" | "-2.5" | "-3.5">>

When direction is ltr, marginEnd is equivalent to marginRight. When direction is rtl, marginEnd is equivalent to marginLeft.

Optional marginInline

marginInline?: ResponsiveValue<Union<number | "auto" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | string & {} | "px" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "-1" | "-2" | "-3" | "-4" | "-5" | "-6" | "-7" | "-8" | "-9" | "-10" | "-12" | "-14" | "-16" | "-20" | "-24" | "-28" | "-32" | "-36" | "-40" | "-44" | "-48" | "-52" | "-56" | "-60" | "-64" | "-72" | "-80" | "-96" | "-px" | "-0.5" | "-1.5" | "-2.5" | "-3.5">>

Optional marginInlineEnd

marginInlineEnd?: ResponsiveValue<Union<number | "auto" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | string & {} | "px" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "-1" | "-2" | "-3" | "-4" | "-5" | "-6" | "-7" | "-8" | "-9" | "-10" | "-12" | "-14" | "-16" | "-20" | "-24" | "-28" | "-32" | "-36" | "-40" | "-44" | "-48" | "-52" | "-56" | "-60" | "-64" | "-72" | "-80" | "-96" | "-px" | "-0.5" | "-1.5" | "-2.5" | "-3.5">>

When direction is ltr, marginInlineEnd is equivalent to marginRight. When direction is rtl, marginInlineEnd is equivalent to marginLeft.

Optional marginInlineStart

marginInlineStart?: ResponsiveValue<Union<number | "auto" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | string & {} | "px" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "-1" | "-2" | "-3" | "-4" | "-5" | "-6" | "-7" | "-8" | "-9" | "-10" | "-12" | "-14" | "-16" | "-20" | "-24" | "-28" | "-32" | "-36" | "-40" | "-44" | "-48" | "-52" | "-56" | "-60" | "-64" | "-72" | "-80" | "-96" | "-px" | "-0.5" | "-1.5" | "-2.5" | "-3.5">>

When direction is ltr, marginInlineStart is equivalent to marginLeft. When direction is rtl, marginInlineStart is equivalent to marginRight.

Optional marginLeft

marginLeft?: ResponsiveValue<Union<number | "auto" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | string & {} | "px" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "-1" | "-2" | "-3" | "-4" | "-5" | "-6" | "-7" | "-8" | "-9" | "-10" | "-12" | "-14" | "-16" | "-20" | "-24" | "-28" | "-32" | "-36" | "-40" | "-44" | "-48" | "-52" | "-56" | "-60" | "-64" | "-72" | "-80" | "-96" | "-px" | "-0.5" | "-1.5" | "-2.5" | "-3.5">>

Margin on left

Optional marginRight

marginRight?: ResponsiveValue<Union<number | "auto" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | string & {} | "px" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "-1" | "-2" | "-3" | "-4" | "-5" | "-6" | "-7" | "-8" | "-9" | "-10" | "-12" | "-14" | "-16" | "-20" | "-24" | "-28" | "-32" | "-36" | "-40" | "-44" | "-48" | "-52" | "-56" | "-60" | "-64" | "-72" | "-80" | "-96" | "-px" | "-0.5" | "-1.5" | "-2.5" | "-3.5">>

Margin on right

Optional marginStart

marginStart?: ResponsiveValue<Union<number | "auto" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | string & {} | "px" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "-1" | "-2" | "-3" | "-4" | "-5" | "-6" | "-7" | "-8" | "-9" | "-10" | "-12" | "-14" | "-16" | "-20" | "-24" | "-28" | "-32" | "-36" | "-40" | "-44" | "-48" | "-52" | "-56" | "-60" | "-64" | "-72" | "-80" | "-96" | "-px" | "-0.5" | "-1.5" | "-2.5" | "-3.5">>

When direction is ltr, marginStart is equivalent to marginLeft. When direction is rtl, marginStart is equivalent to marginRight.

Optional marginTop

marginTop?: ResponsiveValue<Union<number | "auto" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | string & {} | "px" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "-1" | "-2" | "-3" | "-4" | "-5" | "-6" | "-7" | "-8" | "-9" | "-10" | "-12" | "-14" | "-16" | "-20" | "-24" | "-28" | "-32" | "-36" | "-40" | "-44" | "-48" | "-52" | "-56" | "-60" | "-64" | "-72" | "-80" | "-96" | "-px" | "-0.5" | "-1.5" | "-2.5" | "-3.5">>

Margin on top

Optional marginX

marginX?: ResponsiveValue<Union<number | "auto" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | string & {} | "px" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "-1" | "-2" | "-3" | "-4" | "-5" | "-6" | "-7" | "-8" | "-9" | "-10" | "-12" | "-14" | "-16" | "-20" | "-24" | "-28" | "-32" | "-36" | "-40" | "-44" | "-48" | "-52" | "-56" | "-60" | "-64" | "-72" | "-80" | "-96" | "-px" | "-0.5" | "-1.5" | "-2.5" | "-3.5">>

Margin on left and right

Optional marginY

marginY?: ResponsiveValue<Union<number | "auto" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | string & {} | "px" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "-1" | "-2" | "-3" | "-4" | "-5" | "-6" | "-7" | "-8" | "-9" | "-10" | "-12" | "-14" | "-16" | "-20" | "-24" | "-28" | "-32" | "-36" | "-40" | "-44" | "-48" | "-52" | "-56" | "-60" | "-64" | "-72" | "-80" | "-96" | "-px" | "-0.5" | "-1.5" | "-2.5" | "-3.5">>

Margin on top and bottom

Optional matchWidth

matchWidth?: boolean

If true, the popper will match the width of the reference at all times. It's useful for autocomplete, date-picker and select patterns.

Optional maxBlockSize

maxBlockSize?: ResponsiveValue<Union<number | "sm" | "md" | "lg" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | string & {} | "px" | "xl" | "2xl" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "3xs" | "2xs" | "xs" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "none" | "-moz-max-content" | "-moz-min-content" | "-webkit-fill-available" | "fit-content" | "max-content" | "min-content" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "max" | "min" | "full" | "prose" | "container.sm" | "container.md" | "container.lg" | "container.xl">>

Optional maxH

maxH?: ResponsiveValue<Union<number | "sm" | "md" | "lg" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | string & {} | "px" | "xl" | "2xl" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "3xs" | "2xs" | "xs" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "none" | "-moz-fit-content" | "-moz-max-content" | "-moz-min-content" | "fit-content" | "max-content" | "min-content" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "max" | "min" | "full" | "prose" | "container.sm" | "container.md" | "container.lg" | "container.xl" | "-webkit-fit-content" | "-webkit-max-content" | "-webkit-min-content" | "intrinsic">>

The CSS max-height property

Optional maxHeight

maxHeight?: ResponsiveValue<Union<number | "sm" | "md" | "lg" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | string & {} | "px" | "xl" | "2xl" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "3xs" | "2xs" | "xs" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "none" | "-moz-fit-content" | "-moz-max-content" | "-moz-min-content" | "fit-content" | "max-content" | "min-content" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "max" | "min" | "full" | "prose" | "container.sm" | "container.md" | "container.lg" | "container.xl" | "-webkit-fit-content" | "-webkit-max-content" | "-webkit-min-content" | "intrinsic">>

The CSS max-height property

Optional maxInlineSize

maxInlineSize?: ResponsiveValue<Union<number | "sm" | "md" | "lg" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | string & {} | "px" | "xl" | "2xl" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "3xs" | "2xs" | "xs" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "none" | "-moz-fit-content" | "-moz-max-content" | "-moz-min-content" | "-webkit-fill-available" | "fit-content" | "max-content" | "min-content" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "max" | "min" | "full" | "prose" | "container.sm" | "container.md" | "container.lg" | "container.xl">>

Optional maxW

maxW?: ResponsiveValue<Union<number | "sm" | "md" | "lg" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | string & {} | "px" | "xl" | "2xl" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "3xs" | "2xs" | "xs" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "none" | "-moz-fit-content" | "-moz-max-content" | "-moz-min-content" | "fit-content" | "max-content" | "min-content" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "max" | "min" | "full" | "prose" | "container.sm" | "container.md" | "container.lg" | "container.xl" | "-webkit-fit-content" | "-webkit-max-content" | "-webkit-min-content" | "intrinsic">>

The CSS max-width property

Optional maxWidth

maxWidth?: ResponsiveValue<Union<number | "sm" | "md" | "lg" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | string & {} | "px" | "xl" | "2xl" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "3xs" | "2xs" | "xs" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "none" | "-moz-fit-content" | "-moz-max-content" | "-moz-min-content" | "fit-content" | "max-content" | "min-content" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "max" | "min" | "full" | "prose" | "container.sm" | "container.md" | "container.lg" | "container.xl" | "-webkit-fit-content" | "-webkit-max-content" | "-webkit-min-content" | "intrinsic">>

The CSS max-width property

Optional mb

mb?: ResponsiveValue<Union<number | "auto" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | string & {} | "px" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "-1" | "-2" | "-3" | "-4" | "-5" | "-6" | "-7" | "-8" | "-9" | "-10" | "-12" | "-14" | "-16" | "-20" | "-24" | "-28" | "-32" | "-36" | "-40" | "-44" | "-48" | "-52" | "-56" | "-60" | "-64" | "-72" | "-80" | "-96" | "-px" | "-0.5" | "-1.5" | "-2.5" | "-3.5">>

Margin on bottom

Optional me

me?: ResponsiveValue<Union<number | "auto" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | string & {} | "px" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "-1" | "-2" | "-3" | "-4" | "-5" | "-6" | "-7" | "-8" | "-9" | "-10" | "-12" | "-14" | "-16" | "-20" | "-24" | "-28" | "-32" | "-36" | "-40" | "-44" | "-48" | "-52" | "-56" | "-60" | "-64" | "-72" | "-80" | "-96" | "-px" | "-0.5" | "-1.5" | "-2.5" | "-3.5">>

When direction is ltr, me is equivalent to marginRight. When direction is rtl, me is equivalent to marginLeft.

Optional minBlockSize

minBlockSize?: ResponsiveValue<Union<number | "sm" | "md" | "lg" | "auto" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | string & {} | "px" | "xl" | "2xl" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "3xs" | "2xs" | "xs" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "-moz-max-content" | "-moz-min-content" | "-webkit-fill-available" | "fit-content" | "max-content" | "min-content" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "max" | "min" | "full" | "prose" | "container.sm" | "container.md" | "container.lg" | "container.xl">>

Optional minH

minH?: ResponsiveValue<Union<number | "sm" | "md" | "lg" | "auto" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | string & {} | "px" | "xl" | "2xl" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "3xs" | "2xs" | "xs" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "-moz-fit-content" | "-moz-max-content" | "-moz-min-content" | "fit-content" | "max-content" | "min-content" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "max" | "min" | "full" | "prose" | "container.sm" | "container.md" | "container.lg" | "container.xl" | "-webkit-fit-content" | "-webkit-max-content" | "-webkit-min-content" | "intrinsic">>

The CSS min-height property

Optional minHeight

minHeight?: ResponsiveValue<Union<number | "sm" | "md" | "lg" | "auto" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | string & {} | "px" | "xl" | "2xl" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "3xs" | "2xs" | "xs" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "-moz-fit-content" | "-moz-max-content" | "-moz-min-content" | "fit-content" | "max-content" | "min-content" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "max" | "min" | "full" | "prose" | "container.sm" | "container.md" | "container.lg" | "container.xl" | "-webkit-fit-content" | "-webkit-max-content" | "-webkit-min-content" | "intrinsic">>

The CSS min-height property

Optional minInlineSize

minInlineSize?: ResponsiveValue<Union<number | "sm" | "md" | "lg" | "auto" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | string & {} | "px" | "xl" | "2xl" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "3xs" | "2xs" | "xs" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "-moz-fit-content" | "-moz-max-content" | "-moz-min-content" | "-webkit-fill-available" | "fit-content" | "max-content" | "min-content" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "max" | "min" | "full" | "prose" | "container.sm" | "container.md" | "container.lg" | "container.xl">>

Optional minW

minW?: ResponsiveValue<Union<number | "sm" | "md" | "lg" | "auto" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | string & {} | "px" | "xl" | "2xl" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "3xs" | "2xs" | "xs" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "-moz-fit-content" | "-moz-max-content" | "-moz-min-content" | "-webkit-fill-available" | "fit-content" | "max-content" | "min-content" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "max" | "min" | "full" | "prose" | "container.sm" | "container.md" | "container.lg" | "container.xl" | "-webkit-fit-content" | "-webkit-max-content" | "-webkit-min-content" | "intrinsic" | "min-intrinsic">>

The CSS min-width property

Optional minWidth

minWidth?: ResponsiveValue<Union<number | "sm" | "md" | "lg" | "auto" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | string & {} | "px" | "xl" | "2xl" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "3xs" | "2xs" | "xs" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "-moz-fit-content" | "-moz-max-content" | "-moz-min-content" | "-webkit-fill-available" | "fit-content" | "max-content" | "min-content" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "max" | "min" | "full" | "prose" | "container.sm" | "container.md" | "container.lg" | "container.xl" | "-webkit-fit-content" | "-webkit-max-content" | "-webkit-min-content" | "intrinsic" | "min-intrinsic">>

The CSS min-width property

Optional mixBlendMode

mixBlendMode?: ResponsiveValue<MixBlendMode>

The mix-blend-mode property

Optional ml

ml?: ResponsiveValue<Union<number | "auto" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | string & {} | "px" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "-1" | "-2" | "-3" | "-4" | "-5" | "-6" | "-7" | "-8" | "-9" | "-10" | "-12" | "-14" | "-16" | "-20" | "-24" | "-28" | "-32" | "-36" | "-40" | "-44" | "-48" | "-52" | "-56" | "-60" | "-64" | "-72" | "-80" | "-96" | "-px" | "-0.5" | "-1.5" | "-2.5" | "-3.5">>

Margin on left

Optional modifiers

modifiers?: Partial<Modifier<string, any>>[]

Array of popper.js modifiers. Check the docs to see the list of possible modifiers you can pass.

See

Docs https://popper.js.org/docs/v2/modifiers/

Optional mr

mr?: ResponsiveValue<Union<number | "auto" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | string & {} | "px" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "-1" | "-2" | "-3" | "-4" | "-5" | "-6" | "-7" | "-8" | "-9" | "-10" | "-12" | "-14" | "-16" | "-20" | "-24" | "-28" | "-32" | "-36" | "-40" | "-44" | "-48" | "-52" | "-56" | "-60" | "-64" | "-72" | "-80" | "-96" | "-px" | "-0.5" | "-1.5" | "-2.5" | "-3.5">>

Margin on right

Optional ms

ms?: ResponsiveValue<Union<number | "auto" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | string & {} | "px" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "-1" | "-2" | "-3" | "-4" | "-5" | "-6" | "-7" | "-8" | "-9" | "-10" | "-12" | "-14" | "-16" | "-20" | "-24" | "-28" | "-32" | "-36" | "-40" | "-44" | "-48" | "-52" | "-56" | "-60" | "-64" | "-72" | "-80" | "-96" | "-px" | "-0.5" | "-1.5" | "-2.5" | "-3.5">>

When direction is ltr, ms is equivalent to marginLeft. When direction is rtl, ms is equivalent to marginRight.

Optional mt

mt?: ResponsiveValue<Union<number | "auto" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | string & {} | "px" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "-1" | "-2" | "-3" | "-4" | "-5" | "-6" | "-7" | "-8" | "-9" | "-10" | "-12" | "-14" | "-16" | "-20" | "-24" | "-28" | "-32" | "-36" | "-40" | "-44" | "-48" | "-52" | "-56" | "-60" | "-64" | "-72" | "-80" | "-96" | "-px" | "-0.5" | "-1.5" | "-2.5" | "-3.5">>

Margin on top

Optional multiple

multiple?: boolean

Optional mx

mx?: ResponsiveValue<Union<number | "auto" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | string & {} | "px" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "-1" | "-2" | "-3" | "-4" | "-5" | "-6" | "-7" | "-8" | "-9" | "-10" | "-12" | "-14" | "-16" | "-20" | "-24" | "-28" | "-32" | "-36" | "-40" | "-44" | "-48" | "-52" | "-56" | "-60" | "-64" | "-72" | "-80" | "-96" | "-px" | "-0.5" | "-1.5" | "-2.5" | "-3.5">>

Margin on left and right

Optional my

my?: ResponsiveValue<Union<number | "auto" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | string & {} | "px" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "-1" | "-2" | "-3" | "-4" | "-5" | "-6" | "-7" | "-8" | "-9" | "-10" | "-12" | "-14" | "-16" | "-20" | "-24" | "-28" | "-32" | "-36" | "-40" | "-44" | "-48" | "-52" | "-56" | "-60" | "-64" | "-72" | "-80" | "-96" | "-px" | "-0.5" | "-1.5" | "-2.5" | "-3.5">>

Margin on top and bottom

Optional name

name?: string

Optional noOfLines

noOfLines?: ResponsiveValue<number>

Used to truncate text at a specific number of lines

Optional objectFit

objectFit?: ResponsiveValue<ObjectFit>

The CSS object-fit property

Optional objectPosition

objectPosition?: ResponsiveValue<ObjectPosition<Length>>

The CSS object-position property

Optional offset

offset?: [number, number]

The main and cross-axis offset to displace popper element from its reference element.

Optional onAbort

onAbort?: ReactEventHandler<HTMLSelectElement>

Optional onAbortCapture

onAbortCapture?: ReactEventHandler<HTMLSelectElement>

Optional onAnimationEnd

onAnimationEnd?: AnimationEventHandler<HTMLSelectElement>

Optional onAnimationEndCapture

onAnimationEndCapture?: AnimationEventHandler<HTMLSelectElement>

Optional onAnimationIteration

onAnimationIteration?: AnimationEventHandler<HTMLSelectElement>

Optional onAnimationIterationCapture

onAnimationIterationCapture?: AnimationEventHandler<HTMLSelectElement>

Optional onAnimationStart

onAnimationStart?: AnimationEventHandler<HTMLSelectElement>

Optional onAnimationStartCapture

onAnimationStartCapture?: AnimationEventHandler<HTMLSelectElement>

Optional onAuxClick

onAuxClick?: MouseEventHandler<HTMLSelectElement>

Optional onAuxClickCapture

onAuxClickCapture?: MouseEventHandler<HTMLSelectElement>

Optional onBeforeInput

onBeforeInput?: FormEventHandler<HTMLSelectElement>

Optional onBeforeInputCapture

onBeforeInputCapture?: FormEventHandler<HTMLSelectElement>

Optional onBlur

onBlur?: FocusEventHandler<HTMLSelectElement>

Optional onBlurCapture

onBlurCapture?: FocusEventHandler<HTMLSelectElement>

Optional onCanPlay

onCanPlay?: ReactEventHandler<HTMLSelectElement>

Optional onCanPlayCapture

onCanPlayCapture?: ReactEventHandler<HTMLSelectElement>

Optional onCanPlayThrough

onCanPlayThrough?: ReactEventHandler<HTMLSelectElement>

Optional onCanPlayThroughCapture

onCanPlayThroughCapture?: ReactEventHandler<HTMLSelectElement>

onChange

onChange: SelectOnChange

Optional onChangeCapture

onChangeCapture?: FormEventHandler<HTMLSelectElement>

Optional onClick

onClick?: MouseEventHandler<HTMLSelectElement>

Optional onClickCapture

onClickCapture?: MouseEventHandler<HTMLSelectElement>

Optional onCompositionEnd

onCompositionEnd?: CompositionEventHandler<HTMLSelectElement>

Optional onCompositionEndCapture

onCompositionEndCapture?: CompositionEventHandler<HTMLSelectElement>

Optional onCompositionStart

onCompositionStart?: CompositionEventHandler<HTMLSelectElement>

Optional onCompositionStartCapture

onCompositionStartCapture?: CompositionEventHandler<HTMLSelectElement>

Optional onCompositionUpdate

onCompositionUpdate?: CompositionEventHandler<HTMLSelectElement>

Optional onCompositionUpdateCapture

onCompositionUpdateCapture?: CompositionEventHandler<HTMLSelectElement>

Optional onContextMenu

onContextMenu?: MouseEventHandler<HTMLSelectElement>

Optional onContextMenuCapture

onContextMenuCapture?: MouseEventHandler<HTMLSelectElement>

Optional onCopy

onCopy?: ClipboardEventHandler<HTMLSelectElement>

Optional onCopyCapture

onCopyCapture?: ClipboardEventHandler<HTMLSelectElement>

Optional onCut

onCut?: ClipboardEventHandler<HTMLSelectElement>

Optional onCutCapture

onCutCapture?: ClipboardEventHandler<HTMLSelectElement>

Optional onDoubleClick

onDoubleClick?: MouseEventHandler<HTMLSelectElement>

Optional onDoubleClickCapture

onDoubleClickCapture?: MouseEventHandler<HTMLSelectElement>

Optional onDrag

onDrag?: DragEventHandler<HTMLSelectElement>

Optional onDragCapture

onDragCapture?: DragEventHandler<HTMLSelectElement>

Optional onDragEnd

onDragEnd?: DragEventHandler<HTMLSelectElement>

Optional onDragEndCapture

onDragEndCapture?: DragEventHandler<HTMLSelectElement>

Optional onDragEnter

onDragEnter?: DragEventHandler<HTMLSelectElement>

Optional onDragEnterCapture

onDragEnterCapture?: DragEventHandler<HTMLSelectElement>

Optional onDragExit

onDragExit?: DragEventHandler<HTMLSelectElement>

Optional onDragExitCapture

onDragExitCapture?: DragEventHandler<HTMLSelectElement>

Optional onDragLeave

onDragLeave?: DragEventHandler<HTMLSelectElement>

Optional onDragLeaveCapture

onDragLeaveCapture?: DragEventHandler<HTMLSelectElement>

Optional onDragOver

onDragOver?: DragEventHandler<HTMLSelectElement>

Optional onDragOverCapture

onDragOverCapture?: DragEventHandler<HTMLSelectElement>

Optional onDragStart

onDragStart?: DragEventHandler<HTMLSelectElement>

Optional onDragStartCapture

onDragStartCapture?: DragEventHandler<HTMLSelectElement>

Optional onDrop

onDrop?: DragEventHandler<HTMLSelectElement>

Optional onDropCapture

onDropCapture?: DragEventHandler<HTMLSelectElement>

Optional onDurationChange

onDurationChange?: ReactEventHandler<HTMLSelectElement>

Optional onDurationChangeCapture

onDurationChangeCapture?: ReactEventHandler<HTMLSelectElement>

Optional onEmptied

onEmptied?: ReactEventHandler<HTMLSelectElement>

Optional onEmptiedCapture

onEmptiedCapture?: ReactEventHandler<HTMLSelectElement>

Optional onEncrypted

onEncrypted?: ReactEventHandler<HTMLSelectElement>

Optional onEncryptedCapture

onEncryptedCapture?: ReactEventHandler<HTMLSelectElement>

Optional onEnded

onEnded?: ReactEventHandler<HTMLSelectElement>

Optional onEndedCapture

onEndedCapture?: ReactEventHandler<HTMLSelectElement>

Optional onError

onError?: ReactEventHandler<HTMLSelectElement>

Optional onErrorCapture

onErrorCapture?: ReactEventHandler<HTMLSelectElement>

Optional onFocus

onFocus?: FocusEventHandler<HTMLSelectElement>

Optional onFocusCapture

onFocusCapture?: FocusEventHandler<HTMLSelectElement>

Optional onGotPointerCapture

onGotPointerCapture?: PointerEventHandler<HTMLSelectElement>

Optional onGotPointerCaptureCapture

onGotPointerCaptureCapture?: PointerEventHandler<HTMLSelectElement>

Optional onInput

onInput?: FormEventHandler<HTMLSelectElement>

Optional onInputCapture

onInputCapture?: FormEventHandler<HTMLSelectElement>

Optional onInvalid

onInvalid?: FormEventHandler<HTMLSelectElement>

Optional onInvalidCapture

onInvalidCapture?: FormEventHandler<HTMLSelectElement>

Optional onKeyDown

onKeyDown?: KeyboardEventHandler<HTMLSelectElement>

Optional onKeyDownCapture

onKeyDownCapture?: KeyboardEventHandler<HTMLSelectElement>

Optional onKeyPress

onKeyPress?: KeyboardEventHandler<HTMLSelectElement>

Deprecated

Optional onKeyPressCapture

onKeyPressCapture?: KeyboardEventHandler<HTMLSelectElement>

Deprecated

Optional onKeyUp

onKeyUp?: KeyboardEventHandler<HTMLSelectElement>

Optional onKeyUpCapture

onKeyUpCapture?: KeyboardEventHandler<HTMLSelectElement>

Optional onLoad

onLoad?: ReactEventHandler<HTMLSelectElement>

Optional onLoadCapture

onLoadCapture?: ReactEventHandler<HTMLSelectElement>

Optional onLoadStart

onLoadStart?: ReactEventHandler<HTMLSelectElement>

Optional onLoadStartCapture

onLoadStartCapture?: ReactEventHandler<HTMLSelectElement>

Optional onLoadedData

onLoadedData?: ReactEventHandler<HTMLSelectElement>

Optional onLoadedDataCapture

onLoadedDataCapture?: ReactEventHandler<HTMLSelectElement>

Optional onLoadedMetadata

onLoadedMetadata?: ReactEventHandler<HTMLSelectElement>

Optional onLoadedMetadataCapture

onLoadedMetadataCapture?: ReactEventHandler<HTMLSelectElement>

Optional onLostPointerCapture

onLostPointerCapture?: PointerEventHandler<HTMLSelectElement>

Optional onLostPointerCaptureCapture

onLostPointerCaptureCapture?: PointerEventHandler<HTMLSelectElement>

Optional onMouseDown

onMouseDown?: MouseEventHandler<HTMLSelectElement>

Optional onMouseDownCapture

onMouseDownCapture?: MouseEventHandler<HTMLSelectElement>

Optional onMouseEnter

onMouseEnter?: MouseEventHandler<HTMLSelectElement>

Optional onMouseLeave

onMouseLeave?: MouseEventHandler<HTMLSelectElement>

Optional onMouseMove

onMouseMove?: MouseEventHandler<HTMLSelectElement>

Optional onMouseMoveCapture

onMouseMoveCapture?: MouseEventHandler<HTMLSelectElement>

Optional onMouseOut

onMouseOut?: MouseEventHandler<HTMLSelectElement>

Optional onMouseOutCapture

onMouseOutCapture?: MouseEventHandler<HTMLSelectElement>

Optional onMouseOver

onMouseOver?: MouseEventHandler<HTMLSelectElement>

Optional onMouseOverCapture

onMouseOverCapture?: MouseEventHandler<HTMLSelectElement>

Optional onMouseUp

onMouseUp?: MouseEventHandler<HTMLSelectElement>

Optional onMouseUpCapture

onMouseUpCapture?: MouseEventHandler<HTMLSelectElement>

Optional onPaste

onPaste?: ClipboardEventHandler<HTMLSelectElement>

Optional onPasteCapture

onPasteCapture?: ClipboardEventHandler<HTMLSelectElement>

Optional onPause

onPause?: ReactEventHandler<HTMLSelectElement>

Optional onPauseCapture

onPauseCapture?: ReactEventHandler<HTMLSelectElement>

Optional onPlay

onPlay?: ReactEventHandler<HTMLSelectElement>

Optional onPlayCapture

onPlayCapture?: ReactEventHandler<HTMLSelectElement>

Optional onPlaying

onPlaying?: ReactEventHandler<HTMLSelectElement>

Optional onPlayingCapture

onPlayingCapture?: ReactEventHandler<HTMLSelectElement>

Optional onPointerCancel

onPointerCancel?: PointerEventHandler<HTMLSelectElement>

Optional onPointerCancelCapture

onPointerCancelCapture?: PointerEventHandler<HTMLSelectElement>

Optional onPointerDown

onPointerDown?: PointerEventHandler<HTMLSelectElement>

Optional onPointerDownCapture

onPointerDownCapture?: PointerEventHandler<HTMLSelectElement>

Optional onPointerEnter

onPointerEnter?: PointerEventHandler<HTMLSelectElement>

Optional onPointerEnterCapture

onPointerEnterCapture?: PointerEventHandler<HTMLSelectElement>

Optional onPointerLeave

onPointerLeave?: PointerEventHandler<HTMLSelectElement>

Optional onPointerLeaveCapture

onPointerLeaveCapture?: PointerEventHandler<HTMLSelectElement>

Optional onPointerMove

onPointerMove?: PointerEventHandler<HTMLSelectElement>

Optional onPointerMoveCapture

onPointerMoveCapture?: PointerEventHandler<HTMLSelectElement>

Optional onPointerOut

onPointerOut?: PointerEventHandler<HTMLSelectElement>

Optional onPointerOutCapture

onPointerOutCapture?: PointerEventHandler<HTMLSelectElement>

Optional onPointerOver

onPointerOver?: PointerEventHandler<HTMLSelectElement>

Optional onPointerOverCapture

onPointerOverCapture?: PointerEventHandler<HTMLSelectElement>

Optional onPointerUp

onPointerUp?: PointerEventHandler<HTMLSelectElement>

Optional onPointerUpCapture

onPointerUpCapture?: PointerEventHandler<HTMLSelectElement>

Optional onProgress

onProgress?: ReactEventHandler<HTMLSelectElement>

Optional onProgressCapture

onProgressCapture?: ReactEventHandler<HTMLSelectElement>

Optional onRateChange

onRateChange?: ReactEventHandler<HTMLSelectElement>

Optional onRateChangeCapture

onRateChangeCapture?: ReactEventHandler<HTMLSelectElement>

Optional onReset

onReset?: FormEventHandler<HTMLSelectElement>

Optional onResetCapture

onResetCapture?: FormEventHandler<HTMLSelectElement>

Optional onScroll

onScroll?: UIEventHandler<HTMLSelectElement>

Optional onScrollCapture

onScrollCapture?: UIEventHandler<HTMLSelectElement>

Optional onSeeked

onSeeked?: ReactEventHandler<HTMLSelectElement>

Optional onSeekedCapture

onSeekedCapture?: ReactEventHandler<HTMLSelectElement>

Optional onSeeking

onSeeking?: ReactEventHandler<HTMLSelectElement>

Optional onSeekingCapture

onSeekingCapture?: ReactEventHandler<HTMLSelectElement>

Optional onSelectCapture

onSelectCapture?: ReactEventHandler<HTMLSelectElement>

Optional onStalled

onStalled?: ReactEventHandler<HTMLSelectElement>

Optional onStalledCapture

onStalledCapture?: ReactEventHandler<HTMLSelectElement>

Optional onSubmit

onSubmit?: FormEventHandler<HTMLSelectElement>

Optional onSubmitCapture

onSubmitCapture?: FormEventHandler<HTMLSelectElement>

Optional onSuspend

onSuspend?: ReactEventHandler<HTMLSelectElement>

Optional onSuspendCapture

onSuspendCapture?: ReactEventHandler<HTMLSelectElement>

Optional onTimeUpdate

onTimeUpdate?: ReactEventHandler<HTMLSelectElement>

Optional onTimeUpdateCapture

onTimeUpdateCapture?: ReactEventHandler<HTMLSelectElement>

Optional onTouchCancel

onTouchCancel?: TouchEventHandler<HTMLSelectElement>

Optional onTouchCancelCapture

onTouchCancelCapture?: TouchEventHandler<HTMLSelectElement>

Optional onTouchEnd

onTouchEnd?: TouchEventHandler<HTMLSelectElement>

Optional onTouchEndCapture

onTouchEndCapture?: TouchEventHandler<HTMLSelectElement>

Optional onTouchMove

onTouchMove?: TouchEventHandler<HTMLSelectElement>

Optional onTouchMoveCapture

onTouchMoveCapture?: TouchEventHandler<HTMLSelectElement>

Optional onTouchStart

onTouchStart?: TouchEventHandler<HTMLSelectElement>

Optional onTouchStartCapture

onTouchStartCapture?: TouchEventHandler<HTMLSelectElement>

Optional onTransitionEnd

onTransitionEnd?: TransitionEventHandler<HTMLSelectElement>

Optional onTransitionEndCapture

onTransitionEndCapture?: TransitionEventHandler<HTMLSelectElement>

Optional onVolumeChange

onVolumeChange?: ReactEventHandler<HTMLSelectElement>

Optional onVolumeChangeCapture

onVolumeChangeCapture?: ReactEventHandler<HTMLSelectElement>

Optional onWaiting

onWaiting?: ReactEventHandler<HTMLSelectElement>

Optional onWaitingCapture

onWaitingCapture?: ReactEventHandler<HTMLSelectElement>

Optional onWheel

onWheel?: WheelEventHandler<HTMLSelectElement>

Optional onWheelCapture

onWheelCapture?: WheelEventHandler<HTMLSelectElement>

Optional opacity

opacity?: ResponsiveValue<Opacity>

The CSS opacity property

Optional options

options?: Option[]

Optional order

order?: ResponsiveValue<Order>

The CSS order property.

It defines the order to lay out an item in a flex or grid container.

See

Mozilla Docs

Optional outline

outline?: ResponsiveValue<Outline<Length>>

The CSS outline property

Optional outlineColor

outlineColor?: ResponsiveValue<Union<Color | "current" | "whiteAlpha.50" | "whiteAlpha.100" | "whiteAlpha.200" | "whiteAlpha.300" | "whiteAlpha.400" | "whiteAlpha.500" | "whiteAlpha.600" | "whiteAlpha.700" | "whiteAlpha.800" | "whiteAlpha.900" | "blackAlpha.50" | "blackAlpha.100" | "blackAlpha.200" | "blackAlpha.300" | "blackAlpha.400" | "blackAlpha.500" | "blackAlpha.600" | "blackAlpha.700" | "blackAlpha.800" | "blackAlpha.900" | "gray.50" | "gray.100" | "gray.200" | "gray.300" | "gray.400" | "gray.500" | "gray.600" | "gray.700" | "gray.800" | "gray.900" | "red.50" | "red.100" | "red.200" | "red.300" | "red.400" | "red.500" | "red.600" | "red.700" | "red.800" | "red.900" | "orange.50" | "orange.100" | "orange.200" | "orange.300" | "orange.400" | "orange.500" | "orange.600" | "orange.700" | "orange.800" | "orange.900" | "yellow.50" | "yellow.100" | "yellow.200" | "yellow.300" | "yellow.400" | "yellow.500" | "yellow.600" | "yellow.700" | "yellow.800" | "yellow.900" | "green.50" | "green.100" | "green.200" | "green.300" | "green.400" | "green.500" | "green.600" | "green.700" | "green.800" | "green.900" | "teal.50" | "teal.100" | "teal.200" | "teal.300" | "teal.400" | "teal.500" | "teal.600" | "teal.700" | "teal.800" | "teal.900" | "blue.50" | "blue.100" | "blue.200" | "blue.300" | "blue.400" | "blue.500" | "blue.600" | "blue.700" | "blue.800" | "blue.900" | "cyan.50" | "cyan.100" | "cyan.200" | "cyan.300" | "cyan.400" | "cyan.500" | "cyan.600" | "cyan.700" | "cyan.800" | "cyan.900" | "purple.50" | "purple.100" | "purple.200" | "purple.300" | "purple.400" | "purple.500" | "purple.600" | "purple.700" | "purple.800" | "purple.900" | "pink.50" | "pink.100" | "pink.200" | "pink.300" | "pink.400" | "pink.500" | "pink.600" | "pink.700" | "pink.800" | "pink.900" | "linkedin.50" | "linkedin.100" | "linkedin.200" | "linkedin.300" | "linkedin.400" | "linkedin.500" | "linkedin.600" | "linkedin.700" | "linkedin.800" | "linkedin.900" | "facebook.50" | "facebook.100" | "facebook.200" | "facebook.300" | "facebook.400" | "facebook.500" | "facebook.600" | "facebook.700" | "facebook.800" | "facebook.900" | "messenger.50" | "messenger.100" | "messenger.200" | "messenger.300" | "messenger.400" | "messenger.500" | "messenger.600" | "messenger.700" | "messenger.800" | "messenger.900" | "whatsapp.50" | "whatsapp.100" | "whatsapp.200" | "whatsapp.300" | "whatsapp.400" | "whatsapp.500" | "whatsapp.600" | "whatsapp.700" | "whatsapp.800" | "whatsapp.900" | "twitter.50" | "twitter.100" | "twitter.200" | "twitter.300" | "twitter.400" | "twitter.500" | "twitter.600" | "twitter.700" | "twitter.800" | "twitter.900" | "telegram.50" | "telegram.100" | "telegram.200" | "telegram.300" | "telegram.400" | "telegram.500" | "telegram.600" | "telegram.700" | "telegram.800" | "telegram.900" | "chakra-body-text" | "chakra-body-bg" | "chakra-border-color" | "chakra-placeholder-color">>

The CSS outline-color property

Optional outlineOffset

outlineOffset?: ResponsiveValue<OutlineOffset<Length>>

The CSS outline-offset property

Optional overflow

overflow?: ResponsiveValue<Overflow>

The CSS overflow property

Optional overflowWrap

overflowWrap?: ResponsiveValue<OverflowWrap>

The CSS overflow-wrap property

Optional overflowX

overflowX?: ResponsiveValue<OverflowX>

The CSS overflow-x property

Optional overflowY

overflowY?: ResponsiveValue<OverflowY>

The CSS overflow-y property

Optional overscroll

overscroll?: ResponsiveValue<OverscrollBehavior>

The CSS overscroll-behavior property

Optional overscrollBehavior

overscrollBehavior?: ResponsiveValue<OverscrollBehavior>

The CSS overscroll-behavior property

Optional overscrollBehaviorX

overscrollBehaviorX?: ResponsiveValue<OverscrollBehaviorX>

The CSS overscroll-behavior-x property

Optional overscrollBehaviorY

overscrollBehaviorY?: ResponsiveValue<OverscrollBehaviorY>

The CSS overscroll-behavior-y property

Optional overscrollX

overscrollX?: ResponsiveValue<OverscrollBehaviorX>

The CSS overscroll-behavior-x property

Optional overscrollY

overscrollY?: ResponsiveValue<OverscrollBehaviorY>

The CSS overscroll-behavior-y property

Optional p

p?: ResponsiveValue<Union<number | "1" | "2" | "3" | "4" | "5" | "6" | "7" | string & {} | "px" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "-1" | "-2" | "-3" | "-4" | "-5" | "-6" | "-7" | "-8" | "-9" | "-10" | "-12" | "-14" | "-16" | "-20" | "-24" | "-28" | "-32" | "-36" | "-40" | "-44" | "-48" | "-52" | "-56" | "-60" | "-64" | "-72" | "-80" | "-96" | "-px" | "-0.5" | "-1.5" | "-2.5" | "-3.5">>

Padding on top, left, bottom and right

Optional padding

padding?: ResponsiveValue<Union<number | "1" | "2" | "3" | "4" | "5" | "6" | "7" | string & {} | "px" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "-1" | "-2" | "-3" | "-4" | "-5" | "-6" | "-7" | "-8" | "-9" | "-10" | "-12" | "-14" | "-16" | "-20" | "-24" | "-28" | "-32" | "-36" | "-40" | "-44" | "-48" | "-52" | "-56" | "-60" | "-64" | "-72" | "-80" | "-96" | "-px" | "-0.5" | "-1.5" | "-2.5" | "-3.5">>

Padding on top, left, bottom and right

Optional paddingBlock

paddingBlock?: ResponsiveValue<Union<number | "1" | "2" | "3" | "4" | "5" | "6" | "7" | string & {} | "px" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "-1" | "-2" | "-3" | "-4" | "-5" | "-6" | "-7" | "-8" | "-9" | "-10" | "-12" | "-14" | "-16" | "-20" | "-24" | "-28" | "-32" | "-36" | "-40" | "-44" | "-48" | "-52" | "-56" | "-60" | "-64" | "-72" | "-80" | "-96" | "-px" | "-0.5" | "-1.5" | "-2.5" | "-3.5">>

Optional paddingBlockEnd

paddingBlockEnd?: ResponsiveValue<Union<number | "1" | "2" | "3" | "4" | "5" | "6" | "7" | string & {} | "px" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "-1" | "-2" | "-3" | "-4" | "-5" | "-6" | "-7" | "-8" | "-9" | "-10" | "-12" | "-14" | "-16" | "-20" | "-24" | "-28" | "-32" | "-36" | "-40" | "-44" | "-48" | "-52" | "-56" | "-60" | "-64" | "-72" | "-80" | "-96" | "-px" | "-0.5" | "-1.5" | "-2.5" | "-3.5">>

Optional paddingBlockStart

paddingBlockStart?: ResponsiveValue<Union<number | "1" | "2" | "3" | "4" | "5" | "6" | "7" | string & {} | "px" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "-1" | "-2" | "-3" | "-4" | "-5" | "-6" | "-7" | "-8" | "-9" | "-10" | "-12" | "-14" | "-16" | "-20" | "-24" | "-28" | "-32" | "-36" | "-40" | "-44" | "-48" | "-52" | "-56" | "-60" | "-64" | "-72" | "-80" | "-96" | "-px" | "-0.5" | "-1.5" | "-2.5" | "-3.5">>

Optional paddingBottom

paddingBottom?: ResponsiveValue<Union<number | "1" | "2" | "3" | "4" | "5" | "6" | "7" | string & {} | "px" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "-1" | "-2" | "-3" | "-4" | "-5" | "-6" | "-7" | "-8" | "-9" | "-10" | "-12" | "-14" | "-16" | "-20" | "-24" | "-28" | "-32" | "-36" | "-40" | "-44" | "-48" | "-52" | "-56" | "-60" | "-64" | "-72" | "-80" | "-96" | "-px" | "-0.5" | "-1.5" | "-2.5" | "-3.5">>

Padding on bottom

Optional paddingEnd

paddingEnd?: ResponsiveValue<Union<number | "1" | "2" | "3" | "4" | "5" | "6" | "7" | string & {} | "px" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "-1" | "-2" | "-3" | "-4" | "-5" | "-6" | "-7" | "-8" | "-9" | "-10" | "-12" | "-14" | "-16" | "-20" | "-24" | "-28" | "-32" | "-36" | "-40" | "-44" | "-48" | "-52" | "-56" | "-60" | "-64" | "-72" | "-80" | "-96" | "-px" | "-0.5" | "-1.5" | "-2.5" | "-3.5">>

When direction is ltr, paddingEnd is equivalent to paddingRight. When direction is rtl, paddingEnd is equivalent to paddingLeft.

Optional paddingInline

paddingInline?: ResponsiveValue<Union<number | "1" | "2" | "3" | "4" | "5" | "6" | "7" | string & {} | "px" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "-1" | "-2" | "-3" | "-4" | "-5" | "-6" | "-7" | "-8" | "-9" | "-10" | "-12" | "-14" | "-16" | "-20" | "-24" | "-28" | "-32" | "-36" | "-40" | "-44" | "-48" | "-52" | "-56" | "-60" | "-64" | "-72" | "-80" | "-96" | "-px" | "-0.5" | "-1.5" | "-2.5" | "-3.5">>

Optional paddingInlineEnd

paddingInlineEnd?: ResponsiveValue<Union<number | "1" | "2" | "3" | "4" | "5" | "6" | "7" | string & {} | "px" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "-1" | "-2" | "-3" | "-4" | "-5" | "-6" | "-7" | "-8" | "-9" | "-10" | "-12" | "-14" | "-16" | "-20" | "-24" | "-28" | "-32" | "-36" | "-40" | "-44" | "-48" | "-52" | "-56" | "-60" | "-64" | "-72" | "-80" | "-96" | "-px" | "-0.5" | "-1.5" | "-2.5" | "-3.5">>

When direction is ltr, paddingInlineEnd is equivalent to paddingRight. When direction is rtl, paddingInlineEnd is equivalent to paddingLeft.

Optional paddingInlineStart

paddingInlineStart?: ResponsiveValue<Union<number | "1" | "2" | "3" | "4" | "5" | "6" | "7" | string & {} | "px" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "-1" | "-2" | "-3" | "-4" | "-5" | "-6" | "-7" | "-8" | "-9" | "-10" | "-12" | "-14" | "-16" | "-20" | "-24" | "-28" | "-32" | "-36" | "-40" | "-44" | "-48" | "-52" | "-56" | "-60" | "-64" | "-72" | "-80" | "-96" | "-px" | "-0.5" | "-1.5" | "-2.5" | "-3.5">>

When direction is ltr, paddingInlineStart is equivalent to paddingLeft. When direction is rtl, paddingInlineStart is equivalent to paddingRight.

Optional paddingLeft

paddingLeft?: ResponsiveValue<Union<number | "1" | "2" | "3" | "4" | "5" | "6" | "7" | string & {} | "px" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "-1" | "-2" | "-3" | "-4" | "-5" | "-6" | "-7" | "-8" | "-9" | "-10" | "-12" | "-14" | "-16" | "-20" | "-24" | "-28" | "-32" | "-36" | "-40" | "-44" | "-48" | "-52" | "-56" | "-60" | "-64" | "-72" | "-80" | "-96" | "-px" | "-0.5" | "-1.5" | "-2.5" | "-3.5">>

Padding on left

Optional paddingRight

paddingRight?: ResponsiveValue<Union<number | "1" | "2" | "3" | "4" | "5" | "6" | "7" | string & {} | "px" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "-1" | "-2" | "-3" | "-4" | "-5" | "-6" | "-7" | "-8" | "-9" | "-10" | "-12" | "-14" | "-16" | "-20" | "-24" | "-28" | "-32" | "-36" | "-40" | "-44" | "-48" | "-52" | "-56" | "-60" | "-64" | "-72" | "-80" | "-96" | "-px" | "-0.5" | "-1.5" | "-2.5" | "-3.5">>

Padding on right

Optional paddingStart

paddingStart?: ResponsiveValue<Union<number | "1" | "2" | "3" | "4" | "5" | "6" | "7" | string & {} | "px" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "-1" | "-2" | "-3" | "-4" | "-5" | "-6" | "-7" | "-8" | "-9" | "-10" | "-12" | "-14" | "-16" | "-20" | "-24" | "-28" | "-32" | "-36" | "-40" | "-44" | "-48" | "-52" | "-56" | "-60" | "-64" | "-72" | "-80" | "-96" | "-px" | "-0.5" | "-1.5" | "-2.5" | "-3.5">>

When direction is ltr, paddingStart is equivalent to paddingLeft. When direction is rtl, paddingStart is equivalent to paddingRight.

Optional paddingTop

paddingTop?: ResponsiveValue<Union<number | "1" | "2" | "3" | "4" | "5" | "6" | "7" | string & {} | "px" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "-1" | "-2" | "-3" | "-4" | "-5" | "-6" | "-7" | "-8" | "-9" | "-10" | "-12" | "-14" | "-16" | "-20" | "-24" | "-28" | "-32" | "-36" | "-40" | "-44" | "-48" | "-52" | "-56" | "-60" | "-64" | "-72" | "-80" | "-96" | "-px" | "-0.5" | "-1.5" | "-2.5" | "-3.5">>

Padding on top

Optional paddingX

paddingX?: ResponsiveValue<Union<number | "1" | "2" | "3" | "4" | "5" | "6" | "7" | string & {} | "px" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "-1" | "-2" | "-3" | "-4" | "-5" | "-6" | "-7" | "-8" | "-9" | "-10" | "-12" | "-14" | "-16" | "-20" | "-24" | "-28" | "-32" | "-36" | "-40" | "-44" | "-48" | "-52" | "-56" | "-60" | "-64" | "-72" | "-80" | "-96" | "-px" | "-0.5" | "-1.5" | "-2.5" | "-3.5">>

Padding on left and right

Optional paddingY

paddingY?: ResponsiveValue<Union<number | "1" | "2" | "3" | "4" | "5" | "6" | "7" | string & {} | "px" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "-1" | "-2" | "-3" | "-4" | "-5" | "-6" | "-7" | "-8" | "-9" | "-10" | "-12" | "-14" | "-16" | "-20" | "-24" | "-28" | "-32" | "-36" | "-40" | "-44" | "-48" | "-52" | "-56" | "-60" | "-64" | "-72" | "-80" | "-96" | "-px" | "-0.5" | "-1.5" | "-2.5" | "-3.5">>

Padding on top and bottom

Optional pb

pb?: ResponsiveValue<Union<number | "1" | "2" | "3" | "4" | "5" | "6" | "7" | string & {} | "px" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "-1" | "-2" | "-3" | "-4" | "-5" | "-6" | "-7" | "-8" | "-9" | "-10" | "-12" | "-14" | "-16" | "-20" | "-24" | "-28" | "-32" | "-36" | "-40" | "-44" | "-48" | "-52" | "-56" | "-60" | "-64" | "-72" | "-80" | "-96" | "-px" | "-0.5" | "-1.5" | "-2.5" | "-3.5">>

Padding on bottom

Optional pe

pe?: ResponsiveValue<Union<number | "1" | "2" | "3" | "4" | "5" | "6" | "7" | string & {} | "px" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "-1" | "-2" | "-3" | "-4" | "-5" | "-6" | "-7" | "-8" | "-9" | "-10" | "-12" | "-14" | "-16" | "-20" | "-24" | "-28" | "-32" | "-36" | "-40" | "-44" | "-48" | "-52" | "-56" | "-60" | "-64" | "-72" | "-80" | "-96" | "-px" | "-0.5" | "-1.5" | "-2.5" | "-3.5">>

When direction is ltr, pe is equivalent to paddingRight. When direction is rtl, pe is equivalent to paddingLeft.

Optional pl

pl?: ResponsiveValue<Union<number | "1" | "2" | "3" | "4" | "5" | "6" | "7" | string & {} | "px" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "-1" | "-2" | "-3" | "-4" | "-5" | "-6" | "-7" | "-8" | "-9" | "-10" | "-12" | "-14" | "-16" | "-20" | "-24" | "-28" | "-32" | "-36" | "-40" | "-44" | "-48" | "-52" | "-56" | "-60" | "-64" | "-72" | "-80" | "-96" | "-px" | "-0.5" | "-1.5" | "-2.5" | "-3.5">>

Padding on left

Optional placeContent

placeContent?: ResponsiveValue<PlaceContent>

The CSS place-content property.

It allows you to align content along both the block and inline directions at once (i.e. the align-content and justify-content properties) in a relevant layout system such as Grid or Flexbox.

See

Mozilla Docs

Optional placeItems

placeItems?: ResponsiveValue<PlaceItems>

The CSS place-items property.

It allows you to align items along both the block and inline directions at once (i.e. the align-items and justify-items properties) in a relevant layout system such as Grid or Flex.

See

Mozilla Docs

Optional placeSelf

placeSelf?: ResponsiveValue<PlaceSelf>

The CSS place-self property.

It allows you to align an individual item in both the block and inline directions at once (i.e. the align-self and justify-self properties) in a relevant layout system such as Grid or Flexbox.

See

Mozilla Docs

Optional placeholder

placeholder?: string

Optional placement

placement?: PlacementWithLogical

The placement of the popper relative to its reference.

Default

"bottom"

Optional pointerEvents

pointerEvents?: ResponsiveValue<PointerEvents>

The CSS pointer-events property

Optional pos

pos?: ResponsiveValue<Position>

The CSS position property

Optional position

position?: ResponsiveValue<Position>

The CSS position property

Optional pr

pr?: ResponsiveValue<Union<number | "1" | "2" | "3" | "4" | "5" | "6" | "7" | string & {} | "px" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "-1" | "-2" | "-3" | "-4" | "-5" | "-6" | "-7" | "-8" | "-9" | "-10" | "-12" | "-14" | "-16" | "-20" | "-24" | "-28" | "-32" | "-36" | "-40" | "-44" | "-48" | "-52" | "-56" | "-60" | "-64" | "-72" | "-80" | "-96" | "-px" | "-0.5" | "-1.5" | "-2.5" | "-3.5">>

Padding on right

Optional prefix

prefix?: string

Optional preventOverflow

preventOverflow?: boolean

If true, will prevent the popper from being cut off and ensure it's visible within the boundary area.

Default

true

Optional property

property?: string

Optional ps

ps?: ResponsiveValue<Union<number | "1" | "2" | "3" | "4" | "5" | "6" | "7" | string & {} | "px" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "-1" | "-2" | "-3" | "-4" | "-5" | "-6" | "-7" | "-8" | "-9" | "-10" | "-12" | "-14" | "-16" | "-20" | "-24" | "-28" | "-32" | "-36" | "-40" | "-44" | "-48" | "-52" | "-56" | "-60" | "-64" | "-72" | "-80" | "-96" | "-px" | "-0.5" | "-1.5" | "-2.5" | "-3.5">>

When direction is ltr, ps is equivalent to paddingLeft. When direction is rtl, ps is equivalent to paddingRight.

Optional pt

pt?: ResponsiveValue<Union<number | "1" | "2" | "3" | "4" | "5" | "6" | "7" | string & {} | "px" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "-1" | "-2" | "-3" | "-4" | "-5" | "-6" | "-7" | "-8" | "-9" | "-10" | "-12" | "-14" | "-16" | "-20" | "-24" | "-28" | "-32" | "-36" | "-40" | "-44" | "-48" | "-52" | "-56" | "-60" | "-64" | "-72" | "-80" | "-96" | "-px" | "-0.5" | "-1.5" | "-2.5" | "-3.5">>

Padding on top

Optional px

px?: ResponsiveValue<Union<number | "1" | "2" | "3" | "4" | "5" | "6" | "7" | string & {} | "px" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "-1" | "-2" | "-3" | "-4" | "-5" | "-6" | "-7" | "-8" | "-9" | "-10" | "-12" | "-14" | "-16" | "-20" | "-24" | "-28" | "-32" | "-36" | "-40" | "-44" | "-48" | "-52" | "-56" | "-60" | "-64" | "-72" | "-80" | "-96" | "-px" | "-0.5" | "-1.5" | "-2.5" | "-3.5">>

Padding on left and right

Optional py

py?: ResponsiveValue<Union<number | "1" | "2" | "3" | "4" | "5" | "6" | "7" | string & {} | "px" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "-1" | "-2" | "-3" | "-4" | "-5" | "-6" | "-7" | "-8" | "-9" | "-10" | "-12" | "-14" | "-16" | "-20" | "-24" | "-28" | "-32" | "-36" | "-40" | "-44" | "-48" | "-52" | "-56" | "-60" | "-64" | "-72" | "-80" | "-96" | "-px" | "-0.5" | "-1.5" | "-2.5" | "-3.5">>

Padding on top and bottom

Optional radioGroup

radioGroup?: string

Optional required

required?: boolean

Optional resize

resize?: ResponsiveValue<Resize>

The CSS resize property

Optional resource

resource?: string

Optional results

results?: number

Optional right

right?: ResponsiveValue<Union<number | "sm" | "md" | "lg" | "auto" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | string & {} | "px" | "xl" | "2xl" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "3xs" | "2xs" | "xs" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "max" | "min" | "full" | "prose" | "container.sm" | "container.md" | "container.lg" | "container.xl">>

The CSS right property

Optional ring

ring?: ResponsiveValue<Length>

Creates outline rings with CSS box-shadow property

Optional ringColor

ringColor?: ResponsiveValue<Union<Color | "current" | "whiteAlpha.50" | "whiteAlpha.100" | "whiteAlpha.200" | "whiteAlpha.300" | "whiteAlpha.400" | "whiteAlpha.500" | "whiteAlpha.600" | "whiteAlpha.700" | "whiteAlpha.800" | "whiteAlpha.900" | "blackAlpha.50" | "blackAlpha.100" | "blackAlpha.200" | "blackAlpha.300" | "blackAlpha.400" | "blackAlpha.500" | "blackAlpha.600" | "blackAlpha.700" | "blackAlpha.800" | "blackAlpha.900" | "gray.50" | "gray.100" | "gray.200" | "gray.300" | "gray.400" | "gray.500" | "gray.600" | "gray.700" | "gray.800" | "gray.900" | "red.50" | "red.100" | "red.200" | "red.300" | "red.400" | "red.500" | "red.600" | "red.700" | "red.800" | "red.900" | "orange.50" | "orange.100" | "orange.200" | "orange.300" | "orange.400" | "orange.500" | "orange.600" | "orange.700" | "orange.800" | "orange.900" | "yellow.50" | "yellow.100" | "yellow.200" | "yellow.300" | "yellow.400" | "yellow.500" | "yellow.600" | "yellow.700" | "yellow.800" | "yellow.900" | "green.50" | "green.100" | "green.200" | "green.300" | "green.400" | "green.500" | "green.600" | "green.700" | "green.800" | "green.900" | "teal.50" | "teal.100" | "teal.200" | "teal.300" | "teal.400" | "teal.500" | "teal.600" | "teal.700" | "teal.800" | "teal.900" | "blue.50" | "blue.100" | "blue.200" | "blue.300" | "blue.400" | "blue.500" | "blue.600" | "blue.700" | "blue.800" | "blue.900" | "cyan.50" | "cyan.100" | "cyan.200" | "cyan.300" | "cyan.400" | "cyan.500" | "cyan.600" | "cyan.700" | "cyan.800" | "cyan.900" | "purple.50" | "purple.100" | "purple.200" | "purple.300" | "purple.400" | "purple.500" | "purple.600" | "purple.700" | "purple.800" | "purple.900" | "pink.50" | "pink.100" | "pink.200" | "pink.300" | "pink.400" | "pink.500" | "pink.600" | "pink.700" | "pink.800" | "pink.900" | "linkedin.50" | "linkedin.100" | "linkedin.200" | "linkedin.300" | "linkedin.400" | "linkedin.500" | "linkedin.600" | "linkedin.700" | "linkedin.800" | "linkedin.900" | "facebook.50" | "facebook.100" | "facebook.200" | "facebook.300" | "facebook.400" | "facebook.500" | "facebook.600" | "facebook.700" | "facebook.800" | "facebook.900" | "messenger.50" | "messenger.100" | "messenger.200" | "messenger.300" | "messenger.400" | "messenger.500" | "messenger.600" | "messenger.700" | "messenger.800" | "messenger.900" | "whatsapp.50" | "whatsapp.100" | "whatsapp.200" | "whatsapp.300" | "whatsapp.400" | "whatsapp.500" | "whatsapp.600" | "whatsapp.700" | "whatsapp.800" | "whatsapp.900" | "twitter.50" | "twitter.100" | "twitter.200" | "twitter.300" | "twitter.400" | "twitter.500" | "twitter.600" | "twitter.700" | "twitter.800" | "twitter.900" | "telegram.50" | "telegram.100" | "telegram.200" | "telegram.300" | "telegram.400" | "telegram.500" | "telegram.600" | "telegram.700" | "telegram.800" | "telegram.900" | "chakra-body-text" | "chakra-body-bg" | "chakra-border-color" | "chakra-placeholder-color">>

The color of the outline ring

Optional ringInset

ringInset?: ResponsiveValue<"inset" | "none">

If the outline ring should an inset

Optional ringOffset

ringOffset?: ResponsiveValue<Length>

The thickness of the offset shadow when using outline rings

Optional ringOffsetColor

ringOffsetColor?: ResponsiveValue<Union<Color | "current" | "whiteAlpha.50" | "whiteAlpha.100" | "whiteAlpha.200" | "whiteAlpha.300" | "whiteAlpha.400" | "whiteAlpha.500" | "whiteAlpha.600" | "whiteAlpha.700" | "whiteAlpha.800" | "whiteAlpha.900" | "blackAlpha.50" | "blackAlpha.100" | "blackAlpha.200" | "blackAlpha.300" | "blackAlpha.400" | "blackAlpha.500" | "blackAlpha.600" | "blackAlpha.700" | "blackAlpha.800" | "blackAlpha.900" | "gray.50" | "gray.100" | "gray.200" | "gray.300" | "gray.400" | "gray.500" | "gray.600" | "gray.700" | "gray.800" | "gray.900" | "red.50" | "red.100" | "red.200" | "red.300" | "red.400" | "red.500" | "red.600" | "red.700" | "red.800" | "red.900" | "orange.50" | "orange.100" | "orange.200" | "orange.300" | "orange.400" | "orange.500" | "orange.600" | "orange.700" | "orange.800" | "orange.900" | "yellow.50" | "yellow.100" | "yellow.200" | "yellow.300" | "yellow.400" | "yellow.500" | "yellow.600" | "yellow.700" | "yellow.800" | "yellow.900" | "green.50" | "green.100" | "green.200" | "green.300" | "green.400" | "green.500" | "green.600" | "green.700" | "green.800" | "green.900" | "teal.50" | "teal.100" | "teal.200" | "teal.300" | "teal.400" | "teal.500" | "teal.600" | "teal.700" | "teal.800" | "teal.900" | "blue.50" | "blue.100" | "blue.200" | "blue.300" | "blue.400" | "blue.500" | "blue.600" | "blue.700" | "blue.800" | "blue.900" | "cyan.50" | "cyan.100" | "cyan.200" | "cyan.300" | "cyan.400" | "cyan.500" | "cyan.600" | "cyan.700" | "cyan.800" | "cyan.900" | "purple.50" | "purple.100" | "purple.200" | "purple.300" | "purple.400" | "purple.500" | "purple.600" | "purple.700" | "purple.800" | "purple.900" | "pink.50" | "pink.100" | "pink.200" | "pink.300" | "pink.400" | "pink.500" | "pink.600" | "pink.700" | "pink.800" | "pink.900" | "linkedin.50" | "linkedin.100" | "linkedin.200" | "linkedin.300" | "linkedin.400" | "linkedin.500" | "linkedin.600" | "linkedin.700" | "linkedin.800" | "linkedin.900" | "facebook.50" | "facebook.100" | "facebook.200" | "facebook.300" | "facebook.400" | "facebook.500" | "facebook.600" | "facebook.700" | "facebook.800" | "facebook.900" | "messenger.50" | "messenger.100" | "messenger.200" | "messenger.300" | "messenger.400" | "messenger.500" | "messenger.600" | "messenger.700" | "messenger.800" | "messenger.900" | "whatsapp.50" | "whatsapp.100" | "whatsapp.200" | "whatsapp.300" | "whatsapp.400" | "whatsapp.500" | "whatsapp.600" | "whatsapp.700" | "whatsapp.800" | "whatsapp.900" | "twitter.50" | "twitter.100" | "twitter.200" | "twitter.300" | "twitter.400" | "twitter.500" | "twitter.600" | "twitter.700" | "twitter.800" | "twitter.900" | "telegram.50" | "telegram.100" | "telegram.200" | "telegram.300" | "telegram.400" | "telegram.500" | "telegram.600" | "telegram.700" | "telegram.800" | "telegram.900" | "chakra-body-text" | "chakra-body-bg" | "chakra-border-color" | "chakra-placeholder-color">>

The color of the offset shadow when adding outline rings

Optional role

role?: AriaRole

Optional rotate

rotate?: ResponsiveValue<Length>

Sets the rotation value of the element

Optional rounded

rounded?: ResponsiveValue<Union<number | "sm" | "md" | "lg" | string & {} | "base" | "xl" | "2xl" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "3xl" | "none" | "full">>

The CSS border-radius property

Optional roundedBottom

roundedBottom?: ResponsiveValue<Union<number | "sm" | "md" | "lg" | string & {} | "base" | "xl" | "2xl" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "3xl" | "none" | "full">>

The CSS border-bottom-radius property

Optional roundedBottomEnd

roundedBottomEnd?: ResponsiveValue<Union<number | "sm" | "md" | "lg" | string & {} | "base" | "xl" | "2xl" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "3xl" | "none" | "full">>

Optional roundedBottomLeft

roundedBottomLeft?: ResponsiveValue<Union<number | "sm" | "md" | "lg" | string & {} | "base" | "xl" | "2xl" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "3xl" | "none" | "full">>

The CSS border-bottom-left-radius property

Optional roundedBottomRight

roundedBottomRight?: ResponsiveValue<Union<number | "sm" | "md" | "lg" | string & {} | "base" | "xl" | "2xl" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "3xl" | "none" | "full">>

The CSS border-bottom-right-radius property

Optional roundedBottomStart

roundedBottomStart?: ResponsiveValue<Union<number | "sm" | "md" | "lg" | string & {} | "base" | "xl" | "2xl" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "3xl" | "none" | "full">>

Optional roundedEnd

roundedEnd?: ResponsiveValue<Union<number | "sm" | "md" | "lg" | string & {} | "base" | "xl" | "2xl" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "3xl" | "none" | "full">>

When direction is ltr, roundedEnd is equivalent to borderRightRadius. When direction is rtl, roundedEnd is equivalent to borderLeftRadius.

Optional roundedLeft

roundedLeft?: ResponsiveValue<Union<number | "sm" | "md" | "lg" | string & {} | "base" | "xl" | "2xl" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "3xl" | "none" | "full">>

The CSS border-left-radius property

Optional roundedRight

roundedRight?: ResponsiveValue<Union<number | "sm" | "md" | "lg" | string & {} | "base" | "xl" | "2xl" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "3xl" | "none" | "full">>

The CSS border-right-radius property

Optional roundedStart

roundedStart?: ResponsiveValue<Union<number | "sm" | "md" | "lg" | string & {} | "base" | "xl" | "2xl" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "3xl" | "none" | "full">>

When direction is ltr, roundedEnd is equivalent to borderRightRadius. When direction is rtl, roundedEnd is equivalent to borderLeftRadius.

Optional roundedTop

roundedTop?: ResponsiveValue<Union<number | "sm" | "md" | "lg" | string & {} | "base" | "xl" | "2xl" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "3xl" | "none" | "full">>

The CSS border-top-radius property

Optional roundedTopEnd

roundedTopEnd?: ResponsiveValue<Union<number | "sm" | "md" | "lg" | string & {} | "base" | "xl" | "2xl" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "3xl" | "none" | "full">>

Optional roundedTopLeft

roundedTopLeft?: ResponsiveValue<Union<number | "sm" | "md" | "lg" | string & {} | "base" | "xl" | "2xl" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "3xl" | "none" | "full">>

The CSS border-top-left-radius property

Optional roundedTopRight

roundedTopRight?: ResponsiveValue<Union<number | "sm" | "md" | "lg" | string & {} | "base" | "xl" | "2xl" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "3xl" | "none" | "full">>

The CSS border-top-right-radius property

Optional roundedTopStart

roundedTopStart?: ResponsiveValue<Union<number | "sm" | "md" | "lg" | string & {} | "base" | "xl" | "2xl" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "3xl" | "none" | "full">>

Optional rowGap

rowGap?: ResponsiveValue<Union<RowGap<Length>>>

The CSS row-gap property.

It sets the size of the gap (gutter) between an element's grid rows.

See

Mozilla Docs

Optional saturate

saturate?: ResponsiveValue<Length>

Sets the saturation filter value of an element. Value is assigned to --chakra-saturate css variable

Optional scale

scale?: ResponsiveValue<Length>

Sets the scale value of the element

Optional scaleX

scaleX?: ResponsiveValue<Length>

Scale value of an elements in the x-direction.

  • Only works if transform=auto
  • It sets the value of --chakra-scale-x

Optional scaleY

scaleY?: ResponsiveValue<Length>

Scale value of an elements in the y-direction.

  • Only works if transform=auto
  • It sets the value of --chakra-scale-y

Optional scrollBehavior

scrollBehavior?: ResponsiveValue<ScrollBehavior>

Optional scrollMargin

scrollMargin?: ResponsiveValue<Union<number | "1" | "2" | "3" | "4" | "5" | "6" | "7" | string & {} | "px" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "-1" | "-2" | "-3" | "-4" | "-5" | "-6" | "-7" | "-8" | "-9" | "-10" | "-12" | "-14" | "-16" | "-20" | "-24" | "-28" | "-32" | "-36" | "-40" | "-44" | "-48" | "-52" | "-56" | "-60" | "-64" | "-72" | "-80" | "-96" | "-px" | "-0.5" | "-1.5" | "-2.5" | "-3.5">>

Optional scrollMarginBottom

scrollMarginBottom?: ResponsiveValue<Union<number | "1" | "2" | "3" | "4" | "5" | "6" | "7" | string & {} | "px" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "-1" | "-2" | "-3" | "-4" | "-5" | "-6" | "-7" | "-8" | "-9" | "-10" | "-12" | "-14" | "-16" | "-20" | "-24" | "-28" | "-32" | "-36" | "-40" | "-44" | "-48" | "-52" | "-56" | "-60" | "-64" | "-72" | "-80" | "-96" | "-px" | "-0.5" | "-1.5" | "-2.5" | "-3.5">>

Optional scrollMarginLeft

scrollMarginLeft?: ResponsiveValue<Union<number | "1" | "2" | "3" | "4" | "5" | "6" | "7" | string & {} | "px" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "-1" | "-2" | "-3" | "-4" | "-5" | "-6" | "-7" | "-8" | "-9" | "-10" | "-12" | "-14" | "-16" | "-20" | "-24" | "-28" | "-32" | "-36" | "-40" | "-44" | "-48" | "-52" | "-56" | "-60" | "-64" | "-72" | "-80" | "-96" | "-px" | "-0.5" | "-1.5" | "-2.5" | "-3.5">>

Optional scrollMarginRight

scrollMarginRight?: ResponsiveValue<Union<number | "1" | "2" | "3" | "4" | "5" | "6" | "7" | string & {} | "px" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "-1" | "-2" | "-3" | "-4" | "-5" | "-6" | "-7" | "-8" | "-9" | "-10" | "-12" | "-14" | "-16" | "-20" | "-24" | "-28" | "-32" | "-36" | "-40" | "-44" | "-48" | "-52" | "-56" | "-60" | "-64" | "-72" | "-80" | "-96" | "-px" | "-0.5" | "-1.5" | "-2.5" | "-3.5">>

Optional scrollMarginTop

scrollMarginTop?: ResponsiveValue<Union<number | "1" | "2" | "3" | "4" | "5" | "6" | "7" | string & {} | "px" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "-1" | "-2" | "-3" | "-4" | "-5" | "-6" | "-7" | "-8" | "-9" | "-10" | "-12" | "-14" | "-16" | "-20" | "-24" | "-28" | "-32" | "-36" | "-40" | "-44" | "-48" | "-52" | "-56" | "-60" | "-64" | "-72" | "-80" | "-96" | "-px" | "-0.5" | "-1.5" | "-2.5" | "-3.5">>

Optional scrollMarginX

scrollMarginX?: ResponsiveValue<Union<number | "1" | "2" | "3" | "4" | "5" | "6" | "7" | string & {} | "px" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "-1" | "-2" | "-3" | "-4" | "-5" | "-6" | "-7" | "-8" | "-9" | "-10" | "-12" | "-14" | "-16" | "-20" | "-24" | "-28" | "-32" | "-36" | "-40" | "-44" | "-48" | "-52" | "-56" | "-60" | "-64" | "-72" | "-80" | "-96" | "-px" | "-0.5" | "-1.5" | "-2.5" | "-3.5">>

Optional scrollMarginY

scrollMarginY?: ResponsiveValue<Union<number | "1" | "2" | "3" | "4" | "5" | "6" | "7" | string & {} | "px" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "-1" | "-2" | "-3" | "-4" | "-5" | "-6" | "-7" | "-8" | "-9" | "-10" | "-12" | "-14" | "-16" | "-20" | "-24" | "-28" | "-32" | "-36" | "-40" | "-44" | "-48" | "-52" | "-56" | "-60" | "-64" | "-72" | "-80" | "-96" | "-px" | "-0.5" | "-1.5" | "-2.5" | "-3.5">>

Optional scrollPadding

scrollPadding?: ResponsiveValue<Union<number | "auto" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | string & {} | "px" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "-1" | "-2" | "-3" | "-4" | "-5" | "-6" | "-7" | "-8" | "-9" | "-10" | "-12" | "-14" | "-16" | "-20" | "-24" | "-28" | "-32" | "-36" | "-40" | "-44" | "-48" | "-52" | "-56" | "-60" | "-64" | "-72" | "-80" | "-96" | "-px" | "-0.5" | "-1.5" | "-2.5" | "-3.5">>

Optional scrollPaddingBottom

scrollPaddingBottom?: ResponsiveValue<Union<number | "auto" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | string & {} | "px" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "-1" | "-2" | "-3" | "-4" | "-5" | "-6" | "-7" | "-8" | "-9" | "-10" | "-12" | "-14" | "-16" | "-20" | "-24" | "-28" | "-32" | "-36" | "-40" | "-44" | "-48" | "-52" | "-56" | "-60" | "-64" | "-72" | "-80" | "-96" | "-px" | "-0.5" | "-1.5" | "-2.5" | "-3.5">>

Optional scrollPaddingLeft

scrollPaddingLeft?: ResponsiveValue<Union<number | "auto" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | string & {} | "px" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "-1" | "-2" | "-3" | "-4" | "-5" | "-6" | "-7" | "-8" | "-9" | "-10" | "-12" | "-14" | "-16" | "-20" | "-24" | "-28" | "-32" | "-36" | "-40" | "-44" | "-48" | "-52" | "-56" | "-60" | "-64" | "-72" | "-80" | "-96" | "-px" | "-0.5" | "-1.5" | "-2.5" | "-3.5">>

Optional scrollPaddingRight

scrollPaddingRight?: ResponsiveValue<Union<number | "auto" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | string & {} | "px" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "-1" | "-2" | "-3" | "-4" | "-5" | "-6" | "-7" | "-8" | "-9" | "-10" | "-12" | "-14" | "-16" | "-20" | "-24" | "-28" | "-32" | "-36" | "-40" | "-44" | "-48" | "-52" | "-56" | "-60" | "-64" | "-72" | "-80" | "-96" | "-px" | "-0.5" | "-1.5" | "-2.5" | "-3.5">>

Optional scrollPaddingTop

scrollPaddingTop?: ResponsiveValue<Union<number | "auto" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | string & {} | "px" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "-1" | "-2" | "-3" | "-4" | "-5" | "-6" | "-7" | "-8" | "-9" | "-10" | "-12" | "-14" | "-16" | "-20" | "-24" | "-28" | "-32" | "-36" | "-40" | "-44" | "-48" | "-52" | "-56" | "-60" | "-64" | "-72" | "-80" | "-96" | "-px" | "-0.5" | "-1.5" | "-2.5" | "-3.5">>

Optional scrollPaddingX

scrollPaddingX?: ResponsiveValue<Union<number | "auto" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | string & {} | "px" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "-1" | "-2" | "-3" | "-4" | "-5" | "-6" | "-7" | "-8" | "-9" | "-10" | "-12" | "-14" | "-16" | "-20" | "-24" | "-28" | "-32" | "-36" | "-40" | "-44" | "-48" | "-52" | "-56" | "-60" | "-64" | "-72" | "-80" | "-96" | "-px" | "-0.5" | "-1.5" | "-2.5" | "-3.5">>

Optional scrollPaddingY

scrollPaddingY?: ResponsiveValue<Union<number | "auto" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | string & {} | "px" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "-1" | "-2" | "-3" | "-4" | "-5" | "-6" | "-7" | "-8" | "-9" | "-10" | "-12" | "-14" | "-16" | "-20" | "-24" | "-28" | "-32" | "-36" | "-40" | "-44" | "-48" | "-52" | "-56" | "-60" | "-64" | "-72" | "-80" | "-96" | "-px" | "-0.5" | "-1.5" | "-2.5" | "-3.5">>

Optional scrollSnapAlign

scrollSnapAlign?: ResponsiveValue<ScrollSnapAlign>

Optional scrollSnapStop

scrollSnapStop?: ResponsiveValue<ScrollSnapStop>

Optional scrollSnapType

scrollSnapType?: ResponsiveValue<ScrollSnapType>

Optional scrollToIndex

scrollToIndex?: ScrollToIndex

Optional searchPlaceholder

searchPlaceholder?: string

Optional security

security?: string

Optional selectedListProps

selectedListProps?: SelectedListProps

Optional selectionVisibleIn

selectionVisibleIn?: SelectionVisibilityMode

Optional shadow

shadow?: ResponsiveValue<Union<number | "sm" | "md" | "lg" | "outline" | "base" | "xl" | "2xl" | "xs" | BoxShadow | "inner" | "dark-lg">>

The box-shadow property

Optional shiftAmount

shiftAmount?: number

Optional single

single?: boolean

Optional size

size?: "sm" | "md" | "lg"

Optional skewX

skewX?: ResponsiveValue<Length>

Skew value of an elements in the x-direction.

  • Only works if transform=auto
  • It sets the value of --chakra-skew-x

Optional skewY

skewY?: ResponsiveValue<Length>

Skew value of an elements in the y-direction.

  • Only works if transform=auto
  • It sets the value of --chakra-skew-y

Optional slot

slot?: string

Optional spellCheck

spellCheck?: Booleanish

Optional srOnly

srOnly?: true | "focusable"

If true, hide an element visually without hiding it from screen readers.

If focusable, the sr-only styles will be undone, making the element visible to sighted users as well as screen readers.

Optional stateReducer

stateReducer?: StateReducer

Optional strategy

strategy?: "fixed" | "absolute"

The CSS positioning strategy to use.

Default

"absolute"

Optional stroke

stroke?: ResponsiveValue<Union<Color | "current" | "whiteAlpha.50" | "whiteAlpha.100" | "whiteAlpha.200" | "whiteAlpha.300" | "whiteAlpha.400" | "whiteAlpha.500" | "whiteAlpha.600" | "whiteAlpha.700" | "whiteAlpha.800" | "whiteAlpha.900" | "blackAlpha.50" | "blackAlpha.100" | "blackAlpha.200" | "blackAlpha.300" | "blackAlpha.400" | "blackAlpha.500" | "blackAlpha.600" | "blackAlpha.700" | "blackAlpha.800" | "blackAlpha.900" | "gray.50" | "gray.100" | "gray.200" | "gray.300" | "gray.400" | "gray.500" | "gray.600" | "gray.700" | "gray.800" | "gray.900" | "red.50" | "red.100" | "red.200" | "red.300" | "red.400" | "red.500" | "red.600" | "red.700" | "red.800" | "red.900" | "orange.50" | "orange.100" | "orange.200" | "orange.300" | "orange.400" | "orange.500" | "orange.600" | "orange.700" | "orange.800" | "orange.900" | "yellow.50" | "yellow.100" | "yellow.200" | "yellow.300" | "yellow.400" | "yellow.500" | "yellow.600" | "yellow.700" | "yellow.800" | "yellow.900" | "green.50" | "green.100" | "green.200" | "green.300" | "green.400" | "green.500" | "green.600" | "green.700" | "green.800" | "green.900" | "teal.50" | "teal.100" | "teal.200" | "teal.300" | "teal.400" | "teal.500" | "teal.600" | "teal.700" | "teal.800" | "teal.900" | "blue.50" | "blue.100" | "blue.200" | "blue.300" | "blue.400" | "blue.500" | "blue.600" | "blue.700" | "blue.800" | "blue.900" | "cyan.50" | "cyan.100" | "cyan.200" | "cyan.300" | "cyan.400" | "cyan.500" | "cyan.600" | "cyan.700" | "cyan.800" | "cyan.900" | "purple.50" | "purple.100" | "purple.200" | "purple.300" | "purple.400" | "purple.500" | "purple.600" | "purple.700" | "purple.800" | "purple.900" | "pink.50" | "pink.100" | "pink.200" | "pink.300" | "pink.400" | "pink.500" | "pink.600" | "pink.700" | "pink.800" | "pink.900" | "linkedin.50" | "linkedin.100" | "linkedin.200" | "linkedin.300" | "linkedin.400" | "linkedin.500" | "linkedin.600" | "linkedin.700" | "linkedin.800" | "linkedin.900" | "facebook.50" | "facebook.100" | "facebook.200" | "facebook.300" | "facebook.400" | "facebook.500" | "facebook.600" | "facebook.700" | "facebook.800" | "facebook.900" | "messenger.50" | "messenger.100" | "messenger.200" | "messenger.300" | "messenger.400" | "messenger.500" | "messenger.600" | "messenger.700" | "messenger.800" | "messenger.900" | "whatsapp.50" | "whatsapp.100" | "whatsapp.200" | "whatsapp.300" | "whatsapp.400" | "whatsapp.500" | "whatsapp.600" | "whatsapp.700" | "whatsapp.800" | "whatsapp.900" | "twitter.50" | "twitter.100" | "twitter.200" | "twitter.300" | "twitter.400" | "twitter.500" | "twitter.600" | "twitter.700" | "twitter.800" | "twitter.900" | "telegram.50" | "telegram.100" | "telegram.200" | "telegram.300" | "telegram.400" | "telegram.500" | "telegram.600" | "telegram.700" | "telegram.800" | "telegram.900" | "chakra-body-text" | "chakra-body-bg" | "chakra-border-color" | "chakra-placeholder-color">>

The CSS stroke property for icon svgs and paths

Optional style

style?: CSSProperties

Optional suppressContentEditableWarning

suppressContentEditableWarning?: boolean

Optional suppressHydrationWarning

suppressHydrationWarning?: boolean

Optional sx

sx?: SystemStyleObject

Used to pass theme-aware style props. NB: This is the public API for user-land

Optional tabIndex

tabIndex?: number

Optional textAlign

textAlign?: ResponsiveValue<TextAlign>

The CSS text-align property

Optional textColor

textColor?: ResponsiveValue<Union<Color | "current" | "whiteAlpha.50" | "whiteAlpha.100" | "whiteAlpha.200" | "whiteAlpha.300" | "whiteAlpha.400" | "whiteAlpha.500" | "whiteAlpha.600" | "whiteAlpha.700" | "whiteAlpha.800" | "whiteAlpha.900" | "blackAlpha.50" | "blackAlpha.100" | "blackAlpha.200" | "blackAlpha.300" | "blackAlpha.400" | "blackAlpha.500" | "blackAlpha.600" | "blackAlpha.700" | "blackAlpha.800" | "blackAlpha.900" | "gray.50" | "gray.100" | "gray.200" | "gray.300" | "gray.400" | "gray.500" | "gray.600" | "gray.700" | "gray.800" | "gray.900" | "red.50" | "red.100" | "red.200" | "red.300" | "red.400" | "red.500" | "red.600" | "red.700" | "red.800" | "red.900" | "orange.50" | "orange.100" | "orange.200" | "orange.300" | "orange.400" | "orange.500" | "orange.600" | "orange.700" | "orange.800" | "orange.900" | "yellow.50" | "yellow.100" | "yellow.200" | "yellow.300" | "yellow.400" | "yellow.500" | "yellow.600" | "yellow.700" | "yellow.800" | "yellow.900" | "green.50" | "green.100" | "green.200" | "green.300" | "green.400" | "green.500" | "green.600" | "green.700" | "green.800" | "green.900" | "teal.50" | "teal.100" | "teal.200" | "teal.300" | "teal.400" | "teal.500" | "teal.600" | "teal.700" | "teal.800" | "teal.900" | "blue.50" | "blue.100" | "blue.200" | "blue.300" | "blue.400" | "blue.500" | "blue.600" | "blue.700" | "blue.800" | "blue.900" | "cyan.50" | "cyan.100" | "cyan.200" | "cyan.300" | "cyan.400" | "cyan.500" | "cyan.600" | "cyan.700" | "cyan.800" | "cyan.900" | "purple.50" | "purple.100" | "purple.200" | "purple.300" | "purple.400" | "purple.500" | "purple.600" | "purple.700" | "purple.800" | "purple.900" | "pink.50" | "pink.100" | "pink.200" | "pink.300" | "pink.400" | "pink.500" | "pink.600" | "pink.700" | "pink.800" | "pink.900" | "linkedin.50" | "linkedin.100" | "linkedin.200" | "linkedin.300" | "linkedin.400" | "linkedin.500" | "linkedin.600" | "linkedin.700" | "linkedin.800" | "linkedin.900" | "facebook.50" | "facebook.100" | "facebook.200" | "facebook.300" | "facebook.400" | "facebook.500" | "facebook.600" | "facebook.700" | "facebook.800" | "facebook.900" | "messenger.50" | "messenger.100" | "messenger.200" | "messenger.300" | "messenger.400" | "messenger.500" | "messenger.600" | "messenger.700" | "messenger.800" | "messenger.900" | "whatsapp.50" | "whatsapp.100" | "whatsapp.200" | "whatsapp.300" | "whatsapp.400" | "whatsapp.500" | "whatsapp.600" | "whatsapp.700" | "whatsapp.800" | "whatsapp.900" | "twitter.50" | "twitter.100" | "twitter.200" | "twitter.300" | "twitter.400" | "twitter.500" | "twitter.600" | "twitter.700" | "twitter.800" | "twitter.900" | "telegram.50" | "telegram.100" | "telegram.200" | "telegram.300" | "telegram.400" | "telegram.500" | "telegram.600" | "telegram.700" | "telegram.800" | "telegram.900" | "chakra-body-text" | "chakra-body-bg" | "chakra-border-color" | "chakra-placeholder-color">>

The CSS color property

Optional textDecor

textDecor?: ResponsiveValue<number | "auto" | "blink" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "aliceblue" | "antiquewhite" | "aqua" | "aquamarine" | "azure" | "beige" | "bisque" | "black" | "blanchedalmond" | "blue" | "blueviolet" | "brown" | "burlywood" | "cadetblue" | "chartreuse" | "chocolate" | "coral" | "cornflowerblue" | "cornsilk" | "crimson" | "cyan" | "darkblue" | "darkcyan" | "darkgoldenrod" | "darkgray" | "darkgreen" | "darkgrey" | "darkkhaki" | "darkmagenta" | "darkolivegreen" | "darkorange" | "darkorchid" | "darkred" | "darksalmon" | "darkseagreen" | "darkslateblue" | "darkslategray" | "darkslategrey" | "darkturquoise" | "darkviolet" | "deeppink" | "deepskyblue" | "dimgray" | "dimgrey" | "dodgerblue" | "firebrick" | "floralwhite" | "forestgreen" | "fuchsia" | "gainsboro" | "ghostwhite" | "gold" | "goldenrod" | "gray" | "green" | "greenyellow" | "grey" | "honeydew" | "hotpink" | "indianred" | "indigo" | "ivory" | "khaki" | "lavender" | "lavenderblush" | "lawngreen" | "lemonchiffon" | "lightblue" | "lightcoral" | "lightcyan" | "lightgoldenrodyellow" | "lightgray" | "lightgreen" | "lightgrey" | "lightpink" | "lightsalmon" | "lightseagreen" | "lightskyblue" | "lightslategray" | "lightslategrey" | "lightsteelblue" | "lightyellow" | "lime" | "limegreen" | "linen" | "magenta" | "maroon" | "mediumaquamarine" | "mediumblue" | "mediumorchid" | "mediumpurple" | "mediumseagreen" | "mediumslateblue" | "mediumspringgreen" | "mediumturquoise" | "mediumvioletred" | "midnightblue" | "mintcream" | "mistyrose" | "moccasin" | "navajowhite" | "navy" | "oldlace" | "olive" | "olivedrab" | "orange" | "orangered" | "orchid" | "palegoldenrod" | "palegreen" | "paleturquoise" | "palevioletred" | "papayawhip" | "peachpuff" | "peru" | "pink" | "plum" | "powderblue" | "purple" | "rebeccapurple" | "red" | "rosybrown" | "royalblue" | "saddlebrown" | "salmon" | "sandybrown" | "seagreen" | "seashell" | "sienna" | "silver" | "skyblue" | "slateblue" | "slategray" | "slategrey" | "snow" | "springgreen" | "steelblue" | "tan" | "teal" | "thistle" | "tomato" | "transparent" | "turquoise" | "violet" | "wheat" | "white" | "whitesmoke" | "yellow" | "yellowgreen" | "ActiveBorder" | "ActiveCaption" | "AppWorkspace" | "Background" | "ButtonFace" | "ButtonHighlight" | "ButtonShadow" | "ButtonText" | "CaptionText" | "GrayText" | "Highlight" | "HighlightText" | "InactiveBorder" | "InactiveCaption" | "InactiveCaptionText" | "InfoBackground" | "InfoText" | "Menu" | "MenuText" | "Scrollbar" | "ThreeDDarkShadow" | "ThreeDFace" | "ThreeDHighlight" | "ThreeDLightShadow" | "ThreeDShadow" | "Window" | "WindowFrame" | "WindowText" | "currentcolor" | "none" | "dashed" | "dotted" | "double" | "solid" | "from-font" | "grammar-error" | "line-through" | "overline" | "spelling-error" | "underline" | "wavy">

The CSS text-decoration property

Optional textDecoration

textDecoration?: ResponsiveValue<number | "auto" | "blink" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "aliceblue" | "antiquewhite" | "aqua" | "aquamarine" | "azure" | "beige" | "bisque" | "black" | "blanchedalmond" | "blue" | "blueviolet" | "brown" | "burlywood" | "cadetblue" | "chartreuse" | "chocolate" | "coral" | "cornflowerblue" | "cornsilk" | "crimson" | "cyan" | "darkblue" | "darkcyan" | "darkgoldenrod" | "darkgray" | "darkgreen" | "darkgrey" | "darkkhaki" | "darkmagenta" | "darkolivegreen" | "darkorange" | "darkorchid" | "darkred" | "darksalmon" | "darkseagreen" | "darkslateblue" | "darkslategray" | "darkslategrey" | "darkturquoise" | "darkviolet" | "deeppink" | "deepskyblue" | "dimgray" | "dimgrey" | "dodgerblue" | "firebrick" | "floralwhite" | "forestgreen" | "fuchsia" | "gainsboro" | "ghostwhite" | "gold" | "goldenrod" | "gray" | "green" | "greenyellow" | "grey" | "honeydew" | "hotpink" | "indianred" | "indigo" | "ivory" | "khaki" | "lavender" | "lavenderblush" | "lawngreen" | "lemonchiffon" | "lightblue" | "lightcoral" | "lightcyan" | "lightgoldenrodyellow" | "lightgray" | "lightgreen" | "lightgrey" | "lightpink" | "lightsalmon" | "lightseagreen" | "lightskyblue" | "lightslategray" | "lightslategrey" | "lightsteelblue" | "lightyellow" | "lime" | "limegreen" | "linen" | "magenta" | "maroon" | "mediumaquamarine" | "mediumblue" | "mediumorchid" | "mediumpurple" | "mediumseagreen" | "mediumslateblue" | "mediumspringgreen" | "mediumturquoise" | "mediumvioletred" | "midnightblue" | "mintcream" | "mistyrose" | "moccasin" | "navajowhite" | "navy" | "oldlace" | "olive" | "olivedrab" | "orange" | "orangered" | "orchid" | "palegoldenrod" | "palegreen" | "paleturquoise" | "palevioletred" | "papayawhip" | "peachpuff" | "peru" | "pink" | "plum" | "powderblue" | "purple" | "rebeccapurple" | "red" | "rosybrown" | "royalblue" | "saddlebrown" | "salmon" | "sandybrown" | "seagreen" | "seashell" | "sienna" | "silver" | "skyblue" | "slateblue" | "slategray" | "slategrey" | "snow" | "springgreen" | "steelblue" | "tan" | "teal" | "thistle" | "tomato" | "transparent" | "turquoise" | "violet" | "wheat" | "white" | "whitesmoke" | "yellow" | "yellowgreen" | "ActiveBorder" | "ActiveCaption" | "AppWorkspace" | "Background" | "ButtonFace" | "ButtonHighlight" | "ButtonShadow" | "ButtonText" | "CaptionText" | "GrayText" | "Highlight" | "HighlightText" | "InactiveBorder" | "InactiveCaption" | "InactiveCaptionText" | "InfoBackground" | "InfoText" | "Menu" | "MenuText" | "Scrollbar" | "ThreeDDarkShadow" | "ThreeDFace" | "ThreeDHighlight" | "ThreeDLightShadow" | "ThreeDShadow" | "Window" | "WindowFrame" | "WindowText" | "currentcolor" | "none" | "dashed" | "dotted" | "double" | "solid" | "from-font" | "grammar-error" | "line-through" | "overline" | "spelling-error" | "underline" | "wavy">

The CSS text-decoration property

Optional textDecorationColor

textDecorationColor?: ResponsiveValue<Union<"current" | "whiteAlpha.50" | "whiteAlpha.100" | "whiteAlpha.200" | "whiteAlpha.300" | "whiteAlpha.400" | "whiteAlpha.500" | "whiteAlpha.600" | "whiteAlpha.700" | "whiteAlpha.800" | "whiteAlpha.900" | "blackAlpha.50" | "blackAlpha.100" | "blackAlpha.200" | "blackAlpha.300" | "blackAlpha.400" | "blackAlpha.500" | "blackAlpha.600" | "blackAlpha.700" | "blackAlpha.800" | "blackAlpha.900" | "gray.50" | "gray.100" | "gray.200" | "gray.300" | "gray.400" | "gray.500" | "gray.600" | "gray.700" | "gray.800" | "gray.900" | "red.50" | "red.100" | "red.200" | "red.300" | "red.400" | "red.500" | "red.600" | "red.700" | "red.800" | "red.900" | "orange.50" | "orange.100" | "orange.200" | "orange.300" | "orange.400" | "orange.500" | "orange.600" | "orange.700" | "orange.800" | "orange.900" | "yellow.50" | "yellow.100" | "yellow.200" | "yellow.300" | "yellow.400" | "yellow.500" | "yellow.600" | "yellow.700" | "yellow.800" | "yellow.900" | "green.50" | "green.100" | "green.200" | "green.300" | "green.400" | "green.500" | "green.600" | "green.700" | "green.800" | "green.900" | "teal.50" | "teal.100" | "teal.200" | "teal.300" | "teal.400" | "teal.500" | "teal.600" | "teal.700" | "teal.800" | "teal.900" | "blue.50" | "blue.100" | "blue.200" | "blue.300" | "blue.400" | "blue.500" | "blue.600" | "blue.700" | "blue.800" | "blue.900" | "cyan.50" | "cyan.100" | "cyan.200" | "cyan.300" | "cyan.400" | "cyan.500" | "cyan.600" | "cyan.700" | "cyan.800" | "cyan.900" | "purple.50" | "purple.100" | "purple.200" | "purple.300" | "purple.400" | "purple.500" | "purple.600" | "purple.700" | "purple.800" | "purple.900" | "pink.50" | "pink.100" | "pink.200" | "pink.300" | "pink.400" | "pink.500" | "pink.600" | "pink.700" | "pink.800" | "pink.900" | "linkedin.50" | "linkedin.100" | "linkedin.200" | "linkedin.300" | "linkedin.400" | "linkedin.500" | "linkedin.600" | "linkedin.700" | "linkedin.800" | "linkedin.900" | "facebook.50" | "facebook.100" | "facebook.200" | "facebook.300" | "facebook.400" | "facebook.500" | "facebook.600" | "facebook.700" | "facebook.800" | "facebook.900" | "messenger.50" | "messenger.100" | "messenger.200" | "messenger.300" | "messenger.400" | "messenger.500" | "messenger.600" | "messenger.700" | "messenger.800" | "messenger.900" | "whatsapp.50" | "whatsapp.100" | "whatsapp.200" | "whatsapp.300" | "whatsapp.400" | "whatsapp.500" | "whatsapp.600" | "whatsapp.700" | "whatsapp.800" | "whatsapp.900" | "twitter.50" | "twitter.100" | "twitter.200" | "twitter.300" | "twitter.400" | "twitter.500" | "twitter.600" | "twitter.700" | "twitter.800" | "twitter.900" | "telegram.50" | "telegram.100" | "telegram.200" | "telegram.300" | "telegram.400" | "telegram.500" | "telegram.600" | "telegram.700" | "telegram.800" | "telegram.900" | "chakra-body-text" | "chakra-body-bg" | "chakra-border-color" | "chakra-placeholder-color" | TextDecorationColor>>

The CSS text-decoration-color property

Optional textDecorationLine

textDecorationLine?: ResponsiveValue<TextDecorationLine>

The CSS text-decoration-line property

Optional textDecorationStyle

textDecorationStyle?: ResponsiveValue<TextDecorationStyle>

The CSS text-decoration-style property

Optional textDecorationThickness

textDecorationThickness?: ResponsiveValue<TextDecorationThickness<0 | string & {}>>

The CSS text-decoration-thickness property

Optional textOverflow

textOverflow?: ResponsiveValue<TextOverflow>

The CSS text-overflow property

Optional textShadow

textShadow?: ResponsiveValue<Union<number | "sm" | "md" | "lg" | "outline" | "base" | "xl" | "2xl" | "xs" | "inner" | "dark-lg" | TextShadow>>

The text-shadow property

Optional textStyle

textStyle?: ResponsiveValue<string & {}>

The text style object to apply. Note: Styles must be located in theme.textStyles

Optional textTransform

textTransform?: ResponsiveValue<TextTransform>

The CSS text-transform property

Optional textUnderlineOffset

textUnderlineOffset?: ResponsiveValue<number | "auto" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset">

The CSS text-underline-offset property

Optional title

title?: string

Optional top

top?: ResponsiveValue<Union<number | "sm" | "md" | "lg" | "auto" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | string & {} | "px" | "xl" | "2xl" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "3xs" | "2xs" | "xs" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "max" | "min" | "full" | "prose" | "container.sm" | "container.md" | "container.lg" | "container.xl">>

The CSS top property

Optional transform

transform?: ResponsiveValue<"auto" | Transform | "auto-gpu">

The CSS transform property

Optional transformOrigin

transformOrigin?: ResponsiveValue<Union<number | "center" | "top" | "left" | "sm" | "md" | "lg" | "bottom" | "right" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | string & {} | "px" | "xl" | "2xl" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "3xs" | "2xs" | "xs" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "max" | "min" | "full" | "prose" | "container.sm" | "container.md" | "container.lg" | "container.xl">>

The CSS transform-origin property

Optional transition

transition?: ResponsiveValue<Transition<string & {}>>

The CSS transition property

Optional transitionDelay

transitionDelay?: ResponsiveValue<TransitionDelay<string & {}>>

The CSS transition-delay property

Optional transitionDuration

transitionDuration?: ResponsiveValue<string>

The CSS transition-duration property

Optional transitionProperty

transitionProperty?: ResponsiveValue<TransitionProperty>

The CSS transition-property property

Optional transitionTimingFunction

transitionTimingFunction?: ResponsiveValue<TransitionTimingFunction>

The CSS transition-timing-function property

Optional translate

translate?: "yes" | "no"

Optional translateX

translateX?: ResponsiveValue<Length>

Translate value of an elements in the x-direction.

  • Only works if transform=auto
  • It sets the value of --chakra-translate-x

Optional translateY

translateY?: ResponsiveValue<Length>

Translate value of an elements in the y-direction.

  • Only works if transform=auto
  • It sets the value of --chakra-translate-y

Optional typeof

typeof?: string

Optional unselectable

unselectable?: "on" | "off"

Optional userSelect

userSelect?: ResponsiveValue<UserSelect>

The CSS user-select property

Optional value

value?: any

Optional verticalAlign

verticalAlign?: ResponsiveValue<VerticalAlign<Length>>

The CSS vertical-align property

Optional visibility

visibility?: ResponsiveValue<Visibility>

The CSS visibility property

Optional vocab

vocab?: string

Optional w

w?: ResponsiveValue<Union<number | "sm" | "md" | "lg" | "auto" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | string & {} | "px" | "xl" | "2xl" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "3xs" | "2xs" | "xs" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "-moz-fit-content" | "-moz-max-content" | "-moz-min-content" | "fit-content" | "max-content" | "min-content" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "max" | "min" | "full" | "prose" | "container.sm" | "container.md" | "container.lg" | "container.xl" | "-webkit-fit-content" | "-webkit-max-content" | "intrinsic" | "min-intrinsic">>

The CSS width property

Optional whiteSpace

whiteSpace?: ResponsiveValue<WhiteSpace>

The CSS white-space property

Optional width

width?: ResponsiveValue<Union<number | "sm" | "md" | "lg" | "auto" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | string & {} | "px" | "xl" | "2xl" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "3xs" | "2xs" | "xs" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "-moz-fit-content" | "-moz-max-content" | "-moz-min-content" | "fit-content" | "max-content" | "min-content" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "max" | "min" | "full" | "prose" | "container.sm" | "container.md" | "container.lg" | "container.xl" | "-webkit-fit-content" | "-webkit-max-content" | "intrinsic" | "min-intrinsic">>

The CSS width property

Optional willChange

willChange?: ResponsiveValue<WillChange>

The CSS will-change property

Optional wordBreak

wordBreak?: ResponsiveValue<WordBreak>

The CSS word-break property

Optional zIndex

zIndex?: ResponsiveValue<Union<"base" | "overlay" | "hide" | "sticky" | ZIndex | "docked" | "dropdown" | "banner" | "modal" | "popover" | "skipLink" | "toast" | "tooltip">>

The CSS z-index property

Settings

Member Visibility

Theme

Generated using TypeDoc