useId

Check out the official React docs!

For more detailed information about React concepts and APIs, please refer to the official documentation for useId.

---

useId generates a unique ID. This can be used for accessibility and associating elements, such as labels and inputs, in your components.

useId helps ensure that IDs are unique across server and client renders, which is important for accessibility and forms. It is especially useful when rendering multiple components that need unique IDs.

[<ReactComponent(true)>]
let UseId() =
    let id = React.useId()
    // ... use the id in your component

Enter your name:

Generated id: _R_2ea7dalbah_

Show code

module Example.UseId

open Feliz

[<ReactComponent(true)>]
let UseId() =
    let id: string = React.useId()
    Html.div [
        Html.label [
            prop.htmlFor id
            prop.text "Enter your name:"
        ]
        Html.input [
            prop.id id
            prop.type'.text
        ]
        Html.p [ prop.text $"Generated id: {id}" ]
    ]