Управление и ввод

`<ya-kit-button />`

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

Свойства элемента

Свойство	Тип	Описание
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`	Обработчик, вызываемый при клике.

Пример внешнего вида

`<ya-kit-checkbox />`

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

Примечание

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

Свойства элемента

Свойство	Тип	Описание
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`	Обработчик, вызываемый при изменении значения.

Пример использования


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

Пример внешнего вида

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

`<ya-kit-input />`

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

Примечание

Для отрисовки label и/или сообщения об ошибке необходимо использовать компонент в связке с .

Свойства элемента

Свойство	Тип	Описание
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`	Обработчик, вызываемый при изменении значения.

Пример использования


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

Пример внешнего вида

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

`<ya-kit-input-stepper />`

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

Свойства элемента

Свойство	Тип	Описание
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`	Обработчик, вызываемый при изменении значения.

Пример использования

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

Пример внешнего вида

`<ya-kit-form-control />`

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

Свойства элемента

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

Пример использования


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

Пример внешнего вида

`<ya-kit-form-control-label />`

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

Свойства элемента

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

Пример использования


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

Связанные компоненты: ya-kit-checkbox, ya-kit-switch.

`<ya-kit-switch />`

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

Примечание

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

Свойства элемента

Свойство	Тип	Описание
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`	Обработчик, вызываемый при изменении значения.

Пример использования

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

Пример внешнего вида

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

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

Написать в чат

Написать письмо

Была ли статья полезна?

Контент

Состояния и уведомления