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 в конкретной области.

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

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