Option

Паттерны

Богатая строка селектора

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

• варианту нужны иконки или дополнительный визуальный контекст

Заметки о композиции:

• оставьте строку одной поверхностью выбора

Компромиссы:

• легко просматривается и выразительна
• сложнее, чем строки с простым текстом

import { Icon, Option, Text } from '@vega-ui/react';
import { CopyIcon, LinkIcon, MailIcon, Share2Icon } from '@vega-ui/icons';

const actions = [
  { value: 'link', label: 'Copy link', hint: 'Anyone with the link can view', icon: LinkIcon },
  { value: 'email', label: 'Send by email', hint: 'Up to 20 recipients', icon: MailIcon },
  { value: 'duplicate', label: 'Duplicate', hint: 'Creates a private copy', icon: CopyIcon },
  { value: 'export', label: 'Export to Drive', hint: 'PDF or DOCX', icon: Share2Icon },
];

export default function RichOptionContent() {
  return (

Выбор под управлением родителя

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

• состояние списка живёт в собственном родительском контроле

Заметки о композиции:

• вычисляйте selected и обработчики клика из родительского состояния
• держите поведение клавиатуры на списке: он держит фокус и указывает на активную строку через aria-activedescendant

Компромиссы:

• гибко
• нужна настоящая родительская модель выбора

import { Option, Text } from '@vega-ui/react';
import { KeyboardEvent, useId, useState } from 'react';

const statuses = [
  { value: 'backlog', label: 'Backlog' },
  { value: 'progress', label: 'In progress' },
  { value: 'review', label: 'In review' },
  { value: 'done', label: 'Done' },
];

export default function SelectedStateFromParent() {
  const id = useId();

Отключение по бизнес-правилу

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

• вариант виден, но недоступен

Заметки о композиции:

• показывайте причину в самой строке и связывайте её через aria-describedby
• оставьте строку неинтерактивной

Компромиссы:

• вариант остаётся обнаруживаемым
• недоступным вариантам всё равно нужен поясняющий контекст

import { Option } from '@vega-ui/react';
import { useId } from 'react';

const plans = [
  { value: 'starter', label: 'Starter', reason: '' },
  { value: 'team', label: 'Team', reason: '' },
  { value: 'legacy', label: 'Legacy Pro', reason: 'No longer available for new workspaces' },
  { value: 'enterprise', label: 'Enterprise', reason: 'Requires a sales contract' },
];

export default function UnavailablePlanHint() {
  const id = useId();

Сравнение

Быстрое правило выбора

Используйте Option, когда строите спископодобную поверхность выбора, которая должна совпадать со стилем вариантов VegaUI. Для обычных действий используйте Button, а SelectOption — когда у вас уже есть полная композиция Select.

Option и Button

• Option — для выбираемых строк списка.
• Button — для прямых действий.

Option и SelectOption

• Option — когда строите собственный примитив выбора.
• SelectOption — внутри полной подсистемы Select.

Выбирайте этот компонент, когда

• нужна переиспользуемая презентационная строка варианта
• родительский паттерн уже владеет логикой выбора

Не выбирайте этот компонент, когда

• нужна полноценная система выбора без дополнительной работы
• строка на самом деле действие, а не выбираемый вариант

Решение проблем

Строка выглядит выбираемой, но выбор не сохраняется

Симптом

Клик по строке ничего не меняет в интерфейсе надолго.

Вероятная причина

Option отрендерен без родительской модели выбора.

Как проверить

• проверьте, управляется ли selected родительским состоянием

Решение

Перенесите логику выбора в родительский контрол и передавайте полученное состояние в каждый вариант.

Клавиатура не доходит до вариантов

Симптом

Стрелки ничего не делают, и ни один вариант не выглядит активным.

Вероятная причина

Option не получает фокус и не обрабатывает клавиши, а списком никто не владеет.

Как проверить

• убедитесь, что фокус у родителя, он выставляет aria-activedescendant и передаёт active одному варианту

Решение

Используйте Listbox или Select — они делают это за вас.

Отключённым строкам всё равно нужно объяснение

Симптом

Пользователь видит отключённый вариант, но не понимает, почему он недоступен.

Вероятная причина

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

Как проверить

• пройдите сценарий с пользователем, который раньше не видел это бизнес-правило

Решение

Оставьте строку отключённой и покажите причину рядом — во вспомогательном или поясняющем тексте.