RadioРадиокнопка

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

Использование

При необходимости импортируйте компоненты:

import 'mdui/components/radio-group.js';
import 'mdui/components/radio.js';

При необходимости импортируйте типы TypeScript:

import type { RadioGroup } from 'mdui/components/radio-group.js';
import type { Radio } from 'mdui/components/radio.js';

Пример использования:

Chinese

English

<mdui-radio-group value="chinese">
  <mdui-radio value="chinese">Chinese</mdui-radio>
  <mdui-radio value="english">English</mdui-radio>
</mdui-radio-group>

Значением атрибута value компонента <mdui-radio-group> является значение value выбранной радиокнопки <mdui-radio>. Вы также можете переключать выбранную радиокнопку, обновляя значение value компонента <mdui-radio-group>.

Chinese

English

<mdui-radio-group value="chinese">
  <mdui-radio value="chinese">Chinese</mdui-radio>
  <mdui-radio value="english">English</mdui-radio>
</mdui-radio-group>

Исходный код

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

Radio

<mdui-radio checked>Radio</mdui-radio>

Исходный код

Отключенное состояние

Добавьте атрибут disabled к компоненту <mdui-radio-group>, чтобы отключить всю группу радиокнопок.

Chinese

English

<mdui-radio-group disabled>
  <mdui-radio value="chinese">Chinese</mdui-radio>
  <mdui-radio value="english">English</mdui-radio>
</mdui-radio-group>

Исходный код

Чтобы отключить отдельную радиокнопку, добавьте атрибут disabled к компоненту <mdui-radio>.

Chinese

English

<mdui-radio-group>
  <mdui-radio value="chinese">Chinese</mdui-radio>
  <mdui-radio value="english" disabled>English</mdui-radio>
</mdui-radio-group>

Исходный код

Иконка

С помощью атрибутов unchecked-icon и checked-icon можно задать иконки Material Icons для невыбранного и выбранного состояний соответственно. Также можно использовать слоты unchecked-icon и checked-icon.

Chinese

English

<mdui-radio-group value="chinese">
  <mdui-radio
    unchecked-icon="check_box_outline_blank"
    checked-icon="lock"
    value="chinese"
  >Chinese</mdui-radio>
  <mdui-radio value="english">
    <mdui-icon slot="unchecked-icon" name="check_box_outline_blank"></mdui-icon>
    <mdui-icon slot="checked-icon" name="lock"></mdui-icon>
    English
  </mdui-radio>
</mdui-radio-group>

Исходный код

`mdui-radio-group` API

Свойства

Атрибут	Свойство	Тип	По умолчанию
`disabled`	`disabled`	`boolean`	`false`
Определяет, отключён ли этот компонент.
`form`	`form`	`string`	-
Связанный элемент `<form>`. В качестве значения укажите `id` элемента `<form>` на той же странице. Если свойство не задано, элемент должен быть дочерним по отношению к `<form>`. С этим свойством элемент можно разместить в любом месте страницы, а не только внутри `<form>`.
`name`	`name`	`string`	`''`
Имя группы радиокнопок, которое будет отправлено вместе с данными формы.
`value`	`value`	`string`	`''`
Текущее значение выбранной радиокнопки, будет отправлено вместе с данными формы.
	`defaultValue`	`string`	`''`
Значение по умолчанию. При сбросе формы восстанавливается именно оно. Это свойство задаётся только через JavaScript.
`required`	`required`	`boolean`	`false`
Определяет, обязательно ли выбрать одну из радиокнопок при отправке формы.
	`validity`	`ValidityState`	-
Объект, содержащий состояние валидации формы. См. `ValidityState`.
	`validationMessage`	`string`	-
Если проверка формы не пройдена, это свойство содержит сообщение об ошибке. Если проверка пройдена, это свойство будет пустой строкой.

Методы

Название	Параметры	Возвращаемое значение
`checkValidity`		`boolean`
Проверяет, прошло ли поле формы валидацию. Если не прошло, возвращает `false` и вызывает событие `invalid`; если прошло, возвращает `true`.
`reportValidity`		`boolean`
Проверяет, прошло ли поле формы валидацию. Если не прошло, возвращает `false` и вызывает событие `invalid`; если прошло, возвращает `true`. Если проверка не пройдена, также отображает сообщение об ошибке валидации в компоненте.
`setCustomValidity`	`message: string`	`void`
Устанавливает пользовательский текст сообщения об ошибке. Пока задан непустой текст, поле считается не прошедшим проверку.

События

Название
`change`
Срабатывает при изменении выбранного значения.
`input`
Срабатывает при изменении выбранного значения.
`invalid`
Возникает, когда поле формы не проходит валидацию.

Slots

Название
(по умолчанию)
Элементы `<mdui-radio>`.

`mdui-radio` API

Свойства

Атрибут	Свойство	Тип	По умолчанию
`value`	`value`	`string`	`''`
Значение текущей радиокнопки.
`disabled`	`disabled`	`boolean`	`false`
Определяет, отключена ли радиокнопка.
`checked`	`checked`	`boolean`	`false`
Определяет, выбрана ли эта радиокнопка.
`unchecked-icon`	`uncheckedIcon`	`string`	-
Имя иконки Material Icons для невыбранного состояния. Можно задать через `slot="unchecked-icon"`.
`checked-icon`	`checkedIcon`	`string`	-
Имя иконки Material Icons для выбранного состояния. Можно задать через `slot="checked-icon"`.
`autofocus`	`autofocus`	`boolean`	`false`
Определяет, будет ли элемент автоматически получать фокус после загрузки страницы.
`tabindex`	`tabIndex`	`number`	-
Порядок перехода к элементу при нажатии клавиши Tab.

Методы

Название	Параметры	Возвращаемое значение
`click`		`void`
Имитирует щелчок мыши по элементу.
`focus`	`options: FocusOptions` (Опционально)	`void`
Устанавливает фокус на текущий элемент. В качестве аргумента можно передать объект со свойством: `preventScroll`: по умолчанию после получения фокуса страница прокручивается, чтобы элемент появился в области видимости. Чтобы этого избежать, задайте для этого свойства значение `true`.
`blur`		`void`
Убирает фокус с текущего элемента.

События

Название
`focus`
Срабатывает при получении фокуса.
`blur`
Срабатывает при потере фокуса.
`change`
Срабатывает при выборе этой радиокнопки.

Slots

Название
(по умолчанию)
Текстовое содержимое.
`unchecked-icon`
Иконка невыбранного состояния.
`checked-icon`
Иконка выбранного состояния.

CSS Parts

Название
`control`
Контейнер для иконки слева.
`unchecked-icon`
Иконка невыбранного состояния.
`checked-icon`
Иконка выбранного состояния.
`label`
Текстовое содержимое.

Предыдущая глава

NavigationRail Боковая панель навигации

Следующая глава

RangeSlider Слайдер диапазона

RadioРадиокнопка

Использование

Примеры

Состояние выбора

Отключенное состояние

Иконка

`mdui-radio-group` API

Свойства

Методы

События

Slots

`mdui-radio` API

Свойства

Методы

События

Slots

CSS Parts