SInputTextarea

<SInputTextarea> is a input component for textarea.

@globalbrain/sefirot/lib/components/SInputTextarea.vue

Usage

Import <SInputTextarea> component and pass in the value prop.

<script setup lang="ts">
import { ref } from 'vue'
import SInputTextarea from '@globalbrain/sefirot/lib/components/SInputTextarea.vue'

const input = ref<string | null>(null)
</script>

<template>
  <SInputTextarea placeholder="Placeholder text" v-model="input" />
</template>

Props

Here are the list of props you may pass to the component.

:size

Defines the size of the input. The default is small.

interface Props {
  size?: 'mini' | 'small' | 'medium'
}

<SInputTextarea size="small" v-model="..." />

:name

Defines the name attribute of the underlining <input> element.

interface Props {
  name?: string
}

<SInputTextarea name="message" v-model="..." />

:label

Defines the label text of the input.

interface Props {
  label?: string
}

<SInputTextarea label="Message" v-model="..." />

:info

Shows help icon after the label and shows info in a tooltip when the user hovers the label.

interface Props {
  info?: string
}

<SInputTextarea
  label="Message"
  info="Some helpful information."
  v-model="..."
/>

:note

Adds small help text after the label. Best used along with label prop.

interface Props {
  note?: string
}

<SInputTextarea label="Message" note="Optional" v-model="..." />

:placeholder

Defines the placeholder text to show when the value is empty.

interface Props {
  placeholder?: string
}

<SInputTextarea placeholder="Placeholder text" v-model="..." />

:check-icon

Icon to display at corner right of label. Useful to show the status of a particular input.

import { IconifyIcon } from '@iconify/vue/dist/offline'
import { DefineComponent } from 'vue'

interface Props {
  checkIcon?: IconifyIcon | DefineComponent
}

<SInputTextarea :check-icon="IconCheckCircle" v-model="..." />

:check-text

Text to display alongside check-icon.

interface Props {
  checkText?: string
}

<SInputTextarea :check-text="Saved" v-model="..." />

:check-color

Defines the color of check-icon and check-text. The default is neutral.

interface Props {
  checkColor?: Color
}

type Color =
  | 'neutral'
  | 'mute'
  | 'info'
  | 'success'
  | 'warning'
  | 'danger'

<SInputTextarea
  :check-icon="IconCheckCircle"
  check-text="Uploaded"
  check-color="success"
  v-model="..."
/>

:rows

Defines the height of the input. The default is 3.

If you pass 'fill', the input will fill the available space defined by the parent container. Setting this to 'fill' needs display: flex on the parent container.

interface Props {
  rows?: number | 'fill'
}

<SInputTextarea :rows="8" v-model="..." />

:auto-resize

Automatically resize the height of the input based on the content. The default is false.

When this prop is set, the :rows will be treated as min-height. For example, :rows="5" will set the minimum height of the input to 5 rows, and auto resize from there based on the content.

If you pass a number, it will be the maximum number of rows before it starts to scroll. If you pass true, no maximum height will be set. This feature uses field-sizing CSS property.

interface Props {
  autoResize?: boolean | number
}

<SInputTextarea :auto-resize="10" v-model="..." />

:disabled

Mark input as disabled. When this prop is set, users may not be able to focus the element not trigger any events.

interface Props {
  disabled?: boolean
}

<SInputTextarea disabled v-model="..." />

:value

Sets the input value. When model-value prop is set (e.g. via v-model directive), this prop gets ignored.

interface Props {
  value?: string | null
}

<SInputTextarea :value="Lorem ipsum..." />

:model-value

The v-model binding for the input.

interface Props {
  modelValue?: string | null
}

<SInputTextarea v-model="Lorem ipsum..." />

:validation

The validation object for the input. It accepts Vuelidate like validation object and displays error if there're any.

import { Ref } from 'vue'

interface Props {
  validation?: Validatable
}

export interface Validatable {
  readonly $dirty: boolean
  readonly $invalid: boolean
  readonly $errors: ValidatableError[]
  readonly $touch: () => void
}

export interface ValidatableError {
  readonly $message: string | Ref<string>
}

<SInputTextarea v-model="..." :validation="validation" />

:hide-error

Stop showing validation error message even when there are errors. This prop will not prevent the error color from appearing.

interface Props {
  hideError?: boolean
}

<SInputTextarea
  v-model="..."
  :validation="validation"
  hide-error
/>

Slots

Here are the list of slots you may define within the component.

#info

Same as info prop. When info prop and this slot are defined at the same time, this slot will take precedence.

<SInputTextarea label="Message" v-model="...">
  <template #info>
    Learn more about this field <SLink href="...">here</SLink>.
  </template>
</SInputTextarea>

Events

Here are the list of events the component may emit.

@update:model-value

Emits when the user inputs value, and when the focus is out. This event is always emitted together with input and blur event.

interface Emits {
  (e: 'update:model-value', value: string | null): void
}

@input

Emits when the user inputs any value. This event is always emitted together with update:model-value event.

interface Emits {
  (e: 'input', value: string | null): void
}

@blur

Emits when the input lose its focus. This event is always emitted together with update:model-value event.

interface Emits {
  (e: 'blur', value: string | null): void
}

Styles

You may customize the styles by overriding --input prefixed CSS variables.

Global input styles

You may customize the various styles of the component via global input related CSS variables. Please refer to Styles: Input Styles page.