Компоненты → 3.2

Форм-контролы

Версия:··

Элементы ввода данных: текстовые поля, выпадающие списки, флажки, переключатели. Применяются в формах записи, фильтрах и настройках.

Текстовое поле

Базовый элемент ввода текста. Класс .bb-input. Высота 50px — как на сайте oclinica.ru.

Имя пациента*

Укажите имя как в паспорте

Default

border: 1px solid #ccc · border-radius: 4px · height: 50px

Имя пациента*

Укажите имя как в паспорте

Focus

border #7ecfca + box-shadow rgba(126,207,202,0.2)

Имя пациента*

Минимум 3 символа

Error

border #dc2626 + .bb-error + сообщение об ошибке

Email (только чтение)

Email нельзя изменить

Disabled

opacity: 0.5 + cursor: not-allowed

Тип password

Пароль*

Многострочный текст

Поле для длинного ввода. Класс .bb-textarea. border: 1px solid #ccc · border-radius: 4px.

Комментарий к записи

Default

min-height: 100px · resize: vertical

Комментарий к записи

Беспокоит боль в горле...

Focus

border #7ecfca + box-shadow

Выпадающий список

Выбор из предопределённых вариантов. Класс .bb-select. Высота 50px — как в entityform на сайте.

Специализация

Default

height: 50px · кастомная стрелка SVG

Специализация

Выбрано значение

Нативное поведение браузера

Флажок

Независимый выбор одного или нескольких вариантов. Класс .bb-checkbox.

Согласен с условиямиПолучать уведомленияНедоступная опция

Одиночный флажок

Согласие с условиями, подтверждение

Интересующие направления

ЛОР — ухо, горло, носАудиологияЛОР (детская)Слухопротезирование

Группа флажков

Выбор нескольких специализаций

Переключатель варианта

Выбор одного из взаимоисключающих вариантов. Класс .bb-radio.

Тип приёма

Первичный приёмПовторный приёмОнлайн-консультация

Тип приёма

Один выбранный из нескольких

Способ контакта

ТелефонSMSWhatsApp (скоро)

С отключённым вариантом

disabled скрывает недоступный выбор

Тумблер

Булевый переключатель «включено / выключено». Компонент Toggle.

Интерактивные примеры

Получать уведомления

Email-рассылка

Push-уведомления

Недоступная настройка

Состояния

Выкл (default)

Вкл (defaultChecked)

Disabled

Disabled + вкл

Контекст применения

Как форм-контролы выглядят на сайте oclinica.ru — в реальных entityform-блоках.

Контрол	CSS класс	Где на сайте	CSS-блок на сайте
Input (text)	`.bb-input`	Форма записи ЛОР, форма хирургии, «Узнайте стоимость»	`#block-entityform-block-lor-form input[type=text]`
Select	`.bb-select`	Выбор врача в форме записи	`.field-name-field-lor-vrach .form-control.form-select`
Checkbox	`.bb-checkbox`	Согласие на обработку данных в entityform	`.form-type-checkbox.checkbox label`
Textarea	`.bb-textarea`	Комментарии (в ряде форм)	`Без специального CSS на сайте (Bootstrap)`
Toggle	`.bb-toggle-track`	Не используется на сайте (UI-компонент брендбука)	`—`

Макет — entityform «Узнайте стоимость операции» (oclinica.ru/lor)

Узнайте стоимость операции

Примеры кода

Скопируйте HTML или JSX для использования в проекте.

HTML — Input

<!-- HTML -->
<label class="bb-label">Имя пациента <span style="color:#dc2626">*</span></label>
<input class="bb-input" type="text" placeholder="Иван Иванов" />
<p class="bb-hint">Укажите имя как в паспорте</p>

<!-- Error-состояние -->
<input class="bb-input bb-error" type="text" value="ива" />
<p style="color:#dc2626;font-size:12px">Минимум 3 символа</p>

<!-- Password -->
<input class="bb-input" type="password" placeholder="Введите пароль" />

HTML — Textarea

<label class="bb-label">Комментарий к записи</label>
<textarea class="bb-textarea" rows="4" placeholder="Опишите симптомы..."></textarea>

HTML — Select

<label class="bb-label">Специализация</label>
<select class="bb-select">
  <option value="">Выберите специализацию</option>
  <option value="lor">ЛОР — ухо, горло, нос</option>
  <option value="aud">Аудиология</option>
</select>

HTML — Checkbox

<!-- Одиночный -->
<label style="display:flex;align-items:center;gap:8px">
  <input class="bb-checkbox" type="checkbox" />
  <span>Согласен с условиями</span>
</label>

<!-- Группа -->
<div style="display:flex;flex-direction:column;gap:10px">
  <label style="display:flex;align-items:center;gap:8px">
    <input class="bb-checkbox" type="checkbox" checked /> ЛОР
  </label>
  <label style="display:flex;align-items:center;gap:8px">
    <input class="bb-checkbox" type="checkbox" /> Аудиология
  </label>
</div>

HTML — Radio

<div style="display:flex;flex-direction:column;gap:10px" role="radiogroup">
  <label style="display:flex;align-items:center;gap:8px">
    <input class="bb-radio" type="radio" name="visit" value="first" checked />
    Первичный приём
  </label>
  <label style="display:flex;align-items:center;gap:8px">
    <input class="bb-radio" type="radio" name="visit" value="repeat" />
    Повторный приём
  </label>
  <label style="display:flex;align-items:center;gap:8px">
    <input class="bb-radio" type="radio" name="visit" value="online" />
    Онлайн-консультация
  </label>
</div>

JSX (React) — Toggle

import { Toggle } from "@/components/ui/Toggle";

// Базовый тумблер
<Toggle />

// С меткой
<Toggle label="Получать уведомления" />

// По умолчанию включён
<Toggle defaultChecked label="Email-рассылка" />

// Заблокирован
<Toggle disabled label="Настройка недоступна" />

CSS с сайта (perm.oclinica.ru)

/* ── Реальный CSS с perm.oclinica.ru ─────────────────────────── */

/* Базовые стили (Bootstrap override) */
input[type=text],
input[type=email] {
  padding: 0;
  height: 30px;
  border: 1px solid #ccc;
}

/* Entityform-блоки: форма записи на приём / узнать стоимость */
#block-entityform-block-lor-form input[type=text],
#block-entityform-block-lor-form-2 input[type=text],
#block-entityform-block-surgery-form input[type=text] {
  height: 50px;
  padding: 10px;
}

/* Select в entityform */
.field-name-field-lor-vrach .form-control.form-select {
  height: 50px;
  padding: 10px 16px;
  font-size: .9em;
  font-weight: bold;
  font-family: 'Fira Sans';
  color: #949290;
}

/* Webform (отдельный вид форм) — скруглений нет */
.webform-client-form input[type=text].form-text {
  border-radius: 0;
}

LLMLLM-спецификация· машиночитаемые данные · docs/LLM_CONTEXT.md

/components/forms · v2.0

Элементы ввода

Элемент	CSS класс	Тег	Высота	Описание
Input	.bb-input	<input>	50px	Текстовое поле, email, password · как на сайте
Textarea	.bb-textarea	<textarea>	≥100px	Многострочный ввод, resize:vertical
Select	.bb-select	<select>	50px	Выбор из списка, кастомная стрелка · как на сайте
Checkbox	.bb-checkbox	<input type=checkbox>	16×16px	Независимый выбор
Radio	.bb-radio	<input type=radio>	16×16px	Выбор одного из группы
Toggle	.bb-toggle-track	React-компонент	24px	Булев переключатель

Состояния полей (Input / Textarea / Select)

Состояние	Стиль
default	border: 1px solid #ccc · border-radius: 4px
focus	border: #7ecfca + box-shadow: 0 0 0 3px rgba(126,207,202,0.2)
error	border: #dc2626 (+ класс .bb-error)
disabled	opacity: 0.5 + cursor: not-allowed + bg: #f8f9fa

Параметры Toggle

Параметр	Тип	По умолч.	Описание
defaultChecked	boolean	false	Начальное состояние
disabled	boolean	false	Блокирует взаимодействие
label	string	—	Текстовая метка справа от тумблера
onChange	(checked: boolean) => void	—	Колбэк при изменении

Правила применения

✓Метка (label) всегда над полем, font-weight: 500

✓Обязательные поля помечены * красным (#dc2626)

✓Hint-текст серым под полем (font-size: 12px)

✓Ошибка — красный текст вместо hint

✓Checkbox-группы — вертикальный список с gap: 10px

✓Toggle — для булевых настроек включить/выключить

✕Не использовать placeholder вместо label

✕Не скрывать признак обязательности поля