createId

Generate unique, SSR-safe identifiers for accessibility relationships and form controls.

createId generates unique string identifiers for accessibility bindings (aria-labelledby, aria-describedby, aria-controls, for). It prioritizes user-supplied deterministic IDs when provided and falls back to prefixed, auto-generated unique IDs.

Import#

import { createId } from 'moraine/utils'

Signature#

function createId(
  deterministicId?: () => string | null | undefined,
  prefix = 'mo',
): Accessor<string>

Usage Example#

src/CustomField.tsx

import { createId } from 'moraine/utils'

interface CustomFieldProps {
  id?: string
  label: string
}

export function CustomField(props: CustomFieldProps) {
  // Uses props.id if supplied; otherwise generates a unique "input-..." ID.
  const inputId = createId(() => props.id, 'input')
  const descriptionId = () => `${inputId()}-desc`

  return (
    <div>
      <label for={inputId()}>{props.label}</label>
      <input
        id={inputId()}
        aria-describedby={descriptionId()}
        class="border px-3 py-1.5 rounded-md"
      />
      <p id={descriptionId()} class="text-xs text-muted-foreground">
        Required field
      </p>
    </div>
  )
}

Priority Rules#

If deterministicId is provided and returns a non-empty string, that string is returned.
If deterministicId is omitted, null, or undefined, a unique ID with the specified prefix (default: 'mo') is generated using Solid’s createUniqueId().