Textarea
Display a textarea field.
Usage
Use a v-model to make the Textarea reactive.
vue
<script setup>
import {ref} from 'vue'
const value = ref('')
</script>
<template>
<s-textarea v-model="value"/>
</template>Style
Use the color and variant props to change the visual style of the Textarea.
vue
<script setup>
import {ref} from 'vue'
const value = ref('')
</script>
<template>
<s-textarea v-model="value" color="primary" variant="outline" />
</template>Besides all the colors from the ui.colors object, you can also use the white (default) and gray colors with their pre-defined variants.
Size
Use the size prop to change the size of the Textarea.
vue
<script setup>
import {ref} from 'vue'
const value = ref('')
</script>
<template>
<s-textarea size="sm" />
</template>Placeholder
Use the placeholder prop to set a placeholder text.
vue
<template>
<s-textarea placeholder="Search..." />
</template>Rows
Use the rows prop to set the number of rows of the Textarea.
vue
<template>
<s-textarea rows="1"/>
</template>Disabled
Use the disabled prop to disable the Textarea.
vue
<template>
<s-textarea disabled="true"/>
</template>Autoresize
Use the autoresize prop to enable the autoresize. Writing more lines than the rows prop will make the Textarea grow up.
vue
<template>
<s-textarea autoresize="true" />
</template>