Interactivity

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>

Prop	CSS Property	Token Category
accentColor	accent-color	colors

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>

Prop	CSS Property	Token Category
appearance	appearance	-

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" />

Prop	CSS Property	Token Category
caretColor	caret-color	colors

Cursor

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

<Box cursor="pointer" />

Prop	CSS Property	Token Category
cursor	cursor	-

Pointer Events

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

<Box pointerEvents="none">Can't click me</Box>

Prop	CSS Property	Token Category
pointerEvents	pointer-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" />

Prop	CSS Property	Token Category
resize	resize	-

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>

Prop	CSS Property	Token Category
scrollBehavior	scroll-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>

Prop	CSS Property	Token Category
scrollMarginX ,scrollMarginInline	scroll-margin-inline	spacing
scrollMarginInlineStart	scroll-margin-inline-start	spacing
scrollMarginInlineEnd	scroll-margin-inline-end	spacing
scrollMarginY , scrollMarginBlock	scroll-margin-block	spacing
scrollMarginBlockStart	scroll-margin-block-start	spacing
scrollMarginBlockEnd	scroll-margin-block-end	spacing
scrollMarginLeft	scroll-margin-left	spacing
scrollMarginRight	scroll-margin-right	spacing
scrollMarginTop	scroll-margin-top	spacing
scrollMarginBottom	scroll-margin-bottom	spacing

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>

Prop	CSS Property	Token Category
scrollPaddingX , scrollPaddingInline	scroll-padding-inline	spacing
scrollPaddingInlineStart	scroll-padding-inline-start	spacing
scrollPaddingInlineEnd	scroll-padding-inline-end	spacing
scrollPaddingY , scrollPaddingBlock	scroll-padding-block	spacing
scrollPaddingBlockStart	scroll-padding-block-start	spacing
scrollPaddingBlockEnd	scroll-padding-block-end	spacing
scrollPaddingLeft	scroll-padding-left	spacing
scrollPaddingRight	scroll-padding-right	spacing
scrollPaddingTop	scroll-padding-top	spacing
scrollPaddingBottom	scroll-padding-bottom	spacing

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>

Prop	CSS Property	Token Category
scrollSnapMargin	scroll-margin	spacing
scrollSnapMarginTop	scroll-margin-top	spacing
scrollSnapMarginBottom	scroll-margin-bottom	spacing
scrollSnapMarginLeft	scroll-margin-left	spacing
scrollSnapMarginRight	scroll-margin-right	spacing

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
none	none
x	x var(--scroll-snap-strictness)
y	y var(--scroll-snap-strictness)
both	both 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>

Prop	CSS Property	Token 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" />

Prop	CSS Property	Token Category
touchAction	touch-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>

Prop	CSS Property	Token Category
userSelect	user-select	-

Will Change

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

<Box willChange="transform" />

Prop	CSS Property	Token Category
willChange	will-change	-