Radio#

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

Radio API#

№	Свойство	Описание	Значение по умолчанию
1	classes	JSS-классы для стилизации `Partial<Record<"input" / "disabled" / "radio" / "control" / "checked" / "radioMark", string>>`	-
2	checked	Показывает, выбран ли компонент (boolean)	-
3	disabled	Элемент отключен (boolean)	-
4	inputProps	Свойства элемента input `InputHTMLAttributes<HTMLInputElement>`	-
5	name	Атрибут name элемента input (string)	-
6	value	Значение поля input (string)	-
7	onChange	Обработчик, вызываемый при изменении состояния `((value: T, event: ChangeEvent<HTMLInputElement>) => void)`	-
8	ref	`((instance: HTMLLabelElement / null) => void) / RefObject<HTMLLabelElement> / null`	-

RadioGroup API

№	Свойство	Описание	Значение по умолчанию
1	classes	JSS-классы для стилизации `Partial<Record<"disabled" / "radioGroup" / "vertical" / "container" / "error", string>>`	-
2	label	Подпись над полем ввода (ReactNode)	-
3	labelProps	Свойства компонента InputLabel (InputLabelProps)	-
4	direction	Направление расположения элементов "horizontal", "vertical"	"horizontal"
5	value	Значение поля (string)	-
6	name	Имя элемента (string)	-
7	onChange	Обработчик изменения поля `((value: T, event: ChangeEvent<HTMLInputElement>) => void)`	-
8	helperText	Подпись под полем ввода (ReactNode)	-
9	helperTextProps	Свойства компонента InputHelperText (InputHelperTextProps)	-
10	disabled	Поле отключено (boolean)	-
11	error	Поле содержит ошибку (boolean)	-
12	ref	`((instance: HTMLDivElement / null) => void) / RefObject<HTMLDivElement> / null`	-

import { Radio } from '@v-uik/radio'
import { RadioGroup } from '@v-uik/radio-group'

Автономная радиокнопка и ее свойства#

Радиокнопка — это обертка вокруг <input type="radio">, которая обычно используется для создания группы радиокнопок, списков с единичным выбором и тому подобного. Одновременно пользователь может выбрать лишь одну радиокнопку из предложенных.

Ниже представлены состояния радиокнопки: не выбрано, выбрано и неактивная.

<Radio value="normal" />
<Radio value="normal" checked />
<Radio value="active" disabled />

Группа радиокнопок#

Обертка RadioGroup упрощает работу с группой радиокнопок, а также реализует управление радиокнопками с клавиатуры.

import * as React from 'react'
import { RadioGroup } from '@v-uik/radio-group'
import { Radio } from '@v-uik/radio'
import { LabelControl } from '@v-uik/label-control'

export const Vertical = (): React.ReactElement => {
  const [value, setValue] = React.useState('')

  return (
    <RadioGroup
      label="Выберите способ оплаты"
      value={value}
      direction="vertical"
      onChange={setValue}
    >
      <LabelControl value="debt" control={<Radio />} label="Дебетовая карта" />
      <LabelControl
        value="credit"
        control={<Radio />}
        label="Кредитная карта"
      />
      <LabelControl value="cash" control={<Radio />} label="Наличные" />
    </RadioGroup>
  )
}

Горизонтальная группа#

import * as React from 'react'
import { RadioGroup } from '@v-uik/radio-group'
import { Radio } from '@v-uik/radio'
import { LabelControl } from '@v-uik/label-control'

export const Horizontal = (): React.ReactElement => {
  const [value, setValue] = React.useState('debt')

  return (
    <RadioGroup
      label="Выберите способ оплаты"
      value={value}
      direction="horizontal"
      onChange={setValue}
    >
      <LabelControl value="debt" control={<Radio />} label="Дебетовая карта" />
      <LabelControl
        value="credit"
        control={<Radio />}
        label="Кредитная карта"
      />
      <LabelControl value="cash" control={<Radio />} label="Наличные" />
    </RadioGroup>
  )
}

Группа радиокнопок с разным расположением#

import * as React from 'react'
import { RadioGroup } from '@v-uik/radio-group'
import { LabelControl } from '@v-uik/label-control'
import { Radio } from '@v-uik/radio'

export const DifferentPositionRadio = (): React.ReactElement => {
  const [value, setValue] = React.useState('')

  return (
    <RadioGroup
      label="Выберите способ оплаты"
      value={value}
      direction="horizontal"
      onChange={setValue}
    >
      <LabelControl
        labelPlacement="start"
        value="start"
        control={<Radio />}
        label="В начале"
      />
      <LabelControl
        labelPlacement="top"
        value="top"
        control={<Radio />}
        label="Сверху"
      />
      <LabelControl
        labelPlacement="bottom"
        value="bottom"
        control={<Radio />}
        label="Снизу"
      />
      <LabelControl
        labelPlacement="end"
        value="end"
        control={<Radio />}
        label="В конце"
      />
    </RadioGroup>
  )
}

Заблокированная радиокнопка#

import * as React from 'react'
import { RadioGroup } from '@v-uik/radio-group'
import { LabelControl } from '@v-uik/label-control'
import { Radio } from '@v-uik/radio'

export const DisabledRadio = (): React.ReactElement => {
  const [value, setValue] = React.useState('block1')

  return (
    <RadioGroup
      label="Заблокированная и доступная радиокнопка"
      value={value}
      direction="horizontal"
      onChange={setValue}
    >
      <LabelControl
        disabled
        label="Заблокированный 1"
        value="block1"
        control={<Radio />}
      />
      <LabelControl
        disabled
        label="Заблокированный 2"
        value="block2"
        control={<Radio />}
      />
      <LabelControl
        label="Доступный"
        disabled={false}
        value="enabled"
        control={<Radio />}
      />
    </RadioGroup>
  )
}