Radio input: — HTML: HyperText Markup Language

Компонент React Radio Group — Material UI

Редактировать эту страницу

Radio Group позволяет пользователю выбрать один вариант из набора.

Используйте переключатели, когда пользователю нужно увидеть все доступные параметры. Если доступные параметры можно свернуть, рассмотрите возможность использования компонента Select, так как он занимает меньше места.

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

• Обратная связь
• WAI-ARIA
• Размер пакета
• Material Design
• Figma
• Adobe
• Sketch

Radio group

RadioGroup — это полезная оболочка, используемая для группировки компонентов Radio , которая обеспечивает более простой API и надлежащую доступность с клавиатуры для группы.

Пол

Женский Мужской Другой

 
  Пол
  <Радиогруппа
    aria-labeledby="демо-радио-кнопки-группа-метка"
    defaultValue="женщина"
    name="группа радиокнопок"
  > 
    } label="Female" />
    } label="мужской" />
    } label="Other" />
  
 
 

<Контроль формы> Пол <Радиогруппа aria-labeledby="демо-радио-кнопки-группа-метка" defaultValue="женщина" name="группа радиокнопок" > } label=»Female» /> } label=»мужской» /> } label=»Other» />

Нажмите Введите , чтобы начать редактирование

Направление

, чтобы выложить кнопки горизонтально, установите ROW PROP:

Пол

Femalemaleotherotherotheretherthother

.

onChange props:

Пол

Женский Мужской

 
  Пол
  <Радиогруппа
    aria-labeledby="демо-управляемая группа радио-кнопок"
    name="группа управляемых радиокнопок"
    значение = {значение}
    onChange={handleChange}
  >
    } label="Female" />
    } label="мужской" />
  
 
 

<Контроль формы> Пол <Радиогруппа aria-labeledby="демо-управляемая группа радио-кнопок" name="группа управляемых радиокнопок" значение = {значение} onChange={handleChange} > } label=»Female» /> } label=»мужской» />

Нажмите Введите , чтобы начать редактирование

Автономные радиокнопки

Радио также можно использовать автономно, без оболочки RadioGroup.

 <Радио
  проверено={выбранное значение === 'а'}
  onChange={handleChange}
  значение = "а"
  name="радио-кнопки"
  inputProps={{ 'метка-арии': 'A' }}
/>
<Радио
  проверено={выбранное значение === 'б'}
  onChange={handleChange}
  значение = "б"
  name="радио-кнопки"
  inputProps={{ 'aria-label': 'B' }}
/> 
 

<Радио проверено={выбранное значение === 'а'} onChange={handleChange} значение = "а" name="радио-кнопки" inputProps={{ 'метка-арии': 'A' }} /> <Радио проверено={выбранное значение === 'б'} onChange={handleChange} значение = "б" name="радио-кнопки" inputProps={{ 'aria-label': 'B' }} />

Нажмите Введите , чтобы начать редактирование.

 
  <Радио {...controlProps('b')} />
<Радио
  {...controlProps('c')}
  х = {{
    '& .MuiSvgIcon-root': {
      размер шрифта: 28,
    },
  }}
/> 
 

<Радио {. ..controlProps(‘b’)} /> <Радио {...controlProps('c')} х = {{ '& .MuiSvgIcon-root': { размер шрифта: 28, }, }} />

Нажмите Введите , чтобы начать редактирование

Цвет

 



<Радио
  {...controlProps('e')}
  х = {{
    цвет: розовый[800],
    '&.Mui-проверено': {
      цвет: розовый[600],
    },
  }}
/> 
 

<Радио {...controlProps('a')} />

<Радио {...controlProps('е')} х = {{ цвет: розовый[800], '&.Mui-проверено': { цвет: розовый[600], }, }} />

Нажмите Введите , чтобы начать редактирование

Метка. радиокнопки должны иметь значение, выбранное по умолчанию.

Если это не так, вы можете отобразить ошибку, если при отправке формы не выбрано значение:

Популярная викторина: MUI…

Лучший! Худший.

Выбирайте с умом

Настройка

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

Пол

FemaleMaleOther (параметр отключен)

useRadioGroup

Для расширенных вариантов использования настройки доступен хук useRadioGroup() . Он возвращает значение контекста родительской радиогруппы. Компонент Radio использует этот хук внутри.

API

 импорт {useRadioGroup} из '@mui/material/RadioGroup';
 

Возвращает

значение ( объект ):

• значение.имя (
  строка [необязательно]): имя, используемое для ссылки на значение элемента управления.
• value.onChange ( func [необязательно]): обратный вызов запускается при выборе переключателя.
• значение.значение ( любое [необязательно]): значение выбранного переключателя.

Пример

FirstSecond

 
  } />
  } />
 
 

} />

} />

Нажмите Введите , чтобы начать редактирование

Когда использовать

• Флажки и радиокнопки

Доступность

(WAI-ARIA: https://www. w3.org/WAI/ARIA/apg/patterns/radiobutton/)

• Все элементы управления формой должны иметь метки, включая переключатели, флажки и переключатели. В большинстве случаев это делается с помощью элемента (FormControlLabel).
• Если метку нельзя использовать, необходимо добавить атрибут непосредственно в компонент ввода. В этом случае вы можете применить дополнительный атрибут (например, aria-label , aria-labeledby , title ) через свойство inputProps .

 <Радио
  значение = "радиоА"
  inputProps={{
    'aria-label': 'Радио А',
  }}
/>
 

API

См. приведенную ниже документацию для полной ссылки на все реквизиты и классы, доступные для компонентов, упомянутых здесь.

• <Контроль формы />
• <ФормКонтроллабел />
• <метка формы />
• <Радио />
• <Радиогруппа />

javascript — доступный вход радио, запускает событие onChange с помощью пробела или клавиши Enter

Я читал документацию по элементу MDN . Я хочу сделать доступными радиокнопки. Итак, я хочу, чтобы пользователь мог переключаться между каждым переключателем, и когда он нажимает , пробел или , введите , чтобы вызвать onChange event и выберите переключатель.

Вот мой код:

 

    
Тип излучения:
        <дел>
            
              console.log('test')} />альфа