> For clean Markdown of any page, append .md to the page URL.
> For a complete documentation index, see https://docs.usebridge.com/documentation/getting-started/eligibility-sdk/react/building-forms/llms.txt.
> For AI client integration (Claude Code, Cursor, etc.), connect to the MCP server at https://docs.usebridge.com/_mcp/server.

React-specific hooks for driving eligibility forms.
For field types, see [Eligibility Fields](../eligibility-fields).

## Payer autocomplete

`usePayerAutocomplete` wraps payer search with caching:

```typescript
function usePayerAutocomplete(
  query: string,
  opts?: { limit?: number }
): { results: Payer[]; isLoading: boolean };
```

Pass the user's search query as the first argument.
`limit` defaults to 10.

## Eligibility input

`useEligibilityInputField` manages field state within an eligibility session:

```typescript
const { value, setValue, isVisible, isRequired, isDisabled, isValid } =
  useEligibilityInputField("firstName");
```

`value` and `setValue` are strongly typed based on the field name.

## Example

See the [Demo Project](https://github.com/use-bridge/sdk-typescript/blob/main/examples/react-demo/src/app/components/payer-autocomplete-field.tsx) for a full autocomplete example.

```typescript
import {
  usePayerAutocomplete,
  useEligibilityInputField,
} from "@usebridge/sdk-react";
import { useState } from "react";

export const PayerAutocompleteField = () => {
  const [inputValue, setInputValue] = useState("");
  const { results, isLoading } = usePayerAutocomplete(inputValue);
  const { value, setValue, isDisabled } = useEligibilityInputField("payer");

  return (
    <Autocomplete
      loading={isLoading}
      disabled={isDisabled}
      options={results}
      inputValue={inputValue}
      onInputChange={(v) => setInputValue(v)}
      value={value}
      onChange={(v) => setValue(v)}
    />
  );
};
```

```typescript
export const MemberIdField = () => {
  const { isVisible, isDisabled, isRequired, value, setValue } =
    useEligibilityInputField("memberId");

  if (!isVisible) return null;

  return (
    <TextField
      disabled={isDisabled}
      label={`Member ID ${isRequired ? "(Required)" : "(Optional)"}`}
      value={value}
      onChange={(e) => setValue(e.target.value)}
    />
  );
};
```

---

#### [Soft Check](./soft-check)

Fast eligibility gut-checks, without patient information

#### [Hard Check](./hard-check)

Full eligibility checks, cost estimates, and provider eligibility