[docs] Use React.useId() for demo IDs

[Janpot]

Summary

Accordion, menu, radio, select, text-field, and slider demos use hardcoded IDs for aria-controls / aria-labelledby / aria-describedby / htmlFor. When users copy these snippets into apps and render multiple instances, duplicate IDs end up in the DOM and break assistive tech.

Switch to React.useId() so each rendered instance gets a unique base ID.

Relates to mui/mui-public#1241

Pattern

Each demo calls React.useId() once per logical control and derives all related IDs from it via template literals — even when the control only exposes a single ID. This keeps the shape of the code identical across demos with one ID and demos with several.

const id = React.useId();

<FormLabel id={`${id}-label`}>Gender</FormLabel>
<RadioGroup aria-labelledby={`${id}-label`}>

The alternative — one useId() per ID role, named by role — was considered and rejected. It reads fine for a single-ID case but demos with multiple related IDs end up with a noisy prologue and no common prefix tying the IDs to the same control:

const labelId = React.useId();
const helperTextId = React.useId();

<InputLabel id={labelId}>Age</InputLabel>
<Select labelId={labelId} aria-describedby={helperTextId}>...</Select>
<FormHelperText id={helperTextId}>...</FormHelperText>

Preview: https://deploy-preview-48300--material-ui.netlify.app/material-ui/react-accordion/

[code-infra-dashboard]

Bundle size

Bundle	Parsed size	Gzip size
@mui/material	0B(0.00%)	0B(0.00%)
@mui/lab	0B(0.00%)	0B(0.00%)
@mui/private-theming	0B(0.00%)	0B(0.00%)
@mui/system	0B(0.00%)	0B(0.00%)
@mui/utils	0B(0.00%)	0B(0.00%)

Details of bundle changes

Deploy preview

https://deploy-preview-48300--material-ui.netlify.app/

---

Check out the code infra dashboard for more information about this PR.

[oliviertassinari]

Oh, I thought we already had an issue for this, created #48305.

[mj12albert]

FWIW thse also rely on manual ids https://mui.com/material-ui/react-select/#basic-select

[Janpot]

FWIW these also rely on manual ids https://mui.com/material-ui/react-select/#basic-select

I'lll take a look, I only fixed the ones that were causing duplicate ids in our html.

[ZeeshanTamboli]

Looks good to me. We should include as much of this as possible by default within the components.

[oliviertassinari]

We should include as much of this as possible by default within the components.

@ZeeshanTamboli True. Now, migrating all the demos from hard-coded IDs to React.useId() feels like it helps; we can count the number of demos that have a random ID, a clear measure for progress.

---

I don't know if this makes the demos more portable, though. There are conflicting forces:

1. It's a pain to copy the snippet and add the ID generator at the top of the component.
2. It's more accurate in practice with unique IDs.
3. AI can solve 1. to a good extent.