Несколько простых правил, которые могут помочь в выборе типа input, чтобы ваш дизайн был удобный в использовании.
- Input Field
Это основа для форм. Они используются для всего, что требует пользовательского ввода, а не выбора предустановленных вариантов. Имена пользователей, сообщения электронной почты, адреса, пароли, сайты, телефоны.
- Input Field c автозавершением
Если для ввода доступны сотни вариантов (слишком много, чтобы отобразить на экране сразу), поле ввода с автозавершением является хорошим выбором.
- Tag Input Field
Этот вариант ограничивает пользователю ввод некоторых предопределенных вариантов. Кроме того, он может вести себя как поле адреса электронной почты – предполагая возможные варианты, но позволяя ввести любой.
- Checkboxes
Флажки используются, когда вы хотите, чтобы пользователь мог выбрать любое количество (в том числе ноль) предопределенных вариантов.
- Toggles
Они, по существу, как флажки, но напоминают реальные переключатель, немного более интуитивные. - Radio Buttons
В то время как флажки позволяют пользователю выбрать любое количество предопределенных вариантов, переключатели используются, чтобы заставить пользователя выбрать один вариант. - Select Dropdowns
Если пользователю нужно выбрать только один из многих вариантов (слишком много для набора переключателей), то выпадающий список является идеальным выбором. Тем не менее, если у вас есть много-много вариантов (например, “Выберите вашу страну»), лучше использовать поле ввода с автозавершением. - Multi-select Dropdowns
Этот вид стоит использовать, когда у вас слишком много возможных вариантов для использования встроенных флажков. Однако, если у вас есть много-много вариантов, лучше использовать поле ввода тегов. - Range sliders
Ползунки хороши, когда вам нужно, чтобы пользователь ввел значение в пределах минимального или максимального предела. - Steppers
Это быстрый и простой способ, чтобы позволить пользователям управлять количеством чего-либо.
Зачастую вы уже знаете многие из этих правил, но тем не менее легко забыть о них в спешке во время проектирования.
Ссылка на источник.