Can people search NAICS by code as well as by title?

Yes. The code and the title are both aliases of each industry, so typing 541511 or custom computer programming finds it. Aliases are part of the list and add nothing extra at query time.

How do I store only the six-digit code?

Set selectionValue to value. The input then holds the code, such as 541511, instead of the title. Rows in the list still show the title.

How do I fill the sector from an industry?

Each selection carries its ancestors, root first. Map level 1 to your sector field with fillAncestors, or read the ancestors from the selection handler. No second request is made.

Which NAICS edition is this?

The 2022 North American Industry Classification System, published by the U.S. Census Bureau. Its source, licence and authority class are recorded on the dataset page.

What is the minimum number of characters before a query runs?

Two by default. A list owner can change the minimum, but it can never be 1. The client reads the real value from bootstrap and sends no request below it, so do not hardcode it.

Search docs

NAICS industry codes autocomplete in Next.js

A NAICS industry field in Next.js that stores the code, finds an industry by code or title, and fills the sector and industry group from the chosen industry.

How do I add a NAICS industry picker in Next.js?

Point the same component inside a Client Component at your NAICS list key and set selectionValue to value, so the field holds the code such as 541511 while rows show the title. The list is five levels deep, and each selection returns its ancestors, so the sector and industry group fill without another request.

What is different about NAICS industry codes

The code is the value: selectionValue: value writes the code (541511) into the field while the row still shows the title. The aliases include both the code and the title, so either finds the industry.
Five levels: Sector, subsector, industry group, NAICS industry and national industry: 2,125 codes in all.
Ancestors fill parent fields: A selection carries its ancestors, root first. fillAncestors maps level 1 to a sector field and level 3 to an industry group field, with no second request.
Source and licence are on the dataset page: The list is the 2022 North American Industry Classification System, published by the U.S. Census Bureau. Its recorded provenance is on its dataset page.

Steps

Publish or subscribe to the NAICS dataset and create a publishable key for the application.
Create the client once and call bootstrap() so the real minimum length and debounce are used.
Set selectionValue to value so the field holds the code, not the title.
Map ancestor levels to your own fields: level 1 is the sector and level 3 is the industry group.

Code

// app/company/industry-fields.tsx
'use client';

import { useState } from 'react';
import { createAutosuggesClient } from '@autosugges/client';
import { Autocomplete } from '@autosugges/client/react';

const autosugges = createAutosuggesClient({
  baseUrl: process.env.NEXT_PUBLIC_AUTOSUGGES_RUNTIME_URL!,
  publishableKey: 'YOUR_PUBLISHABLE_KEY', // the key for your NAICS list
});
void autosugges.bootstrap().catch(() => {});

export function IndustryFields() {
  const [naics, setNaics] = useState('');

  return (
    <>
      <Autocomplete
        source={autosugges}
        label="Industry (NAICS)"
        placeholder="Type a title, or a code like 541511"
        selectionValue="value" // the field holds 541511, not the title
        fillAncestors={{ '1': 'naics_sector', '3': 'naics_industry_group' }}
        onSelect={(item) => setNaics(item.value)}
      />
      <input type="hidden" name="naics" value={naics} />
      <label>
        Sector <input name="naics_sector" readOnly />
      </label>
      <label>
        Industry group <input name="naics_industry_group" readOnly />
      </label>
    </>
  );
}

// app/company/page.tsx — a Server Component.
import { IndustryFields } from './industry-fields';

async function saveIndustry(formData: FormData) {
  'use server';
  const naics = formData.get('naics'); // a six-digit code such as "541511"
  // persist `naics` with your own data layer
}

export default function CompanyPage() {
  return (
    <form action={saveIndustry}>
      <IndustryFields />
      <button type="submit">Save</button>
    </form>
  );
}

The publishable key is public by design and safe in client code. A secret key never belongs here.

Check that it works

Type 541511. Custom Computer Programming Services appears.
Pick it. The field holds 541511 and the sector field fills with Professional, Scientific, and Technical Services.

Frequently asked questions

Can people search NAICS by code as well as by title?: Yes. The code and the title are both aliases of each industry, so typing 541511 or custom computer programming finds it. Aliases are part of the list and add nothing extra at query time.
How do I store only the six-digit code?: Set selectionValue to value. The input then holds the code, such as 541511, instead of the title. Rows in the list still show the title.
How do I fill the sector from an industry?: Each selection carries its ancestors, root first. Map level 1 to your sector field with fillAncestors, or read the ancestors from the selection handler. No second request is made.
Which NAICS edition is this?: The 2022 North American Industry Classification System, published by the U.S. Census Bureau. Its source, licence and authority class are recorded on the dataset page.
What is the minimum number of characters before a query runs?: Two by default. A list owner can change the minimum, but it can never be 1. The client reads the real value from bootstrap and sends no request below it, so do not hardcode it.