Most Chakra components use the
useControllableState for seamlessly managing
both controlled or uncontrolled state scenarios.
Given a prop value and state value, the
useControllableProp hook is used to
determine whether a component is controlled or uncontrolled, and also returns
the computed value.
useControllableState hook returns the state and function that updates the
state, just like
useControllableState, you can pass an initial state (using
defaultValue) implying the component is uncontrolled, or you can pass a
controlled value (using
value) implying the component is controlled.
Here's an example of an uncontrolled state.
Here's an example of a controlled state.
This hook provides helpful error or warning messages when you switch between
controlled or uncontrolled modes or when you attempt to update the
|defaultValue||The initial value to be used, in uncontrolled mode||-|
|name||The component name (for warnings)||-|
|onChange||The callback fired when the value changes||-|
|propsMap||A mapping for the props to give more contextual warning messages. In some components `value` might be called `index`, and defaultValue might be called `defaultIndex`, so this map helps us generate contextual warning messages||-|
|value||The value to used in controlled mode||-|