Inputs
Code Search
Picking a classifier code by search: a numeric query matches the start of the code, a textual one matches the name, and every result carries its own path in the hierarchy.
- cascader
- classifier
- code
- search
Preview
1440pxHost theme
Use it with AI
- 1. Copy the link.
- 2. Write to your agent in your own words and drop the link into the sentence.
- 3. The agent opens the link and installs the component from the registry.
put this in the header: https://vibeui.ru/c/cascader-019?lang=en
Введите код целиком или его начало — 62, 62.0, 62.01 — либо часть названия
Выбран код 62.01 — Разработка компьютерного программного обеспечения
Show the full instructions
What the link says, spelled out. Use it when your agent cannot open links — paste this text instead.
# Install and place "cascader-019" (Code Search) from VibeUI
## 1. Install first — do not skip, do not recreate
Run this exact command before writing any code:
npx shadcn@latest add https://vibeui.ru/r/cascader-019.json
Registry item: https://vibeui.ru/r/cascader-019.json
Installs to: components/vibeui/cascader-019.tsx (the exact path follows this project's components.json aliases).
npm dependencies: none.
Registry dependencies: none.
Install it from the registry. Do not recreate it from the description,
do not substitute a similar component from another library, and do not
rewrite it to match the project's existing style.
## 2. What it is
Picking a classifier code by search: a numeric query matches the start of the code, a textual one matches the name, and every result carries its own path in the hierarchy.
A classifier-code picker (industry codes, tariff codes, nomenclature) for the case where people know the code rather than the name. A numeric query matches the beginning of a code, a textual one matches names and sections; every result is captioned with its path, so the hierarchy stays visible without walking the levels. Zero dependencies, one file, its own palette.
## 3. How to use it
import { Cascader019 } from "@/components/vibeui/cascader-019"
<Cascader019 defaultCode="62.01" placeholder="Code or name" />
Read the installed file for the full prop list.
## 4. Where to place it
This is a small inline component. Put it exactly where the user asked,
inside the existing markup. Do not create a new page, section or
wrapper for it. If a similar control already sits in that spot,
replace it instead of adding a second one.
Placement: ___
(The user fills this line in. If it is still blank, ask where to put it
instead of guessing.)
## 5. Keep exactly as installed
- the local --vibeui-cascader-019-* palette — do not swap it for your theme tokens (bg-muted, text-muted-foreground and the like)
- splitting queries into numeric and textual: substring matching on codes returns junk like 47.62 for the query “62”
- startsWith for codes — classifiers are hierarchical, and the start of a code is the branch
- the path under each result: without it code 01 from different sections is indistinguishable
- the monospace font for codes, otherwise the code column will not line up
- the hint under the field tied by aria-describedby: the “code or name” rule must not stay implicit
- role="listbox" and role="option" on the results so the list is announced as one
## 6. You may change
- label — the field caption; placeholder — the hint text inside the field
- entries — the classifier itself: code, name and path as an array of strings
- defaultCode — the code selected at first render
- onSelect — the handler; it receives the code and the name
- accent — the selected-row colour
- the hint text under the field when the code format differs
## 7. Rules
- Classifiers are large: with several thousand rows client-side filtering starts to lag and a server query is needed.
- The dot in a code is meaningful: do not strip it from the query “just in case”, or 6.2 and 62 collapse together.
- Do not show the code without its name: an unexplained code cannot be verified by eye.
- The path here is a ready-made array: if you compute it, do so once rather than on every row render.
## 8. Verify
- it renders with no console errors;
- it looks like the preview on the VibeUI page you copied this from;
- if it does not, you changed something listed in section 5 — put it back.For developers
npx shadcn@latest add https://vibeui.ru/r/cascader-019.jsonhttps://vibeui.ru/r/cascader-019.jsonКомпонент самодостаточен: один файл, ноль зависимостей, собственная палитра в локальных переменных --vibeui-cascader-019-*. Клиентский: запрос и выбранный код живут в useState. Ключевое решение в useMemo: если запрос состоит только из цифр и точек, поиск идёт по началу кода (startsWith), а не по вхождению — иначе запрос «62» вытащит посторонний код вида 47.62; текстовый запрос ищется и в названии, и в пути. Каждая строка результата — grid из трёх ячеек: код моноширинным шрифтом, название и путь через grid-column, поэтому иерархия видна прямо в результатах и не требует отдельного дерева. Подсказка под полем связана через aria-describedby, список помечен role="listbox", строки — role="option".
Component source
The same file your agent installs. Here in case you would rather copy it by hand.
"use client"
import { useId, useMemo, useState } from "react"
import type { ComponentPropsWithoutRef, CSSProperties } from "react"
export type Cascader019Entry = {
code: string
name: string
/** Путь по классификатору сверху вниз, без самого элемента. */
path: string[]
}
export type Cascader019Props = Omit<
ComponentPropsWithoutRef<"div">,
"children" | "onSelect"
> & {
label?: string
placeholder?: string
entries?: Cascader019Entry[]
defaultCode?: string
onSelect?: (code: string, name: string) => void
accent?: string
}
// Идея компонента: классификатор — единственный каскадер, где человек чаще
// знает не название, а код: «нам нужен 62.01». Ходить по трём уровням ради
// известного кода бессмысленно, поэтому здесь поиск принимает и код, и
// название, а найденную строку возвращает вместе с её путём — иерархия
// не исчезает, а показывается результатом.
const STYLES = `
:where([data-vibeui-block="cascader-019"]){
--vibeui-cascader-019-bg:oklch(1 0 0);
--vibeui-cascader-019-fg:oklch(0.22 0.014 300);
--vibeui-cascader-019-muted:oklch(0.55 0.014 300);
--vibeui-cascader-019-border:oklch(0.9 0.008 300);
--vibeui-cascader-019-field:oklch(0.985 0.004 300);
--vibeui-cascader-019-soft:oklch(0.965 0.006 300);
--vibeui-cascader-019-accent:oklch(0.5 0.13 300);
--vibeui-cascader-019-accentsoft:oklch(0.94 0.04 300);
--vibeui-cascader-019-radius:0.625rem;
--vibeui-cascader-019-font:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
--vibeui-cascader-019-mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;
}
[data-vibeui-block="cascader-019"]{
display:flex;flex-direction:column;gap:0.45rem;
width:100%;max-width:24rem;box-sizing:border-box;padding:0.875rem;
background:var(--vibeui-cascader-019-bg);
border:1px solid var(--vibeui-cascader-019-border);
border-radius:calc(var(--vibeui-cascader-019-radius) + 0.25rem);
color:var(--vibeui-cascader-019-fg);
font-family:var(--vibeui-cascader-019-font);
}
[data-vibeui-block="cascader-019"] label{font-size:0.8125rem;font-weight:600}
[data-vibeui-block="cascader-019"] input{
box-sizing:border-box;width:100%;height:2.4rem;padding:0 0.6rem;
border:1px solid var(--vibeui-cascader-019-border);
border-radius:var(--vibeui-cascader-019-radius);
background:var(--vibeui-cascader-019-field);
color:inherit;font:inherit;font-size:0.875rem;
}
[data-vibeui-block="cascader-019"] input::placeholder{color:var(--vibeui-cascader-019-muted)}
[data-vibeui-block="cascader-019"] input:focus-visible{
outline:2px solid var(--vibeui-cascader-019-accent);outline-offset:1px;border-color:transparent;
}
[data-vibeui-block="cascader-019"] [data-part="hint"]{
margin:0;font-size:0.7rem;color:var(--vibeui-cascader-019-muted);
}
[data-vibeui-block="cascader-019"] [data-part="list"]{
margin:0;padding:0.2rem;list-style:none;display:flex;flex-direction:column;gap:0.1rem;
max-height:13rem;overflow:auto;
border:1px solid var(--vibeui-cascader-019-border);
border-radius:var(--vibeui-cascader-019-radius);
}
[data-vibeui-block="cascader-019"] [data-part="row"]{
appearance:none;cursor:pointer;font:inherit;width:100%;
display:grid;grid-template-columns:3.6rem 1fr;align-items:baseline;gap:0.2rem 0.5rem;
box-sizing:border-box;padding:0.4rem 0.5rem;
border:0;border-radius:0.45rem;background:transparent;color:inherit;text-align:left;
transition:background-color .16s ease;
}
[data-vibeui-block="cascader-019"] [data-part="row"]:hover{background:var(--vibeui-cascader-019-soft)}
[data-vibeui-block="cascader-019"] [data-part="row"]:focus-visible{
outline:2px solid var(--vibeui-cascader-019-accent);outline-offset:-2px;
}
[data-vibeui-block="cascader-019"] [data-part="row"][aria-selected="true"]{
background:var(--vibeui-cascader-019-accentsoft);
}
[data-vibeui-block="cascader-019"] [data-part="code"]{
font-family:var(--vibeui-cascader-019-mono);font-size:0.78rem;font-weight:700;
}
[data-vibeui-block="cascader-019"] [data-part="name"]{font-size:0.8125rem;font-weight:600}
[data-vibeui-block="cascader-019"] [data-part="trail"]{
grid-column:2;font-size:0.68rem;color:var(--vibeui-cascader-019-muted);
overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
[data-vibeui-block="cascader-019"] [data-part="empty"]{
margin:0;padding:0.5rem;font-size:0.8125rem;color:var(--vibeui-cascader-019-muted);
}
[data-vibeui-block="cascader-019"] [data-part="picked"]{
margin:0;padding:0.5rem 0.65rem;border-radius:var(--vibeui-cascader-019-radius);
background:var(--vibeui-cascader-019-soft);
font-size:0.8125rem;line-height:1.35;
}
[data-vibeui-block="cascader-019"] [data-part="picked"] b{font-family:var(--vibeui-cascader-019-mono)}
@media (prefers-reduced-motion:reduce){[data-vibeui-block="cascader-019"] *{animation:none!important;transition:none!important}}
`
const CLASSIFIER: Cascader019Entry[] = [
{
code: "62.01",
name: "Разработка компьютерного программного обеспечения",
path: ["J Информация и связь", "62 Разработка ПО и консультирование"],
},
{
code: "62.02",
name: "Консультирование в области компьютерных технологий",
path: ["J Информация и связь", "62 Разработка ПО и консультирование"],
},
{
code: "62.09",
name: "Прочие услуги в области информационных технологий",
path: ["J Информация и связь", "62 Разработка ПО и консультирование"],
},
{
code: "63.11",
name: "Обработка данных и размещение информации",
path: ["J Информация и связь", "63 Деятельность в области информации"],
},
{
code: "47.91",
name: "Розничная торговля по почте и через интернет",
path: ["G Торговля", "47 Розничная торговля"],
},
{
code: "47.99",
name: "Прочая розничная торговля вне магазинов",
path: ["G Торговля", "47 Розничная торговля"],
},
{
code: "70.22",
name: "Консультирование по вопросам управления",
path: ["M Профессиональная деятельность", "70 Управление предприятиями"],
},
]
/**
* Выбор кода классификатора: поиск по коду или названию с показом пути.
* Один файл, ноль зависимостей, собственная палитра.
*/
export function Cascader019({
label = "Код деятельности",
placeholder = "Код или название",
entries = CLASSIFIER,
defaultCode = "62.01",
onSelect,
accent,
className,
style,
...props
}: Cascader019Props) {
const id = useId()
const [query, setQuery] = useState("")
const [code, setCode] = useState(defaultCode)
const matches = useMemo(() => {
const needle = query.trim().toLowerCase()
if (!needle) return entries
// Цифры и точка в запросе означают код: тогда ищем по началу кода,
// а не по вхождению — «62» не должно приводить строки вроде «47.62».
const byCode = /^[\d.]+$/.test(needle)
return entries.filter((entry) =>
byCode
? entry.code.startsWith(needle)
: entry.name.toLowerCase().includes(needle) ||
entry.path.join(" ").toLowerCase().includes(needle),
)
}, [query, entries])
const picked = entries.find((entry) => entry.code === code)
const palette = {
...(accent ? { "--vibeui-cascader-019-accent": accent } : null),
...style,
} as CSSProperties
return (
<>
<style href="vibeui-cascader-019" precedence="medium">
{STYLES}
</style>
<div
{...props}
data-vibeui-block="cascader-019"
className={className}
style={palette}
>
<label htmlFor={`${id}-input`}>{label}</label>
<input
id={`${id}-input`}
type="text"
role="combobox"
inputMode="text"
autoComplete="off"
placeholder={placeholder}
aria-expanded="true"
aria-controls={`${id}-list`}
aria-autocomplete="list"
aria-describedby={`${id}-hint`}
value={query}
onChange={(event) => setQuery(event.target.value)}
/>
<p id={`${id}-hint`} data-part="hint">
Введите код целиком или его начало — 62, 62.0, 62.01 — либо часть
названия
</p>
<ul
id={`${id}-list`}
role="listbox"
aria-label={label}
data-part="list"
>
{matches.length === 0 ? (
<li role="none">
<p data-part="empty">Такого кода в классификаторе нет</p>
</li>
) : (
matches.map((entry) => (
<li key={entry.code} role="none">
<button
type="button"
role="option"
data-part="row"
aria-selected={entry.code === code}
onClick={() => {
setCode(entry.code)
onSelect?.(entry.code, entry.name)
}}
>
<span data-part="code">{entry.code}</span>
<span data-part="name">{entry.name}</span>
<span data-part="trail">{entry.path.join(" › ")}</span>
</button>
</li>
))
)}
</ul>
<p data-part="picked" aria-live="polite">
{picked ? (
<>
Выбран код <b>{picked.code}</b> — {picked.name}
</>
) : (
"Код не выбран"
)}
</p>
</div>
</>
)
}