generating unique IDs that can be passed to
accessibility attributes.

    
    
    const id = useId()

  * Reference 
    * ` useId() `
  * Usage 
    * Generating unique IDs for accessibility attributes 
    * Generating IDs for several related elements 
    * Specifying a shared prefix for all generated IDs 
    * Using the same ID prefix on the client and the server 

* * *

##  Reference

###  ` useId() `

Call ` useId ` at the top level of your component to generate a unique ID:

    
    
    import { useId } from 'react';  
    
    
      
    
    
    function PasswordField() {  
    
    
      const passwordHintId = useId();  
    
    
      // ...

See more examples below.

####  Parameters

` useId ` does not take any parameters.

####  Returns

` useId ` returns a unique ID string associated with this particular ` useId `
call in this particular component.

####  Caveats

  * ` useId ` is a Hook, so you can only call it **at the top level of your component** or your own Hooks. You can’t call it inside loops or conditions. If you need that, extract a new component and move the state into it. 

  * ` useId ` **should not be used to generate keys** in a list. [ Keys should be generated from your data. ](/learn/rendering-lists#where-to-get-your-key)

* * *

##  Usage

###  Pitfall

**Do not call` useId ` to generate keys in a list. ** [ Keys should be
generated from your data. ](/learn/rendering-lists#where-to-get-your-key)

###  Generating unique IDs for accessibility attributes

Call ` useId ` at the top level of your component to generate a unique ID:

    
    
    import { useId } from 'react';  
    
    
      
    
    
    function PasswordField() {  
    
    
      const passwordHintId = useId();  
    
    
      // ...

You can then pass the  generated ID  to different attributes:

    
    
    <>  
    
    
      <input type="password" aria-describedby={passwordHintId} />  
    
    
      <p id={passwordHintId}>  
    
    
    </>

**Let’s walk through an example to see when this is useful.**

[ HTML accessibility attributes ](https://developer.mozilla.org/en-
US/docs/Web/Accessibility/ARIA) like [ ` aria-describedby `
](https://developer.mozilla.org/en-
US/docs/Web/Accessibility/ARIA/Attributes/aria-describedby) let you specify
that two tags are related to each other. For example, you can specify that an
element (like an input) is described by another element (like a paragraph).

In regular HTML, you would write it like this:

    
    
    <label>  
    
    
      Password:  
    
    
      <input  
    
    
        type="password"  
    
    
        aria-describedby="password-hint"  
    
    
      />  
    
    
    </label>  
    
    
    <p id="password-hint">  
    
    
      The password should contain at least 18 characters  
    
    
    </p>

However, hardcoding IDs like this is not a good practice in React. A component
may be rendered more than once on the page—but IDs have to be unique! Instead
of hardcoding an ID, generate a unique ID with ` useId ` :

    
    
    import { useId } from 'react';  
    
    
      
    
    
    function PasswordField() {  
    
    
      const passwordHintId = useId();  
    
    
      return (  
    
    
        <>  
    
    
          <label>  
    
    
            Password:  
    
    
            <input  
    
    
              type="password"  
    
    
              aria-describedby={passwordHintId}  
    
    
            />  
    
    
          </label>  
    
    
          <p id={passwordHintId}>  
    
    
            The password should contain at least 18 characters  
    
    
          </p>  
    
    
        </>  
    
    
      );  
    
    
    }

Now, even if ` PasswordField ` appears multiple times on the screen, the
generated IDs won’t clash.

App.js

App.js

Reset  [ Fork
](https://codesandbox.io/api/v1/sandboxes/define?undefined&environment=create-
react-app "Open in CodeSandbox")

    
    
    import {