---
metadata:
  - name: generator
    content: Diplodoc Platform v5.70.0
alternate:
  - https://yandex.ru/support/kit/ru/site-editor/custom-sections/shablons/components/inputs-forms.md
  - href: https://yandex.ru/support/kit/ru/site-editor/custom-sections/shablons/components/inputs-forms.md
    type: text/markdown
    title: Markdown version
  - href: https://yandex.ru/support/kit/ru/llms.txt?revision=r22105010
    rel: describedby
---
> **Documentation Index:** Fetch the complete configuration index at https://yandex.ru/support/kit/ru/llms.txt?revision=r22105010



# Вводы и формы

Интерактивные компоненты для сбора пользовательского ввода и создания форм.

## `<ya-kit-button />` {#button}

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

{% cut "Свойства элемента" %}

#|
|| **Свойство** | **Тип** | **Описание** ||
|| **class** | `string` | Дополнительные CSS‑классы для стилизации. ||
|| **color** | `primary`, `secondary`, `neutral`, `outlined`, `flat` | Цветовое оформление кнопки:
- `primary` — основная кнопка;
- `secondary` — вторичная кнопка;
- `neutral` — вторичная монохромная кнопка;
- `outlined` — кнопка с выделенной границей и прозрачным фоном;
- `flat` — кнопка с прозрачным фоном. ||
|| **size** | `xs`, `sm`, `md`, `lg` | Размер компонента. По умолчанию `md`:
- `xs` — маленький;
- `sm` — небольшой;
- `md` — средний;
- `lg` — большой;
- `xl` — очень большой. ||
|| **is‑disabled** | `boolean` | Признак отключения кнопки. ||
|| **is‑loading** | `boolean` | Признак состояния загрузки кнопки. ||
|| **on‑click** | `() => void` | Обработчик, вызываемый при клике. ||
|#

{% endcut %}


{% cut "Пример внешнего вида" %}

![](../../../../_images/kit-button.png =x300)

{% endcut %}

## `<ya-kit-checkbox />` {#kit-checkbox}

Компонент для выбора одного или нескольких элементов из набора.


{% note info %}

Для отрисовки label и/или сообщения об ошибке необходимо использовать компонент в связке с `<ya-kit-form-control-label />`.

{% endnote %}

{% cut "Свойства элемента" %}

#|
|| **Свойство** | **Тип** | **Описание** ||
|| **class** | `string` | Дополнительные CSS‑классы для стилизации. ||
|| **value** | `string` | Уникальное значение, используется для идентификации в формах и обработчиках событий. ||
|| **color** | `primary, secondary` | Цветовое оформление компонента. По умолчанию — `primary`. ||
|| **is-selected** | `boolean` | Текущее состояние компонента (checked/unchecked). ||
|| **is-disabled** | `boolean` | Индикатор, который указывает, что компонент недоступен для взаимодействия. ||
|| **is-error** | `boolean` | Индикатор, который указывает, что компонент содержит ошибки валидации. ||
|| **on-change** | `(value: boolean) => void` | Обработчик, вызываемый при изменении значения. ||
|#

{% endcut %}

 

{% cut "Пример использования" %}

```handlebars

<form-control-label label="Согласие с правилами сервиса">
  <ya-kit-checkbox
    class="custom-class"
    is-selected="{{ controller.agreement }}"
    on-change="{{ controller.onToggleAgreement }}"
  />
</form-control-label>

```

{% endcut %}

{% cut "Пример внешнего вида" %}

![](../../../../_images/kit-checkbox.png =x50)
![](../../../../_images/kit-checkbox1.png =x50)

{% endcut %}

Связанные компоненты: [ya-kit-form-control-label](#control-label).

## `<ya-kit-input />` {#kit-input}

Компонент для ввода текстовых значений.

{% note info %}

Для отрисовки label и/или сообщения об ошибке необходимо использовать компонент в связке с <ya-kit-form-control />.

{% endnote %}

{% cut "Свойства элемента" %}

#|
|| **Свойство** | **Тип** | **Описание** ||
|| **class** | `string` | Дополнительные CSS‑классы для стилизации. ||
|| **value** | `string` | Текущее значение компонента. ||
|| **size** | `xs, sm, md, lg` | Размер компонента: 
 - `xs` — маленький;
 - `sm` — небольшой;
 - `md` — средний;
 - `lg` — большой.
По умолчанию — `md`. ||
|| **color** | `primary, flat` | Цвет компонента:
 - `primary` — основной;
 - `flat `— прозрачный.
По умолчанию — `primary`. ||
|| **is-disabled** | `boolean` | Индикатор, который указывает, что компонент недоступен для взаимодействия. ||
|| **is-error** | `boolean` | Индикатор, который указывает, что компонент содержит ошибки валидации. ||
|| **on-change** | `(value: string) => void` | Обработчик, вызываемый при изменении значения. ||
|#

{% endcut %}

{% cut "Пример использования" %}

```handlebars

<form-control label="Email">
  <ya-kit-input
    class="custom-class"
    placeholder="Ваш e‑mail"
    value="{{ controller.model.email }}"
    on-change="{{ controller.onEmailChange }}"
  />
</form-control>

```

{% endcut %}

{% cut "Пример внешнего вида" %}

![](../../../../_images/kit-input.png =x50)

{% endcut %}

Связанные компоненты: [ya-kit-form-control](#form-control).

## `<ya-kit-input-stepper />` {#stepper}

Компонент для ввода числовых значений с кнопками увеличения и уменьшения.

{% cut "Свойства элемента" %}

#|
|| **Свойство** | **Тип** | **Описание** ||
|| **class** | `string` | Дополнительные CSS‑классы для стилизации. ||
|| **value** | `number` | Текущее числовое значение компонента. ||
|| **size** | `xs`, `sm`, `md`, `lg` | Размер компонента. По умолчанию `md`:
- `xs` — маленький;
- `sm` — небольшой;
- `md` — средний;
- `lg` — большой;
- `xl` — очень большой. ||
|| **min** | `number` | Минимальное допустимое значение. При достижении минимума кнопка уменьшения становится неактивной. ||
|| **max** | `number` | Максимальное допустимое значение. При достижении максимума кнопка увеличения становится неактивной. ||
|| **on‑change** | `(value: number) => void` | Обработчик, вызываемый при изменении значения. ||
|#

{% endcut %}

{% cut "Пример использования" %}

```handlebars
<ya-kit-input-stepper 
    min="1"
    class="custom-class"
    value="{{controller.quantity}}" 
    on-change="{{controller.onUpdateQuantity}}"
/>
```

{% endcut %}

{% cut "Пример внешнего вида" %}

![](../../../../_images/input-stepper.png =x50)

![](../../../../_images/imput-stepper-1.png =x50)

{% endcut %}


## `<ya-kit-form-control />` {#form-control}

Компонент‑обертка для элементов формы, предоставляющий единообразное отображение заголовка, ошибок и состояния disabled. Автоматически передает состояния в дочерний компонент.

{% cut "Свойства элемента" %}

#|
|| **Свойство** | **Тип** | **Описание** ||
|| **class** | `string` | Дополнительные CSS‑классы для стилизации. ||
|| **is-disabled** | `boolean` | Индикатор, который указывает, что компонент недоступен для взаимодействия. ||
|| **label** | `string` | Заголовок, отображаемый над полем ввода. ||
|| **error-message** | `string` | Сообщение об ошибке валидации, отображаемое под полем ввода. ||
|#

{% endcut %}


{% cut "Пример использования" %}

```handlebars

<form-control label="Заголовок поля">
  <ya-kit-input ... />
</form-control>

```

{% endcut %}

{% cut "Пример внешнего вида" %}

![](../../../../_images/form-control.png =x120) 

{% endcut %}

## `<ya-kit-form-control-label />` {#control-label}

Компонент‑обертка для отрисовки дополнительного заголовка элементов формы.

{% cut "Свойства элемента" %}

#|
|| **Свойство** | **Тип** | **Описание** ||
|| **class** | `string` | Дополнительные CSS‑классы для стилизации. ||
|| **is-disabled** | `boolean` | Индикатор, который указывает, что компонент недоступен для взаимодействия. ||
|| **label** | `string` | Заголовок, отображаемый над полем ввода. ||
|| **label-placement** | `start`, `end` | Позиция метки относительно дочернего элемента:
 - `start` — заголовок перед дочерним контролом;
 - `end` — заголовок после дочернего контрола. ||
|#

{% endcut %}


{% cut "Пример использования" %}

```handlebars

<form-control-label label="Только товары в наличии"
                  class="custom-class"
                  on-change="{{ controller.onToggleAvailableOnly }}">
  <ya-kit-switch is-selected="{{ controller.availableOnly }}" />
</form-control-label>

```

{% endcut %}

Связанные компоненты: [ya-kit-checkbox](#kit-checkbox), [ya-kit-switch](#kit-switch)<!--, [ya-kit-radio]()-->.


## `<ya-kit-switch />` {#kit-switch}

Компонент для выбора одного или нескольких элементов из набора. Предпочтительно использовать на мобильных устройствах.

{% note info %}

Для отрисовки заголовка необходимо использовать компонент в связке с `<ya‑kit‑form‑control‑label />`.

{% endnote %}

{% cut "Свойства элемента" %}

#|
|| **Свойство** | **Тип** | **Описание** ||
|| **class** | `string` | Дополнительные CSS‑классы для стилизации. ||
|| **value** | `string` | Уникальное значение, используется для идентификации в формах и обработчиках событий. ||
|| **color** | `primary, secondary` | Цветовое оформление компонента. По умолчанию — `primary`. ||
|| **is-selected** | `boolean` | Текущее состояние компонента (checked/unchecked). ||
|| **is-disabled** | `boolean` | Индикатор, который указывает, что компонент недоступен для взаимодействия. ||
|| **is-error** | `boolean` | Индикатор, который указывает, что компонент содержит ошибки валидации. ||
|| **on-change** | `(value: boolean) => void` | Обработчик, вызываемый при изменении значения. ||
|#

{% endcut %}


{% cut "Пример использования" %}

```handlebars
<form-control-label label="Только товары в наличии">
  <ya-kit-switch
    class="custom-class"
    is-selected="{{ controller.availableOnly }}"
    on-change="{{ controller.onToggleAvailableOnly }}"
  />
</form-control-label>
```

{% endcut %}

{% cut "Пример внешнего вида" %}

![](../../../../_images/kit-switch1.png =x30)

![](../../../../_images/kit-switch2.png =x30)

{% endcut %}

Связанные компоненты: [ya-kit-form-control-label](#control-label).

<!-- source: ru/_includes/support.md -->


## Обратиться в службу поддержки


[Написать в чат](https://yandex.ru/chat/#/user/6c041b05-07a4-99cc-79be-8670b7aff93d){.button}

[Написать письмо](https://yandex.ru/support/kit/ru/feedback.md){.button}

[Яндекс KITᵝ в Telegram](https://t.me/kityandex_support_bot){.button}

[Яндекс KITᵝ в МАКС](https://max.ru/yandex_kit_bot){.button}
<!-- endsource: ru/_includes/support.md -->