FormLabel и метки

FormLabel — это компонент, предназначенный для создания текстовой метки, связанной с элементами формы. Он обеспечивает семантическую корректность, улучшает доступность интерфейса и помогает пользователям понимать назначение полей ввода. В библиотеке Carbon Components Svelte FormLabel интегрируется с другими элементами формы, создавая единый стиль и поведение компонентов Carbon Design System.

Основные свойства FormLabel

• for — связывает метку с определённым элементом формы через его id. Это обеспечивает корректное срабатывание фокуса при клике на метку.

  Имя пользователя
  

  Здесь метка Имя пользователя привязана к полю ввода username. Клик по метке активирует поле ввода автоматически.

• required — визуально обозначает обязательность заполнения поля. Добавляет символ * и соответствует логике валидации.

  Email
  

• disabled — используется для отключённых полей формы, изменяя визуальное отображение метки в соответствии с состоянием поля.

  Телефон
  

• align — задаёт выравнивание текста метки. Доступные значения: start, end. Обычно используется при горизонтальном расположении формы.

  Город
  

Работа с метками и элементами формы

FormLabel следует использовать в связке с соответствующими полями ввода, чтобы соблюсти семантику HTML. Для полей типа TextInput, Select, Dropdown или TextArea метка создаёт явное указание на поле и улучшает доступность для экранных читалок.

Описание задачи
</code></pre>
<p>При использовании динамических форм важно, чтобы <code>id</code>
полей был уникальным, иначе привязка метки нарушится.</p>
<h4 id="стилизация-и-кастомизация">Стилизация и кастомизация</h4>
<p><strong>FormLabel</strong> наследует стили Carbon Design System, что
обеспечивает единый вид с другими компонентами. Основные аспекты
кастомизации:</p>
<ul>
<li><strong>Цвет текста</strong> — по умолчанию метки используют
стандартный цвет текста формы. Для кастомизации можно применять
CSS-переменные или глобальные стили.</li>
<li><strong>Шрифты и размеры</strong> — стандартные размеры обеспечивают
консистентность интерфейса, но можно использовать модификаторы Carbon
для изменения размера текста.</li>
<li><strong>Интерактивные состояния</strong> — при <code>hover</code>
или <code>focus</code> метка может изменять цвет, указывать на активное
поле.</li>
</ul>
<p>Пример кастомного класса:</p>
<pre class="svelte"><code><FormLabel for="password" class="custom-label">Пароль</FormLabel>
<TextInput id="password" placeholder="Введите пароль" />
<style>
  .custom-label {
    font-weight: bold;
    color: #0f62fe;
  }
</style></code></pre>
<h4 id="поддержка-доступности-accessibility">Поддержка доступности
(Accessibility)</h4>
<p><strong>FormLabel</strong> активно улучшает доступность
интерфейса:</p>
<ul>
<li>Связка через <code>for</code> гарантирует, что экранные читалки
озвучат метку вместе с полем.</li>
<li>Атрибут <code>required</code> используется не только визуально, но и
для логики проверки форм.</li>
<li>Метка должна быть уникальной и короткой, чтобы не перегружать
пользователей лишней информацией.</li>
</ul>
<h4 id="интеграция-с-другими-компонентами-carbon">Интеграция с другими
компонентами Carbon</h4>
<p>FormLabel тесно взаимодействует с:</p>
<ul>
<li><strong>TextInput</strong> — базовое текстовое поле.</li>
<li><strong>Select</strong> — выпадающий список.</li>
<li><strong>Dropdown</strong> — расширенный список выбора.</li>
<li><strong>TextArea</strong> — многострочное поле ввода.</li>
</ul>
<p>Пример комплексной формы с несколькими метками:</p>
<pre class="svelte"><code><FormLabel for="firstName" required>Имя</FormLabel>
<TextInput id="firstName" placeholder="Введите имя" />

<FormLabel for="lastName">Фамилия</FormLabel>
<TextInput id="lastName" placeholder="Введите фамилию" />

<FormLabel for="role">Роль</FormLabel>
<Select id="role" bind:value={role}>
  <option value="">Выберите роль</option>
  <option value="admin">Администратор</option>
  <option value="user">Пользователь</option>
</Select></code></pre>
<h4 id="рекомендации-по-использованию">Рекомендации по
использованию</h4>
<ul>
<li>Всегда использовать <code>for</code> для связывания метки с
элементом формы.</li>
<li>Применять <code>required</code> только к действительно обязательным
полям.</li>
<li>Проверять уникальность <code>id</code> при динамической генерации
форм.</li>
<li>Использовать выравнивание <code>align</code> для сложных форм с
горизонтальной компоновкой.</li>
</ul>
<p><strong>FormLabel</strong> является фундаментальной частью интерфейса
форм в Carbon Components Svelte, обеспечивая семантическую корректность,
визуальное единообразие и улучшенную доступность.</p>
        </div>
                    <div class="post-navigation row mt-3 mb-4">
        <div class="previous-post-link col-md-5">
                            <a href="/tutorials/carbon-components-svelte/formgroup-i-organizatsiya-poley/"
                   rel="prev">« FormGroup и организация полей</a>
                    </div>
                    <div class="index-link col-md-2 text-center">
                <a href="/tutorials/carbon-components-svelte/">Оглавление</a>
            </div>
                <div class="next-post-link col-md-5 text-end">
                            <a href="/tutorials/carbon-components-svelte/checkbox-i-mnozhestvennyy-vybor/" rel="next">Checkbox и множественный выбор »</a>
                    </div>
    </div>
</div>
<div class="col-md-3 mt-lg-0 mt-md-0 mt-sm-3 mt-3">
    <aside class="sidebar">
                
<h3>Учебник Carbon Components Svelte</h3>

<ul>
            <li>
            Введение                            <ul>
                                            <li>
                            <a href="/tutorials/carbon-components-svelte/chto-takoe-carbon-design-system/">Что такое Carbon Design System</a>
                        </li>
                                                <li>
                            <a href="/tutorials/carbon-components-svelte/istoriya-i-filosofiya-ibm-carbon/">История и философия IBM Carbon</a>
                        </li>
                                                <li>
                            <a href="/tutorials/carbon-components-svelte/zachem-nuzhna-biblioteka-carbon-components-svelte/">Зачем нужна библиотека Carbon Components Svelte</a>
                        </li>
                                                <li>
                            <a href="/tutorials/carbon-components-svelte/ustanovka-i-pervonachalnaya-nastroyka-carbon-components-svelte/">Установка и первоначальная настройка</a>
                        </li>
                                                <li>
                            <a href="/tutorials/carbon-components-svelte/struktura-proekta-i-organizatsiya-faylov-carbon-components-svelte/">Структура проекта и организация файлов</a>
                        </li>
                                                <li>
                            <a href="/tutorials/carbon-components-svelte/sistemnye-trebovaniya-i-zavisimosti-carbon-components-svelte/">Системные требования и зависимости</a>
                        </li>
                                        </ul>
                        </li>
                <li>
            Основы работы с компонентами                            <ul>
                                            <li>
                            <a href="/tutorials/carbon-components-svelte/import-komponentov-v-svelte/">Импорт компонентов в Svelte</a>
                        </li>
                                                <li>
                            <a href="/tutorials/carbon-components-svelte/bazovaya-struktura-carbon-komponenta/">Базовая структура Carbon-компонента</a>
                        </li>
                                                <li>
                            <a href="/tutorials/carbon-components-svelte/peredacha-props-i-rabota-s-atributami/">Передача props и работа с атрибутами</a>
                        </li>
                                                <li>
                            <a href="/tutorials/carbon-components-svelte/sobytiya-i-obrabotchiki-sobytiy/">События и обработчики событий</a>
                        </li>
                                                <li>
                            <a href="/tutorials/carbon-components-svelte/sloty-i-kompozitsiya-komponentov-carbon-components-svelte/">Слоты и композиция компонентов</a>
                        </li>
                                                <li>
                            <a href="/tutorials/carbon-components-svelte/reaktivnost-i-obnovlenie-sostoyaniya/">Реактивность и обновление состояния</a>
                        </li>
                                                <li>
                            <a href="/tutorials/carbon-components-svelte/stilizatsiya-i-pereopredelenie-stiley/">Стилизация и переопределение стилей</a>
                        </li>
                                                <li>
                            <a href="/tutorials/carbon-components-svelte/temizatsiya-komponentov-carbon-components-svelte/">Темизация компонентов</a>
                        </li>
                                        </ul>
                        </li>
                <li>
            Типографика и текстовые элементы                            <ul>
                                            <li>
                            <a href="/tutorials/carbon-components-svelte/heading-i-zagolovki-raznykh-urovney/">Heading и заголовки разных уровней</a>
                        </li>
                                                <li>
                            <a href="/tutorials/carbon-components-svelte/paragraph-i-formatirovanie-teksta/">Paragraph и форматирование текста</a>
                        </li>
                                                <li>
                            <a href="/tutorials/carbon-components-svelte/link-i-tekstovye-ssylki/">Link и текстовые ссылки</a>
                        </li>
                                                <li>
                            <a href="/tutorials/carbon-components-svelte/truncate-i-obrezka-dlinnogo-teksta/">Truncate и обрезка длинного текста</a>
                        </li>
                                                <li>
                            <a href="/tutorials/carbon-components-svelte/code-i-codesnippet-dlya-otobrazheniya-koda/">Code и CodeSnippet для отображения кода</a>
                        </li>
                                                <li>
                            <a href="/tutorials/carbon-components-svelte/orderedlist-i-unorderedlist/">OrderedList и UnorderedList</a>
                        </li>
                                                <li>
                            <a href="/tutorials/carbon-components-svelte/blockquote-i-tsitaty/">Blockquote и цитаты</a>
                        </li>
                                        </ul>
                        </li>
                <li>
            Кнопки и интерактивные элементы                            <ul>
                                            <li>
                            <a href="/tutorials/carbon-components-svelte/button-i-ego-varianty-carbon-components-svelte/">Button и его варианты</a>
                        </li>
                                                <li>
                            <a href="/tutorials/carbon-components-svelte/iconbutton-dlya-knopok-s-ikonkami/">IconButton для кнопок с иконками</a>
                        </li>
                                                <li>
                            <a href="/tutorials/carbon-components-svelte/buttonset-i-gruppirovka-knopok/">ButtonSet и группировка кнопок</a>
                        </li>
                                                <li>
                            <a href="/tutorials/carbon-components-svelte/buttonskeleton-dlya-sostoyaniya-zagruzki/">ButtonSkeleton для состояния загрузки</a>
                        </li>
                                                <li>
                            <a href="/tutorials/carbon-components-svelte/rabota-s-razmerami-knopok/">Работа с размерами кнопок</a>
                        </li>
                                                <li>
                            <a href="/tutorials/carbon-components-svelte/disabled-i-loading-sostoyaniya/">Disabled и loading состояния</a>
                        </li>
                                                <li>
                            <a href="/tutorials/carbon-components-svelte/tooltip-na-knopkakh/">Tooltip на кнопках</a>
                        </li>
                                        </ul>
                        </li>
                <li>
            Формы и поля ввода                            <ul>
                                            <li>
                            <a href="/tutorials/carbon-components-svelte/textinput-i-bazovyy-vvod-teksta/">TextInput и базовый ввод текста</a>
                        </li>
                                                <li>
                            <a href="/tutorials/carbon-components-svelte/textarea-dlya-mnogostrochnogo-vvoda/">TextArea для многострочного ввода</a>
                        </li>
                                                <li>
                            <a href="/tutorials/carbon-components-svelte/passwordinput-dlya-paroley/">PasswordInput для паролей</a>
                        </li>
                                                <li>
                            <a href="/tutorials/carbon-components-svelte/numberinput-i-rabota-s-chislami/">NumberInput и работа с числами</a>
                        </li>
                                                <li>
                            <a href="/tutorials/carbon-components-svelte/search-i-pole-poiska/">Search и поле поиска</a>
                        </li>
                                                <li>
                            <a href="/tutorials/carbon-components-svelte/validatsiya-poley-vvoda-carbon-components-svelte/">Валидация полей ввода</a>
                        </li>
                                                <li>
                            <a href="/tutorials/carbon-components-svelte/sostoyaniya-oshibok-i-preduprezhdeniy/">Состояния ошибок и предупреждений</a>
                        </li>
                                                <li>
                            <a href="/tutorials/carbon-components-svelte/helper-text-i-podskazki/">Helper text и подсказки</a>
                        </li>
                                                <li>
                            <a href="/tutorials/carbon-components-svelte/formgroup-i-organizatsiya-poley/">FormGroup и организация полей</a>
                        </li>
                                                <li>
                            <a href="/tutorials/carbon-components-svelte/formlabel-i-metki/">FormLabel и метки</a>
                        </li>
                                        </ul>
                        </li>
                <li>
            Выбор и переключатели                            <ul>
                                            <li>
                            <a href="/tutorials/carbon-components-svelte/checkbox-i-mnozhestvennyy-vybor/">Checkbox и множественный выбор</a>
                        </li>
                                                <li>
                            <a href="/tutorials/carbon-components-svelte/radiobutton-i-radiobuttongroup/">RadioButton и RadioButtonGroup</a>
                        </li>
                                                <li>
                            <a href="/tutorials/carbon-components-svelte/toggle-dlya-pereklyuchateley/">Toggle для переключателей</a>
                        </li>
                                                <li>
                            <a href="/tutorials/carbon-components-svelte/select-i-vypadayushchie-spiski/">Select и выпадающие списки</a>
                        </li>
                                                <li>
                            <a href="/tutorials/carbon-components-svelte/combobox-dlya-avtodopolneniya/">ComboBox для автодополнения</a>
                        </li>
                                                <li>
                            <a href="/tutorials/carbon-components-svelte/multiselect-dlya-mnozhestvennogo-vybora/">MultiSelect для множественного выбора</a>
                        </li>
                                                <li>
                            <a href="/tutorials/carbon-components-svelte/dropdown-i-rasshirennye-vypadayushchie-menyu/">Dropdown и расширенные выпадающие меню</a>
                        </li>
                                                <li>
                            <a href="/tutorials/carbon-components-svelte/filterablemultiselect/">FilterableMultiSelect</a>
                        </li>
                                                <li>
                            <a href="/tutorials/carbon-components-svelte/timepickerselect-dlya-vybora-vremeni/">TimePickerSelect для выбора времени</a>
                        </li>
                                        </ul>
                        </li>
                <li>
            Работа с датами и временем                            <ul>
                                            <li>
                            <a href="/tutorials/carbon-components-svelte/datepicker-dlya-vybora-daty/">DatePicker для выбора даты</a>
                        </li>
                                                <li>
                            <a href="/tutorials/carbon-components-svelte/datepickerinput-i-kastomizatsiya/">DatePickerInput и кастомизация</a>
                        </li>
                                                <li>
                            <a href="/tutorials/carbon-components-svelte/timepicker-dlya-vybora-vremeni-carbon-components-svelte/">TimePicker для выбора времени</a>
                        </li>
                                                <li>
                            <a href="/tutorials/carbon-components-svelte/nastroyka-formatov-daty-i-vremeni-carbon-components-svelte/">Настройка форматов даты и времени</a>
                        </li>
                                                <li>
                            <a href="/tutorials/carbon-components-svelte/lokalizatsiya-kalendarya-carbon-components-svelte/">Локализация календаря</a>
                        </li>
                                                <li>
                            <a href="/tutorials/carbon-components-svelte/diapazony-dat-carbon-components-svelte/">Диапазоны дат</a>
                        </li>
                                                <li>
                            <a href="/tutorials/carbon-components-svelte/ogranicheniya-i-validatsiya-dat/">Ограничения и валидация дат</a>
                        </li>
                                        </ul>
                        </li>
                <li>
            Табы и навигация                            <ul>
                                            <li>
                            <a href="/tutorials/carbon-components-svelte/tabs-i-tab-dlya-vkladok/">Tabs и Tab для вкладок</a>
                        </li>
                                                <li>
                            <a href="/tutorials/carbon-components-svelte/tabcontent-i-upravlenie-soderzhimym/">TabContent и управление содержимым</a>
                        </li>
                                                <li>
                            <a href="/tutorials/carbon-components-svelte/contentswitcher-dlya-pereklyucheniya-kontenta/">ContentSwitcher для переключения контента</a>
                        </li>
                                                <li>
                            <a href="/tutorials/carbon-components-svelte/overflowmenu-dlya-skrytykh-optsiy/">OverflowMenu для скрытых опций</a>
                        </li>
                                                <li>
                            <a href="/tutorials/carbon-components-svelte/breadcrumb-dlya-navigatsionnykh-tsepochek/">Breadcrumb для навигационных цепочек</a>
                        </li>
                                                <li>
                            <a href="/tutorials/carbon-components-svelte/pagination-dlya-postranichnoy-navigatsii/">Pagination для постраничной навигации</a>
                        </li>
                                                <li>
                            <a href="/tutorials/carbon-components-svelte/progressindicator-dlya-mnogoshagovykh-protsessov/">ProgressIndicator для многошаговых процессов</a>
                        </li>
                                        </ul>
                        </li>
                <li>
            Уведомления и обратная связь                            <ul>
                                            <li>
                            <a href="/tutorials/carbon-components-svelte/inlinenotification-dlya-vstroennykh-uvedomleniy/">InlineNotification для встроенных уведомлений</a>
                        </li>
                                                <li>
                            <a href="/tutorials/carbon-components-svelte/toastnotification-dlya-vsplyvayushchikh-soobshcheniy/">ToastNotification для всплывающих сообщений</a>
                        </li>
                                                <li>
                            <a href="/tutorials/carbon-components-svelte/notificationactionbutton/">NotificationActionButton</a>
                        </li>
                                                <li>
                            <a href="/tutorials/carbon-components-svelte/inlineloading-dlya-indikatsii-zagruzki/">InlineLoading для индикации загрузки</a>
                        </li>
                                                <li>
                            <a href="/tutorials/carbon-components-svelte/loading-dlya-polnoekrannoy-zagruzki/">Loading для полноэкранной загрузки</a>
                        </li>
                                                <li>
                            <a href="/tutorials/carbon-components-svelte/progressbar-dlya-otobrazheniya-progressa/">ProgressBar для отображения прогресса</a>
                        </li>
                                                <li>
                            <a href="/tutorials/carbon-components-svelte/skeletontext-i-skeletonplaceholder/">SkeletonText и SkeletonPlaceholder</a>
                        </li>
                                        </ul>
                        </li>
                <li>
            Модальные окна и оверлеи                            <ul>
                                            <li>
                            <a href="/tutorials/carbon-components-svelte/modal-i-bazovye-modalnye-okna/">Modal и базовые модальные окна</a>
                        </li>
                                                <li>
                            <a href="/tutorials/carbon-components-svelte/composedmodal-dlya-slozhnykh-modalok/">ComposedModal для сложных модалок</a>
                        </li>
                                                <li>
                            <a href="/tutorials/carbon-components-svelte/modalheader-modalbody-modalfooter/">ModalHeader, ModalBody, ModalFooter</a>
                        </li>
                                                <li>
                            <a href="/tutorials/carbon-components-svelte/passivemodal-bez-deystviy/">PassiveModal без действий</a>
                        </li>
                                                <li>
                            <a href="/tutorials/carbon-components-svelte/transactionalmodal-dlya-podtverzhdeniy/">TransactionalModal для подтверждений</a>
                        </li>
                                                <li>
                            <a href="/tutorials/carbon-components-svelte/upravlenie-fokusom-v-modalnykh-oknakh/">Управление фокусом в модальных окнах</a>
                        </li>
                                                <li>
                            <a href="/tutorials/carbon-components-svelte/animatsii-otkrytiya-i-zakrytiya-carbon-components-svelte/">Анимации открытия и закрытия</a>
                        </li>
                                        </ul>
                        </li>
                <li>
            Таблицы и отображение данных                            <ul>
                                            <li>
                            <a href="/tutorials/carbon-components-svelte/datatable-i-osnovy-raboty-s-tablitsami/">DataTable и основы работы с таблицами</a>
                        </li>
                                                <li>
                            <a href="/tutorials/carbon-components-svelte/table-tablehead-tablebody-tablerow-tablecell/">Table, TableHead, TableBody, TableRow, TableCell</a>
                        </li>
                                                <li>
                            <a href="/tutorials/carbon-components-svelte/tableheader-dlya-zagolovkov-stolbtsov/">TableHeader для заголовков столбцов</a>
                        </li>
                                                <li>
                            <a href="/tutorials/carbon-components-svelte/tablecontainer-i-tabletoolbar/">TableContainer и TableToolbar</a>
                        </li>
                                                <li>
                            <a href="/tutorials/carbon-components-svelte/sortirovka-dannykh-v-tablitse/">Сортировка данных в таблице</a>
                        </li>
                                                <li>
                            <a href="/tutorials/carbon-components-svelte/filtratsiya-strok-tablitsy/">Фильтрация строк таблицы</a>
                        </li>
                                                <li>
                            <a href="/tutorials/carbon-components-svelte/pagination-v-tablitsakh/">Pagination в таблицах</a>
                        </li>
                                                <li>
                            <a href="/tutorials/carbon-components-svelte/tablebatchactions-dlya-massovykh-deystviy/">TableBatchActions для массовых действий</a>
                        </li>
                                                <li>
                            <a href="/tutorials/carbon-components-svelte/expandable-rows-dlya-raskryvayushchikhsya-strok/">Expandable rows для раскрывающихся строк</a>
                        </li>
                                                <li>
                            <a href="/tutorials/carbon-components-svelte/selectable-rows-i-vybor-strok/">Selectable rows и выбор строк</a>
                        </li>
                                                <li>
                            <a href="/tutorials/carbon-components-svelte/tableskeleton-dlya-zagruzki/">TableSkeleton для загрузки</a>
                        </li>
                                        </ul>
                        </li>
                <li>
            Списки и древовидные структуры                            <ul>
                                            <li>
                            <a href="/tutorials/carbon-components-svelte/structuredlist-dlya-strukturirovannykh-spiskov/">StructuredList для структурированных списков</a>
                        </li>
                                                <li>
                            <a href="/tutorials/carbon-components-svelte/treeview-dlya-ierarkhicheskikh-dannykh/">TreeView для иерархических данных</a>
                        </li>
                                                <li>
                            <a href="/tutorials/carbon-components-svelte/treenode-i-rabota-s-uzlami/">TreeNode и работа с узлами</a>
                        </li>
                                                <li>
                            <a href="/tutorials/carbon-components-svelte/raskrytie-i-svorachivanie-uzlov/">Раскрытие и сворачивание узлов</a>
                        </li>
                                                <li>
                            <a href="/tutorials/carbon-components-svelte/vybor-elementov-v-dereve/">Выбор элементов в дереве</a>
                        </li>
                                                <li>
                            <a href="/tutorials/carbon-components-svelte/ikonki-i-kastomizatsiya-uzlov/">Иконки и кастомизация узлов</a>
                        </li>
                                        </ul>
                        </li>
                <li>
            Аккордеоны и раскрывающиеся блоки                            <ul>
                                            <li>
                            <a href="/tutorials/carbon-components-svelte/accordion-i-accordion-item/">Accordion и Accordion Item</a>
                        </li>
                                                <li>
                            <a href="/tutorials/carbon-components-svelte/upravlenie-raskrytiem-sektsiy/">Управление раскрытием секций</a>
                        </li>
                                                <li>
                            <a href="/tutorials/carbon-components-svelte/vlozhennye-akkordeony-carbon-components-svelte/">Вложенные аккордеоны</a>
                        </li>
                                                <li>
                            <a href="/tutorials/carbon-components-svelte/ikonki-i-kastomizatsiya-zagolovkov/">Иконки и кастомизация заголовков</a>
                        </li>
                                                <li>
                            <a href="/tutorials/carbon-components-svelte/programmnoe-upravlenie-sostoyaniem-carbon-components-svelte/">Программное управление состоянием</a>
                        </li>
                                        </ul>
                        </li>
                <li>
            Теги и бейджи                            <ul>
                                            <li>
                            <a href="/tutorials/carbon-components-svelte/tag-dlya-metok-i-kategoriy/">Tag для меток и категорий</a>
                        </li>
                                                <li>
                            <a href="/tutorials/carbon-components-svelte/tipy-tegov-i-ikh-primenenie/">Типы тегов и их применение</a>
                        </li>
                                                <li>
                            <a href="/tutorials/carbon-components-svelte/filter-tags-dlya-filtratsii/">Filter tags для фильтрации</a>
                        </li>
                                                <li>
                            <a href="/tutorials/carbon-components-svelte/interaktivnye-tegi-s-zakrytiem/">Интерактивные теги с закрытием</a>
                        </li>
                                                <li>
                            <a href="/tutorials/carbon-components-svelte/tag-skeleton-dlya-zagruzki/">Tag Skeleton для загрузки</a>
                        </li>
                                        </ul>
                        </li>
                <li>
            Тайлы и карточки                            <ul>
                                            <li>
                            <a href="/tutorials/carbon-components-svelte/tile-i-bazovye-plitki/">Tile и базовые плитки</a>
                        </li>
                                                <li>
                            <a href="/tutorials/carbon-components-svelte/clickabletile-dlya-interaktivnykh-plitok/">ClickableTile для интерактивных плиток</a>
                        </li>
                                                <li>
                            <a href="/tutorials/carbon-components-svelte/selectabletile-dlya-vybora/">SelectableTile для выбора</a>
                        </li>
                                                <li>
                            <a href="/tutorials/carbon-components-svelte/expandabletile-dlya-raskryvayushchikhsya-plitok/">ExpandableTile для раскрывающихся плиток</a>
                        </li>
                                                <li>
                            <a href="/tutorials/carbon-components-svelte/radiotile-dlya-vybora-odnogo-varianta/">RadioTile для выбора одного варианта</a>
                        </li>
                                                <li>
                            <a href="/tutorials/carbon-components-svelte/tilegroup-dlya-gruppirovki/">TileGroup для группировки</a>
                        </li>
                                        </ul>
                        </li>
                <li>
            Поиск и фильтрация                            <ul>
                                            <li>
                            <a href="/tutorials/carbon-components-svelte/search-dlya-poiska-po-kontentu/">Search для поиска по контенту</a>
                        </li>
                                                <li>
                            <a href="/tutorials/carbon-components-svelte/searchskeleton-dlya-zagruzki/">SearchSkeleton для загрузки</a>
                        </li>
                                                <li>
                            <a href="/tutorials/carbon-components-svelte/debounce-i-optimizatsiya-zaprosov/">Debounce и оптимизация запросов</a>
                        </li>
                                                <li>
                            <a href="/tutorials/carbon-components-svelte/kastomnye-filtry/">Кастомные фильтры</a>
                        </li>
                                        </ul>
                        </li>
                <li>
            Иконки                            <ul>
                                            <li>
                            <a href="/tutorials/carbon-components-svelte/import-i-ispolzovanie-carbon-icons/">Импорт и использование Carbon Icons</a>
                        </li>
                                                <li>
                            <a href="/tutorials/carbon-components-svelte/razmery-ikonok-carbon-components-svelte/">Размеры иконок</a>
                        </li>
                                                <li>
                            <a href="/tutorials/carbon-components-svelte/tsveta-i-stilizatsiya/">Цвета и стилизация</a>
                        </li>
                                                <li>
                            <a href="/tutorials/carbon-components-svelte/sozdanie-kastomnykh-ikonok-carbon-components-svelte/">Создание кастомных иконок</a>
                        </li>
                                                <li>
                            <a href="/tutorials/carbon-components-svelte/icon-only-komponenty/">Icon-only компоненты</a>
                        </li>
                                        </ul>
                        </li>
                <li>
            Файлы и загрузка                            <ul>
                                            <li>
                            <a href="/tutorials/carbon-components-svelte/fileuploader-dlya-zagruzki-faylov/">FileUploader для загрузки файлов</a>
                        </li>
                                                <li>
                            <a href="/tutorials/carbon-components-svelte/fileuploaderbutton/">FileUploaderButton</a>
                        </li>
                                                <li>
                            <a href="/tutorials/carbon-components-svelte/fileuploaderdropcontainer/">FileUploaderDropContainer</a>
                        </li>
                                                <li>
                            <a href="/tutorials/carbon-components-svelte/fileuploaderitem/">FileUploaderItem</a>
                        </li>
                                                <li>
                            <a href="/tutorials/carbon-components-svelte/validatsiya-tipov-faylov-carbon-components-svelte/">Валидация типов файлов</a>
                        </li>
                                                <li>
                            <a href="/tutorials/carbon-components-svelte/ogranichenie-razmera-faylov-carbon-components-svelte/">Ограничение размера файлов</a>
                        </li>
                                                <li>
                            <a href="/tutorials/carbon-components-svelte/mnozhestvennaya-zagruzka-carbon-components-svelte/">Множественная загрузка</a>
                        </li>
                                        </ul>
                        </li>
                <li>
            Слайдеры и ползунки                            <ul>
                                            <li>
                            <a href="/tutorials/carbon-components-svelte/slider-dlya-vybora-znacheniya/">Slider для выбора значения</a>
                        </li>
                                                <li>
                            <a href="/tutorials/carbon-components-svelte/contentswitcher-kak-alternativa/">ContentSwitcher как альтернатива</a>
                        </li>
                                                <li>
                            <a href="/tutorials/carbon-components-svelte/nastroyka-diapazona-znacheniy/">Настройка диапазона значений</a>
                        </li>
                                                <li>
                            <a href="/tutorials/carbon-components-svelte/shagi-i-diskretnye-znacheniya/">Шаги и дискретные значения</a>
                        </li>
                                                <li>
                            <a href="/tutorials/carbon-components-svelte/formatirovanie-otobrazhaemykh-znacheniy/">Форматирование отображаемых значений</a>
                        </li>
                                        </ul>
                        </li>
                <li>
            Боковые панели и выдвижные меню                            <ul>
                                            <li>
                            <a href="/tutorials/carbon-components-svelte/sidenav-dlya-bokovoy-navigatsii/">SideNav для боковой навигации</a>
                        </li>
                                                <li>
                            <a href="/tutorials/carbon-components-svelte/sidenavitems-i-sidenavlink/">SideNavItems и SideNavLink</a>
                        </li>
                                                <li>
                            <a href="/tutorials/carbon-components-svelte/sidenavmenu-dlya-vlozhennykh-menyu/">SideNavMenu для вложенных меню</a>
                        </li>
                                                <li>
                            <a href="/tutorials/carbon-components-svelte/header-dlya-shapki-prilozheniya/">Header для шапки приложения</a>
                        </li>
                                                <li>
                            <a href="/tutorials/carbon-components-svelte/headernav-i-headernavitem/">HeaderNav и HeaderNavItem</a>
                        </li>
                                                <li>
                            <a href="/tutorials/carbon-components-svelte/headerglobalbar/">HeaderGlobalBar</a>
                        </li>
                                                <li>
                            <a href="/tutorials/carbon-components-svelte/skiptocontent-dlya-dostupnosti/">SkipToContent для доступности</a>
                        </li>
                                        </ul>
                        </li>
                <li>
            Сетка и лейаут                            <ul>
                                            <li>
                            <a href="/tutorials/carbon-components-svelte/grid-i-sistema-setok-carbon/">Grid и система сеток Carbon</a>
                        </li>
                                                <li>
                            <a href="/tutorials/carbon-components-svelte/row-i-column-dlya-strok-i-kolonok/">Row и Column для строк и колонок</a>
                        </li>
                                                <li>
                            <a href="/tutorials/carbon-components-svelte/breakpoints-i-adaptivnost/">Breakpoints и адаптивность</a>
                        </li>
                                                <li>
                            <a href="/tutorials/carbon-components-svelte/gutter-i-otstupy/">Gutter и отступы</a>
                        </li>
                                                <li>
                            <a href="/tutorials/carbon-components-svelte/flexgrid-dlya-gibkikh-leyautov/">FlexGrid для гибких лейаутов</a>
                        </li>
                                                <li>
                            <a href="/tutorials/carbon-components-svelte/vlozhennye-setki-carbon-components-svelte/">Вложенные сетки</a>
                        </li>
                                        </ul>
                        </li>
                <li>
            Темы и кастомизация                            <ul>
                                            <li>
                            <a href="/tutorials/carbon-components-svelte/pereklyuchenie-mezhdu-temami-carbon-components-svelte/">Переключение между темами</a>
                        </li>
                                                <li>
                            <a href="/tutorials/carbon-components-svelte/white-gray10-gray90-gray100-temy/">White, Gray10, Gray90, Gray100 темы</a>
                        </li>
                                                <li>
                            <a href="/tutorials/carbon-components-svelte/css-peremennye-carbon/">CSS-переменные Carbon</a>
                        </li>
                                                <li>
                            <a href="/tutorials/carbon-components-svelte/sozdanie-kastomnoy-temy-carbon-components-svelte/">Создание кастомной темы</a>
                        </li>
                                                <li>
                            <a href="/tutorials/carbon-components-svelte/theme-provider-i-kontekst/">Theme provider и контекст</a>
                        </li>
                                                <li>
                            <a href="/tutorials/carbon-components-svelte/programmnoe-izmenenie-temy/">Программное изменение темы</a>
                        </li>
                                                <li>
                            <a href="/tutorials/carbon-components-svelte/nastroyka-tsvetovoy-palitry-carbon-components-svelte/">Настройка цветовой палитры</a>
                        </li>
                                        </ul>
                        </li>
                <li>
            Доступность                            <ul>
                                            <li>
                            <a href="/tutorials/carbon-components-svelte/aria-atributy-v-komponentakh-carbon-components-svelte/">ARIA-атрибуты в компонентах</a>
                        </li>
                                                <li>
                            <a href="/tutorials/carbon-components-svelte/navigatsiya-s-klaviatury-carbon-components-svelte/">Навигация с клавиатуры</a>
                        </li>
                                                <li>
                            <a href="/tutorials/carbon-components-svelte/upravlenie-fokusom-carbon-components-svelte/">Управление фокусом</a>
                        </li>
                                                <li>
                            <a href="/tutorials/carbon-components-svelte/screen-reader-support-carbon-components-svelte/">Screen reader support</a>
                        </li>
                                                <li>
                            <a href="/tutorials/carbon-components-svelte/kontrastnost-i-chitaemost-carbon-components-svelte/">Контрастность и читаемость</a>
                        </li>
                                                <li>
                            <a href="/tutorials/carbon-components-svelte/testirovanie-dostupnosti-carbon-components-svelte/">Тестирование доступности</a>
                        </li>
                                        </ul>
                        </li>
                <li>
            Производительность и оптимизация                            <ul>
                                            <li>
                            <a href="/tutorials/carbon-components-svelte/lenivaya-zagruzka-komponentov-carbon-components-svelte/">Ленивая загрузка компонентов</a>
                        </li>
                                                <li>
                            <a href="/tutorials/carbon-components-svelte/tree-shaking-i-umenshenie-bandla/">Tree shaking и уменьшение бандла</a>
                        </li>
                                                <li>
                            <a href="/tutorials/carbon-components-svelte/virtualizatsiya-dlinnykh-spiskov-carbon-components-svelte/">Виртуализация длинных списков</a>
                        </li>
                                                <li>
                            <a href="/tutorials/carbon-components-svelte/optimizatsiya-rerenderov-carbon-components-svelte/">Оптимизация ререндеров</a>
                        </li>
                                                <li>
                            <a href="/tutorials/carbon-components-svelte/memoizatsiya-v-svelte/">Мемоизация в Svelte</a>
                        </li>
                                                <li>
                            <a href="/tutorials/carbon-components-svelte/profilirovanie-komponentov-carbon-components-svelte/">Профилирование компонентов</a>
                        </li>
                                        </ul>
                        </li>
                <li>
            Интеграция с экосистемой                            <ul>
                                            <li>
                            <a href="/tutorials/carbon-components-svelte/rabota-s-sveltekit-carbon-components-svelte/">Работа с SvelteKit</a>
                        </li>
                                                <li>
                            <a href="/tutorials/carbon-components-svelte/typescript-i-tipizatsiya-carbon-components-svelte/">TypeScript и типизация</a>
                        </li>
                                                <li>
                            <a href="/tutorials/carbon-components-svelte/stores-i-upravlenie-sostoyaniem/">Stores и управление состоянием</a>
                        </li>
                                                <li>
                            <a href="/tutorials/carbon-components-svelte/formy-i-validatsiya-s-vneshnimi-bibliotekami/">Формы и валидация с внешними библиотеками</a>
                        </li>
                                                <li>
                            <a href="/tutorials/carbon-components-svelte/internatsionalizatsiya-carbon-components-svelte/">Интернационализация</a>
                        </li>
                                                <li>
                            <a href="/tutorials/carbon-components-svelte/testirovanie-komponentov-carbon-components-svelte/">Тестирование компонентов</a>
                        </li>
                                        </ul>
                        </li>
                <li>
            Паттерны и практики                            <ul>
                                            <li>
                            <a href="/tutorials/carbon-components-svelte/kompozitsiya-slozhnykh-form/">Композиция сложных форм</a>
                        </li>
                                                <li>
                            <a href="/tutorials/carbon-components-svelte/postroenie-dashbordov/">Построение дашбордов</a>
                        </li>
                                                <li>
                            <a href="/tutorials/carbon-components-svelte/obrabotka-oshibok-carbon-components-svelte/">Обработка ошибок</a>
                        </li>
                                                <li>
                            <a href="/tutorials/carbon-components-svelte/upravlenie-asinkhronnymi-operatsiyami/">Управление асинхронными операциями</a>
                        </li>
                                                <li>
                            <a href="/tutorials/carbon-components-svelte/shablony-navigatsii/">Шаблоны навигации</a>
                        </li>
                                                <li>
                            <a href="/tutorials/carbon-components-svelte/organizatsiya-koda-carbon-components-svelte/">Организация кода</a>
                        </li>
                                        </ul>
                        </li>
                <li>
            Миграция и обновление                            <ul>
                                            <li>
                            <a href="/tutorials/carbon-components-svelte/migratsiya-s-drugikh-ui-freymvorkov/">Миграция с других UI-фреймворков</a>
                        </li>
                                                <li>
                            <a href="/tutorials/carbon-components-svelte/obnovlenie-versiy-biblioteki-carbon-components-svelte/">Обновление версий библиотеки</a>
                        </li>
                                                <li>
                            <a href="/tutorials/carbon-components-svelte/breaking-changes-i-sovmestimost-carbon-components-svelte/">Breaking changes и совместимость</a>
                        </li>
                                                <li>
                            <a href="/tutorials/carbon-components-svelte/postepennoe-vnedrenie-carbon/">Постепенное внедрение Carbon</a>
                        </li>
                                                <li>
                            <a href="/tutorials/carbon-components-svelte/refaktoring-sushchestvuyushchego-koda-carbon-components-svelte/">Рефакторинг существующего кода</a>
                        </li>
                                        </ul>
                        </li>
                <li>
            Расширение и кастомизация                            <ul>
                                            <li>
                            <a href="/tutorials/carbon-components-svelte/sozdanie-obyertok-nad-carbon-komponentami/">Создание обёрток над Carbon-компонентами</a>
                        </li>
                                                <li>
                            <a href="/tutorials/carbon-components-svelte/dobavlenie-novoy-funktsionalnosti/">Добавление новой функциональности</a>
                        </li>
                                                <li>
                            <a href="/tutorials/carbon-components-svelte/pereopredelenie-stiley-komponentov-carbon-components-svelte/">Переопределение стилей компонентов</a>
                        </li>
                                                <li>
                            <a href="/tutorials/carbon-components-svelte/sozdanie-sobstvennykh-komponentov-v-stile-carbon/">Создание собственных компонентов в стиле Carbon</a>
                        </li>
                                                <li>
                            <a href="/tutorials/carbon-components-svelte/best-practices-pri-rasshirenii/">Best practices при расширении</a>
                        </li>
                                        </ul>
                        </li>
        </ul>
    </aside>
</div><!--'end_frame_cache_WyJsYv'-->

    </div>
</div>
<footer class="bg-javascript pb-2 pt-2 text-center text-light text-lg-start">
    <div class="container">
        <div class="row d-flex align-items-center">
            <div class="col-md-7 col-lg-8 text-center text-md-start">
                <div class="font-weight-bold">
                    javascript42 — изучаем JavaScript вместе                </div>
            </div>
            <div class="col-md-5 col-lg-4 ml-lg-0 text-center text-md-end">
                <!--'start_frame_cache_DLdrDN'-->
<a class="btn btn-outline-light btn-floating m-1 feedback-button" role="button"><i class="bi bi-envelope-fill"></i></a>

<div class="feedback-modal" style="display: none">
    <div class="feedback-modal-content">
        <div class="close feedback-modal-close">
            <button type="button" class="btn-close" aria-label="Close"></button>
        </div>

        <h3 class="text-center mb-3">Обратная связь</h3>
        <form action="" method="post" class="feedback-form">
            <input type="hidden" name="sessid" id="sessid" value="edc78019a93ebba6ffcfff6e17b09ffd" />            <input type="hidden" name="action" value="send_feedback">
            <input type="text" class="form-control" id="feedback-lastname" name="UF_LASTNAME">
            <div class="mb-3">
                <label for="feedback-name" class="form-label">Ваше имя</label>
                <input type="text" class="form-control" id="feedback-name" name="UF_NAME" required>
            </div>
            <div class="mb-3">
                <label for="feedback-email" class="form-label">Ваш email</label>
                <input type="email" class="form-control" id="feedback-email" name="UF_EMAIL" required>
            </div>
            <div class="mb-3">
                <label for="feedback-message" class="form-label">Ваше сообщение</label>
                <textarea class="form-control" id="feedback-message" name="UF_MESSAGE" rows="4" required>