Input Area

<script setup>
import { ref } from "vue";
import { Field } from "@dicehub/kappa/components/field";
import { InputArea } from "@dicehub/kappa/components/input-area";

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

<template>
  <Field id="simulation-notes" required>
    <Field.Label>
      Simulation notes
      <Field.RequiredIndicator />
    </Field.Label>
    <InputArea v-model="notes" rows="3" />
    <Field.HelperText>Record assumptions that affect the result.</Field.HelperText>
  </Field>
</template>

<script setup>
import { InputArea } from "@dicehub/kappa/components/input-area";
</script>

<template>
  <InputArea size="xs" aria-label="Extra-small notes" value="Compact note" />
  <InputArea size="sm" aria-label="Small notes" value="Small note" />
  <InputArea size="base" aria-label="Base notes" value="Base note" />
  <InputArea size="lg" aria-label="Large notes" value="Large note" />
</template>

<script setup>
import { ref } from "vue";
import { InputArea } from "@dicehub/kappa/components/input-area";
import { Label } from "@dicehub/kappa/components/label";

const notes = ref("Review the boundary conditions.");
</script>

<template>
  <Label for="controlled-notes">Review notes</Label>
  <InputArea id="controlled-notes" v-model="notes" rows="3" />
  <output for="controlled-notes">{{ notes.length }} characters</output>
</template>

<script setup>
import { ref } from "vue";
import { InputArea } from "@dicehub/kappa/components/input-area";
import { Label } from "@dicehub/kappa/components/label";

const log = ref("Initial residual: 2.1e-05");
</script>

<template>
  <Label for="solver-log">Solver log</Label>
  <InputArea id="solver-log" v-model="log" autoresize rows="2" />
</template>

<script setup>
import { InputArea } from "@dicehub/kappa/components/input-area";
import { Label } from "@dicehub/kappa/components/label";
</script>

<template>
  <Label for="disabled-notes" data-disabled>Disabled</Label>
  <InputArea id="disabled-notes" disabled value="Editing is unavailable." />

  <Label for="readonly-notes">Read only</Label>
  <InputArea id="readonly-notes" readonly value="Approved for release." />

  <Label for="invalid-notes">Invalid</Label>
  <InputArea
    id="invalid-notes"
    invalid
    aria-describedby="invalid-notes-error"
    value="Too short"
  />
  <p id="invalid-notes-error">Add at least 20 characters.</p>
</template>

<script setup>
import { computed, ref } from "vue";
import { InputArea } from "@dicehub/kappa/components/input-area";
import { Label } from "@dicehub/kappa/components/label";

const summary = ref("");
const remaining = computed(() => 180 - summary.value.length);
</script>

<template>
  <Label for="release-summary">Release summary</Label>
  <InputArea id="release-summary" v-model="summary" maxlength="180" rows="3" />
  <output for="release-summary" aria-live="polite">{{ remaining }} remaining</output>
</template>

<script setup>
import { ref } from "vue";
import { Button } from "@dicehub/kappa/components/button";
import { InputArea } from "@dicehub/kappa/components/input-area";
import { Label } from "@dicehub/kappa/components/label";

const feedback = ref("");
const send = () => {};
</script>

<template>
  <form @submit.prevent="send">
    <Label for="feedback">Feedback</Label>
    <InputArea id="feedback" v-model="feedback" required rows="3" />
    <Button type="submit">Send feedback</Button>
  </form>
</template>

<script setup>
import { InputArea } from "@dicehub/kappa/components/input-area";
import { Label } from "@dicehub/kappa/components/label";
</script>

<template>
  <div dir="rtl" lang="ar">
    <Label for="arabic-notes">ملاحظات</Label>
    <InputArea
      id="arabic-notes"
      aria-describedby="arabic-notes-help"
      placeholder="اكتب ملاحظاتك..."
      rows="3"
    />
    <p id="arabic-notes-help">أضف التفاصيل المهمة للمراجعة.</p>
  </div>
</template>