useId

import { useId } from 'react';

function FormField({ label, type = 'text' }: { label: string; type?: string }) {
  const id = useId();

  return (
    <div>
      <label htmlFor={id}>{label}</label>
      <input id={id} type={type} />
    </div>
  );
}

// Each instance gets a unique ID:
// <FormField label="Name" />    → id=":r1:"
// <FormField label="Email" />   → id=":r2:"

import { useId, useState } from 'react';

function ValidatedInput({ label, validate }: {
  label: string;
  validate: (v: string) => string | null;
}) {
  const id = useId();
  const errorId = `${id}-error`;
  const [value, setValue] = useState('');
  const error = validate(value);

  return (
    <div>
      <label htmlFor={id}>{label}</label>
      <input
        id={id}
        value={value}
        onChange={e => setValue(e.target.value)}
        aria-invalid={!!error}
        aria-describedby={error ? errorId : undefined}
      />
      {error && <p id={errorId} role="alert" style={{ color: 'red' }}>{error}</p>}
    </div>
  );
}

import { useId } from 'react';

function Accordion({ title, children }: { title: string; children: React.ReactNode }) {
  const id = useId();
  const headerId = `${id}-header`;
  const panelId = `${id}-panel`;

  return (
    <div>
      <h3>
        <button
          id={headerId}
          aria-expanded="true"
          aria-controls={panelId}
        >
          {title}
        </button>
      </h3>
      <div
        id={panelId}
        role="region"
        aria-labelledby={headerId}
      >
        {children}
      </div>
    </div>
  );
}