Textarea
Textareas are the form controls used for inputting multiple lines. Inkline provides you with simple solutions for all the scenarios you will encounter when creating textarea forms.
<script>
export default {
data() {
return {
value: ''
};
}
};
</script>
<template>
<ITextarea v-model="value" placeholder="Type something.." />
</template>
Setting the disabled property will disable all interactions with the textarea component.
<script>
export default {
data() {
return {
value: ''
};
}
};
</script>
<template>
<ITextarea v-model="value" disabled placeholder="Type something.." />
</template>
Setting the readonly property will disable all interactions with the textarea component, except being able to focus the textarea.
<script>
export default {
data() {
return {
value: 'This input is readonly.'
};
}
};
</script>
<template>
<ITextarea v-model="value" readonly placeholder="Type something.." />
</template>
If you need to be able to quickly clear the value of an textarea, you can add the clearable property to the textarea component.
<script>
export default {
data() {
return {
value: 'This input is clearable.'
};
}
};
</script>
<template>
<ITextarea v-model="value" clearable placeholder="Type something.." />
</template>
Inkline allows you to easily add a prefix or suffix to your textareas. Using prefixes and suffixes you can, for example, indicate the textarea type using an icon or text.
<script>
export default {
data() {
return {
value: ''
};
}
};
</script>
<template>
<ITextarea v-model="value" placeholder="Type something..">
<template #prefix>@</template>
</ITextarea>
<ITextarea v-model="value" placeholder="Type something..">
<template #suffix>@</template>
</ITextarea>
<ITextarea v-model="value" placeholder="Type something..">
<template #prefix>@</template>
<template #suffix>@</template>
</ITextarea>
</template>
You can add additional content such as select fields, buttons or plain text, to either side of the textarea by using the prepend and append slots.
<script>
export default {
data() {
return {
value: ''
};
}
};
</script>
<template>
<ITextarea v-model="value" placeholder="Type something..">
<template #prepend>
<span>https://</span>
</template>
</ITextarea>
<ITextarea v-model="value" placeholder="Type something..">
<template #append>
<span>.com</span>
</template>
</ITextarea>
<ITextarea v-model="value" placeholder="Type something..">
<template #prepend>
<span>https://</span>
</template>
<template #append>
<span>.com</span>
</template>
</ITextarea>
</template>
<script>
export default {
data() {
return {
value: ''
};
}
};
</script>
<template>
<ITextarea v-model="value" placeholder="Type something..">
<template #prepend>
<IButton>Button</IButton>
</template>
</ITextarea>
<ITextarea v-model="value" placeholder="Type something..">
<template #append>
<IButton>Button</IButton>
</template>
</ITextarea>
<ITextarea v-model="value" placeholder="Type something..">
<template #prepend>
<IButton>Button</IButton>
</template>
<template #append>
<IButton>Button</IButton>
</template>
</ITextarea>
</template>
<script>
export default {
data() {
return {
value: ''
};
}
};
</script>
<template>
<ITextarea v-model="value" placeholder="Type something..">
<template #prepend>
<IDropdown>
<IButton>Dropdown</IButton>
<template #body>
<IDropdownItem>Action</IDropdownItem>
<IDropdownItem>Another action</IDropdownItem>
<IDropdownItem disabled>Disabled action</IDropdownItem>
<IDropdownDivider />
<IDropdownItem>Separated item</IDropdownItem>
</template>
</IDropdown>
</template>
</ITextarea>
<ITextarea v-model="value" placeholder="Type something..">
<template #append>
<IDropdown>
<IButton>Dropdown</IButton>
<template #body>
<IDropdownItem>Action</IDropdownItem>
<IDropdownItem>Another action</IDropdownItem>
<IDropdownItem disabled>Disabled action</IDropdownItem>
<IDropdownDivider />
<IDropdownItem>Separated item</IDropdownItem>
</template>
</IDropdown>
</template>
</ITextarea>
<ITextarea v-model="value" placeholder="Type something..">
<template #prepend>
<IDropdown>
<IButton>Dropdown</IButton>
<template #body>
<IDropdownItem>Action</IDropdownItem>
<IDropdownItem>Another action</IDropdownItem>
<IDropdownItem disabled>Disabled action</IDropdownItem>
<IDropdownDivider />
<IDropdownItem>Separated item</IDropdownItem>
</template>
</IDropdown>
</template>
<template #append>
<IDropdown>
<IButton>Dropdown</IButton>
<template #body>
<IDropdownItem>Action</IDropdownItem>
<IDropdownItem>Another action</IDropdownItem>
<IDropdownItem disabled>Disabled action</IDropdownItem>
<IDropdownDivider />
<IDropdownItem>Separated item</IDropdownItem>
</template>
</IDropdown>
</template>
</ITextarea>
</template>
You can use the color property to set a light or dark color for your textareas.
<script>
export default {
data() {
return {
value: ''
};
}
};
</script>
<template>
<ITextarea v-model="value" color="light" placeholder="Type something.." />
<ITextarea v-model="value" color="dark" placeholder="Type something.." />
</template>
You're able to use the size modifier to control the size of your textareas, using one of the available sizes: sm, md, and lg. The default size is set to md.
<script>
export default {
data() {
return {
value: ''
};
}
};
</script>
<template>
<ITextarea v-model="value" size="sm" placeholder="Type something.." />
<ITextarea v-model="value" size="md" placeholder="Type something.." />
<ITextarea v-model="value" size="lg" placeholder="Type something.." />
</template>