SegmentedControl

Применение компонента

Компонент может использоваться как навигационный элемент (аналог Tabs) или как элемент формы (аналог RadioGroup).

Избегайте слишком большого числа сегментов: рекомендуется от трёх до семи кнопок для планшетов и десктопов и до пяти — в мобильном представлении.

В качестве контента используйте либо только иконки, либо только текст, это позволит вашему дизайну оставаться консистентным и простым.

Режим работы

Компонент поддерживает работу как в неконтролируемом режиме, так и контролируемом. Это стандартное поведение React-компонентов, прочитать про это можно в документации React ↗.

Для использования неконтролируемого режима достаточно просто не передавать value или передавать defaultValue, если требуется задать значение по умолчанию. Для контролируемого режима используйте связку свойств value/onChange для задания значения и его изменения.

const colors = [
  {
    value: 'red',
    label: 'Красный',
  },
  {
    value: 'green',
    label: 'Зелёный',
  },
  {
    value: 'blue',
    label: 'Синий',
  },
];
 
// Неконтролируемое состояние
<SegmentedControl options={colors} defaultValue="red" />;
 
// Контролируемое состояние
const [color, setColor] = React.useState('red');
 
<SegmentedControl options={colors} value={color} onChange={setColor} />;

Доступность (a11y)

По умолчанию компонент использует role="radiogroup", обеспечивая поддержку соответствующего данной роли поведения.

Использование как навигационного элемента

Компонент SegmentedControl может использоваться для создания навигации (аналог Tabs). В этом случае необходимо:

1. Установить свойство role="tablist";
2. Для каждой опции указать:
   • id - уникальный идентификатор;
   • aria-controls - идентификатор области с контентом, который становится доступен при выборе данной опции.
3. Для области с контентом указать:
   • role="tabpanel" - роль панели с контентом;
   • aria-labelledby - идентификатор опции, который управляет этой областью;
   • tabIndex={0} - чтобы сделать область фокусируемой;
   • id- идентификатор панели, который соответствует aria-controls в конкретной области.

Это обеспечит правильную семантику и доступность компонента для пользователей ассистивных технологий.

Свойства и методы