@eisgs/radio

`label` позволяет указать дополнительную информацию для пользователя

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
@eisgs/radio
1.2.02 months agoa year agoMinified + gzip package size for @eisgs/radio in KB

Readme

Базовый Radio

label позволяет указать дополнительную информацию для пользователя
const [value, setValue] = React.useState();

const options = [
  { id: 1, description: 'Значение 1', code: '1' },
  { id: 2, description: 'Значение 2', code: '2' },
  { id: 3, description: 'Значение 3', code: '3' },
  { id: 4, description: 'Значение 4', code: '4' },
];

<Radio
  label="Выбор"
  value={value}
  options={options}
  onChange={setValue}
/>

Кастомные ключи

keyLabel, keyValue кастомные ключи для опций
const [value, setValue] = React.useState();

const options = [
  { id: 1, text: 'Значение 1', data: '1' },
  { id: 2, text: 'Значение 2', data: '2' },
  { id: 3, text: 'Значение 3', data: '3' },
  { id: 4, text: 'Значение 4', data: '4' },
];

<Radio
  keyLabel="text"
  keyValue="data"
  value={value}
  options={options}
  onChange={setValue}
/>

disabled

disabled блокирует ввод значений
const [value, setValue] = React.useState('2');

const options = [
  { id: 1, description: 'Значение 1', code: '1' },
  { id: 2, description: 'Значение 2', code: '2' },
  { id: 3, description: 'Значение 3', code: '3' },
  { id: 4, description: 'Значение 4', code: '4' },
];

<Radio
  value={value}
  options={options}
  onChange={setValue}
  disabled
/>

Вертикальное расположение опций

direction управляет вариантами расположения опций
const [value, setValue] = React.useState();

const options = [
  { id: 1, description: 'Значение 1', code: '1' },
  { id: 2, description: 'Значение 2', code: '2' },
  { id: 3, description: 'Значение 3', code: '3' },
  { id: 4, description: 'Значение 4', code: '4' },
];

<Radio
  value={value}
  options={options}
  onChange={setValue}
  direction="vertical"
/>

Ошибка (ЕИСЖС)

При наличии error текст ошибки отобразится под компонентом
const error = 'Ошибка';
const options = [
  { id: 1, description: 'Значение 1', code: '1' },
  { id: 2, description: 'Значение 2', code: '2' },
  { id: 3, description: 'Значение 3', code: '3' },
  { id: 4, description: 'Значение 4', code: '4'},
];

<>
  <Radio
    options={options}
    error={error}
    styles={`margin-bottom: 40px;`}
  />
  <Radio
    options={options}
    direction="vertical"
    error={error}
  />
</>

Подсказка (ЕИСЖС)

При передаче options можно указать подсказку для каждого варианта ответа (поле hint)
const options = [
  { id: 1, description: 'Значение 1', code: '1' },
  { id: 2, description: 'Значение 2', code: '2' },
  { id: 3, description: 'Значение 3', code: '3' },
  { id: 4, description: 'Значение 4', code: '4', hint: 'Подсказка 4' },
];

<>
  <Radio
    options={options}
  />
  <Radio
    options={options}
    direction="vertical"
  />
</>

Отображение подсказки при описании в несколько строк
const options = [
  { id: 1, description: 'Длинное наименование значения', code: '1', hint: 'Подсказка 1' },
];

<Radio
  options={options}
  direction="vertical"
  styles={`max-width: 220px;`}
/>

Отображение подсказки при размещении компонента в модальном окне
import { useModal, Modal, ModalHeader } from "@eisgs/modal";
import { Button } from "@eisgs/button";

const modal = useModal();
const modalName = 'RADIO';

const options = [
  {id: 1, description: 'Значение 1', code: '1', hint: 'Подсказка 1'},
];

<>
<Button onClick={() => modal.open(modalName)}>Открыть модальное окно</Button>
<Modal name={modalName}>
  <ModalHeader>Radio с подсказкой</ModalHeader>
  <Radio
    options={options}
    direction="vertical"
  />
</Modal>
</>

view (ИЖС)

Доступные значения desktop и mobile. Значение по умолчанию desktop
const views = ['desktop', 'mobile'].map(view => ({view, options: [{id: view, description: view, code: view}]}));

<div>
  {views.map(({view, options}) => <Radio key={view} options={options} view={view}/>)}
</div>