Input Select

Input Select объединяет связанные Select в одну строку, например правило фильтра. Всю строку можно удалить одним действием.

Статус: experimental · в системе с 2026-06 · интерактивность: always (всегда)

Когда использовать

Строка правила или фильтра из связанных селектов одной сущности: мессенджер · ОС · условие · версия.

Не использовать:

Несвязанные поля в один ряд — это обычная форма.
Свободный ввод значения — сегменты только выбирают.

Альтернативы:

select — одиночный выбор вне составной строки
input — свободный ввод значения

Конструктор

Соберите пару или строку правила, измените значения сегментов и проверьте настоящее удаление всей строки.

Правило фильтра

Четыре сегмента и удаление строки. Кнопка добавляет новое правило.

<script>
import { t } from "$lib/spec/demo-lang.svelte.js";
import Button from "$lib/ui/Button.svelte";
import InputSelect from "$lib/ui/InputSelect.svelte";

const MESSENGERS = [
  { value: "telegram", label: "Telegram" },
  { value: "whatsapp", label: "WhatsApp" },
  { value: "viber", label: "Viber" },
];
const SYSTEMS = [
  { value: "android", label: "Android" },
  { value: "ios", label: "iOS" },
  { value: "windows", label: "Windows" },
];
const CONDITIONS = ["*", "=", "≠", ">", "<"];
const VERSIONS = ["104", "105", "106"];

let nextId = 3;
function makeRule() {
  return {
    id: nextId++,
    segments: [
      { label: "Messenger", value: "telegram", required: true, options: MESSENGERS },
      { label: "Operating system", value: "android", required: true, options: SYSTEMS },
      { label: "Condition", value: "*", required: true, options: CONDITIONS },
      { label: "Version", value: "105", required: true, options: VERSIONS },
    ],
  };
}

let rows = $state([makeRule(), makeRule()]);
function removeRule(id) {
  rows = rows.filter((r) => r.id !== id);
}
function addRule() {
  rows = [...rows, makeRule()];
}
</script>

<div style="display: grid; gap: var(--sp-2); justify-items: start;">
  {#each rows as r (r.id)}
    <InputSelect segments={r.segments} deletable ondelete={() => removeRule(r.id)} />
  {/each}
  {#if rows.length === 0}
    <p style="margin: 0; color: var(--c-control-desc); font-size: var(--control-fs-aux);">
      {t("Все правила удалены.")}
    </p>
  {/if}
  <Button variant="ghost" onclick={addRule}>{t("Добавить правило")}</Button>
</div>

Без удаления

Число сегментов произвольно; кнопка удаления опциональна.

<script>
import InputSelect from "$lib/ui/InputSelect.svelte";

const SYSTEMS = [
  { value: "android", label: "Android" },
  { value: "ios", label: "iOS" },
  { value: "windows", label: "Windows" },
];
const VERSIONS = ["104", "105", "106"];

let segments = $state([
  { label: "Operating system", value: "android", required: true, options: SYSTEMS },
  { label: "Version", value: "105", required: true, options: VERSIONS },
]);
</script>

<InputSelect {segments} />