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>

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>

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

Cursor

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

<Box cursor="pointer" />

Pointer Events

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

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

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

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>

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>

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>

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>

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>

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>

Touch Action

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

<Box touchAction="none" />

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>

Will Change

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

<Box willChange="transform" />