Phi / InputArea

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

<template>
  <InputArea
    label="Description"
    placeholder="Enter a description..."
    description="Provide details about your project"
  />
</template>

Installation

Barrel

import { InputArea } from "@dicehub/phi";

Granular

import { InputArea } from "@dicehub/phi/components/input";

Textarea is also exported as an alias for InputArea for discoverability.

import { Textarea } from "@dicehub/phi/components/input";

Usage

With Built-in Field (Recommended)

Use the label prop to enable the built-in Field wrapper with label, description, and error support.

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

<template>
  <InputArea
    label="Description"
    placeholder="Enter a description..."
    description="Provide details about your project"
  />
</template>

Bare InputArea (Custom Layouts)

For custom form layouts, use InputArea without label. Must providearia-label or aria-labelledby for accessibility.

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

<template>
  <InputArea placeholder="Add notes..." aria-label="Notes" rows="3" />
</template>

Examples

With Label

Use the built-in field wrapper for a label and helper text.

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

<template>
  <InputArea
    label="Bio"
    placeholder="Tell us about yourself"
    description="Max 500 characters"
  />
</template>

Custom Row Count

Use the rows prop to control the initial height.

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

<template>
  <div class="stack">
    <InputArea label="2 rows" placeholder="Small area" rows="2" />
    <InputArea label="4 rows (default)" placeholder="Medium area" rows="4" />
    <InputArea label="8 rows" placeholder="Large area" rows="8" />
  </div>
</template>

Auto Resize

Use autoResize to grow with typed or pasted content. minRows sets the floor and maxRows enables scrolling after the cap.

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

const initialValue = "Review the configuration changes.\n\nAdd follow-up notes here.\n\n";
</script>

<template>
  <InputArea
    auto-resize
    label="Configuration value"
    :min-rows="2"
    :max-rows="8"
    :default-value="initialValue"
    description="Grows with content up to 8 rows, then scrolls."
  />
</template>

Controlled Auto Resize

Controlled values remeasure after v-model or external state updates. Disabling autoResize restores native manual resizing.

<script setup>
import { ref } from "vue";
import { Button } from "@dicehub/phi/components/button";
import { InputArea } from "@dicehub/phi/components/input";

const autoResize = ref(true);
const notes = ref("Review the current configuration.");

const setLongValue = () => {
  notes.value = [
    "Review the current configuration.",
    "Confirm the deployment region.",
    "Check the rollback policy.",
  ].join("\n");
};
</script>

<template>
  <InputArea
    v-model="notes"
    :auto-resize="autoResize"
    label="Controlled notes"
    :min-rows="2"
    :max-rows="6"
  />
  <Button @click="setLongValue">Set long value</Button>
  <Button variant="secondary" @click="autoResize = !autoResize">
    Toggle auto resize
  </Button>
</template>

Error State (String)

Error styling is automatically applied when the error prop is truthy.

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

<template>
  <InputArea
    label="Message"
    placeholder="Enter your message"
    default-value="Hi"
    error="Message must be at least 10 characters"
  />
</template>

Error State (Object)

Use an error object with match for constraint validation.

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

<template>
  <InputArea
    label="Feedback"
    default-value="Bad"
    :error="{ message: 'Feedback must be at least 20 characters', match: 'tooShort' }"
    :minlength="20"
  />
</template>

Sizes

Four sizes available: xs, sm, base (default), lg.

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

<template>
  <div class="stack">
    <InputArea size="xs" label="Extra Small" placeholder="Extra small textarea" />
    <InputArea size="sm" label="Small" placeholder="Small textarea" />
    <InputArea label="Base" placeholder="Base textarea (default)" />
    <InputArea size="lg" label="Large" placeholder="Large textarea" />
  </div>
</template>

Disabled

Disabled textareas keep the same layout and mute the editable state.

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

<template>
  <InputArea label="Disabled field" placeholder="Cannot edit" disabled />
</template>

Bare InputArea

InputArea without label renders as a bare textarea. Must provide aria-label for accessibility.

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

<template>
  <InputArea placeholder="Add notes..." aria-label="Notes" rows="3" />
</template>

Optional Field

Set required to false to show "(optional)" text after the label.

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

<template>
  <InputArea
    label="Additional Notes"
    :required="false"
    placeholder="Any additional information..."
  />
</template>

Use labelTooltip to add an info icon with additional context on hover.

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

<template>
  <InputArea
    label="Worker Script"
    label-tooltip="Enter your worker script code here"
    placeholder="export default { async fetch(request) { ... } }"
    rows="4"
  />
</template>

Rich Label

Use the label slot when the label needs inline markup.

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

<template>
  <InputArea required placeholder="Add notes for the reviewer..." rows="3">
    <template #label>
      <span>Notes for <strong>review</strong></span>
    </template>
  </InputArea>
</template>

API Reference

InputArea accepts all standard HTML textarea attributes plus the following:

Props

Prop	Type	Default	Description
`modelValue`	`string`	`-`	Controlled value used by v-model.
`defaultValue`	`string`	`-`	Initial value for uncontrolled textareas.
`autoResize`	`boolean`	`false`	Grows and shrinks the textarea with its content and available width.
`minRows`	`number`	`1`	Minimum visible rows while autoResize is enabled.
`maxRows`	`number`	`-`	Maximum visible rows before vertical scrolling is enabled.
`label`	`string`	`-`	Visible field label. Enables the field wrapper.
`description`	`string`	`-`	Helper text shown below the textarea when there is no error.
`error`	`string \| { message: string; match?: InputErrorMatch }`	`-`	Validation error message. Also applies error styling.
`invalid`	`boolean`	`false`	Marks the textarea invalid without requiring an error message.
`size`	`"xs" \| "sm" \| "base" \| "lg"`	`"base"`	Controls padding, radius, and text size.
`variant`	`"default" \| "error"`	`"default"`	Visual variant. Prefer the error prop for validation.
`placeholder`	`string`	`-`	Native placeholder text.
`required`	`boolean`	`-`	Native required state. Set false to show "(optional)".
`disabled`	`boolean`	`false`	Disables the textarea.
`readOnly`	`boolean`	`false`	Applies the native readonly attribute.
`$attrs`	`TextareaHTMLAttributes`	`-`	Native textarea attributes such as aria-label, rows, minLength, and maxLength.

Slots

Slot	Description
`label`	Overrides the label prop with custom label markup.
`description`	Overrides the description prop with custom helper markup.
`error`	Overrides the error message with custom error markup.

Events

Event	Type	Description
`update:modelValue`	`(value: string) => void`	Emitted on native input for v-model.
`valueChange`	`(value: string) => void`	String-only convenience change event.

Validation Error Types

Structured errors accept a browser validity match key.

Match
`boolean`
`badInput`
`customError`
`patternMismatch`
`rangeOverflow`
`rangeUnderflow`
`stepMismatch`
`tooLong`
`tooShort`
`typeMismatch`
`valid`
`valueMissing`

Accessibility

Label Requirement

Prefer the label prop or label slot. If the visible label lives outside InputArea, provide aria-label or aria-labelledby.

Error Association

When error is present, InputArea sets aria-invalid and associates the message through aria-describedby.