Build faster with Premium Chakra UI Components 💎

Learn more
Skip to Content
DocsEnterpriseBlogShowcase
Sponsor

Interactivity

JSX style props to enhance interactivity on an element

Accent Color

Use the accentColor prop to set the accent color for browser generated user-interface controls.

// hardcoded
<label>
  <chakra.input type="checkbox" accentColor="#3b82f6" />
</label>

// token value
<label>
  <chakra.input type="checkbox" accentColor="blue.500" />
</label>
PropCSS PropertyToken Category
accentColoraccent-colorcolors

Appearance

Use the appearance prop to set the appearance of an element.

<chakra.select appearance="none">
  <option value="1">Option 1</option>
  <option value="2">Option 2</option>
  <option value="3">Option 3</option>
</chakra.select>
PropCSS PropertyToken Category
appearanceappearance-

Caret Color

Use the caretColor prop to set the color of the text cursor (caret) in an input or textarea

// hardcoded
<chakra.input caretColor="#3b82f6" />

// token value
<chakra.input caretColor="blue.500" />
PropCSS PropertyToken Category
caretColorcaret-colorcolors

Cursor

Use the cursor prop to set the mouse cursor image to show when the mouse pointer is over an element.

<Box cursor="pointer" />
PropCSS PropertyToken Category
cursorcursor-

Pointer Events

Use the pointerEvents prop to control how pointer events are handled on an element.

<Box pointerEvents="none">Can't click me</Box>
PropCSS PropertyToken Category
pointerEventspointer-events-

Resize

Use the resize prop to control whether an element is resizable, and if so, in which directions.

<chakra.textarea resize="both" />
<chakra.textarea resize="horizontal" />
<chakra.textarea resize="vertical" />
PropCSS PropertyToken Category
resizeresize-

Scrollbar

Use the scrollbar prop to customize the appearance of scrollbars.

<Box scrollbar="hidden" maxH="100px" overflowY="auto">
  Scrollbar hidden
</Box>

Scroll Behavior

Use the scrollBehavior prop to set the behavior for a scrolling box when scrolling is triggered by the navigation or JavaScript code.

<Box maxH="100px" overflowY="auto" scrollBehavior="smooth">
  <div>Scroll me</div>
</Box>
PropCSS PropertyToken Category
scrollBehaviorscroll-behavior-

Scroll Margin

Use the scrollMargin* prop to set margins around scroll containers.

<Box maxH="100px" overflowY="auto" scrollMarginY="2">
  Scrollbar Container with block padding
</Box>
PropCSS PropertyToken Category
scrollMarginX ,scrollMarginInlinescroll-margin-inlinespacing
scrollMarginInlineStartscroll-margin-inline-startspacing
scrollMarginInlineEndscroll-margin-inline-endspacing
scrollMarginY , scrollMarginBlockscroll-margin-blockspacing
scrollMarginBlockStartscroll-margin-block-startspacing
scrollMarginBlockEndscroll-margin-block-endspacing
scrollMarginLeftscroll-margin-leftspacing
scrollMarginRightscroll-margin-rightspacing
scrollMarginTopscroll-margin-topspacing
scrollMarginBottomscroll-margin-bottomspacing

Scroll Padding

Use the scrollPadding* prop to set padding inside scroll containers.

<Box maxH="100px" overflowY="auto" scrollPaddingY="2">
  Scrollbar Container with block padding
</Box>
PropCSS PropertyToken Category
scrollPaddingX , scrollPaddingInlinescroll-padding-inlinespacing
scrollPaddingInlineStartscroll-padding-inline-startspacing
scrollPaddingInlineEndscroll-padding-inline-endspacing
scrollPaddingY , scrollPaddingBlockscroll-padding-blockspacing
scrollPaddingBlockStartscroll-padding-block-startspacing
scrollPaddingBlockEndscroll-padding-block-endspacing
scrollPaddingLeftscroll-padding-leftspacing
scrollPaddingRightscroll-padding-rightspacing
scrollPaddingTopscroll-padding-topspacing
scrollPaddingBottomscroll-padding-bottomspacing

Scroll Snap Margin

Use the scrollSnapMargin* prop to set margins around scroll containers.

<Box maxH="100px" overflowY="auto" scrollSnapMarginY="2">
  Scrollbar Container with block padding
</Box>
PropCSS PropertyToken Category
scrollSnapMarginscroll-marginspacing
scrollSnapMarginTopscroll-margin-topspacing
scrollSnapMarginBottomscroll-margin-bottomspacing
scrollSnapMarginLeftscroll-margin-leftspacing
scrollSnapMarginRightscroll-margin-rightspacing

Scroll Snap Type

Use the scrollSnapType prop to control how strictly snap points are enforced in a scroll container.

<Box maxH="100px" overflowY="auto" scrollSnapType="x">
  Scroll container with x snap type
</Box>
Value
nonenone
xx var(--scroll-snap-strictness)
yy var(--scroll-snap-strictness)
bothboth var(--scroll-snap-strictness)

Scroll Snap Strictness

Use the scrollSnapStrictness prop to set the scroll snap strictness of an element. This requires scrollSnapType to be set to x,y or both.

It's values can be mandatory or proximity values, and maps to var(--scroll-snap-strictness).

<Box maxH="100px" overflowY="auto" scrollSnapStrictness="proximity">
  <Box>Item 1</Box>
  <Box>Item 2</Box>
</Box>
PropCSS PropertyToken Category
scrollSnapStrictness--scroll-snap-strictness-

Touch Action

Use the touchAction prop to control how an element's region can be manipulated by a touchscreen user

<Box touchAction="none" />
PropCSS PropertyToken Category
touchActiontouch-action-

User Select

Use the userSelect prop to control whether the user can select text within an element.

<Box userSelect="none">
  <p>Can't Select me</p>
</Box>
PropCSS PropertyToken Category
userSelectuser-select-

Will Change

Use the willChange prop to hint browsers how an element's property is expected to change.

<Box willChange="transform" />
PropCSS PropertyToken Category
willChangewill-change-

Previous

Flex and Grid

Next

Layout