Примитивы

Textarea

Близнец поля, только без фиксированной высоты. resize только вертикальный: textarea, которую можно растянуть вширь, вылезает из того, что её разложило. autoGrow заставляет её вместо этого расти вместе с содержимым, и это чистый CSS: вся реализация — field-sizing: content, никакого обработчика нажатий с замером scrollHeight, и работает даже в разметке, которая никогда не гидрировалась. Где свойство не поддерживается, поле остаётся фиксированной коробкой со скроллом.

чистая разметка — библиотеки на странице нет

отрендерил aura-react

отрендерил aura-vue

отрендерил aura-svelte

собрано из классов самого aura-angular

Notes

Notes, growing

Notes

Notes, growing

Notes

Notes, growing

Notes

Notes, growing

Notes

Notes, growing

Код

index.html

<div class="aura-stack" style="--aura-dir:column;--aura-gap:var(--space-4);min-width:320px;">
  <div class="aura-field-group">
    <label class="aura-label" for="notes">Notes</label>
    <textarea id="notes" class="aura-textarea" rows="4" placeholder="Anything worth remembering"></textarea>
  </div>
  <div class="aura-field-group">
    <label class="aura-label" for="notes-grow">Notes, growing</label>
    <textarea id="notes-grow" class="aura-textarea aura-textarea--autogrow" rows="2" placeholder="Type a few lines"></textarea>
  </div>
</div>

Demo.tsx

import { Stack, Textarea } from '@ilomee/aura-react';

export default function Demo() {
  // `autoGrow` — это CSS, а не обработчик нажатий, поэтому он работает и в панелях, которые
  // отрисованы на сборке и никогда не гидрировались. Наберите несколько строк в любом из полей.
  return (
    <Stack gap={4} style={{ minWidth: 320 }}>
      <Textarea label="Notes" rows={4} placeholder="Anything worth remembering" />
      <Textarea label="Notes, growing" rows={2} autoGrow placeholder="Type a few lines" />
    </Stack>
  );
}

Demo.vue

<script setup lang="ts">
import { ref } from 'vue';
import { Textarea } from '@ilomee/aura-vue';

const notes = ref('');
</script>

<template>
  <Textarea v-model="notes" label="Notes" :rows="2" auto-grow />
</template>

Demo.svelte

<script lang="ts">
  import { Textarea } from '@ilomee/aura-svelte';

  let notes = $state('');
</script>

<Textarea bind:value={notes} label="Notes" rows={2} autoGrow />

Используется как aura-textarea.

demo.component.ts

import { AuraTextarea } from '@ilomee/aura-angular';

@Component({
  standalone: true,
  imports: [AuraTextarea],
  template: `<aura-textarea label="Notes" rows="2" autoGrow [(value)]="notes" />`,
})
export class DemoComponent {
  notes = '';
}

Пропсы

У чистой разметки нет пропсов — классы ниже и есть весь API. Четыре пакета не делают ничего сверх того, что проставляют вам те же самые классы.

Имя	Тип	По умолчанию	Примечания
label	`string`	—
hint	`string`	—	Постоянная подсказка под контролом, показывается всегда.
error	`string`	—	Что не так прямо сейчас. Ставит контролу `aria-invalid` и добавляет сообщение в его `aria-describedby` — после подсказки. Без живого региона: `role="alert"` объявляет себя при монтировании, поэтому форма с тремя ошибками, отрисованная на сервере, перебила бы читателя трижды ещё до первого поля.
value	`string`	—
defaultValue	`string`	—
onValueChange	`(value: string) => void`	—
id	`string`	—	Сгенерированный id берётся у самого фреймворка, поэтому он совпадает при SSR и гидратации.
autoGrow	`boolean`	`false`	Растёт вместе с содержимым вместо прокрутки — `field-sizing: content`, без обработчика нажатий. Где браузер его не поддерживает, поле остаётся фиксированным со скроллом.
inputClassName	`string`	—

Имя	Тип	По умолчанию	Примечания
label	`string`	—
hint	`string`	—	Постоянная подсказка под контролом, показывается всегда.
error	`string`	—	Что не так прямо сейчас. Ставит контролу `aria-invalid` и добавляет сообщение в его `aria-describedby` — после подсказки. Без живого региона: `role="alert"` объявляет себя при монтировании, поэтому форма с тремя ошибками, отрисованная на сервере, перебила бы читателя трижды ещё до первого поля.
modelValueдвусторонний	`string`	—
defaultValue	`string`	—
id	`string`	—	Сгенерированный id берётся у самого фреймворка, поэтому он совпадает при SSR и гидратации.
autoGrow	`boolean`	`false`
update:modelValueсобытие	`(value: string) => void`	—

Имя	Тип	По умолчанию	Примечания
label	`string`	—
hint	`string`	—	Постоянная подсказка под контролом, показывается всегда.
error	`string`	—	Что не так прямо сейчас. Ставит контролу `aria-invalid` и добавляет сообщение в его `aria-describedby` — после подсказки. Без живого региона: `role="alert"` объявляет себя при монтировании, поэтому форма с тремя ошибками, отрисованная на сервере, перебила бы читателя трижды ещё до первого поля.
valueдвусторонний	`string`	`''`
id	`string`	—	Сгенерированный id берётся у самого фреймворка, поэтому он совпадает при SSR и гидратации.
autoGrow	`boolean`	`false`

Имя	Тип	По умолчанию	Примечания
label	`string`	—
hint	`string`	—	Постоянная подсказка под контролом, показывается всегда.
error	`string`	—	Что не так прямо сейчас. Ставит контролу `aria-invalid` и добавляет сообщение в его `aria-describedby` — после подсказки. Без живого региона: `role="alert"` объявляет себя при монтировании, поэтому форма с тремя ошибками, отрисованная на сервере, перебила бы читателя трижды ещё до первого поля.
value	`string`	`''`
id	`string`	—
autoGrow	`boolean`	`false`
valueChangeсобытие	`EventEmitter<string>`	—

Какие классы отдаёт

Все фреймворки отдают одни и те же классы — именно поэтому четыре библиотеки выглядят одинаково. Их можно использовать напрямую, вообще без библиотеки компонентов.

Класс	Роль	Примечания
.aura-field-group	база	Обязательный. Без него модификатор не работает.
.aura-label	база	Обязательный. Без него модификатор не работает.
.aura-textarea	база	Обязательный. Без него модификатор не работает.
.aura-textarea--autogrow	модификатор

Токены и правила

components.css

мин. высота: var(--textarea-min-h)
автовысота: field-sizing: content
отступы: var(--control-py) var(--control-px)
рамка: var(--field-border) · var(--field-radius)
фокус: var(--accent) · var(--focus-ring)