Skip to content


React hook that generates a unique ID using the uuid package.

useId is primarily used when creating relationships between elements, e.g.:

  • Linking form elements to their labels using the for attribute
  • Linking a form to its submit button when the submit button lives outside of the <form> element
  • Linking descriptive text to a UI element to improve accessibility
    • aria-describedby and aria-labelledby are used to help screen readers understand the UI
import { useId } from '@gusto/workbench';
const id = useId();
// id === '167fceaf-52a9-42cd-b1a9-9b00ebfd8e47';