pages._explore-components-interaction-textarea.title

pages._explore.sections.basic-usage.title

html

<TextArea
    v-model="rfTextAreaValue"
    placeholder="Enter your message"
/>

typescript

<script setup lang="ts">

// state
const rfTextAreaValue = ref('')
</script>

pages._explore.sections.complex-usage.title

html

<TextArea
    name="description"
    v-model="rfDescriptionValue"
    placeholder="Enter a detailed description"
    :rows="6"
    :field-state="FormFieldState.SUCCESS"
    :update-trigger="TextareaUpdateTriggerTypes.BLUR"
/>

typescript

<script setup lang="ts">
import { FormFieldState } from '#core-types/components/interaction/form'
import { TextareaUpdateTriggerTypes } from '#core-types/components/interaction/textarea'

// state
const rfDescriptionValue = ref('Sample description text')
</script>

Field States

Default state

Warning state

Error state

Success state

Disabled state

html

<!-- Default state -->
<TextArea 
    v-model="rfDefaultValue" 
    placeholder="Default textarea" 
/>

<!-- Warning state -->
<TextArea 
    v-model="rfWarningValue" 
    placeholder="Warning textarea"
    :field-state="FormFieldState.WARNING"
/>

<!-- Error state -->
<TextArea 
    v-model="rfErrorValue" 
    placeholder="Error textarea"
    :field-state="FormFieldState.ERROR"
/>

<!-- Success state -->
<TextArea 
    v-model="rfSuccessValue" 
    placeholder="Success textarea"
    :field-state="FormFieldState.SUCCESS"
/>

<!-- Disabled state -->
<TextArea 
    v-model="rfDisabledValue" 
    placeholder="Disabled textarea"
    :field-state="FormFieldState.DISABLED"
/>

typescript

<script setup lang="ts">
import { FormFieldState } from '#core-types/components/interaction/form'

// state
const rfDefaultValue = ref('')
const rfWarningValue = ref('Warning text content')
const rfErrorValue = ref('Error text content')
const rfSuccessValue = ref('Success text content')
const rfDisabledValue = ref('Disabled text content')
</script>

Row Sizes

Small (2 rows)

Default (4 rows)

Large (8 rows)

html

<!-- Small textarea (2 rows) -->
<TextArea 
    v-model="rfSmallValue" 
    placeholder="Small textarea"
    :rows="2"
/>

<!-- Default textarea (4 rows) -->
<TextArea 
    v-model="rfDefaultRowsValue" 
    placeholder="Default textarea"
    :rows="4"
/>

<!-- Large textarea (8 rows) -->
<TextArea 
    v-model="rfLargeValue" 
    placeholder="Large textarea"
    :rows="8"
/>

typescript

<script setup lang="ts">

// state
const rfSmallValue = ref('')
const rfDefaultRowsValue = ref('')
const rfLargeValue = ref('')
</script>

pages._explore.sections.props.title

Prop	Default	Type
name	undefined	string
placeholder	undefined	string
fieldState	undefined	FormFieldState
rows	4	number
updateTrigger	TextareaUpdateTriggerTypes.INPUT	TextareaUpdateTriggerTypes
modelValue	undefined	string \| undefined

pages._explore.sections.types.title

Name	Type	Options
FormFieldState	enum	DISABLED \| WARNING \| ERROR \| SUCCESS
TextareaUpdateTriggerTypes	enum	INPUT \| BLUR

pages._explore.sections.emits.title

Event	Type
update:modelValue	string \| undefined