UsernameAvailabilityInput

Workspace address

example.com/

Try “team” to see a taken address.

Submit enabled: no

import { useState } from 'react';
import { Field, FieldDescription, FieldLabel, UsernameAvailabilityInput, type AsyncValidationStatus, type AsyncValidator } from '@rookcom/monarch-react';

const TAKEN = new Set(['admin', 'help', 'support', 'team']);

const demoCheck: AsyncValidator = (value, signal) => {
  if (value.length < 3) return { valid: false, message: 'Use at least 3 characters.' };
  if (!/^[a-z0-9-]+$/.test(value))
    return { valid: false, message: 'Use lowercase letters, numbers and hyphens.' };
  return new Promise((resolve, reject) => {
    const t = setTimeout(
      () =>
        resolve(
          TAKEN.has(value) ? { valid: false, message: 'That address is taken.' } : { valid: true },
        ),
      600,
    );
    signal.addEventListener('abort', () => {
      clearTimeout(t);
      reject(new DOMException('Aborted', 'AbortError'));
    });
  });
};

const slugify = (raw: string) =>
  raw
    .toLowerCase()
    .replace(/\s+/g, '-')
    .replace(/[^a-z0-9-]/g, '');

function AddressDemo() {
  const [status, setStatus] = useState<AsyncValidationStatus>('idle');
  return (
    <div style={{ width: '100%', maxWidth: 300 }}>
      <Field required>
        <FieldLabel>Workspace address</FieldLabel>
        <UsernameAvailabilityInput
          prefix="example.com/"
          placeholder="your-team"
          validate={demoCheck}
          transform={slugify}
          onStatusChange={(s) => setStatus(s)}
        />
        <FieldDescription>Try “team” to see a taken address.</FieldDescription>
      </Field>
      <p style={{ margin: '8px 0 0', fontSize: 13 }}>
        Submit enabled: {status === 'valid' ? 'yes' : 'no'}
      </p>
    </div>
  );
}

<AddressDemo />

Usage examples

Settled states

import { UsernameAvailabilityInput } from '@rookcom/monarch-react';

<div style={{ display: 'grid', gap: 12, width: '100%', maxWidth: 300 }}>
  <UsernameAvailabilityInput
    aria-label="Available handle"
    defaultValue="maya-lee"
    validate={() => ({ valid: true })}
    debounce={0}
  />
  <UsernameAvailabilityInput
    aria-label="Taken handle"
    defaultValue="admin"
    validate={() => ({ valid: false, message: 'That handle is taken.' })}
    debounce={0}
  />
</div>

Purpose

A text input whose value is checked while the user types, such as a handle, workspace address or slug. The product supplies the check; the component debounces it, drops stale answers, shows the status and announces the result.

Use when

A value must be unique or otherwise approved by a server before the form can be sent.
The user benefits from knowing the answer before submitting (handles, addresses, slugs).

Avoid when

Validation is purely local: use Input with FieldError.
The check is expensive or rate-limited per keystroke: validate on submit instead.

Design principles

Generic by design: the product passes validate, so restricted names and lookups stay in the product.
Status is never colour alone: every state has an icon and a text message.
Only settled results are announced; "checking" is shown, not spoken on every pause.
The latest value always wins: earlier checks are aborted and their late answers ignored.

API reference

import { UsernameAvailabilityInput, useAsyncValidation } from '@rookcom/monarch-react';

Export	Kind	Rendering	Root class
`UsernameAvailabilityInput`	component	client	`.mn-username-availability-input`
`useAsyncValidation`	hook	client	–

useAsyncValidation(value, validate, { debounce }) is the same logic as a hook, returning { status, message, revalidate }, for products that need it on another control.

The ref and native input props go to the <input>; className goes to the .mn-username-availability-input wrapper.

Generated from the TypeScript declarations of packages/react/src/components/identity/username-availability-input.

Properties

validate(value, signal) may return a result synchronously or as a promise. Return null for "nothing to check" (for example the user’s current handle); throw or reject for "could not check".