useControllableState

State that works controlled or uncontrolled, like native inputs.

HooksState@gaudi/design-system/hooks/state/use-controllable-stateView in Storybook Source

The component owns the state until its host passes value; then the host accepts, refuses or replaces each change offered through onChange. The setter takes a value or an updater and skips unchanged values. DataTable uses it.

Usage

import { useControllableState } from '@gaudi/design-system/hooks';
function Rating({ value, defaultValue = 0, onChange }) {  const [rating, setRating] = useControllableState({ value, defaultValue, onChange });}

Examples

Uncontrolled

Storybook

Controlled, with the host refusing changes

Storybook

API

3 options

2 return values

Accessibility

Controlled components must still reflect every change visibly and to assistive technology (checked, expanded, selected), even when the host refuses it.

Notes

Decide once: switching between controlled and uncontrolled during a component life is not supported.

DataTableDataTable is a TanStack table with a compact data anatomy: shared headers that preserve label casing, hairline rows, synced column and row hover, a tinted wash for selected rows, and declarative column alignment, width and pinning. It adds search with a live count, single or multi-column sorting, selection with bulk actions, expandable rows, row action menus, pinned rows, grouped bands, a totals footer, sticky headers, automatic virtualization, pagination or load-more, CSV export, and loading, refreshing, empty and error states. Sorting, selection, expansion and pinning work controlled or uncontrolled.19 examples useBooleanGeneric boolean state with stable toggle, enable and disable actions.useCountdownA pausable countdown or count-up that stops at its target.useCounterA number with increment, decrement, set and reset actions.useDebounceCallbackA debounced function with cancel and flush.useDebounceValueA value that updates only after it stops changing.