/
githubmirror
/
tabler
Обзор
Документация
Войти
/
githubmirror
/
tabler
Код
Запросы
0
Пакеты
0
Релизы
0
Аналитика
Безопасность
dev
shared/ui/FormGroup.astro
38 строк
1 KB
Paweł Kuna
Improve accessibility across layouts, components, and forms (#2799)
06 авг 2026, 00:40
Не верифицирован
06 авг 2026, 00:40
1effe22
Код
Авторство
О чём код?
--- // Form group: label (.form-label) + control slot + optional hint (.form-hint). import FormHint from './FormHint.astro' interface Props { label?: string /** .required asterisk on the label */ required?: boolean /** .form-label-description at the inline end of the label */ description?: string /** .form-hint under the control */ hint?: string /** for attribute of the label — must match the slotted control's id */ for?: string /** extra classes on the label (e.g. visually-hidden) */ labelClass?: string /** wrapper classes; replaces the default mb-3 */ class?: string } const { label, required, description, hint, for: htmlFor, labelClass, class: className = 'mb-3' } = Astro.props const hintId = hint && htmlFor ? `${htmlFor}-hint` : undefined --- <div class:list={[className]}> { label && ( <label class:list={['form-label', required && 'required', labelClass]} for={htmlFor}> {label} {required && <span class="visually-hidden"> (required)</span>} {description && <span class="form-label-description">{description}</span>} </label> ) } <slot /> {hint && <FormHint id={hintId}>{hint}</FormHint>} </div>