Компонент RadioControl из библиотеки @wordpress/components предоставляет удобный интерфейс для выбора одного варианта из набора с помощью радиокнопок. Радиокнопки полезны, когда нужно показать пользователю все доступные варианты сразу и позволить выбрать только один из них.
Используйте радиокнопки, когда:
- Требуется выбор только одного варианта из нескольких.
- Необходимо, чтобы пользователь видел все доступные варианты сразу.
Пример использования: если требуется выбрать только один уровень доступа для пользователя (например, «Автор» или «Редактор»), использование радиокнопок подходит лучше, чем чекбоксы.
Базовое использование RadioControl
Для начала создадим простой пример с использованием компонента RadioControl, в котором пользователь может выбрать тип пользователя.
import { useState } from 'react';
import { RadioControl } from '@wordpress/components';
const MyRadioControl = () => {
const [option, setOption] = useState('a');
return (
<RadioControl
label="Выберите тип пользователя"
help="Тип текущего пользователя"
selected={option}
options={[
{ label: 'Автор', value: 'a' },
{ label: 'Редактор', value: 'e' },
]}
onChange={(value) => setOption(value)}
/>
);
};
Подсказки по дизайну
- Рекомендуется: Всегда иметь предустановленный вариант для удобства пользователя.
- Не рекомендуется: Использовать чекбоксы, когда требуется выбрать только один вариант.
Параметры (Props)
- label:
string
Заголовок, отображаемый над радиокнопками, который поясняет, что именно выбирает пользователь.
Обязательный: Нет.
Пример:"Выберите роль пользователя". - help:
string | Element
Дополнительный текст-подсказка, отображаемый под радио-контролом. Помогает пользователю лучше понять, что именно нужно выбрать.
Обязательный: Нет.
Пример:"Роль, которую будет иметь новый пользователь". - hideLabelFromVision:
boolean
Еслиtrue, текст меткиlabelбудет скрыт для зрительных пользователей и доступен только для экранных читалок, полезно для повышения доступности.
Обязательный: Нет.
По умолчанию:false. - selected:
string
Значение, которое отображается как выбранное. Этот параметр задаёт текущий выбор в радио-контроле.
Обязательный: Нет.
Пример:"a". - options:
{ label: string, value: string }[]
Массив объектов, каждый из которых представляет один вариант радиокнопки. Объект имеет два свойства:- label: текст, отображаемый рядом с радиокнопкой.
- value: внутреннее значение, которое будет передано в
onChange, если выбрана данная опция.
Пример:[{ label: 'Автор', value: 'a' }, { label: 'Редактор', value: 'e' }]. - onChange:
(value: string) => void
Функция обратного вызова, вызываемая при выборе нового значения. Принимаетvalueвыбранного элемента.
Обязательный: Да.
Пример:(value) => setOption(value).
Пример с разными вариантами
Создадим компонент, где пользователь может выбрать уровень уведомлений. В этом примере добавим кастомные метки и текст-подсказку.
import { useState } from 'react';
import { RadioControl } from '@wordpress/components';
const NotificationLevelControl = () => {
const [level, setLevel] = useState('low');
return (
<RadioControl
label="Выберите уровень уведомлений"
help="Уровень влияет на частоту и содержание уведомлений"
selected={level}
options={[
{ label: 'Низкий', value: 'low' },
{ label: 'Средний', value: 'medium' },
{ label: 'Высокий', value: 'high' },
]}
onChange={(value) => setLevel(value)}
/>
);
};
Доступность и рекомендации
- Убедитесь, что выбран хотя бы один вариант по умолчанию, чтобы пользователь понимал, что от него требуется выбор.
- Используйте
hideLabelFromVisionдля улучшения доступности, когдаlabelне требуется для визуального представления, но нужен для экранных читалок.
Полезные советы по работе с RadioControl
- Оптимизация взаимодействий: Если один из вариантов более часто выбирается, установите его как предустановленный. Это упростит процесс выбора для пользователя.
- Уверенность пользователя: Предустановленный вариант может подсказать пользователю наилучший выбор, если это применимо к ситуации.
Заключение
Компонент RadioControl в WordPress позволяет легко добавлять радиокнопки для создания интерфейсов с выбором одного элемента из списка. Он особенно полезен, когда требуется показать все доступные варианты выбора, и при этом выбрать можно только один.