Textarea
v1.3.5
Create a textarea component
Usage
The basic usage.
<template>
<RayTextarea placeholder="Description" />
</template>
Sizes
<template>
<RayTextarea size="sm" placeholder="Description" />
</template>
Colors
<template>
<RayTextarea color="primary" placeholder="Description" />
</template>
Variants
<template>
<RayTextarea variant="outline" placeholder="Description" />
</template>
Placeholder
You can also set a placeholder.
<template>
<RayTextarea placeholder="Description here..." />
</template>
Padded
<template>
<RayTextarea :padded="false" placeholder="Description" variant="plain" />
</template>
Rows
Set the number of rows of the textarea.
<template>
<RayTextarea :rows="4" placeholder="Description" />
</template>
Resize
Enable the resize control.
<template>
<RayTextarea resize placeholder="Description" />
</template>
Auto Resize
The autosize prop enables the auto resizing of the textarea. The textarea will grow in height as the user types.
<template>
<RayTextarea autosize placeholder="Description" />
</template>
The maxrows prop can be used to set the maximum number of rows the textarea can grow to.
<template>
<RayTextarea autosize :maxrows="8" placeholder="Description" />
</template>
Disabled
<template>
<RayTextarea disabled placeholder="Description" />
</template>
Model Modifiers
.trim
The .trim modifier trims the input value.
page
<script lang="ts" setup>
const modal = ref<string>("");
</script>
<template>
<RayTextarea v-model.trim="modal" />
</template>
.number
The .number modifier converts the input value to a number. Non-numeric values are ignored.
page
<script lang="ts" setup>
const modal = ref<number>(0);
</script>
<template>
<RayTextarea v-model.number="modal" />
</template>
.lazy
The .lazy modifier syncs the input value with the model only on change event.
page
<script lang="ts" setup>
const modal = ref<string>("");
</script>
<template>
<RayTextarea v-model.lazy="modal" />
</template>
API
Props
| Prop | Default | Type |
|---|---|---|
| size | config.default.size | TextareaSize | undefined |
| color | config.default.color | string | undefined |
| variant | config.default.variant | TextareaVariant | undefined |
| disabled | false | boolean | undefined |
| padded | true | boolean | undefined |
| ui | {} | ({ wrapper?: string | undefined; base?: string | undefined; placeholder?: string | undefined; rounded?: string | undefined; size?: DeepPartial<{ '2xs': "text-xs"; xs: "text-xs"; sm: "text-sm"; md: "text-sm"; lg: "text-sm"; xl: "text-base"; }, any> | undefined; padding?: DeepPartial<...> | undefined; variant?: DeepPa... |
| placeholder | null | string | undefined |
| modelValue | "" | string | number | null | undefined |
| autofocus | false | boolean | undefined |
| autofocusDelay | 100 | number | undefined |
| modelModifiers | {} | TextareaModelModifiers | undefined |
| rows | 3 | number | undefined |
| autosize | false | boolean | undefined |
| maxrows | 0 | number | undefined |
| resize | false | boolean | undefined |
Theme
{
wrapper: 'relative',
base: 'relative w-full block focus:outline-none disabled:cursor-not-allowed disabled:opacity-70 transition',
placeholder: 'placeholder:text-gray-400 dark:placeholder:text-gray-500',
rounded: 'rounded-md',
size: {
'2xs': 'text-xs',
xs: 'text-xs',
sm: 'text-sm',
md: 'text-sm',
lg: 'text-sm',
xl: 'text-base'
},
padding: {
'2xs': 'px-2 py-1',
xs: 'px-2.5 py-1.5',
sm: 'px-2.5 py-1.5',
md: 'px-3 py-2',
lg: 'px-3.5 py-2.5',
xl: 'px-3.5 py-2.5'
},
variant: {
outline: 'shadow-sm bg-transparent text-gray-900 dark:text-white ring ring-1 ring-inset ring-gray-300 dark:ring-gray-700 focus:ring-2 focus:ring-{color}-500 dark:focus:ring-{color}-400',
plain: 'bg-transparent'
},
default: {
size: 'sm',
color: 'primary',
variant: 'outline'
}
}